/* Islands Server — design 2. Rules: proceso/REFERENCIAS.md */
:root{
  --paper:#faf9f5; --paper-2:#f2f0ea; --white:#fff;
  --ink:#101010; --ink-2:#4a4a4a; --ink-3:#6f6c65; --rule:#dad6cc;
  --signal:#f03228; --red:#c42a20; --red-dark:#9e2118;
  --ok:#2f6b3a; --warn:#8a5a00; --info:#3a4f6a;
  --serif:'Libre Caslon Display','Libre Caslon Text',Georgia,serif;
  --text-serif:'Libre Caslon Text',Georgia,serif;
  --sans:'Atkinson Hyperlegible Next','Atkinson Hyperlegible',system-ui,sans-serif;
  --mono:'Atkinson Hyperlegible Mono',ui-monospace,monospace;
  --gut:clamp(20px,4.5vw,56px); --max:1240px; --gap:112px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-weight:400}
:focus,:focus-visible{outline:none}
a:focus-visible,button:focus-visible,[tabindex]:not(main):focus-visible,summary:focus-visible{background:#f6e2dc;text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--red)}
main:focus,main:focus-visible{background:none!important;text-decoration:none!important}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--ink);background:#fff;box-shadow:inset 0 -2px 0 var(--red)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 14px;z-index:99}
.skip:focus-visible{left:8px;color:#fff;background:var(--ink)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.muted{color:var(--ink-2)}
.mono,.eyebrow{font:400 12.5px/1.35 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.eyebrow{color:var(--ink-2)}

/* photographs: archive black and white; colour returns on hover (pointer devices only) */
.bw{filter:grayscale(1) contrast(1.04);transition:filter .7s ease}
@media (hover:hover){
  a:hover .bw,.plate:hover .bw,.ihero .pic:hover .bw,a:focus-visible .bw{filter:grayscale(0) contrast(1)}
}

/* demo bar — clearly not part of the product */
.demobar{background:var(--ink);color:#d9d6ce;font:400 13px/1.3 var(--sans)}
.demobar .wrap{display:flex;align-items:center;gap:14px;min-height:40px;flex-wrap:wrap;padding-top:5px;padding-bottom:5px}
.demobar strong{font:400 12px var(--mono);letter-spacing:.1em;color:#fff}
.demobar .roles{display:flex;gap:2px;background:#262626;padding:2px}
.demobar .roles button{background:none;border:0;color:#cfccc4;padding:5px 10px;cursor:pointer}
.demobar .roles button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.demobar .spacer{flex:1}
.demobar .link{background:none;border:0;color:#fff;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 2px}
.demobar .roles button:focus-visible,.demobar .link:focus-visible{background:#fff;color:var(--ink)}
.palette{display:none!important}

/* header */
.site-head{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:20}
.site-head .wrap{display:flex;align-items:center;gap:32px;min-height:78px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:50px;height:auto}
.brand .rule{width:1px;align-self:stretch;background:var(--rule);margin:8px 0}
.brand b{display:block;font:400 25px/1 var(--serif);letter-spacing:-.005em;text-transform:none}
.brand b br{display:none}
.brand small{display:block;font:400 11.5px/1.2 var(--mono);letter-spacing:.1em;color:var(--red);margin-top:5px;white-space:nowrap}
.nav{display:flex;gap:2px;flex:1}
.nav a{font:600 13px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;padding:10px 11px}
.nav a:hover{text-decoration:underline}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:.55em}
.head-tools{display:flex;align-items:center;gap:18px}
.head-tools .tool{background:none;border:0;display:flex;align-items:center;gap:7px;font:400 15px/1 var(--sans);cursor:pointer;padding:8px 2px;text-decoration:none;text-transform:none;letter-spacing:0}
.head-tools .tool:hover{text-decoration:underline}
#acct{display:flex;align-items:center;gap:16px}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer}
.menu-btn span{display:block;width:24px;height:1.5px;background:var(--ink);margin:6px 0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;border:1px solid var(--ink);background:var(--ink);color:#fff;font:600 15.5px/1 var(--sans);letter-spacing:.01em;text-transform:none;padding:0 22px;text-decoration:none;cursor:pointer;border-radius:0;transition:background .15s,color .15s,border-color .15s}
.btn:hover{background:#2c2c2c}
.btn:active{background:#000}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.dark{background:var(--ink)}
.btn.small{min-height:38px;padding:0 14px;font-size:14px}
.btn[disabled]{background:var(--rule);border-color:var(--rule);color:#6d6b66;cursor:not-allowed}
.btn:focus-visible{background:var(--paper);color:var(--ink);border-color:var(--ink);text-decoration:underline;text-decoration-color:var(--red)}
.tlink{color:var(--ink);font:600 15px/1 var(--sans);text-transform:none;letter-spacing:0;text-decoration:underline;text-decoration-color:#b9b4a8;text-underline-offset:.35em;display:inline-flex;gap:8px;align-items:center;padding:6px 0}
.tlink:hover{text-decoration-color:var(--red)}

/* type */
.display{font:400 clamp(52px,7.4vw,104px)/1.02 var(--serif);letter-spacing:-.012em;margin:0;text-transform:none}
.display-s{font:400 clamp(40px,5vw,68px)/1.04 var(--serif);letter-spacing:-.01em;margin:0;text-transform:none}
.kicker{font:400 12.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin:0 0 18px}
.lede{font:400 clamp(19px,1.55vw,22px)/1.5 var(--sans);max-width:38ch;margin:0 0 .6em;color:var(--ink)}
.gd,[lang=gd]{font-family:var(--text-serif);font-style:italic}
.script{display:none}

/* section heads: centred title between rules (Public Domain Review) */
.sec{padding:var(--gap) 0 0}
.sec-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;margin-bottom:36px;position:relative}
.sec-head::before,.sec-head::after{content:"";height:1px;background:var(--rule);grid-row:1}
.sec-head::before{grid-column:1}.sec-head::after{grid-column:3}
.sec-head h2{grid-column:2;grid-row:1;margin:0;font:400 clamp(26px,2.4vw,32px)/1.1 var(--serif);text-align:center;text-transform:none}
.sec-head h2::before{display:none}
.sec-head .tlink{grid-column:1/-1;grid-row:2;justify-self:center;margin-top:-6px}

/* hero */
.hero{border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end;padding-top:88px;padding-bottom:48px}
.hero-copy .display{max-width:12ch}
.hero-search{max-width:520px;position:relative}
.hero-search label{display:block;font:600 16px/1.3 var(--sans);margin-bottom:8px}
.hero .ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:22px}
.plate{position:relative;margin:0}
.plate img{width:100%;height:min(64vh,640px);object-fit:cover}
.plate figcaption{display:flex;justify-content:space-between;gap:18px;padding:10px 0 0;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.plate figcaption a{color:var(--ink-2)}
.credit{font:400 12px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2);margin:8px 0 0;position:static;background:none;max-width:none;padding:0}
.credit a{color:inherit}
.hero-lines,.waves{display:none}

/* tasks (British Library) */
.tasks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--ink)}
.tasks a{display:flex;flex-direction:column;gap:10px;padding:26px 26px 30px 0;text-decoration:none;border-right:1px solid var(--rule);margin-right:26px;min-height:210px}
.tasks a:last-child{border-right:0;margin-right:0}
.tasks svg{width:30px;height:30px;stroke:var(--ink);fill:none;stroke-width:1.3}
.tasks b{font:400 27px/1.1 var(--serif)}
.tasks span{color:var(--ink-2);font-size:16px;line-height:1.45}
.tasks i{margin-top:auto;font:600 15px var(--sans);font-style:normal;color:var(--red)}
.tasks a:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}

/* types strip */
.types{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.types a{display:block;text-align:left;padding:18px 16px 20px 0;text-decoration:none;border:0}
.types svg{width:24px;height:24px;stroke:var(--ink);fill:none;stroke-width:1.3;margin:0 0 10px}
.types b{display:block;font:400 20px/1.15 var(--serif);text-transform:none;letter-spacing:0}
.types span{font-size:14.5px;color:var(--ink-2);line-height:1.35;display:block;margin-top:2px}
.types a:hover b{text-decoration:underline}

/* cards (MoMA): no boxes */
.grid{display:grid;gap:44px 28px}
.g5,.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;text-decoration:none;min-width:0;background:none;border:0;padding:0}
.card .ph{position:relative;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .badge{display:none}
.card .eyebrow{display:block;margin-top:14px!important;color:var(--ink-2)}
.card h3{margin:6px 0 6px;font:400 23px/1.15 var(--serif)}
.card p{margin:0 0 10px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.card .meta{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font:400 12px/1.4 var(--mono);letter-spacing:.06em;color:var(--ink-3);border:0;padding:0}
.card .meta>span[aria-hidden]{display:none}
.card:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.noimg{display:grid;place-items:center;height:100%;color:var(--ink-3);background:none}
.noimg svg{width:34px;height:34px;fill:none;stroke:var(--ink-3);stroke-width:1.2}
.quote{height:100%;background:var(--paper-2);display:flex;align-items:flex-start;padding:22px 24px;overflow:hidden;border-top:2px solid var(--ink);border-left:0}
.quote span{font:italic 400 19px/1.4 var(--text-serif);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}

/* list (British Library) */
.updates{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:1px solid var(--rule)}
.updates a{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid var(--rule);text-decoration:none;align-items:start}
.updates .th{aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.updates .th img{width:100%;height:100%;object-fit:cover}
.updates b{display:block;font:400 21px/1.2 var(--serif);margin:4px 0}
.updates span.d{color:var(--ink-2);font-size:15px}
.updates a:hover b{text-decoration:underline;text-decoration-thickness:1px}

/* island tiles: picture, then caption below */
.tile{display:block;text-decoration:none;color:var(--ink);position:relative;background:none;aspect-ratio:auto;overflow:visible}
.tile .tim{aspect-ratio:4/5;background:var(--paper-2);overflow:hidden;position:relative}
.tile.wide .tim{aspect-ratio:4/3}
.tile.mini .tim{display:none}
.tile img{position:static;width:100%;height:100%;object-fit:cover;opacity:1}
.tile .tmap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--paper-2);opacity:1}
.tile .tmap svg{height:100%;width:auto}
.tile .in{display:block;position:static;padding:12px 0 0;background:none}
.tile b{display:block;font:400 25px/1.1 var(--serif);text-transform:none}
.tile .gd{display:block;color:var(--ink-2);font-size:16px;margin-top:2px}
.tile small{display:block;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.tile .go{display:none}
.tile:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
.tile.mini{border-top:1px solid var(--rule);padding:4px 0 10px;height:auto}
.tile.mini b{font-size:20px}

/* every island: the map on paper */
.band{margin-top:var(--gap);border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);background:none;color:var(--ink)}
.band .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding-top:72px;padding-bottom:72px}
.band h2{font:400 clamp(40px,4.6vw,64px)/1.04 var(--serif);margin:0 0 18px;letter-spacing:-.01em;text-transform:none}
.band h2 em{font-style:normal;color:var(--signal)}
.band p{color:var(--ink-2);max-width:40ch}
.groups{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-top:26px;border-top:1px solid var(--rule)}
.groups a{display:flex;justify-content:space-between;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule);text-decoration:none;background:none}
.groups a:hover{background:none}
.groups a b{font:400 19px/1.2 var(--serif);text-transform:none;letter-spacing:0}
.groups a span{font:400 12.5px var(--mono);color:var(--ink-3)}
.groups a:hover b{text-decoration:underline;text-decoration-thickness:1px}
.mapcol{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}
.mapbox{position:relative;width:100%;display:flex;justify-content:center}
.mapbox svg{width:100%;height:auto;max-height:680px;cursor:crosshair}
.mapbox rect,.locator rect,.peak .mapwrap rect{fill:#9b978e}
.maptip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;padding:7px 11px;font:400 17px/1.15 var(--serif);transform:translate(-50%,-135%);white-space:nowrap;opacity:0;transition:opacity .15s;z-index:3;text-transform:none}
.maptip small{display:block;font:400 10.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#cfccc4}
.maptip.on{opacity:1}
.lines path{fill:none;stroke:var(--signal);stroke-width:1;opacity:.9}
.lines circle{fill:var(--signal)}
.lines .mapring{fill:none;stroke:var(--ink);stroke-width:1.2}
.maphint{font:400 12px/1.4 var(--mono);color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;text-align:center;margin-top:12px}

/* help */
.helpgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:1px solid var(--ink)}
.helpcard{padding:24px 0 8px;text-decoration:none;display:block;background:none;border:0}
.helpcard h3{font:400 26px/1.1 var(--serif);margin:8px 0 10px;text-transform:none}
.helpcard p{margin:0 0 14px;color:var(--ink-2);font-size:16.5px}
.helpcard:hover h3{text-decoration:underline;text-decoration-thickness:1px}

/* forms */
.field{display:block;margin:0 0 22px}
.field>span,.legend{display:block;font:600 16px/1.3 var(--sans);margin-bottom:6px}
.field small,.hint{display:block;color:var(--ink-2);font-size:15px;margin:-2px 0 8px;line-height:1.4}
input[type=text],input[type=search],input[type=date],input[type=email],input[type=password],select,textarea{width:100%;border:1px solid #a9a59b;background:#fff;padding:13px 14px;border-radius:0;font-size:17px}
textarea{min-height:120px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--ink-2)}
.check{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;cursor:pointer}
.check input{width:22px;height:22px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.choice{display:grid;gap:10px}
.choice.cols{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.opt{position:relative}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt label{display:block;border:1px solid #a9a59b;background:#fff;padding:16px;cursor:pointer;height:100%}
.opt label svg{stroke:var(--ink)!important}
.opt label b{display:block;font:400 21px/1.15 var(--serif)!important;text-transform:none!important;letter-spacing:0!important}
.opt label span{display:block;font-size:14.5px;color:var(--ink-2);margin-top:4px;line-height:1.35}
.opt input:checked+label{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#f6f4ee}
.opt input:focus-visible+label{text-decoration:underline;text-decoration-color:var(--red);background:#f6e2dc}
.searchbox{display:flex;border:1px solid var(--ink);background:#fff}
.searchbox input{border:0!important;padding:15px 16px;font-size:18px}
.searchbox button{border:0;background:var(--ink);color:#fff;padding:0 20px;cursor:pointer;font-size:18px}
.searchbox button:hover{background:#2c2c2c}
.suggest{border:1px solid var(--ink);border-top:0;background:#fff;max-height:280px;overflow:auto;margin:0;padding:0;color:var(--ink)}
.hero-search .suggest{position:absolute;left:0;right:0;z-index:6}
.suggest li{list-style:none}
.suggest button{width:100%;text-align:left;background:none;border:0;padding:11px 14px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.suggest button:hover,.suggest button.act{background:var(--paper-2)}
.suggest small{color:var(--ink-3);font:400 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:transparent;border:1px solid #a9a59b;padding:7px 13px;font-size:15px;text-decoration:none;cursor:pointer;border-radius:0}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed=true],.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip button{background:none;border:0;margin-left:6px;cursor:pointer;padding:0 2px;color:inherit}

/* layout helpers */
.two{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:56px}
.panel{background:transparent;border:0;border-top:1px solid var(--ink);padding:18px 0 4px}
.panel h3{margin:0 0 12px;font:400 24px/1.1 var(--serif);text-transform:none}
.crumbs{font:400 12px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:26px 0 0;display:flex;gap:8px;flex-wrap:wrap;color:var(--ink-3)}
.crumbs a{text-decoration:none;color:var(--ink-2)}
.crumbs a:hover{text-decoration:underline}
.crumbs span:last-child{color:var(--ink)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));border-top:1px solid var(--ink);margin-top:26px}
.facts div{padding:14px 14px 4px 0;border:0}
.facts b{display:block;font:400 40px/1 var(--serif)}
.facts span{font:400 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.empty{border:0;border-top:1px solid var(--ink);background:none;padding:30px 0 6px;display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:start}
.empty .num{font:400 96px/.9 var(--serif);color:var(--signal)}
.empty h3{margin:0 0 8px;font:400 30px/1.1 var(--serif);text-transform:none}
.empty p{margin:0 0 18px;max-width:58ch;color:var(--ink-2)}

/* island page */
.ihero .wrap{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:56px;align-items:start;padding-bottom:20px;min-height:0}
.ihero .copy{padding-top:8px}
.ihero .copy .display{margin-top:22px;font-size:clamp(52px,6.6vw,96px)!important}
.ihero .gd{font-size:24px;color:var(--ink-2);margin:8px 0 16px}
.ihero .pic{position:relative;margin-top:26px;min-height:0}
.ihero .pic::before{display:none}
.ihero .pic img{position:static;width:100%;aspect-ratio:4/5;height:auto;object-fit:cover}
.locator{position:relative;inset:auto;aspect-ratio:4/5;background:var(--paper-2);display:flex;align-items:center;justify-content:center}
.locator svg{width:100%;height:100%}
.locator text{fill:var(--ink-2)!important}

/* item */
.media{background:var(--paper-2);color:var(--ink);position:relative;margin-top:22px}
.media img{width:100%;max-height:74vh;object-fit:contain;margin:0 auto}
.media audio,.media video{width:100%;display:block}
.dl{display:grid;grid-template-columns:minmax(110px,auto) 1fr;gap:10px 18px;margin:0}
.dl dt{font:400 11.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);padding-top:3px}
.dl dd{margin:0;font-size:16.5px}
.status{display:inline-flex;align-items:center;gap:7px;font:400 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px;border:1px solid currentColor;white-space:nowrap;background:none;border-radius:0}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-review{color:#7a4f00}.s-changes{color:var(--red-dark)}.s-published{color:var(--ok)}.s-restricted{color:var(--info)}.s-rejected{color:var(--ink-3)}

/* contribute */
.steps{display:flex;margin:26px 0 30px;padding:0;counter-reset:s;flex-wrap:wrap}
.steps li{list-style:none;flex:1;min-width:110px;border-top:2px solid var(--rule);padding:10px 8px 0 0;font:400 12px/1.3 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.steps li::before{counter-increment:s;content:counter(s) "  "}
.steps li.done{border-top-color:var(--ink);color:var(--ink-2)}
.steps li.now{border-top-color:var(--red);color:var(--ink)}
.formcard{background:#fff;border:1px solid var(--rule);padding:clamp(22px,3.4vw,44px)}
.formcard h2.legend,.formcard legend.legend{font:400 32px/1.1 var(--serif)!important;text-transform:none!important;margin-bottom:16px}
.formnav{display:flex;justify-content:space-between;gap:12px;margin-top:26px;flex-wrap:wrap}
.drop{border:1px dashed #8f8b82;background:var(--paper);padding:30px;text-align:center;cursor:pointer;display:block;margin-bottom:18px}
.drop b{font:400 24px var(--serif)!important;text-transform:none!important}
.drop:hover{border-color:var(--ink)}
.drop:has(+ #file:focus-visible){border-color:var(--ink);background:#f6e2dc}
.preview img{max-height:280px;width:auto;margin:10px 0}
.preview-card{max-width:320px}
.note{border-left:2px solid var(--ink);background:var(--paper);padding:12px 16px;margin:14px 0;font-size:16px}
.note.ok{border-left-color:var(--ok)}
.note.info{border-left-color:var(--info)}
.err{color:var(--red-dark);font-weight:600;font-size:15.5px;margin:8px 0 0}

/* moderation */
.mod{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);border:1px solid var(--rule);background:#fff;min-height:560px}
.mod .list{border-right:1px solid var(--rule);overflow:auto;max-height:80vh}
.mod .list button{display:grid;grid-template-columns:60px 1fr;gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--rule);padding:14px;cursor:pointer}
.mod .list button[aria-current=true]{background:var(--paper);box-shadow:inset 3px 0 0 var(--red)}
.mod .list .th{width:60px;height:48px;background:var(--paper-2);overflow:hidden}
.mod .list .th img{width:100%;height:100%;object-fit:cover}
.mod .list b{display:block;font:400 18px/1.2 var(--serif)}
.mod .list small{display:block;color:var(--ink-2);font-size:13.5px}
.mod .detail{padding:26px;min-width:0}
.mod .detail h2{font:400 34px/1.1 var(--serif)!important}
.mod .detail h3{font:400 12.5px var(--mono)!important;letter-spacing:.08em;color:var(--ink-2)}
.checks{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:7px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px}
.checks i{font-style:normal;font-weight:700;width:18px;flex:none;text-align:center}
.c-ok i{color:var(--ok)}.c-warn i{color:var(--warn)}.c-bad i{color:var(--red)}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}
.log{list-style:none;padding:0;margin:0;border-left:1px solid var(--rule)}
.log li{padding:0 0 12px 14px;position:relative;font-size:14.5px}
.log li::before{content:"";position:absolute;left:-4px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.log time{font:400 11.5px/1 var(--mono);color:var(--ink-2);display:block;letter-spacing:.05em}
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

/* reports */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border:0;border-top:1px solid var(--ink);background:none}
.kpis div{padding:18px 18px 18px 0;border-bottom:1px solid var(--rule);background:none}
.kpis b{display:block;font:400 50px/1 var(--serif)}
.kpis span{font:400 11.5px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}
.bars{display:grid;gap:9px}
.bars div{display:grid;grid-template-columns:150px 1fr 40px;gap:10px;align-items:center;font-size:15px}
.bars i{display:block;height:10px;background:var(--ink)}
.bars i.alt{background:var(--red)}
table.t{width:100%;border-collapse:collapse;font-size:15.5px}
table.t th,table.t td{text-align:left;padding:10px 8px 10px 0;border-bottom:1px solid var(--rule)}
table.t th{font:400 11.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2);border-bottom:1px solid var(--ink)}

/* account (simulated) */
.acct{max-width:540px;margin:0 auto}
.acct .formcard{margin-top:26px}
.acct .alt{margin-top:18px;text-align:center;color:var(--ink-2);font-size:16px}
.mail{border:1px solid var(--rule);background:#fff;margin-top:20px}
.mail header{padding:12px 16px;border-bottom:1px solid var(--rule);font:400 12px var(--mono);letter-spacing:.05em;color:var(--ink-2);text-transform:uppercase}
.mail div{padding:18px 16px}

/* notes drawer, dialogs */
.drawer{position:fixed;inset:0 0 0 auto;width:min(480px,100%);background:var(--paper);border-left:1px solid var(--ink);z-index:60;transform:translateX(102%);transition:transform .3s ease;display:flex;flex-direction:column}
.drawer.open{transform:none}
.drawer header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--rule)}
.drawer header h2{margin:0;font:400 30px/1 var(--serif);text-transform:none}
.drawer .body{overflow:auto;padding:6px 22px 30px}
.drawer h3{font:400 12.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;margin:24px 0 6px;color:var(--red)}
.drawer p,.drawer li{font-size:15.5px;line-height:1.5}
.drawer ul,.drawer ol{padding-left:18px}
.x{background:none;border:0;font-size:28px;line-height:1;cursor:pointer;padding:4px 8px}
.scrim{position:fixed;inset:0;background:rgba(16,16,16,.4);z-index:55;display:none}
.scrim.on{display:block}
dialog{border:1px solid var(--ink);padding:0;max-width:min(560px,94vw);width:100%;background:var(--paper)}
dialog::backdrop{background:rgba(16,16,16,.45)}
dialog .in{padding:26px}
dialog h2{margin:0 0 10px;font:400 32px/1.05 var(--serif);text-transform:none}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;z-index:70;max-width:92vw;font-size:15.5px;display:none}
.toast.on{display:block}

/* peak */
.peak{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center;margin-top:36px}
.peak .mapwrap{background:var(--paper-2);aspect-ratio:1/1;position:relative;overflow:hidden}
.peak .mapwrap svg{width:100%;height:100%}
.peak .mapwrap text{fill:var(--ink)!important}
.counter{font:400 clamp(80px,9vw,128px)/.85 var(--serif);color:var(--signal)}
.counter-l{font:400 12px/1.45 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-2)}

/* footer */
.foot{border-top:1px solid var(--ink);margin-top:var(--gap);padding:34px 0 48px}
.foot .wrap{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.foot nav{display:flex;gap:22px;flex-wrap:wrap;flex:1}
.foot nav a{text-decoration:none;font-size:15px}
.foot nav a:hover{text-decoration:underline}
.foot .gd{color:var(--ink-2)}

/* view transitions */
::view-transition-old(root),::view-transition-new(root){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
::view-transition-old(root){animation-name:vt-out}
::view-transition-new(root){animation-name:vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}
::view-transition-group(ihero){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}

/* responsive */
@media (max-width:1180px){.nav a{padding:10px 7px;font-size:12.5px}}
@media (max-width:1020px){
  :root{--gap:72px}
  .nav,.head-tools .hide-m{display:none}
  .menu-btn{display:block}
  .site-head .wrap{justify-content:space-between}
  .nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink);padding:10px var(--gut) 20px}
  .nav.open a{font:400 24px/1.2 var(--serif);text-transform:none;letter-spacing:0;padding:14px 0;border-bottom:1px solid var(--rule)}
  .hero .wrap{grid-template-columns:1fr;gap:28px;padding-top:48px}
  .tasks{grid-template-columns:1fr 1fr}
  .tasks a{margin-right:0;padding-right:18px;border-right:0;border-bottom:1px solid var(--rule);min-height:0}
  .types{grid-template-columns:repeat(3,1fr)}
  .g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:1fr 1fr}
  .band .wrap,.two,.ihero .wrap,.peak{grid-template-columns:1fr}
  .updates{grid-template-columns:1fr}
  .helpgrid{grid-template-columns:1fr}
  .mod{grid-template-columns:1fr}
  .mod .list{max-height:300px;border-right:0;border-bottom:1px solid var(--rule)}
}
@media (max-width:600px){
  body{font-size:17px}
  .tasks,.types{grid-template-columns:1fr 1fr}
  .g3,.groups{grid-template-columns:1fr}
  .grid{gap:36px 18px}
  .empty{grid-template-columns:1fr;gap:8px}
  .empty .num{font-size:64px}
  .updates a{grid-template-columns:88px 1fr}
  .bars div{grid-template-columns:110px 1fr 32px}
  .brand img{width:42px}
  .brand b{font-size:21px}
  .demobar .label{display:none}
  .dl{grid-template-columns:1fr}
  .plate img{height:340px}
  .sec-head{gap:14px}
  .tasks b{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
.hero .wrap+.wrap{display:block;padding-top:0;padding-bottom:56px}
.tile .tim{display:block}
.hero-copy .display{font-size:clamp(46px,6vw,88px);max-width:15ch}

/* ===== v4: hierarchy, links, buttons, feature, map ===== */
.kicker,.eyebrow{display:none!important}
/* hero: one dominant title, a quiet subtitle, the photograph sliding under the title */
.hero .hero-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:48px;align-items:end;padding-top:72px;padding-bottom:0;position:relative;z-index:2}
.hero-title{font-size:clamp(64px,10.4vw,164px)!important;line-height:.92!important;letter-spacing:-.025em!important;max-width:none!important;margin:0 0 -.16em!important}
.hero-side{padding-bottom:28px}
.hero-sub{font:400 19px/1.5 var(--sans);color:var(--ink-2);margin:0 0 26px;max-width:34ch}
.hero .wrap+.wrap{position:relative;z-index:1}
.plate img{height:min(66vh,660px)}
/* buttons: Webs del Camp reveal — label slides, chevron appears; nothing at rest */
.btn{position:relative;padding:0 22px;transition:background .15s,color .15s,border-color .15s,padding .3s cubic-bezier(.22,.72,.24,1)}
.btn::after{content:"";position:absolute;right:15px;top:50%;width:7px;height:12px;background:currentColor;opacity:0;transform:translate(-5px,-50%);transition:opacity .23s,transform .3s cubic-bezier(.22,.72,.24,1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center/contain no-repeat}
.btn:hover,.btn:focus-visible{padding:0 31px 0 13px}
.btn:hover::after,.btn:focus-visible::after{opacity:1;transform:translate(0,-50%)}
/* standalone links: small caps label with a red index mark; the mark becomes a chevron on hover */
.tlink{font:600 13px/1 var(--sans)!important;letter-spacing:.1em!important;text-transform:uppercase!important;text-decoration:none!important;color:var(--ink)!important;gap:10px!important;padding:8px 0!important}
.tlink::before{content:"";width:8px;height:8px;background:var(--signal);flex:none;transition:transform .3s cubic-bezier(.22,.72,.24,1),clip-path .3s}
.tlink:hover::before,.tlink:focus-visible::before{transform:translateX(3px);clip-path:polygon(0 0,100% 50%,0 100%)}
.tlink:hover{color:var(--red)!important}
.tlink:focus-visible{background:#f6e2dc}
/* body links stay underlined (WCAG), but finer */
.lede a,.empty a:not(.btn),.drawer a,.acct .alt a,.hint a,.check a{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:.2em}
.h-sub{font:400 30px/1.15 var(--serif);margin:36px 0 10px}
/* featured example */
.feature .feat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;text-decoration:none}
.feature .fimg{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2)}
.feature .fimg img{width:100%;height:100%;object-fit:cover}
.feature .ftext{display:flex;flex-direction:column;gap:16px}
.feature .fmeta{font:400 12.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.feature b{font:400 clamp(40px,4.4vw,64px)/1.02 var(--serif);letter-spacing:-.015em}
.feature .fdesc{font:400 19px/1.5 var(--sans);color:var(--ink-2);max-width:36ch}
.feature .feat:hover b{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.12em}
.updates .m{display:block;margin-top:8px;font:400 11.5px/1.4 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
/* map: labels, zoom controls, a hint you can read */
.glabel{font:italic 400 15px var(--text-serif);fill:var(--ink-2);pointer-events:none}
.mapbox{border:1px solid var(--rule);background:#fbfaf7;overflow:hidden;touch-action:none}
.mapbox svg{max-height:720px}
.mapbox.zoomed svg{cursor:grab}
.mapbox.dragging svg{cursor:grabbing}
.mapctl{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:1px;z-index:4;background:var(--rule)}
.mapctl button{width:40px;height:40px;border:0;background:var(--paper);font:400 22px/1 var(--serif);cursor:pointer;color:var(--ink)}
.mapctl button:hover{background:var(--ink);color:#fff}
.mapctl button[data-z=reset]{font:400 10.5px/1 var(--mono);letter-spacing:.06em}
.maphint{font:400 16px/1.45 var(--sans)!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:0!important;text-align:left!important;margin:14px 0 0!important;padding-left:14px;border-left:2px solid var(--signal)}
.maphint b{font-weight:600}
.ilabel{font:400 11px var(--sans);fill:var(--ink);pointer-events:none;paint-order:stroke;stroke:#fbfaf7;stroke-width:3px}
@media (max-width:1020px){
  .hero .hero-grid{grid-template-columns:1fr;gap:20px;padding-top:44px}
  .hero-title{margin:0!important}
  .hero-side{padding-bottom:20px}
  .feature .feat{grid-template-columns:1fr;gap:20px}
}
.mapctl{background:var(--ink);border:1px solid var(--ink);gap:1px}
.mapctl button{color:var(--ink);font-size:24px}
.mapcol .maphint{align-self:stretch}
.head-tools .tool{white-space:nowrap}

/* ===== v5: composition ===== */
.hero{border-bottom:0}
.hero-stage{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));padding-top:56px;padding-bottom:96px;position:relative}
.hero-stage .hero-title{grid-column:1/-1;grid-row:1;position:relative;z-index:2;margin:0 0 -.3em!important;font-size:clamp(64px,11vw,176px)!important}
.hero-stage .plate{grid-column:1/-1;grid-row:2;margin:0}
.hero-stage .plate img{height:min(70vh,700px)}
.hero-card{grid-column:8/13;grid-row:2;align-self:end;position:relative;z-index:3;background:var(--paper);padding:30px 30px 26px;margin:0 -1px -56px 0;border-top:2px solid var(--ink)}
.hero-card .hero-sub{font-size:18.5px;color:var(--ink);margin:0 0 22px}
.hero-card .hero-search{max-width:none}
.hero-card .ctas{margin-top:18px}
.hero-stage figcaption{max-width:calc(58.33% - 24px)}
/* section heads: left-aligned, one strong rule */
.sec-head{display:flex!important;align-items:baseline;justify-content:space-between;gap:24px;border-top:1px solid var(--ink);padding-top:18px;margin-bottom:34px}
.sec-head::before,.sec-head::after{display:none!important}
.sec-head h2{text-align:left!important;font-size:clamp(30px,3.1vw,44px)!important;line-height:1.05!important}
.sec-head .tlink{margin:0!important}
.tasks{border-top:0}
.helpgrid{border-top:0}
/* featured: the text card overlaps the picture */
.feature .feat{grid-template-columns:repeat(12,minmax(0,1fr));gap:0;align-items:end}
.feature .fimg{grid-column:1/9;grid-row:1;aspect-ratio:3/2}
.feature .ftext{grid-column:8/13;grid-row:1;position:relative;z-index:2;background:var(--paper);padding:34px 0 8px 36px;margin-bottom:-40px}
/* map: instruction first */
.mapcol .maphint{order:-1;margin:0 0 14px!important;align-self:stretch}
@media (max-width:1020px){
  .hero-stage{display:block;padding-bottom:40px}
  .hero-stage .hero-title{margin:0 0 -.22em!important}
  .hero-stage .plate img{height:380px}
  .hero-stage figcaption{max-width:none}
  .hero-card{margin:0;padding:24px 0 0;border-top:0}
  .feature .feat{display:block}
  .feature .ftext{padding:22px 0 0;margin:0}
}
.hero .hero-stage{grid-template-columns:repeat(12,minmax(0,1fr));gap:0;align-items:start;padding-top:56px;padding-bottom:96px}
@media (max-width:1020px){.hero .hero-stage{display:block;padding-bottom:40px}}
.updates .th .wave{display:grid;place-items:center;height:100%;background:var(--paper-2)}
.updates .th .wave svg{width:34px;height:34px;stroke:var(--ink-2);fill:none;stroke-width:1.3}

/* contributor dashboard */
.myhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:44px;flex-wrap:wrap}
.minelist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.mine{display:grid;grid-template-columns:150px 1fr auto;gap:28px;padding:28px 0;border-bottom:1px solid var(--rule);align-items:start}
.mth{display:block;aspect-ratio:4/3;background:var(--paper-2);overflow:hidden}
.mth img{width:100%;height:100%;object-fit:cover}
.mth .quote{height:100%;padding:12px;border-top-width:1px}.mth .quote span{font-size:13px;-webkit-line-clamp:5}
.mth .wave{display:grid;place-items:center;height:100%}.mth .wave svg{width:30px;height:30px;stroke:var(--ink-2);fill:none;stroke-width:1.3}
.mbody h3{margin:0;font:400 27px/1.15 var(--serif)}
.mbody h3 a{text-decoration:none}.mbody h3 a:hover{text-decoration:underline;text-decoration-thickness:1px}
.mmeta{margin:6px 0 14px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.track{display:flex;list-style:none;padding:0;margin:0;max-width:520px}
.track li{flex:1;border-top:2px solid var(--rule);padding-top:8px;font:400 12px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.track li.done{border-top-color:var(--ink);color:var(--ink)}
.track li.now{border-top-color:var(--red);color:var(--ink)}
.mnote{margin:18px 0 0;padding:14px 18px;background:#fff;border-left:2px solid var(--red);max-width:620px}
.mnote p{margin:0 0 6px;font:italic 400 18px/1.45 var(--text-serif)}
.mnote footer{font:400 11.5px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:760px){.mine{grid-template-columns:96px 1fr}.mstat{grid-column:2}}
.mth,.mth *{text-decoration:none!important}

/* island charts */
.chart{width:100%;height:100%;display:block}
.chart .sea{fill:#f4f2ec}
.chart .grat{stroke:#d9d4c8;stroke-width:.6}
.chart .gtxt{font:400 9.5px var(--mono);fill:#8b867b;letter-spacing:.04em}
.chart .band{fill:none;stroke-linejoin:round}
.chart .b3{stroke:#ebe7de;stroke-width:34}
.chart .b2{stroke:#e2ddd1;stroke-width:20}
.chart .b1{stroke:#d6d0c2;stroke-width:9}
.chart .coast{fill:none;stroke:#9b968a;stroke-width:.8;stroke-linejoin:round}
.chart .land{fill:var(--ink);stroke:var(--ink);stroke-width:.6;stroke-linejoin:round}
.chart .nlink{fill:none;stroke:var(--signal);stroke-width:1;opacity:.9}
.chart .ndot{fill:var(--signal)}
.chart .ntxt{font:400 12px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#f4f2ec;stroke-width:3px}
.chart .ftxt{font:400 30px var(--serif);fill:var(--ink);paint-order:stroke;stroke:#f4f2ec;stroke-width:5px}
.chart .north path{fill:var(--ink)}
.chart .north text{font:400 10px var(--mono);fill:var(--ink)}
.chart .credit-osm{font:400 9px var(--mono);fill:#8b867b}
.chart.small .b3{stroke-width:22}.chart.small .b2{stroke-width:13}.chart.small .b1{stroke-width:6}

.where{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:start}
.wchart{aspect-ratio:4/5;border:1px solid var(--rule);overflow:hidden;background:#f4f2ec}
.wintro{font:400 19px/1.5 var(--sans);margin:0 0 18px;color:var(--ink-2)}
.near{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.near a{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--rule);text-decoration:none}
.nname{font:400 22px/1.2 var(--serif)}
.nkm{font:400 12px var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.near a:hover .nname{text-decoration:underline;text-decoration-thickness:1px}
.wthemes{margin-top:36px}.wthemes h3{font:400 24px/1.1 var(--serif);margin:0 0 12px}
@media (max-width:1020px){.where{grid-template-columns:1fr;gap:28px}}

/* ===== v6: cover, states, contributor rows ===== */
.hero .cover{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:72px;align-items:center;padding-top:64px;padding-bottom:88px}
.cover-text .hero-title{font-size:clamp(60px,8.2vw,124px)!important;line-height:.95!important;margin:0 0 30px!important;letter-spacing:-.022em!important}
.cover-text .hero-sub{font:400 21px/1.5 var(--sans);color:var(--ink-2);max-width:30ch;margin:0 0 38px}
.cover-text .hero-search{max-width:440px}
.cover-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:22px 0 0}
.cover-pic{margin:0}
.cover-pic .rot{position:relative;aspect-ratio:4/5;max-height:76vh;background:var(--paper-2);overflow:hidden}
.cover-pic .rot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease,filter .7s ease}
.cover-pic .rot img.on{opacity:1}
.cover-pic figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-top:14px;transition:opacity .45s ease}
.cover-pic.swap figcaption{opacity:0}
.cover-pic .cap{text-decoration:none;display:block}
.cover-pic .cap-name{display:block;font:400 26px/1.1 var(--serif)}
.cover-pic .cap:hover .cap-name{text-decoration:underline;text-decoration-thickness:1px}
.cover-pic .cap-where{display:block;margin-top:4px;font:400 12px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.cover-pic .cap-credit{font:400 11.5px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink-3);text-align:right;max-width:46%}
@media (hover:hover){.cover-pic:hover .rot img.on{filter:grayscale(0)}}
/* states: words, not chips */
.state{font:600 15px/1.3 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap}
.state.s-review{color:#7a4f00}.state.s-changes{color:var(--red-dark)}.state.s-published{color:var(--ok)}.state.s-restricted{color:var(--info)}.state.s-rejected{color:var(--ink-3)}
.state::before{content:none}
/* contributor rows */
.mine{grid-template-columns:160px 1fr!important}
.mmeta{font:400 15px/1.4 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink-2)!important;margin:6px 0 16px!important}
.mnow{font:400 23px/1.2 var(--serif);margin:0 0 4px}
.m-published .mnow{color:var(--ok)}.m-review .mnow{color:#7a4f00}.m-changes .mnow{color:var(--red-dark)}
.mnext{margin:0;color:var(--ink-2);font-size:16px}
.mnote footer{font:400 14px/1.3 var(--sans)!important;letter-spacing:0!important;text-transform:none!important}
@media (max-width:1020px){.hero .cover{grid-template-columns:1fr;gap:36px;padding-top:40px;padding-bottom:56px}.cover-pic .rot{max-height:none}}
.mysum{font:400 19px/1.5 var(--sans);margin:30px 0 18px;padding-top:18px;border-top:1px solid var(--ink)}
.minelist{border-top:0}
.cover-pic .cap-where{white-space:nowrap}.cover-pic .cap-credit{max-width:40%}

/* ===== v7: reasons-led contributor and moderator areas ===== */
.feature .feat{display:grid!important;grid-template-columns:minmax(0,7fr) minmax(0,5fr)!important;gap:56px!important;align-items:center!important}
.feature .fimg{grid-column:auto!important;grid-row:auto!important}
.feature .ftext{grid-column:auto!important;grid-row:auto!important;background:none!important;padding:0!important;margin:0!important}
/* contributor */
.myhead2{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:end;padding:44px 0 36px;border-bottom:1px solid var(--ink)}
.myhead2 .lede{max-width:40ch;margin:14px 0 24px}
.myisland{display:block;text-decoration:none}
.mychart{display:block;aspect-ratio:4/5;border:1px solid var(--rule);overflow:hidden;background:#f4f2ec}
.myisl-t{display:block;padding-top:12px;font:400 15px/1.3 var(--sans);color:var(--ink-2)}
.myisl-t b{display:block;font:400 30px/1.05 var(--serif);color:var(--ink);margin:2px 0 4px}
.myisl-t small{font-size:14.5px}
.myisland:hover b{text-decoration:underline;text-decoration-thickness:1px}
.minelist{margin-top:8px}
.mine{grid-template-columns:200px 1fr!important;gap:36px!important;padding:36px 0!important}
.mth.big{aspect-ratio:4/3}
.mnow{font:400 15px/1.3 var(--sans)!important;color:var(--ink-2)!important;margin:0 0 6px!important}
.mbody h3{font-size:30px!important;margin:0 0 12px!important}
.mseen{font:400 19px/1.4 var(--sans);margin:0 0 6px}.mseen b{font:400 34px/1 var(--serif);color:var(--signal);margin-right:4px}
.mnext{font-size:17px!important;max-width:58ch}
.reply{margin-top:18px;max-width:640px}.reply textarea{min-height:110px}
.reply .rnote{margin-left:14px;font-size:14.5px}
.m-changes .mnow{color:var(--red-dark)!important}
.islprev{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;margin:12px 0 14px;padding:12px;background:var(--paper)}
.islprev-c{display:block;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--rule)}
.islprev b{font-weight:600}
/* moderation */
.modhead{padding:44px 0 6px}.modhead .lede{max-width:52ch;margin-top:12px}
.modtabs{display:flex;gap:28px;border-bottom:1px solid var(--rule);margin:26px 0 0;flex-wrap:wrap}
.modtabs button{background:none;border:0;padding:12px 0;font:400 17px var(--sans);color:var(--ink-2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.modtabs button span{margin-left:7px;font:400 13px var(--mono);color:var(--ink-3)}
.modtabs button.on{color:var(--ink);border-bottom-color:var(--signal)}
.mod{border:0!important;background:none!important;grid-template-columns:minmax(280px,4fr) minmax(0,8fr)!important;gap:48px;margin-top:28px}
.mod.single{display:block}
.mod .list{border-right:0!important;max-height:none!important}
.qhead{font:400 14px var(--sans);color:var(--ink-2);margin:18px 0 6px;display:flex;justify-content:space-between}
.qhead:first-child{margin-top:0}.qhead span{font:400 13px var(--mono)}
.mod .list button{border:0!important;border-top:1px solid var(--rule)!important;padding:14px 4px!important;grid-template-columns:64px 1fr!important}
.mod .list button[aria-current=true]{background:#fff!important;box-shadow:inset 3px 0 0 var(--signal)!important}
.mod .list small.why{color:var(--red-dark);margin-top:3px}.mod .list small.why.ok{color:var(--ok)}
.mod .detail{padding:0!important}
.mfrom{font:400 15px var(--sans);color:var(--ink-2);margin:0 0 6px}
.mtitle{font:400 clamp(32px,3vw,44px)/1.08 var(--serif)!important;margin:0 0 10px}
.mdesc{font-size:18px;color:var(--ink-2);margin:0 0 18px;max-width:60ch}
.mprev{max-height:420px;width:auto;max-width:100%;margin:6px 0 22px}
.mtext{margin:6px 0 22px;padding:20px 24px;background:#fff;font:italic 400 19px/1.55 var(--text-serif);border-left:2px solid var(--ink)}
.mempty{padding:26px;background:var(--paper-2);color:var(--ink-2)}
.know{display:grid;grid-template-columns:140px 1fr;gap:0;margin:0 0 22px;border-top:1px solid var(--rule)}
.know dt,.know dd{padding:10px 0;border-bottom:1px solid var(--rule);margin:0}
.know dt{font:400 15px var(--sans);color:var(--ink-2)}
.know dd{font-size:16.5px}.know dd.flag{color:var(--red-dark)}
.sug{background:#fff;border-left:2px solid var(--signal);padding:14px 18px;margin:0 0 22px}.sug p{margin:0;font-size:17px}
.decide{margin:0 0 26px}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--ink);margin-bottom:20px}
.paths button{background:var(--paper);border:0;border-right:1px solid var(--ink);padding:16px;font:400 22px var(--serif);cursor:pointer}
.paths button:last-child{border-right:0}
.paths button[aria-pressed=true]{background:var(--ink);color:#fff}
.paths button:hover:not([aria-pressed=true]){background:#fff}
.dlabel{font:600 16px var(--sans);margin:0 0 8px}
.access{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:18px}
.access .opt label{padding:12px 14px}.access .opt label b{font-size:18px!important}
.hist summary{cursor:pointer;font:400 15px var(--sans);color:var(--ink-2);padding:12px 0;border-top:1px solid var(--rule)}
.hist .log{margin-top:12px}
.done{padding:10px 0}.done-what{font:400 16px var(--sans);color:var(--ok);margin:0 0 6px}
.done h2{font:400 40px/1.08 var(--serif);margin:0 0 14px}
.caught{padding:40px 0}.caught h2{font:400 48px/1 var(--serif);margin:0 0 12px}.caught p{font-size:19px;color:var(--ink-2)}
.modreports{max-width:820px}
.rep{border-top:1px solid var(--rule);padding:22px 0}.rep h3{font:400 28px/1.1 var(--serif);margin:4px 0 8px}
.rep-when{font:400 14.5px var(--sans);color:var(--ink-2);margin:0}.rep-why{font-size:18px;color:var(--red-dark);margin:0 0 8px}
@media (max-width:1020px){.myhead2{grid-template-columns:1fr}.myisland{max-width:260px}.mine{grid-template-columns:120px 1fr!important}.mod{grid-template-columns:1fr!important}.feature .feat{grid-template-columns:1fr!important;gap:22px!important}.know{grid-template-columns:110px 1fr}}
.myhead2{grid-template-columns:minmax(0,1fr) 260px}
.hovernet path{fill:none;stroke:var(--signal)}.hovernet circle{fill:var(--signal)}
.gfilter{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 10px}
.gfilter a{display:inline-flex;align-items:baseline;gap:8px;padding:9px 14px;border:1px solid #b9b4a8;text-decoration:none;font:400 16px var(--sans);background:var(--paper)}
.gfilter a span{font:400 12px var(--mono);color:var(--ink-3)}
.gfilter a:hover{border-color:var(--ink)}
.gfilter a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
.gfilter a[aria-current=page] span{color:#cfccc4}

/* ===== v8: no tracked capitals, no machine labels ===== */
:root{--mono:var(--sans)}
.mono,.eyebrow,.crumbs,.crumbs a,.tile small,.card .meta,.updates .m,.plate figcaption,.credit,.cap-where,.cap-credit,.fmeta,.steps li,.dl dt,.kpis span,.facts span,.counter-l,.maptip small,.maphint,.groups a span,.gfilter a span,.modtabs button span,.qhead span,.suggest small,.log time,.track li,.mmeta,.nkm,.status,.state,.demobar strong,.brand small,.mail header,.chart .gtxt,.chart .credit-osm,.mod .detail h3,.drawer h3,.kicker,.ilabel{text-transform:none!important;letter-spacing:0!important;font-family:var(--sans)!important}
.crumbs,.tile small,.card .meta,.updates .m,.plate figcaption,.credit,.cap-where,.cap-credit,.fmeta,.dl dt,.kpis span,.facts span,.counter-l,.log time,.nkm,.groups a span,.gfilter a span,.modtabs button span,.qhead span{font-size:14px!important}
.steps li{font-size:14px!important}
.brand small{font:italic 400 14px/1.2 var(--text-serif)!important;color:var(--red)!important}
.demobar strong{font-weight:600}
.chart .gtxt{font-size:10.5px!important}
/* links: editorial, set in the book face, underlined like a printed reference */
.tlink{font:italic 400 18px/1.3 var(--text-serif)!important;text-transform:none!important;letter-spacing:0!important;color:var(--ink)!important;text-decoration:underline!important;text-decoration-color:#b9b4a8!important;text-decoration-thickness:1px!important;text-underline-offset:.22em!important;gap:0!important;padding:4px 0!important}
.tlink::before{content:none!important}
.tlink:hover{color:var(--red)!important;text-decoration-color:var(--red)!important}
.tasks i{font:italic 400 18px/1.3 var(--text-serif)!important;color:var(--red)!important}
.hovernet path{stroke:var(--ink)!important}.hovernet circle{fill:var(--ink)!important}
.mapctl button[data-z=reset]{font:400 14px var(--sans)!important;letter-spacing:0!important}
.nav a{font:400 16.5px/1 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;padding:10px 10px!important}
.nav a[aria-current=page]{text-underline-offset:.4em!important}
/* where to begin: a contents page, one action per line */
.begin{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.begin a{display:grid;grid-template-columns:64px minmax(0,5fr) minmax(0,6fr);gap:24px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--rule);text-decoration:none;transition:background .25s,padding .25s}
.begin .bn{font:italic 400 20px var(--text-serif);color:var(--ink-3)}
.begin .bt{font:400 clamp(28px,2.6vw,38px)/1.1 var(--serif)}
.begin .bd{font:400 18px/1.5 var(--sans);color:var(--ink-2);max-width:48ch}
.begin a:hover{background:#fff;padding-left:14px}
.begin a:hover .bt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.begin a:hover .bn{color:var(--red)}
@media (max-width:760px){.begin a{grid-template-columns:40px 1fr;gap:6px 14px}.begin .bd{grid-column:2}}

/* ===== v10: where to begin, island illustrations ===== */
.begin2{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--ink)}
.begin2 li{display:flex}
.begin2 a{display:grid;grid-template-rows:150px auto 1fr;width:100%;padding:28px 24px 34px;text-decoration:none;border-right:1px solid var(--rule);transition:background .3s}
.begin2 li:last-child a{border-right:0}
.begin2 a:hover{background:#fff}
.ill{width:100%;max-width:170px;height:140px;display:block;margin:0 auto 10px 0;overflow:visible}
.ill .f{fill:var(--paper);stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.begin2 a:hover .ill .f{fill:#fff}
.ill .s{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ill .thin{stroke-width:1.2}
.ill .r{fill:var(--signal);stroke:var(--ink);stroke-width:1.4;stroke-linejoin:round}
.ill .r-s{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round}
.begin2 .bt{font:400 30px/1.1 var(--serif);margin:6px 0 10px;display:block}
.begin2 .bd{font:400 17.5px/1.5 var(--sans);color:var(--ink-2)}
.begin2 a:hover .bt{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
/* small, purposeful motion on hover */
.ill .beam{transform-origin:80px 41px;opacity:.85;transition:transform .9s cubic-bezier(.3,.6,.2,1),opacity .3s}
.begin2 a:hover .ill .beam{transform:rotate(-14deg);opacity:1}
.ill .lift{transition:transform .5s cubic-bezier(.3,.6,.2,1)}
.begin2 a:hover .ill .lift{transform:translateY(-8px)}
.ill .smoke{transition:transform 1s ease,opacity 1s ease}
.begin2 a:hover .ill .smoke{transform:translateY(-6px);opacity:.55}
.ill .notes{transition:transform .6s cubic-bezier(.3,.6,.2,1)}
.begin2 a:hover .ill .notes{transform:translateY(-5px)}
.ill .hand{transition:transform .35s cubic-bezier(.3,.6,.2,1);transform-origin:80px 70px}
.begin2 a:hover .ill .hand{transform:translateY(-7px) rotate(-4deg)}
.ill .ring{opacity:0;transition:opacity .2s}
.begin2 a:hover .ill .ring{opacity:1}
@media (max-width:1020px){.begin2{grid-template-columns:1fr 1fr}.begin2 li:nth-child(2) a{border-right:0}.begin2 li:nth-child(-n+2) a{border-bottom:1px solid var(--rule)}}
@media (max-width:560px){.begin2{grid-template-columns:1fr}.begin2 a{border-right:0;border-bottom:1px solid var(--rule)}}
@media (prefers-reduced-motion:reduce){.begin2 a:hover .ill *{transform:none!important}}
.begin2 .bt{white-space:nowrap}
.begin2 .bd{text-wrap:pretty}
p,.lede,.bd,.mnext,.fdesc,.hero-sub{text-wrap:pretty}
h1,h2,h3,.bt,.mtitle{text-wrap:balance}
/* responsive repairs found in the audit */
.nav-acct{display:none}
@media (max-width:1020px){
  .myhead2{grid-template-columns:1fr!important;gap:28px}
  .myisland{max-width:240px}
  .nav.open .nav-acct{display:flex;flex-direction:column}
  .nav.open .nav-acct a,.nav.open .nav-acct button{font:400 20px/1.2 var(--sans)!important;padding:14px 0;border-bottom:1px solid var(--rule);background:none;border-left:0;border-right:0;border-top:0;text-align:left;color:var(--ink);text-decoration:none;min-height:0}
}
@media (max-width:600px){
  #acct .tool:not([href="#/signin"]),#acct .btn,#acct button{display:none}
  .brand b{white-space:nowrap}
  .foot .wrap{display:grid;grid-template-columns:1fr;gap:20px;justify-items:start}
  .foot nav{display:flex;flex-wrap:wrap;gap:10px 20px}
}
@media (max-width:600px){
  .mine{grid-template-columns:1fr!important;gap:14px!important}
  .mth{max-width:180px}
  .reply .rnote{display:block;margin:10px 0 0}
}

/* ===== v11: scenes (Z composition), no separator lines ===== */
/* no rules between sections: rhythm comes from space and from changing ground */
.sec-head,.begin2,.minelist,.helpgrid,.tasks,.band,.foot,.panel,.facts,.empty,.myhead2,.mysum,.near,.know,.modtabs{border-top:0!important}
.sec-head{padding-top:0!important;margin-bottom:28px!important}
.band{border-bottom:0!important}
.sec{padding-top:120px}
.sec.first{padding-top:96px}
.h2{font:400 clamp(34px,3.4vw,52px)/1.05 var(--serif);margin:0 0 34px;letter-spacing:-.01em}
.sec-lede{font:400 clamp(26px,2.4vw,36px)/1.25 var(--serif);max-width:26ch;margin:0 0 48px}
.begin2 a{border-right:0!important;padding:0 28px 0 0!important}
.begin2 a:hover{background:none!important}

/* the scene itself */
.scene{position:relative;container-type:inline-size;aspect-ratio:var(--ar);margin:0;overflow:hidden;background:#cfd6da}
.scene .sc-bg,.scene .sc-land{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scene .sc-land{z-index:2;pointer-events:none;will-change:transform}
.scene .sc-word{position:absolute;z-index:1;left:var(--x);top:var(--t);margin:0;font:400 var(--f)/.92 var(--serif)!important;letter-spacing:-.025em;color:var(--ink);white-space:nowrap;will-change:transform;max-width:none!important}
.scene .sc-cap{position:absolute;z-index:3;right:16px;bottom:12px;color:#fff;font:400 13px/1.35 var(--sans);text-align:right;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.scene .sc-cap span{display:block;opacity:.85;font-size:12px}
.scene.full{width:100%}
/* hero */
.hero2 .scene .sc-over{position:absolute;z-index:3;left:4cqw;bottom:5cqw;width:min(470px,38cqw);color:#fff}
.hero2 .scene::after{content:"";position:absolute;inset:auto 0 0 0;height:62%;z-index:2;background:linear-gradient(0deg,rgba(10,12,14,.78),rgba(10,12,14,0));pointer-events:none}
.hero2 .hero-sub{color:#fff!important;font:400 20px/1.5 var(--sans)!important;margin:0 0 22px!important;max-width:34ch}
.hero2 .hero-search label{color:#fff}
.hero2 .searchbox{border-color:#fff}
.hero2 .cover-actions{margin-top:16px}
.sc-voice{position:absolute;z-index:3;right:4cqw;top:4cqw;display:flex;align-items:center;gap:12px;background:rgba(250,249,245,.92);padding:10px 16px 10px 10px;max-width:300px}
.sc-voice span{font:400 13.5px/1.3 var(--sans);color:var(--ink-2)}
.sc-voice b{display:block;font:400 18px/1.15 var(--serif);color:var(--ink)}
.vplay{width:38px;height:38px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.vplay.on{background:var(--red)}
/* featured scene */
.feature2{margin-top:140px}
.feature2 .sc-word{color:var(--ink)}
.f2-text a{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:12px 56px;text-decoration:none;padding-top:34px}
.f2-k{grid-column:1;font:400 15px var(--sans);color:var(--ink-2)}
.f2-text b{grid-column:1;font:400 clamp(34px,3.2vw,48px)/1.05 var(--serif)}
.f2-d{grid-column:2;grid-row:1/3;font:400 20px/1.5 var(--sans);color:var(--ink-2);align-self:end}
.f2-text .tlink{grid-column:1}
.f2-text a:hover b{text-decoration:underline;text-decoration-thickness:1px}
/* map band: its own ground instead of lines */
.mapband{background:var(--paper-2);margin-top:140px;padding:110px 0}
.mb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.mb-text h2{font:400 clamp(40px,4.4vw,64px)/1.04 var(--serif);margin:0 0 20px;letter-spacing:-.012em}
.mb-text h2 em{font-style:normal;color:var(--signal)}
.mb-text p{font-size:19px;color:var(--ink-2);max-width:38ch}
.mapband .gfilter a{background:var(--paper)}
.mapband .mapbox{border:0;background:var(--paper)}
/* island page */
.ihero2 .sc-word{color:var(--ink)}
.i2-bar{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding-top:26px}
.i2-gd{font-size:24px!important;margin:6px 0 0!important;color:var(--ink-2)}
.i2-facts{display:flex;gap:28px;justify-content:center;margin:0;font:400 16px var(--sans);color:var(--ink-2)}
.i2-facts b{font:400 30px var(--serif);color:var(--ink);margin-right:4px}
.i2-act{display:flex;gap:10px;flex-wrap:wrap}
/* footer on dark ground */
.foot{background:var(--ink);color:#e9e6df;margin-top:140px!important;padding:48px 0 56px!important}
.foot a{color:#e9e6df}
.foot .brand b{color:#fff}
.foot .brand .rule{background:#3a3a3a}
.foot .brand img{filter:invert(1)}
.foot .gd{color:#bdb9b0!important}
@media (max-width:1020px){
  .hero2 .scene .sc-over{position:static;width:auto;color:var(--ink);padding:24px var(--gut) 0}
  .hero2 .scene{overflow:visible;aspect-ratio:auto}
  .hero2 .scene .sc-bg,.hero2 .scene .sc-land{position:relative;aspect-ratio:var(--ar);height:auto}
  .hero2 .scene .sc-land{position:absolute;top:0;height:auto}
  .hero2 .scene::after{display:none}
  .hero2 .hero-sub,.hero2 .hero-search label{color:var(--ink)!important}
  .hero2 .searchbox{border-color:var(--ink)}
  .sc-voice{position:static;margin:18px var(--gut) 0;max-width:none}
  .hero2 .scene .sc-cap{top:auto;bottom:auto}
  .f2-text a{grid-template-columns:1fr}.f2-d{grid-column:1;grid-row:auto}
  .mb-grid{grid-template-columns:1fr}
  .i2-bar{grid-template-columns:1fr;gap:16px}.i2-facts{justify-content:flex-start}
}
.hero2{position:relative}
.hero2 > .sc-over{position:absolute;z-index:3;left:max(var(--gut),4vw);bottom:5vw;width:min(470px,38vw);color:#fff}
.hero2 > .sc-voice{position:absolute;right:4vw;top:4vw}
@media (max-width:1020px){
  .hero2 .scene{overflow:hidden!important;aspect-ratio:var(--ar)!important}
  .hero2 .scene .sc-bg,.hero2 .scene .sc-land{position:absolute!important;height:100%!important;aspect-ratio:auto!important}
  .hero2 > .sc-over{position:static;width:auto;color:var(--ink);padding:24px var(--gut) 0}
  .hero2 > .sc-voice{position:static;margin:18px var(--gut) 0;max-width:none}
}
.i2-h1{margin:0 0 6px!important}
.foot .brand small{color:#ff8a7f!important}

/* v12 */
.ill .ink{fill:var(--ink);stroke:var(--ink);stroke-width:1.4}
.ill .letter{transition:transform .6s cubic-bezier(.3,.6,.2,1),opacity .5s}
.begin2 a:hover .ill .letter{transform:translate(-28px,9px) scale(.9);opacity:.15}
.begin2 a:hover .ill .smoke{transform:translateY(-6px);opacity:.5}
.gdhello{font:italic 400 22px/1.2 var(--text-serif);color:var(--ink-2);margin:0 0 4px}
.firstbadge{display:inline-block;font:italic 400 18px var(--text-serif);color:var(--red);margin:0 0 6px}
.ill.lost{width:150px;height:auto}
.scene .sc-cap{font-size:14px}
/* mobile hero: one focus (the title in the scene), one action */
@media (max-width:1020px){
  .hero2 .scene .sc-cap{display:none}
  .hero2 > .sc-voice{display:none}
  .hero2 > .sc-over{padding-top:20px}
  .hero2 .hero-sub{font-size:17px!important;margin:0 0 18px!important;color:var(--ink-2)!important}
  .hero2 .hero-search label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hero2 .cover-actions{margin-top:12px}
  .hero2 .cover-actions .btn{background:transparent;border-color:transparent;color:var(--red);padding:0;min-height:40px;font-weight:600;text-decoration:underline;text-underline-offset:.25em}
  .hero2 .cover-actions .btn::after{display:none}
}
@media (max-width:600px){
  .demobar .wrap{flex-wrap:nowrap;gap:8px;min-height:36px;overflow-x:auto}
  .demobar strong{display:none}
  .demobar .roles button{padding:4px 8px;font-size:12.5px;white-space:nowrap}
  .demobar .link{font-size:12.5px;white-space:nowrap}
  .demobar .spacer{display:none}
}
@media (max-width:600px){.demobar .hs{display:none}.demobar .wrap{justify-content:space-between}}
/* mobile hero v2: one full-screen composition, everything back in its place */
@media (max-width:1020px){
  .hero2{position:relative}
  .hero2 .scene{aspect-ratio:auto!important;height:calc(100svh - 114px);min-height:560px;overflow:hidden!important}
  .hero2 .scene .sc-bg,.hero2 .scene .sc-land{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;object-fit:cover;object-position:68% 50%}
  .hero2 .scene::after{display:block!important;height:58%}
  .hero2 > .sc-over{position:absolute!important;left:20px;right:20px;bottom:22px;width:auto;padding:0!important;color:#fff;z-index:3}
  .hero2 .hero-sub{color:#fff!important;font-size:16.5px!important;margin:0 0 14px!important}
  .hero2 .searchbox{border-color:#fff}
  .hero2 .cover-actions{margin-top:12px}
  .hero2 .cover-actions .btn{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important;padding:0 18px!important;min-height:46px;text-decoration:none!important;width:100%;justify-content:center}
  .hero2 > .sc-voice{display:flex!important;position:absolute!important;top:14px;right:14px;left:auto;margin:0;max-width:230px;padding:7px 12px 7px 7px;z-index:3}
  .hero2 > .sc-voice b{font-size:15px}.hero2 > .sc-voice span{font-size:12px}
  .hero2 > .sc-voice .vplay{width:32px;height:32px}
}
/* where to begin v3: four islands on one ferry route */
.beginwrap{position:relative}
.route{position:absolute;pointer-events:none;overflow:visible}
.route path{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.r-d{left:0;right:0;top:0;width:100%;height:220px}
.r-m{display:none}
.begin2{position:relative;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0 24px!important}
.begin2 li:nth-child(even){margin-top:80px}
.begin2 a{grid-template-rows:auto auto 1fr!important;padding:0!important;text-align:center;justify-items:center}
.plate{width:170px;height:170px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;margin:0 auto 22px;position:relative;transition:transform .5s cubic-bezier(.3,.6,.2,1),background .3s}
.plate::after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--rule)}
.begin2 a:hover .plate{transform:translateY(-6px);background:#fff}
.plate .ill{width:128px!important;height:auto!important;margin:0!important}
.begin2 .bt{font-size:30px!important;white-space:nowrap}
.begin2 .bd{max-width:25ch;margin:0 auto;font-size:17px!important}
@media (max-width:1020px){
  .r-d{display:none}
  .r-m{display:block;left:0;top:0;width:100%;height:100%}
  .begin2{grid-template-columns:1fr!important;gap:34px!important}
  .begin2 li:nth-child(even){margin-top:0}
  .begin2 a{display:grid!important;grid-template-columns:132px 1fr!important;grid-template-rows:auto 1fr!important;column-gap:20px;align-items:center;text-align:left;justify-items:start;border:0!important}
  .begin2 a .plate{grid-row:1/3;width:132px;height:132px;margin:0}
  .begin2 a .plate .ill{width:100px!important}
  .begin2 a .bt{align-self:end;font-size:26px!important;margin:0 0 6px!important}
  .begin2 a .bd{align-self:start;margin:0;font-size:16px!important}
  .begin2 li:nth-child(even) a{grid-template-columns:1fr 132px!important;text-align:right;justify-items:end}
  .begin2 li:nth-child(even) a .plate{grid-column:2}
  .begin2 li:nth-child(even) a .bt,.begin2 li:nth-child(even) a .bd{grid-column:1}
  .hero2 > .sc-voice{max-width:270px}
}
@media (max-width:1020px){
  .begin2 a{grid-template-columns:118px 1fr!important;column-gap:18px}
  .begin2 li:nth-child(even) a{grid-template-columns:1fr 118px!important}
  .begin2 a .plate{width:110px;height:110px;margin:7px}
  .begin2 a .plate .ill{width:84px!important}
  .begin2 a .bt{font-size:24px!important}
}

/* v13: the four moments that should feel cared for */
.formcard legend.legend{font:400 34px/1.1 var(--serif)!important}
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kind{position:relative}
.kind input{position:absolute;opacity:0;inset:0;cursor:pointer}
.kind label{display:grid;justify-items:center;text-align:center;gap:4px;padding:20px 12px 18px;border:1px solid transparent;cursor:pointer;transition:background .25s,border-color .25s}
.kind label b{font:400 22px/1.15 var(--serif);margin-top:8px}
.kind label > span:last-child{font-size:14.5px;color:var(--ink-2);line-height:1.35;max-width:22ch}
.plate.sm{width:118px;height:118px}
.plate.sm .ill{width:92px!important}
.plate.sm::after{inset:-5px}
.kind label:hover .plate{background:#fff;transform:translateY(-4px)}
.kind input:checked + label{border-color:var(--ink);background:#fff}
.kind input:checked + label .plate{background:var(--paper)}
.kind input:checked + label .plate::after{border-color:var(--red);border-width:2px}
.kind input:focus-visible + label{border-color:var(--red);background:#f6e2dc}
.invite{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px;align-items:center;padding:20px 0}
.inv-art{display:flex;align-items:center}
.inv-art .plate{margin:0;flex:none}
.inv-route{flex:1;height:40px;min-width:60px}
.inv-route path{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.inv-empty{width:118px;height:118px;border-radius:50%;border:1.5px dashed var(--ink-3);display:grid;place-items:center;flex:none;font:300 44px var(--serif);color:var(--ink-3);transition:border-color .3s,color .3s,transform .4s}
.invite:hover .inv-empty{border-color:var(--red);color:var(--red);transform:scale(1.04)}
.inv-text h3{font:400 clamp(30px,2.6vw,40px)/1.1 var(--serif);margin:0 0 10px}
.inv-text p{font-size:18px;color:var(--ink-2);max-width:44ch;margin:0 0 20px}
.acct-plate{display:grid;width:150px;height:150px;margin:44px 0 22px}
.acct-plate .ill{width:112px!important}
@media (max-width:760px){.kinds{grid-template-columns:1fr 1fr}.invite{grid-template-columns:1fr;gap:24px}.inv-art .plate{width:120px;height:120px}.inv-empty{width:96px;height:96px}}
.plate.sm .ill{width:112px!important}
.peak .mapwrap{background:#f4f2ec}
.peak .mapwrap .chart .sea{fill:#f4f2ec!important}
.peak .mapwrap .chart rect.sea ~ *{}
.peak .counter-l{font-size:16px!important;line-height:1.4!important;max-width:24ch}
.inv-route{flex:1 1 0;width:0}

/* v14: the voyage */
.voyage{list-style:none;margin:18px 0 22px;padding:0 0 46px;display:grid;grid-template-columns:52px minmax(40px,1fr) 52px minmax(40px,1fr) 52px;align-items:center;max-width:560px}
.vstop{position:relative;display:block}
.vdot{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--paper-2);position:relative;transition:transform .4s}
.vdot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--rule)}
.vdot svg{width:28px;height:28px}
.vdot .f{fill:var(--paper);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.vdot .s{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vdot .thin{stroke-width:1.1}
.vl{position:absolute;top:62px;left:50%;transform:translateX(-50%);width:150px;text-align:center;font:400 17px/1.15 var(--serif);color:var(--ink)}
.vs{position:absolute;top:84px;left:50%;transform:translateX(-50%);width:150px;text-align:center;font:400 13.5px/1.3 var(--sans);color:var(--ink-2)}
.vstop:first-child .vl,.vstop:first-child .vs{left:0;transform:none;text-align:left}
.vstop:last-child .vl,.vstop:last-child .vs{left:auto;right:0;transform:none;text-align:right}
.vstop.todo .vdot{background:transparent}
.vstop.todo .vdot::after{border-style:dashed;border-color:#b9b4a8}
.vstop.todo .vdot svg{opacity:.35}
.vstop.todo .vl{color:var(--ink-3)}
.vstop.done .vdot{background:var(--paper-2)}
.vstop.now .vdot{background:#fff}
.vstop.now .vdot::after{border:2px solid var(--signal);inset:-6px}
.vstop.now .vl{color:var(--red)}
.vstop.ask .vdot::after{border-color:var(--red-dark)}
.vstop.arrived .vdot{background:var(--ink)}
.vstop.arrived .vdot .f{fill:var(--paper);stroke:var(--paper)}
.vstop.arrived .vdot .s{stroke:var(--paper)}
.vgap{height:20px;display:block;margin:0 8px}
.vgap svg{width:100%;height:100%;overflow:visible}
.vgap path{fill:none;stroke:#b9b4a8;stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.vgap.done path{stroke:var(--signal)}
@media (prefers-reduced-motion:no-preference){.vstop.now .vdot::after{animation:vpulse 2.6s ease-in-out infinite}}
@keyframes vpulse{50%{inset:-9px;opacity:.55}}
.mine .mbody h3{margin-bottom:2px!important}
.mine .mmeta{margin:0 0 6px!important}
@media (max-width:600px){.voyage{grid-template-columns:44px minmax(24px,1fr) 44px minmax(24px,1fr) 44px}.vdot{width:44px;height:44px}.vdot svg{width:24px;height:24px}.vl{top:54px;font-size:15px;width:110px}.vs{top:74px;font-size:12.5px;width:110px}}
.voyage .done,.voyage .vgap{padding:0!important}
.vl{top:66px}.vs{top:88px}
.voyage{padding-bottom:52px}
@media (max-width:600px){.vl{top:56px}.vs{top:76px}}
.voyage{padding-left:6px;padding-right:6px;margin-left:-6px}@media (max-width:600px){.voyage{padding-bottom:64px}}
/* voyage v2: equal columns, labels centred under their stop, never past the margin; quieter current stop */
.voyage{--d:40px;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;position:relative;max-width:520px;margin:16px 0 20px!important;padding:0!important}
.voyage .vgap{position:absolute;top:calc(var(--d)/2 - 10px);height:20px;margin:0;width:calc(33.333% - var(--d) - 12px)}
.voyage .vgap:nth-of-type(1){left:calc(16.667% + var(--d)/2 + 6px)}
.voyage .vgap:nth-of-type(2){left:calc(50% + var(--d)/2 + 6px)}
.voyage .vstop{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.voyage .vdot{width:var(--d);height:var(--d)}
.voyage .vdot::after{inset:-4px}
.voyage .vdot svg{width:21px;height:21px}
.voyage .vl,.voyage .vs,.voyage .vstop:first-child .vl,.voyage .vstop:first-child .vs,.voyage .vstop:last-child .vl,.voyage .vstop:last-child .vs{position:static;transform:none;width:auto;text-align:center;left:auto;right:auto}
.voyage .vl{margin-top:10px;font-size:16px}
.voyage .vs{margin-top:2px;font-size:13px}
.voyage .vstop.now .vdot::after{border:1.5px solid var(--ink);inset:-4px;animation:none!important}
.voyage .vstop.now .vl{color:var(--ink)}
.voyage .vstop.ask .vl{color:var(--red-dark)}
.voyage .vstop.ask .vdot::after{border-color:var(--red-dark)}
@media (max-width:600px){.voyage{--d:34px}.voyage .vl{font-size:14.5px}.voyage .vs{font-size:12px}.voyage .vdot svg{width:18px;height:18px}}
.voyage{align-items:start!important}
.mapbox,.mapbox *{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.scene .sc-bg,.scene .sc-land{object-position:center top}
.scene .sc-bg,.scene .sc-land{object-position:center var(--oy,0%)}