/* Hella Charmed: fog-gray paper, ink type, International Orange for the things you press. */
@font-face{font-family:"Archivo";src:url("fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("fonts/plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
:root{
  --fog:#e6e4de; --paper:#f3f1eb; --ink:#16181a; --muted:#5a5e62; --line:#c8c4ba;
  --orange:#c0362c; --orange-dk:#9e2a21;
  --sans:"Archivo",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fog);color:var(--ink);font:400 17px/1.5 var(--sans);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
.mono{font-family:var(--mono);font-size:.86em;letter-spacing:.01em}
h1,h2{font-weight:800;font-variation-settings:"wdth" 112;line-height:.95;letter-spacing:-.02em;margin:0}

/* header */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--gut);background:var(--fog);border-bottom:1px solid var(--ink)}
.mark{font-weight:850;font-variation-settings:"wdth" 125;text-transform:uppercase;letter-spacing:.02em;text-decoration:none;font-size:1.15rem;white-space:nowrap}
.mark.small{font-size:.95rem}
.nav{display:flex;align-items:center;gap:clamp(14px,3vw,32px);font-size:.95rem}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:4px}
.bag-btn{background:none;border:1px solid var(--ink);padding:6px 12px;cursor:pointer}
.bag-btn:hover{background:var(--ink);color:var(--fog)}
@media(max-width:560px){.nav a{display:none}}

/* buttons */
.btn{display:inline-block;background:var(--orange);color:#fff;border:0;padding:14px 26px;font-weight:700;font-variation-settings:"wdth" 110;text-decoration:none;cursor:pointer;letter-spacing:.01em}
.btn:hover{background:var(--orange-dk)}
.btn:disabled{background:var(--line);color:var(--muted);cursor:not-allowed}
.btn:focus-visible,.chip:focus-visible,.bag-btn:focus-visible,.seg button:focus-visible,.select:focus-visible,.card:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.link{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--muted);font-size:.9rem}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gut);align-items:center;padding:clamp(40px,7vw,96px) var(--gut);border-bottom:1px solid var(--ink)}
.hero h1{font-size:clamp(3rem,9vw,7.5rem)}
.hero-copy p{max-width:30em;color:var(--muted);font-size:1.1rem;margin:24px 0 32px}
.hero-pic{margin:0;background:var(--paper);border:1px solid var(--ink);aspect-ratio:1;position:relative;overflow:hidden}
.hero-pic img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.hero-pic img.in{opacity:1}
.hero-pic figcaption{position:absolute;left:0;bottom:0;background:var(--ink);color:var(--fog);padding:6px 10px}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero-pic{max-width:520px}}

/* charms */
.charms{padding:clamp(40px,6vw,80px) var(--gut)}
.section-head{display:flex;flex-wrap:wrap;align-items:end;gap:16px 24px;margin-bottom:28px}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-right:auto}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:transparent;border:1px solid var(--ink);padding:7px 14px;cursor:pointer;font-size:.92rem}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--fog)}
.chip:hover:not([aria-pressed="true"]){background:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.card{display:block;text-decoration:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:14px 14px 18px;background:var(--fog)}
.card:hover{background:var(--paper)}
.card:hover .card-name{color:var(--orange)}
.card-pic{aspect-ratio:1;background:var(--paper);overflow:hidden;margin-bottom:12px}
.card-pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-pic img{transform:scale(1.04)}
.card-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.card-name{font-weight:750;font-variation-settings:"wdth" 110;font-size:1.15rem}
.card-line{margin:4px 0 0;color:var(--muted);font-size:.92rem;line-height:1.4}
.empty{padding:24px;color:var(--muted)}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.card{padding:10px 10px 14px}.card-name{font-size:1rem}.card-line{font-size:.85rem}}

/* how */
.how{padding:clamp(40px,6vw,80px) var(--gut);border-top:1px solid var(--ink);background:var(--paper)}
.how h2{font-size:clamp(2.2rem,5vw,3.6rem);margin-bottom:28px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.how li{padding:18px 24px 0 0;margin-right:24px}
.how li+li{border-left:1px solid var(--line);padding-left:24px}
.how li .mono{color:var(--orange);font-weight:500}
.how p{margin:8px 0 0;font-size:1.1rem;max-width:22em}
@media(max-width:720px){.how ol{grid-template-columns:1fr}.how li+li{border-left:0;padding-left:0;border-top:1px solid var(--line)}.how li{padding-bottom:18px;margin:0}}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between;padding:24px var(--gut);border-top:1px solid var(--ink);color:var(--muted);font-size:.9rem}
.foot .mark{color:var(--ink)}

/* charm page */
.pdp{padding:24px var(--gut) clamp(48px,6vw,80px)}
.back{display:inline-block;margin-bottom:20px;font-size:.95rem;text-decoration:none}
.back:hover{text-decoration:underline}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:start}
.pdp-pic{margin:0;background:var(--paper);border:1px solid var(--ink);aspect-ratio:1}
.pdp-pic img{width:100%;height:100%;object-fit:cover}
.pdp-info .group{color:var(--orange);margin:0 0 8px;text-transform:uppercase;letter-spacing:.08em}
.pdp-info h1{font-size:clamp(2.6rem,6vw,4.8rem)}
.pdp-info .line{color:var(--muted);font-size:1.1rem;margin:14px 0 28px}
.opt{border:0;padding:0;margin:0 0 22px}
.opt legend{font-weight:700;margin-bottom:8px;padding:0}
.seg{display:flex;border:1px solid var(--ink);width:max-content;max-width:100%}
.seg button{background:transparent;border:0;padding:10px 18px;cursor:pointer}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--fog)}
.seg.lines{display:grid;grid-template-columns:auto repeat(6,minmax(0,1fr));width:min(420px,100%)}
.seg.lines button{min-width:0;padding:10px 8px;font-weight:700;font-variation-settings:"wdth" 110}
.seg.lines button:disabled{color:var(--line);cursor:not-allowed}
.seg{flex-wrap:wrap}
.opt-note{margin:8px 0 0;color:var(--muted);font-size:.92rem}
.select{font:inherit;padding:10px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);min-width:min(320px,100%);border-radius:0}
.buy{display:flex;align-items:center;gap:20px;padding:20px 0;border-top:1px solid var(--ink);margin-top:8px}
.price{font-size:1.6rem}
.fine{color:var(--muted);font-size:.9rem;margin:4px 0 0}
@media(max-width:820px){.pdp-grid{grid-template-columns:1fr}}

/* bag */
.scrim{position:fixed;inset:0;background:rgba(22,24,26,.4);z-index:30}
.bag{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--fog);border-left:1px solid var(--ink);z-index:40;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.bag.open{transform:none}
.bag-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--ink)}
.bag-head h2{font-size:1.6rem}
.bag-body{flex:1;overflow:auto;padding:8px 20px}
.bag-empty{color:var(--muted)}
.bag-row{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.bag-row img{width:64px;height:64px;object-fit:cover;background:var(--paper)}
.bag-name{margin:0;font-weight:700}
.bag-opt{margin:0;color:var(--muted);font-size:.88rem}
.bag-right{display:flex;flex-direction:column;align-items:end;gap:4px}
.bag-foot{padding:16px 20px 20px;border-top:1px solid var(--ink)}
.bag-total{display:flex;justify-content:space-between;font-weight:700;margin-bottom:14px}
.bag-foot .btn{width:100%}
.bag-msg{margin:10px 0 0;color:var(--muted);font-size:.9rem;min-height:1.2em}

/* opening fog */
.fog-intro{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.fog-base{position:absolute;inset:0;background:#e9e8e3}
.fog-l{position:absolute;inset:-25% -45%;background:url("img/fog1.webp") center/100% 100% no-repeat;will-change:transform,opacity}
.fog-l.l2{background-image:url("img/fog2.webp");transform:scale(1.3)}
.fog-l.l3{transform:scaleX(-1)}
.fog-l.l4{background-image:url("img/fog2.webp");transform:scale(1.6) scaleY(-1)}
.fog-intro.go .fog-base{animation:fog-thin .9s ease-in .15s forwards}
.fog-intro.go .l1{animation:fog-left 3s cubic-bezier(.55,0,.6,1) .2s forwards}
.fog-intro.go .l2{animation:fog-right 3.1s cubic-bezier(.55,0,.6,1) .3s forwards}
.fog-intro.go .l3{animation:fog-left-far 3.2s cubic-bezier(.5,0,.6,1) .45s forwards}
.fog-intro.go .l4{animation:fog-up 3s cubic-bezier(.55,0,.6,1) .25s forwards}
@keyframes fog-thin{to{opacity:0}}
@keyframes fog-left{to{transform:translateX(-75%);opacity:0}}
@keyframes fog-right{to{transform:scale(1.3) translateX(70%);opacity:0}}
@keyframes fog-left-far{to{transform:scaleX(-1) translateX(80%);opacity:0}}
@keyframes fog-up{to{transform:scale(1.6) scaleY(-1) translate(-30%,40%);opacity:0}}
@media(prefers-reduced-motion:reduce){.fog-intro.go .fog-l{animation:none;opacity:0}.fog-intro.go .fog-base{animation:fog-thin .4s ease forwards}}

@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* one-page layout: how it works sits under the charm */
.pdp .how{margin:clamp(40px,6vw,72px) calc(-1 * var(--gut)) calc(-1 * clamp(48px,6vw,80px));border-bottom:0}

/* logo image */
.mark.logo{display:block;line-height:0}
.mark.logo img{height:clamp(40px,5vw,56px);width:auto}
.foot-logo{height:34px;width:auto}

/* ---------- line colors (Muni) and BART accents ---------- */
:root{--bart-y:#FFE800;--bart-o:#FAA61A;--bart-g:#4DB848;--bart-r:#ED1C24;--bart-b:#00AEEF}
.bart-stripe{height:4px;background:linear-gradient(90deg,var(--bart-y) 0 20%,var(--bart-o) 20% 40%,var(--bart-g) 40% 60%,var(--bart-r) 60% 80%,var(--bart-b) 80%)}
.badge{display:inline-grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--c);color:#fff;font-weight:800;font-size:.95em;line-height:1;font-variation-settings:"wdth" 110;flex:none}
.badge.dot{border:2px solid rgba(0,0,0,.12)}
.badge.none{background:transparent;border:2px solid var(--line)}
.seg.lines button{display:grid;place-items:center}
.seg.lines button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:inset 0 -3px 0 var(--ink)}
.seg.lines button[aria-pressed="true"] .badge{outline:2px solid var(--ink);outline-offset:2px}
.seg.lines button:disabled .badge{opacity:.35}
.how li:nth-child(1){border-top:3px solid var(--bart-b)}
.how li:nth-child(2){border-top:3px solid var(--bart-g)}
.how li:nth-child(3){border-top:3px solid var(--bart-o)}
.how ol{border-top:0}
.how li .mono{color:var(--muted)}
.foot{border-top:0;position:relative}
.foot::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--bart-y) 0 20%,var(--bart-o) 20% 40%,var(--bart-g) 40% 60%,var(--bart-r) 60% 80%,var(--bart-b) 80%)}
.hero-pic figcaption{display:flex;align-items:center;gap:6px}
.hero-pic figcaption .badge{font-size:.8em}

/* homepage line cards */
.lines-home{padding:clamp(40px,6vw,80px) var(--gut)}
.text-link{font-size:.95rem;text-decoration:none}
.text-link:hover{text-decoration:underline;text-underline-offset:4px}
.all{padding-top:0}
.all-group{font-size:.85rem;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:28px 0 10px}
.all-group:first-child{margin-top:0}
.seg button[hidden]{display:none}
.line-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid var(--ink);border-left:1px solid var(--ink)}
.line-card{display:block;text-decoration:none;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);padding:12px 12px 16px;position:relative}
.line-card::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.line-card:hover{background:var(--paper)}
.line-card:hover::after,.line-card:focus-visible::after{transform:scaleX(1)}
.line-pic{aspect-ratio:1;background:var(--paper);overflow:hidden;margin-bottom:10px}
.line-pic img{width:100%;height:100%;object-fit:cover}
.line-name{display:flex;align-items:center;gap:8px;font-weight:700;font-variation-settings:"wdth" 108}
.line-price{display:block;margin-top:4px;color:var(--muted)}
/* five BART colors fill one row */
.bart-home{padding-top:0}
.bart-row{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1000px){.line-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.line-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* license plate engraving */
.plate-row{display:flex;gap:8px;flex-wrap:wrap}
.plate-input{min-width:0;width:12ch;font-family:var(--mono);font-size:1.25rem;letter-spacing:.18em;text-transform:uppercase;text-align:center}
.ghost-btn{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:10px 18px}
.ghost-btn:hover{background:var(--ink);color:var(--fog)}

/* homepage: more charms */
.more{padding:0 var(--gut) clamp(40px,6vw,80px)}
.more-card{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:clamp(20px,4vw,48px);align-items:center;border:1px solid var(--ink);padding:16px;text-decoration:none;max-width:980px}
.more-card:hover{background:var(--paper)}
.more-card h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:10px}
.more-card p{color:var(--muted);max-width:32em;margin:0 0 14px}
@media(max-width:620px){.more-card{grid-template-columns:1fr}}
.plate-pick{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.plate-pick[hidden]{display:none}
.plate-opt{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);font-weight:800;cursor:pointer}
.plate-opt[aria-pressed="true"]{background:var(--ink);color:var(--fog)}

/* waiting for an engraving */
.pdp-pic{position:relative;overflow:hidden}
.engraving{position:absolute;inset:0;display:grid;place-items:center;background:rgba(233,232,227,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.engraving[hidden]{display:none}
.engraving::before{content:"";position:absolute;inset:-20%;background:url("img/fog1.webp") center/cover;opacity:.55;animation:engraving-drift 9s linear infinite alternate}
.engraving-card{position:relative;text-align:center;padding:24px;max-width:80%}
.engraving-title{margin:16px 0 6px;font-weight:800;font-variation-settings:"wdth" 110;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.engraving-sub{margin:0;color:var(--muted)}
.engraving-bar{width:min(260px,60vw);height:4px;background:rgba(22,24,26,.12);overflow:hidden;margin:0 auto}
.engraving-bar span{display:block;height:100%;width:35%;background:linear-gradient(90deg,var(--bart-y),var(--bart-o),var(--bart-g),var(--bart-r),var(--bart-b));animation:engraving-slide 1.4s ease-in-out infinite}
@keyframes engraving-slide{from{transform:translateX(-110%)}to{transform:translateX(310%)}}
@keyframes engraving-drift{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@media(prefers-reduced-motion:reduce){.engraving::before,.engraving-bar span{animation:none}}
.btn[hidden]{display:none}

/* loading train */
.engraving-track{position:relative;width:min(320px,70vw);height:70px;margin:0 auto;overflow:hidden}
.engraving-train{position:absolute;left:0;bottom:6px;width:150px;height:auto;animation:train-pass 2.8s cubic-bezier(.45,0,.55,1) infinite}
.engraving-rail{position:absolute;left:0;right:0;bottom:4px;height:2px;background:var(--ink);opacity:.5}
@keyframes train-pass{0%{transform:translateX(-170px)}45%,55%{transform:translateX(calc(min(320px,70vw)/2 - 75px))}100%{transform:translateX(calc(min(320px,70vw) + 20px))}}
@media(prefers-reduced-motion:reduce){.engraving-train{animation:none;transform:translateX(calc(min(320px,70vw)/2 - 75px))}}
.all .line-row{border-top:0}
.all .line-card{border-top:1px solid var(--ink);margin-top:-1px}