:root{
  --sand:#E8DCC8;
  --sand-deep:#DCCCB2;
  --atlantic:#0C2A3B;
  --atlantic-mid:#14425C;
  --foam:#F7F3EC;
  --seaglass:#7FA8A0;
  --coral:#C9776A;
  --ink:#16232B;
  --dim:#6E7C84;
  --rule:rgba(12,42,59,.16);

  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,"Roboto Mono",monospace;

  --max:1120px;
  --pad:clamp(1.1rem,4vw,2.6rem);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--foam);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.14;margin:0}
p{margin:0 0 1.05em}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.dim{color:var(--dim)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:.6rem;top:.6rem;background:var(--atlantic);color:var(--foam);padding:.5rem .8rem;z-index:99}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px}

/* ---------------------------------------------------------------- masthead */
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem var(--pad);border-bottom:1px solid var(--rule);
  background:var(--foam);position:sticky;top:0;z-index:20;flex-wrap:wrap;
}
.wordmark{
  font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.16em;
  text-decoration:none;display:flex;gap:.42em;color:var(--atlantic);
}
.wordmark .mk{letter-spacing:.42em;color:var(--seaglass)}
.nav{display:flex;gap:1.15rem;flex-wrap:wrap}
.nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--dim);padding:.2rem 0;border-bottom:1px solid transparent;
}
.nav a:hover{color:var(--atlantic);border-color:var(--coral)}

.crumbs{
  max-width:var(--max);margin:0 auto;padding:.9rem var(--pad) 0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--rule)}
.crumbs a:hover{border-color:var(--coral)}

main{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 4rem}
body.home main{max-width:none;padding:0 0 4rem}
body.home .band{max-width:var(--max);margin:0 auto;padding:3.4rem var(--pad) 0}

/* ---------------------------------------------------------------- hero */
.hero{
  position:relative;min-height:min(88vh,760px);display:grid;place-items:center;
  background:linear-gradient(#0A2333 0%,var(--atlantic-mid) 44%,#2E5A70 58%,var(--sand-deep) 59%,var(--sand) 100%);
  overflow:hidden;text-align:center;
}
.sea{position:absolute;inset:0;pointer-events:none}
.wave{
  position:absolute;left:-25%;width:150%;height:52%;top:36%;
  border-radius:44% 46% 0 0 / 90% 88% 0 0;
  background:linear-gradient(180deg,rgba(247,243,236,.92),rgba(247,243,236,.34) 42%,rgba(247,243,236,0));
  animation:wash 9s cubic-bezier(.36,.02,.2,1) infinite;
}
.wave.w2{animation-duration:11.5s;animation-delay:-3.4s;opacity:.55;height:46%;top:40%}
.wave.w3{animation-duration:14s;animation-delay:-7s;opacity:.3;height:58%;top:33%}
@keyframes wash{
  0%{transform:translateY(46%) scaleY(.55);opacity:0}
  18%{opacity:.95}
  46%{transform:translateY(-4%) scaleY(1.05);opacity:.85}
  74%{transform:translateY(30%) scaleY(.7);opacity:.35}
  100%{transform:translateY(52%) scaleY(.5);opacity:0}
}
.hero-text{position:relative;z-index:2;padding:2rem var(--pad);width:min(680px,100%)}
.tag{font-family:var(--display);font-style:italic;font-size:clamp(1rem,2.6vw,1.3rem);color:var(--atlantic);opacity:.85;margin-bottom:1.5rem}
.search{position:relative}
.search input{
  width:100%;padding:.92rem 1.05rem;font-size:.98rem;font-family:var(--sans);
  border:1px solid rgba(12,42,59,.3);border-radius:2px;background:rgba(247,243,236,.94);
  color:var(--ink);
}
.search input::placeholder{color:var(--dim)}
.results{
  position:absolute;left:0;right:0;top:calc(100% + .35rem);background:var(--foam);
  border:1px solid var(--rule);text-align:left;max-height:min(52vh,340px);overflow:auto;z-index:5;
}
.results a{display:block;padding:.6rem .9rem;text-decoration:none;border-bottom:1px solid var(--rule)}
.results a:last-child{border-bottom:0}
.results a:hover,.results a:focus{background:var(--sand)}
.results b{display:block;font-family:var(--display);font-size:1rem;font-weight:600}
.results span{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.stats{margin:1.35rem 0 .5rem;color:var(--atlantic);opacity:.7}
.rotator{position:relative;height:2.6em;color:var(--atlantic);opacity:.72}
.rot-item{position:absolute;inset:0;display:grid;gap:.15em;opacity:0;transition:opacity .9s}
.rot-item.on{opacity:1}
.rot-item b{font-size:.82rem;letter-spacing:.2em}
.rot-item em{font-style:normal;font-size:.68rem;opacity:.7}

/* ---------------------------------------------------------------- headings */
.band>h2,section>h2{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:500;padding-bottom:.55rem;border-bottom:1px solid var(--rule);
  margin:0 0 1.35rem;
}
.lede{font-family:var(--display);font-size:1.12rem;max-width:56ch;margin-bottom:1.2rem}
.more{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:2px}

/* ---------------------------------------------------------------- cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.5rem 1.25rem}
.card{text-decoration:none;display:grid;gap:.7rem}
.card-fp{display:block;border:1px solid var(--rule);background:var(--atlantic-mid);overflow:hidden}
.card-fp svg{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.card:hover .card-fp{border-color:var(--coral)}
.card-body{display:grid;gap:.22rem}
.card-name{font-family:var(--display);font-size:1.08rem;font-weight:600;line-height:1.2}
.card-where{font-size:.68rem;color:var(--dim)}
.card-dna{font-size:.66rem;color:var(--seaglass);text-transform:none;letter-spacing:.02em;
  font-family:var(--mono);line-height:1.45}
.tag{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--rule);padding:.1em .4em;margin-left:.45em;vertical-align:.18em}

.places{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}
.place-card{
  display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  padding:.85rem 1rem;border:1px solid var(--rule);text-decoration:none;background:#fff;
  font-family:var(--display);font-size:1.02rem;
}
.place-card:hover{border-color:var(--coral);background:var(--sand)}
.place-card .mono{font-size:.64rem}

.worldlist{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.worldlist li{break-inside:avoid;padding:.34rem 0;border-bottom:1px solid var(--rule);
  display:flex;justify-content:space-between;gap:.6rem}
.worldlist a{text-decoration:none;border-bottom:1px solid transparent}
.worldlist a:hover{border-color:var(--coral)}

/* ---------------------------------------------------------------- beach page */
.beach,.place,.world,.method{padding-top:2.2rem}
.beach-head,.place-head{margin-bottom:1.6rem}
.eyebrow{color:var(--seaglass);margin:0 0 .55rem}
.eyebrow a{text-decoration:none;border-bottom:1px solid var(--rule)}
.beach h1,.place-head h1{font-size:clamp(2rem,6vw,3.1rem);margin-bottom:.4rem}
.sub{color:var(--dim);margin:0 0 .7rem}
.dna{
  text-transform:none;letter-spacing:.02em;font-size:.8rem;color:var(--atlantic);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:.55rem 0;margin:0;
}
.counts{color:var(--dim);margin:0}

.fp{margin:1.8rem 0;border:1px solid var(--rule)}
.fp svg{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.fp figcaption{padding:.5rem .8rem;font-size:.66rem;color:var(--dim);background:var(--sand);
  font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.fp.is-schematic figcaption{color:var(--coral)}

.character{font-family:var(--display);font-size:clamp(1.2rem,3.4vw,1.55rem);line-height:1.42;
  max-width:34ch;margin:0 0 1.6rem}
.intro,.portrait{max-width:64ch}
.portrait p,.intro p{margin-bottom:1.1em}
.portrait p:first-child::first-letter{
  font-family:var(--display);float:left;font-size:3.05em;line-height:.82;
  padding:.06em .1em 0 0;color:var(--atlantic);
}

.flags{list-style:none;padding:0;margin:0 0 1.6rem;display:flex;flex-wrap:wrap;gap:.5rem}
.flag{font-family:var(--mono);font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;
  padding:.42rem .7rem;border:1px solid var(--rule);background:#fff}
.flag.danger{border-color:var(--coral);color:var(--coral);background:rgba(201,119,106,.07)}

/* video */
.video{margin:2.6rem 0}
.video-frame{
  display:grid;place-items:center;width:100%;aspect-ratio:16/9;position:relative;
  border:1px solid var(--rule);background:var(--atlantic-mid);cursor:pointer;padding:0;
}
.video-frame.placeholder{
  background:repeating-linear-gradient(-45deg,var(--sand) 0 12px,var(--sand-deep) 12px 24px);
  cursor:default;
}
.video-frame.placeholder .mono{color:var(--dim);font-size:.7rem}
.video-frame .play{width:64px;height:64px;border-radius:50%;background:var(--foam);position:relative}
.video-frame .play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:19px solid var(--atlantic);border-top:12px solid transparent;border-bottom:12px solid transparent;
}
.video-frame .dur{position:absolute;right:.7rem;bottom:.6rem;background:rgba(12,42,59,.82);
  color:var(--foam);padding:.18rem .45rem;font-size:.66rem}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-cap{font-size:.92rem;color:var(--dim);margin-top:.7rem;max-width:60ch}

/* record table */
.spec{margin:0;border-top:1px solid var(--rule)}
.spec-row{display:grid;grid-template-columns:minmax(110px,150px) 1fr;gap:1rem;
  padding:.72rem 0;border-bottom:1px solid var(--rule)}
.spec dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.spec dd{margin:0;font-size:.96rem}
.spec dd a{text-decoration:none;border-bottom:1px solid var(--rule)}
.spec dd a:hover{border-color:var(--coral)}
.spec .note{display:block;color:var(--dim);font-size:.86rem;margin-top:.3rem}

.notices ul{list-style:none;padding:0;margin:0}
.notices li{padding:.85rem 1rem;border-left:2px solid var(--coral);background:rgba(201,119,106,.06);
  margin-bottom:.6rem}
.notices .mono{display:block;margin-top:.35rem;font-size:.64rem}

.faq{margin:2.6rem 0}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:.85rem 0;font-family:var(--display);font-size:1.06rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--coral);font-family:var(--mono)}
.faq details[open] summary::after{content:"−"}
.faq details p{max-width:62ch;padding-bottom:.4rem;color:#2E3E47}

.related{margin:3rem 0}
.sources{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  border-top:1px solid var(--rule);padding-top:1rem;font-size:.66rem;color:var(--dim)}
.sources a{text-decoration:none;border-bottom:1px solid var(--rule)}

.distinguish{margin:2rem 0;padding:1.15rem 1.3rem;background:var(--sand);border-left:2px solid var(--seaglass)}
.distinguish p{max-width:62ch;margin:0}
.empty{color:var(--dim);font-style:italic}

.az{margin-bottom:2rem}
.az ul{list-style:none;padding:0;margin:0;columns:2;column-gap:2rem}
.az li{break-inside:avoid;display:flex;justify-content:space-between;gap:1rem;
  padding:.34rem 0;border-bottom:1px solid var(--rule)}
.az a{text-decoration:none}
.az a:hover{border-bottom:1px solid var(--coral)}
.az .mono{font-size:.62rem}

.method section{margin-bottom:1.9rem}
.method section p{max-width:64ch}

.foot{
  border-top:1px solid var(--rule);margin-top:3rem;padding:2.2rem var(--pad);
  background:var(--atlantic);color:var(--sand);
}
.foot p{margin:0 0 .45rem;font-size:.78rem}
.foot .dim{color:rgba(232,220,200,.55)}
.foot a{color:var(--sand)}

@media (max-width:640px){
  .worldlist,.az ul{columns:1}
  .spec-row{grid-template-columns:1fr;gap:.2rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .nav{gap:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .wave{animation:none;transform:translateY(6%);opacity:.7}
  .rot-item{transition:none}
  *{scroll-behavior:auto}
}

/* ---------------------------------------------------------------- brand */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wordmark{align-items:center;gap:.6rem}
.wm-mark{border-radius:50%;flex:0 0 auto}
.wm-text{display:flex;gap:.42em}
/* Fingerprints are files rather than inline markup, so the card reserves the
   box with an aspect ratio and the image fills it. Without the explicit ratio
   a lazily loaded card collapses to nothing and the grid jumps as it fills. */
.card-fp img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  background:var(--atlantic-mid)}

/* An outbound link to another register is a footnote, not a banner: quiet,
   after the beaches, and clearly leaving the site. */
.partner{margin:2.4rem 0 0;padding-top:1.1rem;border-top:1px solid var(--rule)}
.partner p{max-width:60ch;margin:0;color:var(--dim);font-size:.94rem}
.partner a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.partner a:hover{border-color:var(--coral)}
.partner a[href^="http"]::after{content:" ↗";font-size:.8em;color:var(--dim)}

/* HOUSE-RULING-05 §3.4: the local form of a name sits beside the English one
   once, quietly. It is data about the subject, not a second headline. */
.name-local{margin:.15rem 0 0;font-size:1.05rem;color:var(--dim);font-weight:400}
.spec dd [lang]{font-size:1.05em}

/* Codes from a sister register: the key is the durable half, so it leads. */
.codes{list-style:none;padding:0;margin:.4rem 0 .6rem;display:grid;gap:.25rem}
.codes .mono{color:var(--sand);margin-right:.5rem}

/* The computed composition paragraph on a place page. Set apart from the written
   intro because it is not written: a reader should be able to see which is which. */
.composition{max-width:64ch;padding-left:.9em;border-left:2px solid var(--rule,#d8dde3);
  color:var(--ink,inherit);font-size:.97em}
.composition .mono{white-space:nowrap}