/* dnakhla.com — the Pond design system.
   Cream ground, ink, one grey family, one forest-green accent, 1px rules.
   Serif display voice (Fraunces) over Inter body. No cards, no shadows, no
   gradients, no border radii, no icons but the ring glyph. Spacing comes only
   from the --s scale. Contrast: text never pairs small size with --faint
   (2.73:1); text roles use --mid (4.65:1) or darker. See DESIGN.md in the
   redesign workspace and PAGE-TEMPLATE.md for the page contract.
   Replaced the dark-theme system wholesale 2026-08-30 (git: prior version at
   bcb2a88). */

:root{
  --cream:#FAF6EC; --cream-translucent:rgba(250,246,236,0.7); --ink:#16171A; --mid:#4E4F53; --faint:#9A968C;
  /* --mid darkened from #6E6F73 (4.65:1, cleared the AA floor by 0.15 and still
     read thin) to #4E4F53 (7.58:1). Every automated check passed the old value;
     Daniel read the page and said the text was hard to read. Body prose, captions
     and labels all resolve to --mid, so this is the single highest-leverage
     legibility token on the site. Passing WCAG is a floor, not a reading experience. */
  --accent:#1E5B3E; --rule:#E5E0D2;
  --text-inverse:#FAF6EC; /* stage banner text on accent ground */
  --s1:8px; --s2:16px; --s3:26px; --s4:42px; --s5:68px; --s6:110px; --s7:176px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gutter:clamp(24px,5vw,88px);
  /* Legacy token aliases — DO NOT DELETE. The reasoning-layer (<details>)
     content is recovered byte-verbatim from the pre-redesign git bodies and
     still references these retired names in inline styles. Aliasing them here
     keeps that content verbatim while mapping it onto pond values; rewriting
     the fragments instead would silently de-verbatim recovered copy. */
  --space-xs:4px;--space-sm:var(--s1);--space-md:var(--s2);--space-lg:var(--s3);--space-2xl:var(--s5);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-primary:var(--ink);--text-tertiary:var(--mid);--border-ghost:var(--rule);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%}
pre{overflow-x:auto;max-width:100%;box-sizing:border-box}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--cream);padding:var(--s1) var(--s2);z-index:100}
.skip-link:focus{left:0}

.wrap,.container{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

/* ---- nav (base.njk markup) ---- */
.nav{position:relative;z-index:5;background:transparent}
.nav-inner{max-width:1440px;margin:var(--s2) auto 0;padding:var(--s2) var(--gutter);display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);background:var(--cream-translucent);border-radius:4px}
.nav-logo{font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.nav-links a{font-size:15px;color:var(--mid);text-decoration:none;padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--ink);border-bottom-color:var(--accent)}
.nav-links a.active{color:var(--ink);border-bottom-color:var(--accent)}

/* visible breadcrumb bar retired: the pond pages carry their own crumb label
   and the BreadcrumbList JSON-LD stays in base.njk for search */
.breadcrumbs{display:none}

/* ---- header background for readability over pond canvas ---- */
.head .main,
.head-content{
  background:rgba(250,246,236,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:var(--s3) var(--s4);
  border-radius:4px;
}
@media (max-width:560px){
  .head .main,
  .head-content{
    padding:var(--s2) var(--s2);
  }
}

/* ---- type ---- */
h1{font-family:var(--serif);font-size:clamp(2.3rem,4.6vw,3.7rem);font-weight:440;line-height:1.02;letter-spacing:-.012em;margin:0 0 var(--s3);font-optical-sizing:auto}
h2{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:460;line-height:1.12;letter-spacing:-.008em;margin:0 0 var(--s3);max-width:26ch;font-optical-sizing:auto}
h3{font-size:17px;font-weight:500;margin:0 0 var(--s1)}
p{margin:0 0 var(--s2);max-width:64ch;color:var(--mid)}
p.lead{font-size:clamp(1.1rem,1.9vw,1.35rem);line-height:1.5;color:var(--ink);max-width:52ch}
a{color:inherit}
main a{text-decoration:none;border-bottom:1px solid var(--rule);transition:color .2s,border-color .2s}
main a:hover,main a:focus-visible{color:var(--accent);border-color:var(--accent)}

/* ---- sections ---- */
section{padding:var(--s6) 0;border-top:1px solid var(--rule);position:relative;background:var(--cream)}
.label{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;color:var(--mid);margin:0 0 var(--s5);text-transform:uppercase;background:var(--cream-translucent);padding:2px 8px;border-radius:3px}
.label::before{
  content:'';display:inline-block;width:13px;height:13px;margin-right:10px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%239A968C'%3E%3Ccircle cx='10' cy='10' r='3'/%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Ccircle cx='10' cy='10' r='9'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
}
section[data-num]::after{
  content:attr(data-num);position:absolute;top:var(--s4);right:0;
  font-family:var(--serif);font-size:clamp(4.5rem,10vw,9rem);line-height:1;
  color:var(--ink);opacity:.05;pointer-events:none;font-weight:600}
.pull-q{font-family:var(--serif);font-style:italic;font-weight:420;
  font-size:clamp(1.8rem,3.8vw,3.1rem);line-height:1.18;color:var(--ink);
  max-width:22ch;margin:0}

/* ---- grids and lists ---- */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) var(--s4);margin-top:var(--s5)}
.col .num{display:inline-block;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:var(--s2);letter-spacing:.08em;padding:2px 6px 2px 0;padding-left:0}
.col p{font-size:15px;margin:0}

.row{display:grid;grid-template-columns:minmax(0,8rem) minmax(0,1fr) auto;gap:var(--s4);align-items:baseline;padding:var(--s4) 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit;transition:background .2s;border-top:0}
a.row{border-bottom:1px solid var(--rule)}
.row:first-of-type{border-top:1px solid var(--rule)}
.row .nm{font-size:19px;font-weight:500;letter-spacing:-.01em}
.row .ds{font-size:15px;color:var(--mid);margin:0;max-width:58ch}
.row .go{font-size:13px;color:var(--mid);white-space:nowrap;transition:color .2s}
.row:hover,.row:focus-visible{background:rgba(30,91,62,.04)}
.row:hover .go,.row:focus-visible .go{color:var(--accent)}

.record{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5) var(--s4);margin-top:var(--s5)}
.record .yr{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--mid);margin-bottom:var(--s2);text-transform:uppercase;background:var(--cream-translucent);padding:2px 6px;border-radius:3px}
.record p{font-size:15px;margin:0}

/* ---- system schematics ---- */
.dg{display:block;margin-top:var(--s3);width:100%;max-width:560px;height:auto}
.dg text{font:500 10.5px var(--sans);fill:var(--mid);letter-spacing:.03em}
.dg .nd{fill:none;stroke:var(--ink);stroke-width:1;opacity:.55}
.dg .ln{stroke:var(--ink);stroke-opacity:.4;stroke-width:1;fill:none}
.dg .gt{stroke:var(--accent);opacity:1}
.dg .gtx{fill:var(--accent)}
.dg .cap{font-size:9.5px;fill:var(--mid);letter-spacing:.08em}

/* ---- imagery ---- */
.arch{margin:var(--s2) 0 var(--s3)}
.arch img{width:100%;max-width:960px;display:block;border:1px solid var(--rule);background:var(--cream);padding:var(--s2)}

.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.shots figure{margin:0}
.shots img{width:100%;height:auto;display:block;border:1px solid var(--rule)}
.shots figcaption,figure figcaption{font-size:12px;letter-spacing:.08em;color:var(--mid);margin-top:var(--s1)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin-top:var(--s4)}
.strip img{width:100%;height:210px;object-fit:cover;object-position:top;display:block;border:1px solid var(--rule)}
.chart-img{width:100%;max-width:640px;display:block;border:1px solid var(--rule);margin-top:var(--s4)}

/* ---- one-viewport lab pages ---- */
.head{position:relative;flex:1;display:flex;flex-direction:column;padding:0 var(--gutter)}
body.onepager{min-height:100vh;display:flex;flex-direction:column;font-size:16px;line-height:1.55}
body.onepager .nav-inner{padding-top:var(--s3)}
#pond{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.main{position:relative;z-index:1;margin:auto 0;padding:var(--s4) 0;max-width:1160px}
.crumb{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--mid);margin:0 0 var(--s2);text-transform:uppercase}
body.onepager h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1;margin-bottom:var(--s2)}
body.onepager .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);max-width:56ch;margin-bottom:var(--s3)}
body.onepager .dg{max-width:620px;max-height:172px;margin:0 0 var(--s3)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3) var(--s4);border-top:1px solid var(--rule);padding-top:var(--s3)}
.tiles .yr{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--ink);margin-bottom:var(--s1);text-transform:uppercase;background:var(--cream-translucent);padding:2px 6px;border-radius:3px}
.tiles p{font-size:14px;margin:0;color:var(--mid);max-width:34ch}
.links{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap;margin-top:var(--s3);align-items:baseline}
.links a{font-size:14px;color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:color .2s,border-color .2s}
.links a:hover{color:var(--accent);border-color:var(--accent)}
.links .mail{color:var(--accent);border-color:var(--accent)}

/* ---- the reasoning layer: collapsed depth under the digest ---- */
.depth{position:relative;z-index:1;max-width:1160px;padding:var(--s3) 0 var(--s4);border-top:1px solid var(--rule)}
.depth .label{margin-bottom:var(--s2)}
.depth details{border-bottom:1px solid var(--rule)}
.depth summary{cursor:pointer;list-style:none;padding:var(--s2) 0;font-size:13px;letter-spacing:.06em;color:var(--ink);font-weight:500}
.depth summary::-webkit-details-marker{display:none}
.depth summary::before{content:'+';display:inline-block;width:1.2em;color:var(--mid);transition:transform .2s}
.depth details[open] summary::before{content:'\2212'}
.depth details p{font-size:14.5px;max-width:64ch;padding:0 0 var(--s2) 1.2em}
.depth .sys-body{padding:0 0 var(--s3) 1.2em}
.depth .sys-body > p{padding-left:0}
.depth .sys-lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin:var(--s3) 0 var(--s1);padding:0 !important;display:block}
.depth .sys-body > .sys-lbl:first-child{margin-top:0}
.depth .sys-opts{list-style:none;padding:0;margin:0 0 var(--s3);display:flex;flex-direction:column;gap:var(--s1);max-width:64ch}
.depth .sys-opts li{list-style:none;padding:10px 14px;border-radius:4px;border:1px solid var(--rule);background:rgba(250,246,236,0.6);font-size:14px;line-height:1.5;color:var(--ink);display:flex;gap:12px;align-items:flex-start}
.depth .sys-opts li.pick,.depth .sys-opts li.is-chosen{border-color:rgba(30,91,62,0.35);background:rgba(30,91,62,0.06)}
.depth .opt-tag{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:3px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.depth .opt-tag.rejected{color:var(--mid);background:rgba(154,150,140,0.18)}
.depth .opt-tag.chosen{color:var(--accent);background:rgba(30,91,62,0.16)}
.depth .opt-content{flex:1}
.depth .opt-title{font-weight:600;color:var(--ink);display:inline;margin-right:6px}
.depth .opt-desc{color:var(--mid);display:inline}
.depth .scan-list{padding-left:1.4em;margin:0 0 var(--s2);color:var(--mid);font-size:14.5px;line-height:1.6;max-width:64ch}
.depth .scan-list li{margin-bottom:8px}
.depth details ul:not(.sys-opts):not(.scan-list){padding-left:1.4em;margin:0 0 var(--s2);color:var(--mid);font-size:14.5px;line-height:1.6;max-width:64ch}
.depth details ul:not(.sys-opts):not(.scan-list) li{margin-bottom:6px}
.pen-run{background:rgba(22,23,26,0.04);border:1px solid var(--rule);border-radius:4px;padding:10px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:13px;line-height:1.5;color:var(--ink);margin:0 0 var(--s2);overflow-x:auto}
.pen-run .cmd{display:block;margin-bottom:4px;color:var(--mid)}
.pen-run .pen{color:var(--accent);font-weight:600}
.pen-run .k{color:var(--accent)}
.sys-status{font-size:11px;font-weight:500;color:var(--mid);letter-spacing:.04em}

/* ---- hero (home) ---- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;padding:var(--s5) 0 var(--s6)}
.hero-content{position:relative;z-index:1;max-width:38rem;background:var(--cream-translucent);padding:var(--s3) var(--s4);border-radius:4px}
.hero h1{font-size:clamp(3rem,6.8vw,5.8rem);font-weight:430;line-height:.99;letter-spacing:-.015em;max-width:13ch}
.hero p{font-size:16px;color:var(--mid);margin:0 0 var(--s2);max-width:42ch}
.cta{display:inline-block;margin-top:var(--s4);font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px;transition:color .2s,border-color .2s}
.cta:hover,.cta:focus-visible{color:var(--accent);border-color:var(--accent)}
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:50}

.roll{font-size:12.5px;letter-spacing:.14em;line-height:2.2;color:var(--mid);max-width:72ch}
/* the roll is where he has been; the paragraph above it is where he has worked.
   labelling it keeps the section a credibility claim rather than a travel list. */
.roll-intro{display:block;font-size:13px;color:var(--mid);margin:var(--s4) 0 var(--s1);padding:0}

/* ---- contact + footer (base.njk markup) ---- */
.contact{padding:var(--s7) 0 var(--s6)}
.contact a{font-size:clamp(1.4rem,3vw,2.1rem);font-weight:500;letter-spacing:-.02em;text-decoration:none;color:inherit;border-bottom:1px solid var(--rule)}
.contact a:hover,.contact a:focus-visible{border-bottom-color:var(--accent);color:var(--accent)}
.footer{border-top:1px solid var(--rule);position:relative;z-index:1}
.footer-inner{max-width:1440px;margin:0 auto;padding:var(--s4) var(--gutter) var(--s5);font-size:13px;color:var(--mid);display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;align-items:baseline}
.footer-brand{font-weight:600;color:var(--ink);font-size:13px}
.footer-tagline{max-width:44ch}
.footer-links{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0}
.footer-links a{text-decoration:none;border-bottom:1px solid transparent}
.footer-links a:hover{border-bottom-color:var(--accent);color:var(--ink)}
.footer-copy{color:var(--mid)}
body.onepager .footer-inner{padding:var(--s2) var(--gutter) var(--s3);font-size:12px}

/* ---- motion ---- */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* ---- responsive ---- */
@media (max-width:940px){
  .hero{min-height:72vh}
  .cols,.record{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:minmax(0,1fr);gap:var(--s1)}
  .row .go{margin-top:var(--s1)}
  .shots{grid-template-columns:minmax(0,1fr)}
  .strip,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.onepager{min-height:0}
  .nav-links{gap:var(--s2)}
}

/* Phones: the wordmark plus four links do not fit on one line at 390px, and the
   overflow pushed Contact off the right edge, so the one link that converts was
   the one you could not reach. Wrap instead: at four links this reads as the
   pond answer, so the orphaned drawer was deleted rather than restored. If the
   nav ever outgrows a clean wrap at 390px, build one fresh, do not resurrect. */
@media (max-width:560px){
  .nav-inner{flex-wrap:wrap;gap:var(--s1) var(--s2)}
  /* flex:0 0 100% not width:100% — a flex item with width:100% still shrinks to
     fit the row, so the links never wrapped and Contact stayed clipped. */
  .nav-links{flex:0 0 100%;flex-wrap:wrap;gap:var(--s1) var(--s2)}
  .nav-logo{white-space:nowrap}
  .strip,.tiles{grid-template-columns:minmax(0,1fr)}
}