/* lexiconbio.com — one stylesheet.
   Layout: a dark, full-bleed hero that is the signature wall (WebGL), with the
   headword block and a compound lookup over it; then dictionary entries on paper. */

:root{
  --paper:#F5F5F2; --panel:#FFFFFF; --ink:#15171A; --mute:#6A6F76; --line:#D7D8D2; --soft:#EBECE7;
  --orange:#EE4F1C; --blue:#2F5CD9;
  /* the wall and the hero follow the theme; wall.js reads the --wall-* tokens */
  --scrim:245,245,242;
  --wall-bg:#F5F5F2; --wall-mid:#EDEDE8; --wall-up:#EE4F1C; --wall-dn:#2F5CD9; --hi:#15171A;
  --glass:rgba(255,255,255,.84); --glass-line:rgba(0,0,0,.12);
  --pill-bg:rgba(245,245,242,.9); --pill-fg:#15171A; --cross:rgba(0,0,0,.35);
  --up-text:#D8420F; --dn-text:#2A51C8;
  --display:'Literata', Georgia, 'Times New Roman', serif;
  --reading:'Spectral', 'Literata', Georgia, serif;   /* blog posts; Substack's default body face, loaded by the post pages only */
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* dark follows the viewer's system setting; data-theme="light" or "dark" on <html> pins it (?theme=light in the URL) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --paper:#0F1113; --panel:#171A1D; --ink:#E7E5E0; --mute:#9AA0A7; --line:#2A2E33; --soft:#1B1F23; --orange:#FF6A3C; --blue:#7E9BFF; --scrim:14,16,19; --wall-bg:#0E1013; --wall-mid:#171A1F; --wall-up:#FF6A3C; --wall-dn:#4E7DFF; --hi:#FFFFFF; --glass:rgba(21,24,29,.82); --glass-line:rgba(255,255,255,.14); --pill-bg:rgba(14,16,19,.84); --pill-fg:#ECEAE4; --cross:rgba(255,255,255,.35); --up-text:#FF8A5F; --dn-text:#8FAEFF; color-scheme:dark }
}
:root[data-theme="dark"]{ --paper:#0F1113; --panel:#171A1D; --ink:#E7E5E0; --mute:#9AA0A7; --line:#2A2E33; --soft:#1B1F23; --orange:#FF6A3C; --blue:#7E9BFF; --scrim:14,16,19; --wall-bg:#0E1013; --wall-mid:#171A1F; --wall-up:#FF6A3C; --wall-dn:#4E7DFF; --hi:#FFFFFF; --glass:rgba(21,24,29,.82); --glass-line:rgba(255,255,255,.14); --pill-bg:rgba(14,16,19,.84); --pill-fg:#ECEAE4; --cross:rgba(255,255,255,.35); --up-text:#FF8A5F; --dn-text:#8FAEFF; color-scheme:dark }

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--mono); font-size:14px; line-height:1.6 }
a{ color:inherit; text-decoration-color:var(--orange); text-decoration-thickness:1.5px; text-underline-offset:3px }
a:hover{ color:var(--orange) }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px }
h1,h2,h3{ margin:0; font-weight:500; text-wrap:balance }
p{ margin:0 }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.gutter{ padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px)) }

/* ---------------- hero: the wall ---------------- */
.hero{ position:relative; min-height:92svh; background:var(--wall-bg); color:var(--ink); overflow:hidden; isolation:isolate; display:grid; grid-template-rows:auto 1fr auto }
.wall, .wall-labels{ position:absolute; inset:0; width:100%; height:100%; display:block }
.wall-labels{ pointer-events:none; z-index:2 }
.wall{ z-index:1; touch-action:none; cursor:crosshair }
.wall.grabbing{ cursor:grabbing }
.hero.static .wall{ pointer-events:none }   /* touch devices: the wall is a backdrop and a swipe scrolls the page (wall.js adds the class) */
.hero::before{ /* scrims so the headword block, masthead and footer read over the data */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--scrim),.72) 0%, rgba(var(--scrim),.5) 35%, rgba(var(--scrim),0) 66%),
             linear-gradient(0deg, rgba(var(--scrim),1) 0%, rgba(var(--scrim),.7) 12%, rgba(var(--scrim),0) 42%),
             linear-gradient(180deg, rgba(var(--scrim),1) 0px, rgba(var(--scrim),.55) 60px, rgba(var(--scrim),0) 180px);
}
.hero > .ui{ position:relative; z-index:3; pointer-events:none }
.hero > .ui > *{ pointer-events:auto }

.masthead{ display:flex; align-items:baseline; gap:24px; padding-block:18px 0; font-size:13px }
.brand{ font-family:var(--display); font-size:20px; text-decoration:none; letter-spacing:-.005em; white-space:nowrap }
.masthead nav{ display:flex; flex-wrap:wrap; gap:4px 18px; margin-left:auto }
.masthead nav a{ text-decoration:none; color:var(--mute) }
.masthead nav a:hover{ color:var(--ink) }
.theme-toggle{ background:none; border:0; padding:0; margin:0; font:inherit; color:var(--mute); cursor:pointer }   /* the theme switch: a word in the nav, named for where it takes you */
.theme-toggle:hover{ color:var(--ink) }

.headword-block{ align-self:end; display:grid; gap:14px; max-width:620px; padding-block:48px 28px }
.hw{ font-family:var(--display); font-size:clamp(44px, 7vw, 84px); line-height:.98; letter-spacing:-.015em; font-weight:500 }
.hw .dot{ color:var(--orange); font-weight:400 }
.pron{ color:var(--mute); font-size:13px }
.pron i{ font-family:var(--display); font-weight:400; font-variation-settings:'opsz' 20; color:var(--ink) }
.gloss{ font-size:15px; line-height:1.55; max-width:56ch }
.gloss b{ font-weight:500; color:var(--ink) }


.hero-foot{ display:flex; flex-wrap:wrap; gap:8px 24px; align-items:baseline; padding-block:0 16px; font-size:11.5px; color:var(--mute) }
.hero-foot .status{ color:var(--ink) }
.hero-foot .status[data-busy="1"]::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:8px; border-radius:50%; background:var(--orange); animation:pulse 1s infinite alternate }
@keyframes pulse{ from{ opacity:.25 } to{ opacity:1 } }

/* the selected-compound entry */
.entry-panel{ position:absolute; z-index:4; top:64px; right:max(20px, env(safe-area-inset-right,0px)); width:min(380px, calc(100% - 40px)); max-height:calc(100% - 120px); overflow:auto; pointer-events:auto;
  background:var(--glass); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--glass-line); border-radius:6px; padding:18px 20px 20px; display:grid; gap:10px; font-size:12.5px; color:var(--ink) }
.entry-panel .hw2{ font-family:var(--display); font-size:30px; line-height:1.05; font-weight:500; letter-spacing:-.01em; overflow-wrap:anywhere }
.entry-panel .pron{ font-size:12px }
.entry-panel .senses{ list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px; counter-reset:s }
.entry-panel .senses li{ counter-increment:s; position:relative; padding-left:2.6ch; line-height:1.5 }
.entry-panel .senses li::before{ content:"–"; position:absolute; left:0; top:0; color:var(--orange); font-weight:700 }
.entry-panel .field{ font-family:var(--display); font-style:italic; font-weight:400; font-variation-settings:'opsz' 20; font-size:13.5px; color:var(--ink); border-right:1px solid var(--mute); padding-right:8px; margin-right:8px }
.entry-panel .gene{ white-space:nowrap }
.entry-panel .up{ color:var(--up-text) } .entry-panel .dn{ color:var(--dn-text) }
.entry-panel .nb{ background:none; border:0; padding:0; margin:0; font:inherit; color:var(--ink); cursor:pointer; text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:3px }
.entry-panel .nb:hover{ color:var(--orange) }
.entry-panel .sim{ color:var(--mute); font-size:11px }
.entry-panel .close{ position:absolute; top:8px; right:10px; background:none; border:0; color:var(--mute); font:inherit; font-size:16px; cursor:pointer; padding:4px 8px }
.entry-panel .close:hover{ color:var(--ink) }
@media (max-width:760px){
  .entry-panel{ position:relative; top:auto; right:auto; width:auto; max-height:none; margin:0 0 16px }
  .hero::before{ background:linear-gradient(0deg, rgba(var(--scrim),1) 0%, rgba(var(--scrim),.75) 55%, rgba(var(--scrim),.25) 100%) }
  .headword-block{ padding-block:32px 20px }
}

/* plain pages (404) reuse the masthead and entry styles without the wall */
body.plain .masthead{ max-width:1120px; margin:0 auto }
body.plain main{ min-height:60svh; align-content:start }

/* ---------------- entries on paper ---------------- */
main{ max-width:1120px; margin:0 auto; display:grid; gap:0 }
.entry{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:16px 48px; padding-block:48px; border-top:1px solid var(--line) }
.entry:first-child{ border-top:0 }
.entry .hw{ font-size:clamp(34px, 4.6vw, 54px) }
.entry .hw .dot{ color:var(--orange) }
.entry .pron{ color:var(--mute); margin-top:10px }
.entry .pron i{ color:var(--ink) }
.senses{ list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:s }
.senses li{ counter-increment:s; position:relative; padding-left:3ch; font-size:14.5px; line-height:1.6; max-width:66ch }
.senses li::before{ content:"–"; position:absolute; left:0; top:0; color:var(--orange); font-weight:700 }
/* Literata's italic is drawn heavy at small optical sizes and shouts next to the mono; weight 400 with opsz pinned at 20 matches the mono's stroke */
/* a hairline after the label keeps it from bleeding into the sense text (border, not a glyph: nothing is added to the copy) */
.field{ font-family:var(--display); font-style:italic; font-weight:400; font-variation-settings:'opsz' 20; font-size:15.5px; color:var(--ink); border-right:1px solid var(--mute); padding-right:10px; margin-right:10px }
.cf{ grid-column:1 / -1; color:var(--mute); font-size:12.5px; border-top:1px dashed var(--line); padding-top:10px; max-width:76ch }
@media (max-width:760px){ .entry{ grid-template-columns:1fr; gap:14px; padding-block:36px } }
/* under the platform headword: a bifunctional molecule cut from the wall, drawn by wall.js */
.molecule{ display:block; width:100%; max-width:320px; aspect-ratio:2 / 1; margin:22px 0 0 1.4px }   /* the mask is left-aligned; 1.4px is the side bearing of Literata's p, so the molecule lines up with the headword's ink */
.molecule[hidden]{ display:none }

.people{ display:grid; gap:14px }
.person{ display:grid; grid-template-columns:3ch 1fr; gap:0; font-size:14px; line-height:1.55 }
.person > span:first-child{ color:var(--orange); font-weight:700 }
.person b{ font-weight:500 }
.person span{ color:var(--mute) }

footer{ border-top:1px solid var(--line); color:var(--mute); font-size:12px; padding-block:24px 40px; max-width:1120px; margin:0 auto; display:grid; gap:8px }
footer a{ color:var(--ink) }

/* ---------------- blog posts ----------------
   Posts read like a Substack page: pinned to light in their HTML (data-theme="light"), Spectral at 18px,
   and a 760px column (about 75 characters a line) so the post is shorter to scroll. */
.post{ max-width:760px; margin:0 auto; padding-block:40px 72px }
.post .hw{ font-size:clamp(32px, 4.4vw, 50px) }
.post .pron{ color:var(--mute); margin-top:12px }
.post-body{ font-family:var(--reading); font-size:18px; line-height:1.6; margin-top:36px; display:grid; gap:1.15em }
.post-body h2{ font-size:22px; font-weight:600; margin-top:.8em }
.post-body p{ text-wrap:pretty }
.post-body sup{ line-height:0; font-family:var(--mono); font-size:.7em }
.post-body sup a{ text-decoration:none; color:var(--orange) }
.post-body .senses{ gap:10px }
.post-body .senses li{ font-size:inherit; line-height:inherit; max-width:none }
.post-body .senses .field{ font-size:inherit }
.post-body .notes, .post-body .reading{ list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:16px; counter-reset:n }
.post-body .notes li, .post-body .reading li{ position:relative; padding-left:3ch }
.post-body .notes li::before{ counter-increment:n; content:counter(n); position:absolute; left:0; top:0; color:var(--orange); font-family:var(--mono); font-weight:700 }
.post-body .reading li::before{ content:"–"; position:absolute; left:0; top:0; color:var(--orange); font-weight:700 }
.post-body .notes li:target{ background:var(--soft); outline:6px solid var(--soft) }

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

/* no WebGL2: show the picture of the wall instead */
.hero.no-wall{ background:#0E1013 url(../../data/wall-preview.jpg) center / cover no-repeat }

/* the hidden attribute must win over the panel's display:grid */
.entry-panel[hidden]{ display:none }