/* yasinberkyesilyurt.com — "community meetup wall".
   Tokens mirror DESIGN.md (source of truth). Change values there first, then here. */
:root{
  /* colours */
  --primary:#FFD23F;
  --primary-hover:#FFDD66;
  --on-primary:#14183D;
  --ground:#2B39C9;
  --on-ground:#FBFAF3;
  --on-ground-muted:#C9CEF5;
  --surface:#FBFAF3;
  --text:#14183D;
  --text-muted:#4A4F78;
  --note-yellow:#FFE14D;
  --note-pink:#FF9CC2;
  --note-mint:#8EEBC4;
  --note-orange:#FFA94D;
  --lanyard:#FF9CC2;
  --map-land:#3D4AD4;
  --map-land-lit:#FBFAF3;
  --link-visited:#3A2F8F;
  --focus:#FFD23F;
  /* type */
  --display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --hand:"Shantell Sans","Comic Sans MS","Segoe Print",cursive;
  --fs-16:1rem;
  --fs-18:1.125rem;
  --fs-22:1.375rem;
  --fs-30:1.875rem;
  --fs-44:2.75rem;
  --fs-64:4rem;
  --fs-display:clamp(2.5rem,6vw,4rem);
  --lh-display:1.05;
  --lh-heading:1.15;
  --lh-body:1.55;
  --lh-label:1.3;
  --lh-note:1.2;
  /* shape, space, depth, motion */
  --r-sm:4px;
  --r-md:12px;
  --r-full:9999px;
  --s-xs:4px;
  --s-sm:8px;
  --s-md:16px;
  --s-lg:24px;
  --s-xl:32px;
  --s-2xl:48px;
  --s-3xl:80px;
  --gutter:var(--s-md);
  --max:1120px;
  --tap:44px;
  --btn-h:48px;
  --shadow:0 4px 14px rgba(20,24,61,.18);
  --t-micro:80ms;
  --t-short:150ms;
  --t-medium:300ms;
  --t-long:600ms;
  --t-view:500ms;
  --t-print:350ms;
  --t-stagger:80ms;
  --ring:3px;
  --ring-ink:2px;
  --drop:var(--s-xl);
}
@media (min-width:600px){:root{--gutter:var(--s-lg)}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--on-ground-muted) var(--ground)}
body{margin:0;background:var(--ground);color:var(--text);font:400 var(--fs-18)/var(--lh-body) var(--body)}
h1,h2,h3,h4,p,ul,ol,table{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
::selection{background:var(--text);color:var(--primary)}
main{overflow-x:clip}
.wrap{max-width:calc(var(--max) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* links */
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.paper a:visited{color:var(--link-visited)}

/* focus ring: 3px yellow with a 2px ink line inside it, on every ground */
:focus-visible{outline:var(--ring) solid var(--focus);outline-offset:var(--ring-ink);box-shadow:0 0 0 var(--ring-ink) var(--text);border-radius:var(--r-sm)}
.btn:focus-visible,.chip:focus-visible,.copy:focus-visible,.pin:focus-visible,.toggle:focus-visible,.round:focus-visible{border-radius:var(--r-full)}
[tabindex="-1"]:focus{outline:0;box-shadow:none}

.skip{position:absolute;left:var(--s-md);top:-100px;z-index:50;background:var(--primary);color:var(--on-primary);padding:var(--s-md) var(--s-lg);border-radius:var(--r-full);font-weight:600}
.skip:focus{top:var(--s-md)}

/* ---------- grounds ---------- */
.wall{background:var(--ground);color:var(--on-ground)}
.paper{background:var(--surface);color:var(--text)}
.band{background:var(--note-yellow);color:var(--text)}
.block{padding-block:var(--s-3xl)}
.block.tight-top{padding-top:var(--s-md)}

/* ---------- headings ---------- */
h1{font:800 var(--fs-display)/var(--lh-display) var(--display);letter-spacing:-.02em;max-width:15ch;text-wrap:balance}
h1.long{font-size:clamp(var(--fs-30),4.3vw,var(--fs-44));line-height:var(--lh-heading);max-width:22ch}
h2{font:800 var(--fs-30)/var(--lh-heading) var(--display);letter-spacing:-.02em;text-wrap:balance}
h3{font:800 var(--fs-22)/var(--lh-heading) var(--display);letter-spacing:-.01em}
.large{font:800 clamp(var(--fs-30),4.3vw,var(--fs-44))/var(--lh-heading) var(--display);letter-spacing:-.02em;text-wrap:balance}
.small{font-size:var(--fs-16)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--btn-h);padding:var(--s-sm) var(--s-lg);border:0;border-radius:var(--r-full);background:var(--primary);color:var(--on-primary);font:600 var(--fs-16)/var(--lh-label) var(--body);text-decoration:none;cursor:pointer;transition:background-color var(--t-short) ease-out,transform var(--t-micro) ease-out}
.btn:hover{background:var(--primary-hover)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--on-ground);box-shadow:inset 0 0 0 2px var(--on-ground)}
.btn.ghost:hover{background:var(--on-ground);color:var(--ground)}
.btn.ghost:focus-visible{box-shadow:inset 0 0 0 2px var(--on-ground),0 0 0 var(--ring-ink) var(--text)}
.link{display:inline-flex;align-items:center;min-height:var(--tap);padding:var(--s-xs);font-weight:600}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md) var(--s-lg)}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding-block:var(--s-md)}
.top .me{display:inline-flex;align-items:center;min-height:var(--tap);font:800 var(--fs-18)/var(--lh-label) var(--display);text-decoration:none}
.top nav{display:flex;align-items:center;gap:var(--s-lg)}
.top ul{display:none;gap:var(--s-lg)}
.top li a{display:inline-flex;align-items:center;min-height:var(--tap);font:600 var(--fs-16)/var(--lh-label) var(--body);text-decoration:none}
.top li a:hover,.top .me:hover{text-decoration:underline}
@media (min-width:600px){.top ul{display:flex}}

/* ---------- hero ---------- */
.hero{padding-bottom:var(--s-2xl)}
.hero-grid{display:grid;gap:var(--s-lg)}
.hang{position:relative;padding-top:var(--drop);width:15rem;max-width:100%}
.pin-top{position:absolute;top:calc(var(--s-sm) * -1);left:50%;width:var(--s-lg);height:var(--s-lg);margin-left:calc(var(--s-lg) / -2);border-radius:var(--r-full);background:var(--on-ground-muted);border:2px solid var(--text);z-index:3}
.lanyard{position:relative;transform-origin:50% calc(var(--drop) * -1);animation:swing-in var(--t-long) ease-out both}
.strap{position:absolute;left:50%;bottom:calc(100% - var(--s-xs));width:var(--s-lg);height:calc(var(--drop) + var(--s-xs));margin-left:calc(var(--s-lg) / -2);background:var(--lanyard)}
.clip{position:absolute;left:50%;top:calc(var(--s-md) * -1);width:38px;height:34px;margin-left:-19px;z-index:2}
.clip rect{stroke:var(--text);stroke-width:2}
.clip .c1{fill:var(--on-ground-muted)}
.clip .c2{fill:var(--surface)}
.badge{position:relative;background:var(--surface);color:var(--text);border-radius:var(--r-md);padding:var(--s-2xl) var(--s-md) 0;text-align:center;overflow:hidden;box-shadow:var(--shadow)}
.badge::before,.back::before{content:"";position:absolute;top:var(--s-md);left:50%;width:var(--s-2xl);height:var(--s-sm);margin-left:calc(var(--s-2xl) / -2);border-radius:var(--r-full);background:var(--ground)}
.badge .name{font:600 var(--fs-22)/var(--lh-note) var(--hand)}
.badge .role{font:600 var(--fs-16)/var(--lh-label) var(--body);margin:var(--s-sm) auto var(--s-md)}
.badge .cities{margin-inline:calc(var(--s-md) * -1);padding:var(--s-sm) var(--s-md);background:var(--text);color:var(--on-ground);font:600 var(--fs-16)/var(--lh-label) var(--body)}
.badge .cities span{color:var(--primary);padding-inline:var(--s-xs)}
@keyframes swing-in{from{transform:rotate(-14deg)}to{transform:rotate(0)}}

.lede{margin-top:var(--s-lg);max-width:58ch}
.hero .actions{margin-top:var(--s-lg)}
.hero .for{margin-top:var(--s-md);color:var(--on-ground-muted)}

@media (min-width:1024px){
  :root{--drop:var(--s-3xl)}
  .hero{padding-bottom:var(--s-3xl)}
  .hero-grid{grid-template-columns:19rem minmax(0,1fr);gap:var(--s-3xl);align-items:start}
  .hang{width:19rem}
  .hero-copy{padding-top:var(--s-2xl)}
  .badge{padding:calc(var(--s-2xl) + var(--s-sm)) var(--s-lg) 0}
  .badge .name{font-size:1.75rem}
  .badge .role{font-size:var(--fs-18);margin:var(--s-md) auto var(--s-lg)}
  .badge .cities{margin-inline:calc(var(--s-lg) * -1);padding:var(--s-md)}
  .lede{font-size:var(--fs-22);line-height:1.45}
}

/* ---------- map ---------- */
.map-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-md) var(--s-lg);margin-bottom:var(--s-lg)}
.toggle{min-height:var(--tap);padding:var(--s-sm) var(--s-md);border:0;border-radius:var(--r-full);background:transparent;color:var(--on-ground);box-shadow:inset 0 0 0 2px var(--on-ground);font:600 var(--fs-16)/var(--lh-label) var(--body);cursor:pointer}
.toggle:hover{background:var(--on-ground);color:var(--ground)}
.toggle[aria-pressed="true"]{background:var(--on-ground);color:var(--ground)}
.toggle:focus-visible{box-shadow:inset 0 0 0 2px var(--on-ground),0 0 0 var(--ring-ink) var(--text)}
.map-frame{position:relative;overflow:hidden;aspect-ratio:1.301;border-radius:var(--r-md);background:var(--ground);box-shadow:inset 0 0 0 2px var(--map-land)}
.map-stage{position:absolute;left:0;top:0;width:var(--w);aspect-ratio:1000/492.9;transform:translate(var(--tx),var(--ty));--w:750%;--tx:-46.667%;--ty:-27.643%}
.map-stage img{display:block;width:100%;height:100%}
.map.moving .map-stage{transition:width var(--t-view) ease-in-out,transform var(--t-view) ease-in-out}
.map.moving .map-frame{transition:aspect-ratio var(--t-view) ease-in-out}
.map.world .map-frame{aspect-ratio:2.029}
.map.world .map-stage{--w:100%;--tx:0%;--ty:0%}
.dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:var(--r-full);background:var(--primary);border:2px solid var(--text);pointer-events:none;translate:calc(var(--nx,0) * .6px) calc(var(--ny,0) * .6px)}
.dot.on{background:var(--text);border-color:var(--primary);width:16px;height:16px;margin:-8px 0 0 -8px;z-index:2}
.dot.on::after{content:"";position:absolute;inset:-4px;border-radius:var(--r-full);border:2px solid var(--primary);opacity:0;animation:pulse var(--t-long) ease-out}
@keyframes pulse{from{transform:scale(1);opacity:1}to{transform:scale(3.2);opacity:0}}
.map.world .dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-width:1px;translate:none}
.map.world .dot.on{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:2px}
.pins{display:none}
.pin{position:absolute;display:flex;align-items:center;height:var(--tap);padding:0 0 0 22px;border:0;background:none;cursor:pointer;font:600 var(--fs-16)/var(--lh-label) var(--body);translate:calc(var(--nx,0) * 1px) calc(var(--ny,0) * 1px);transform:translate(-9px,-50%)}
.pin.left{flex-direction:row-reverse;padding:0 22px 0 0;transform:translate(calc(-100% + 9px),-50%)}
.pin .lab{display:inline-flex;align-items:center;gap:var(--s-xs);padding:var(--s-xs) var(--s-sm);border-radius:var(--r-full);background:var(--primary);color:var(--on-primary);white-space:nowrap;transition:background-color var(--t-short) ease-out,opacity var(--t-short) ease-out}
.pin:hover .lab{background:var(--primary-hover)}
.pin[aria-expanded="true"] .lab{background:var(--text);color:var(--primary)}
.cam{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.map-cap{margin-top:var(--s-md);font-weight:600}
.city-list{margin-top:var(--s-sm);color:var(--on-ground-muted)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s-sm);margin-top:var(--s-md)}
.chip{display:inline-flex;align-items:center;gap:var(--s-xs);min-height:var(--tap);padding:var(--s-sm) var(--s-md);border:0;border-radius:var(--r-full);background:var(--primary);color:var(--on-primary);font:600 var(--fs-16)/var(--lh-label) var(--body);cursor:pointer;transition:background-color var(--t-short) ease-out}
.chip:hover{background:var(--primary-hover)}
.chip[aria-expanded="true"]{background:var(--text);color:var(--primary)}

/* city panel: bottom sheet under 1024px, docked right of the map above */
.panel{position:fixed;left:0;right:0;bottom:0;z-index:40;max-height:80vh;overflow:auto;padding:var(--s-lg) var(--s-md) var(--s-xl);background:var(--surface);color:var(--text);border-radius:var(--r-md) var(--r-md) 0 0;box-shadow:var(--shadow)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s-md)}
.panel h3{font-size:var(--fs-30);padding-top:var(--s-xs)}
.panel .line{margin-top:var(--s-sm);max-width:44ch}
.round{flex:none;display:grid;place-items:center;width:var(--tap);height:var(--tap);padding:0;border:0;border-radius:var(--r-full);background:var(--text);color:var(--surface);cursor:pointer}
.round:hover{background:var(--ground)}
.round svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.panel.enter{animation:panel-in var(--t-short) ease-out;animation-duration:250ms}
@keyframes panel-in{from{transform:translate(var(--in-x,0),var(--in-y,100%));opacity:var(--in-o,1)}}
.gal{margin-top:var(--s-lg)}
/* photo prints pinned to the wall: paper edge, tape, one soft shadow */
.stack{display:grid;justify-items:center;width:min(100%,13rem);margin-inline:auto;padding-top:var(--s-sm);touch-action:pan-y}
.print{grid-area:1/1;position:relative;display:block;width:100%;padding:var(--s-sm);border:0;border-radius:var(--r-sm);background:var(--surface);box-shadow:var(--shadow);cursor:zoom-in;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg));transition:transform var(--t-medium) ease-out}
.print[aria-hidden="true"]{pointer-events:none}
.print::before{content:"";position:absolute;z-index:1;top:calc(var(--s-sm) * -1);left:50%;width:var(--s-2xl);height:var(--s-md);margin-left:calc(var(--s-2xl) / -2);background:var(--on-ground-muted);opacity:.85;transform:rotate(-3deg)}
.print img{display:block;width:100%;height:auto;border-radius:calc(var(--r-sm) / 2);background:var(--note-yellow)}
.print.drop{animation:drop var(--t-print) ease-out backwards;animation-delay:calc(var(--i,0) * var(--t-stagger))}
@keyframes drop{from{opacity:0;transform:translate(var(--dx,0),calc(var(--dy,0) - var(--s-xl))) rotate(calc(var(--rot,0deg) - 9deg))}}
.print.away{transform:translate(calc(var(--dir,1) * 75%),-4%) rotate(calc(var(--dir,1) * 14deg));transition:transform 190ms ease-in}
.print:focus-visible{border-radius:var(--r-sm)}
.gal-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);margin-top:var(--s-md)}
.gal-nav .count{font:600 var(--fs-16)/var(--lh-label) var(--body);font-variant-numeric:tabular-nums}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:color-mix(in srgb,var(--text) 92%,transparent);animation:fade 250ms ease-out}
.lightbox img{display:block;width:auto;height:auto;max-width:100%;max-height:100vh;max-height:100dvh;background:var(--surface);transform-origin:0 0}
.lightbox .round{position:absolute;top:var(--s-md);right:var(--s-md);background:var(--primary);color:var(--on-primary)}
.lightbox .round:hover{background:var(--primary-hover)}
@keyframes fade{from{opacity:0}}
@media (min-width:600px){
  .lightbox{padding:var(--s-lg)}
  .lightbox img{max-height:calc(100vh - 2 * var(--s-lg));border-radius:var(--r-sm)}
}

@media (min-width:1024px){
  .map-frame{aspect-ratio:2.004}
  .map-stage{--w:455.7%;--tx:-46.667%;--ty:-26.82%}
  .dot{width:14px;height:14px;margin:-7px 0 0 -7px;translate:calc(var(--nx,0) * 1px) calc(var(--ny,0) * 1px)}
  .dot.on{width:14px;height:14px;margin:-7px 0 0 -7px}
  .pins{display:block}
  .map:not(.world) .pin.far{display:none}
  .map.world .dot{width:10px;height:10px;margin:-5px 0 0 -5px;border-width:2px;translate:calc(var(--wx,0) * 1px) calc(var(--wy,0) * 1px)}
  .map.world .dot.on{width:14px;height:14px;margin:-7px 0 0 -7px}
  .map.world .pin:not(.solo){display:none}
  .map.world .pin{justify-content:center;width:var(--tap);padding:0;translate:calc(var(--wx,0) * 1px) calc(var(--wy,0) * 1px);transform:translate(-50%,-50%)}
  .map.world .pin .lab{position:absolute;left:50%;bottom:calc(100% - var(--s-sm));transform:translateX(-50%);opacity:0;pointer-events:none}
  .map.world .pin.below .lab{bottom:auto;top:calc(100% - var(--s-sm))}
  .map.world .pin:hover .lab,.map.world .pin:focus-visible .lab,.map.world .pin[aria-expanded="true"] .lab{opacity:1}
  .panel.left{right:auto;left:var(--s-md)}
  .panel.enter{--in-x:var(--s-xl);--in-y:0;--in-o:0}
  .panel.left.enter{--in-x:calc(var(--s-xl) * -1)}
  .stack{width:min(100%,15rem)}
  .panel{position:absolute;left:auto;top:var(--s-md);right:var(--s-md);bottom:var(--s-md);width:20rem;max-height:none;padding:var(--s-lg);border-radius:var(--r-md)}
}

/* ---------- notes ---------- */
.notes{display:grid;gap:var(--s-lg);margin-top:var(--s-2xl);align-items:start}
.note{position:relative;padding:var(--s-lg);color:var(--text);background:var(--note-yellow);border-radius:var(--r-sm);box-shadow:var(--shadow);transform:rotate(var(--rot,0deg))}
.note.pink{background:var(--note-pink)}
.note.mint{background:var(--note-mint)}
.note.orange{background:var(--note-orange)}
.note .t{font:600 var(--fs-22)/var(--lh-note) var(--hand);letter-spacing:0;margin-bottom:var(--s-sm)}
.note p{max-width:62ch}
.rot1{--rot:-1.2deg}.rot2{--rot:1.4deg}.rot3{--rot:-.6deg}.rot4{--rot:1deg}.rot5{--rot:-1.6deg}
@media (min-width:600px){
  .notes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .notes .wide{grid-column:span 2}
}
@media (min-width:1024px){
  .notes{grid-template-columns:repeat(6,minmax(0,1fr))}
  .notes > *{grid-column:span 3}
  .notes .wide{grid-column:span 4}
  .notes .wide + *{grid-column:span 2}
  .notes.five > *{grid-column:span 2}
  .notes.five .wide{grid-column:span 4}
}

/* ---------- checklist (/openai) ---------- */
.check-head{display:none}
.check-group{margin-top:var(--s-2xl)}
.check{width:100%;border-collapse:collapse;margin-top:var(--s-md)}
.check tr{display:block;padding-block:var(--s-md);border-top:2px solid var(--text)}
.check th,.check td{display:block;padding:0;text-align:left;vertical-align:top}
.check th{font-weight:600}
.check td{margin-top:var(--s-xs);max-width:68ch}
@media (min-width:600px){
  .check-head{display:grid;grid-template-columns:2fr 3fr;gap:var(--s-xl);margin-top:var(--s-2xl);font:600 var(--fs-16)/var(--lh-label) var(--body);color:var(--text-muted)}
  .check-head + .check-group{margin-top:var(--s-lg)}
  .check tr{display:grid;grid-template-columns:2fr 3fr;gap:var(--s-xl)}
  .check td{margin-top:0}
}

/* ---------- now / outcome band ---------- */
.band .wrap{padding-block:var(--s-2xl)}
.band .large{max-width:26ch}
.band .more{margin-top:var(--s-md);max-width:60ch}
.band h2{margin-bottom:var(--s-md)}
@media (min-width:1024px){.band .wrap{padding-block:var(--s-3xl)}}

/* ---------- record ---------- */
.jobs{margin-top:var(--s-xl)}
.job{display:grid;gap:var(--s-xs) var(--s-2xl);padding-block:var(--s-lg);border-top:2px solid var(--text)}
.job:last-child{border-bottom:2px solid var(--text)}
.job .when{font:600 var(--fs-16)/var(--lh-label) var(--body);color:var(--text-muted);font-variant-numeric:tabular-nums}
.job .role{font-weight:600}
.job .what{margin-top:var(--s-sm);max-width:66ch}
@media (min-width:600px){
  .job{grid-template-columns:12.5rem 1fr}
  .job .when{padding-top:var(--s-xs)}
}

/* ---------- motive + first months (/openai) ---------- */
.motive{max-width:20ch;margin-bottom:var(--s-3xl)}
.steps{margin-top:var(--s-xl);counter-reset:s;display:grid;gap:var(--s-md);max-width:44rem}
.steps li{counter-increment:s;display:grid;grid-template-columns:var(--s-2xl) 1fr;gap:var(--s-md);align-items:center;font-weight:600;line-height:var(--lh-label)}
.steps li::before{content:counter(s);display:grid;place-items:center;width:var(--s-2xl);height:var(--s-2xl);border-radius:var(--r-full);background:var(--text);color:var(--surface);font:800 var(--fs-22)/1 var(--display)}
@media (min-width:1024px){.steps li{font-size:var(--fs-22)}}

/* ---------- background + contact ---------- */
.end{display:grid;gap:var(--s-3xl)}
.back{position:relative;background:var(--surface);color:var(--text);border-radius:var(--r-md);padding:var(--s-2xl) var(--s-lg) var(--s-lg);transform:rotate(-1.5deg);max-width:25rem;box-shadow:var(--shadow)}
.back h2{font-size:var(--fs-22);margin-bottom:var(--s-sm)}
.back li{padding-block:var(--s-sm);border-top:2px dashed var(--text-muted)}
.contact .large{max-width:18ch}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-md);margin-top:var(--s-lg)}
.mail .addr{font:600 var(--fs-22)/var(--lh-label) var(--body);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.copy{min-height:var(--tap);min-width:5.5rem;padding:var(--s-sm) var(--s-md);border:0;border-radius:var(--r-full);background:transparent;color:var(--on-ground);box-shadow:inset 0 0 0 2px var(--on-ground);font:600 var(--fs-16)/var(--lh-label) var(--body);cursor:pointer}
.copy:hover{background:var(--on-ground);color:var(--ground)}
.copy:focus-visible{box-shadow:inset 0 0 0 2px var(--on-ground),0 0 0 var(--ring-ink) var(--text)}
.contact .actions{margin-top:var(--s-md)}
.has-crowd{padding-bottom:0}
@media (min-width:1024px){
  .end{grid-template-columns:25rem minmax(0,1fr);align-items:center}
}

/* ---------- crowd strip (contact section, decorative) ---------- */
.crowd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-xs);align-items:end;margin-top:var(--s-3xl);max-width:44rem;font-size:8px}
.peep{position:relative;display:block;height:var(--h,4.6em);background:var(--c,var(--surface));border:2px solid var(--text);border-bottom:0;border-radius:var(--r-full) var(--r-full) 0 0;cursor:pointer;transform-origin:50% 100%;-webkit-tap-highlight-color:transparent}
.peep.sq{border-radius:var(--r-md) var(--r-md) 0 0}
.peep i{position:absolute;top:1em;width:32%;aspect-ratio:1;background:var(--surface);border:2px solid var(--text);border-radius:var(--r-full)}
.peep i:first-child{left:13%}
.peep i:last-child{right:13%}
.peep i::after{content:"";position:absolute;left:25%;top:25%;width:50%;height:50%;border-radius:var(--r-full);background:var(--text);transform:translate(var(--px,0px),var(--py,0px))}
.peep.hop{animation:hop var(--t-medium) ease-in-out}
@keyframes hop{50%{transform:translateY(calc(var(--s-md) * -1))}}
.c-a{--c:var(--surface)}.c-b{--c:var(--on-ground-muted)}.c-c{--c:var(--lanyard)}.c-d{--c:var(--map-land)}
.h1{--h:5em}.h2{--h:4.1em}.h3{--h:5.6em}.h4{--h:4.5em}.h5{--h:5.2em}
@media (min-width:600px){.crowd{font-size:13px;gap:var(--s-sm)}}

/* ---------- 404 ---------- */
.lost{min-height:100vh;display:grid;align-content:center;padding-block:var(--s-3xl)}
.lost .actions{margin-top:var(--s-xl)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .lanyard,.peep.hop{animation:none}
  .btn,.chip,.pin .lab,.print,.print.away,.map.moving .map-stage,.map.moving .map-frame{transition:none}
  .print.drop,.panel.enter,.lightbox,.dot.on::after{animation:none}
}