/* Parlance — a type specimen, not a landing page.
   Ink and oxblood on vellum; the app's own two themes, printed. */
@media (prefers-reduced-motion:no-preference){
  @keyframes rise{from{opacity:0;transform:translateY(.6rem)}to{opacity:1;transform:none}}
  @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
:root{
  --vellum:#F2EBDC; --page:#FBF7EE; --deep:#E7DECB;
  --ink:#14161C; --ink-2:#4B4B52; --ink-3:#7A776E;
  --rule:#C9BFA8; --gold:#8A6A21; --oxblood:#7A2E2E;
  --gut:clamp(1.25rem,4vw,3rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--vellum); color:var(--ink);
  font-family:"Newsreader",ui-serif,Georgia,serif;
  font-variant-numeric:oldstyle-nums; font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  line-height:1.62; -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:400; letter-spacing:-.018em; line-height:1.08}
p{margin:0 0 1.05em}
.shell{max-width:74rem; margin:0 auto; padding:0 var(--gut)}
.prose{max-width:33rem}


/* paper — real vellum has tooth; this is a fixed grain over the whole sheet */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.055;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
<feColorMatrix type='saturate' values='0'/></filter>\
<rect width='180' height='180' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme:dark){ body::before{opacity:.09; mix-blend-mode:screen} }


/* product hero — the app first, the craft second */
.lede-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  max-width:74rem; margin:0 auto; padding:clamp(2.5rem,6vw,4.5rem) var(--gut) clamp(2rem,5vw,3.5rem);
}
.claim{font-size:clamp(2.3rem,1.5rem + 3.4vw,4rem); letter-spacing:-.03em; margin-bottom:1.1rem}
.sub{font-size:1.14rem; color:var(--ink-2); max-width:32ch; margin-bottom:1.9rem}
.store{
  display:inline-flex; align-items:center; gap:.7rem; background:var(--ink); color:var(--vellum);
  padding:.72rem 1.15rem .78rem; border-radius:11px; transition:transform .16s ease, opacity .16s ease;
}
.store:hover{transform:translateY(-1px); opacity:.92}
.store span{line-height:1.15; font-size:1.02rem}
.store b{display:block; font-weight:400; font-size:.68rem; letter-spacing:.06em; opacity:.72}
.req{margin:.9rem 0 0; font-size:.9rem; color:var(--ink-3); font-style:italic}

/* two phones, overlapped */
.screens{position:relative; display:flex; justify-content:center; align-items:center; min-height:26rem}
.ph{width:min(15.5rem,44vw)}
.ph-back{transform:translateX(11%) rotate(4.5deg) scale(.9); opacity:.9;
  filter:drop-shadow(0 20px 40px rgba(20,22,28,.28))}
.ph-front{position:relative; z-index:2; transform:translateX(-11%) rotate(-2deg);
  filter:drop-shadow(0 28px 52px rgba(20,22,28,.32))}
@media (prefers-color-scheme:dark){
  .ph-back{filter:drop-shadow(0 20px 40px rgba(0,0,0,.55))}
  .ph-front{filter:drop-shadow(0 28px 52px rgba(0,0,0,.6))}
}

/* the specimen, now a section rather than the hero */
.headword-sm{font-size:clamp(2.4rem,1.6rem + 3vw,3.6rem); font-weight:300; letter-spacing:-.035em; margin-top:2.2rem}
.rule-sm{border:0; height:1px; background:var(--ink); margin:.85rem 0 1rem}

@media (max-width:900px){
  .lede-hero{grid-template-columns:1fr; text-align:left}
  .screens{margin-top:2.5rem; min-height:0}
  .ph{width:min(13rem,40vw)}
}

/* the spread — headword and entry in the wide column, a dictionary column beside it */
.spread{display:grid; grid-template-columns:minmax(0,1fr) 14rem; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.column{
  border-left:1px solid var(--rule); padding-left:1.4rem; font-size:.98rem;
  line-height:1.9; color:var(--ink-3); columns:1;
}
.column .lbl{display:block; font-style:italic; color:var(--ink-2); margin-bottom:.55rem; font-size:.92rem}
.column li{list-style:none}
.column .here{color:var(--ink); position:relative}
.column .here::after{content:"·"; position:absolute; left:-1.05rem; color:var(--gold); font-size:1.4rem; line-height:1}
.column ul{margin:0; padding:0}

/* folio — a book page has one */
.folio{display:flex; gap:1.2rem; align-items:baseline; padding:1.4rem 0 0; color:var(--ink-3); font-size:.9rem; font-style:italic}
.folio .fill{flex:1; height:1px; background:var(--rule)}

@media (max-width:880px){ .spread{grid-template-columns:1fr} .column{border-left:0; border-top:1px solid var(--rule); padding:1.2rem 0 0; columns:2; column-gap:2rem} }

/* masthead — a running head, not a nav bar */
.masthead{display:flex; align-items:baseline; gap:1.5rem; padding:1.6rem 0 .9rem; border-bottom:1px solid var(--rule)}
.masthead .name{font-size:1.05rem; letter-spacing:.06em}
.masthead .links{margin-left:auto; display:flex; gap:1.4rem; font-size:.92rem; color:var(--ink-2)}
.masthead .links a:hover{color:var(--oxblood)}

/* the entry — the hero is a dictionary entry at poster scale */
.entry{padding:clamp(3rem,9vw,7rem) 0 clamp(2.5rem,6vw,4rem)}
.headword{
  font-size:clamp(3.5rem,1.5rem + 12vw,10.5rem); line-height:.86; letter-spacing:-.045em;
  font-weight:300; font-variation-settings:"opsz" 72;
}
.headword .soft{color:var(--ink-3)}
.entry hr{
  border:0; height:1px; background:var(--ink); margin:clamp(1rem,3vw,1.75rem) 0 1.1rem;
  transform-origin:left;
}
@media (prefers-reduced-motion:no-preference){
  
  .claim,.sub,.store,.req{animation:rise .65s cubic-bezier(.2,.7,.2,1) backwards}
  .claim{animation-delay:.05s} .sub{animation-delay:.16s} .store{animation-delay:.27s} .req{animation-delay:.36s}
  .screens{animation:rise .8s cubic-bezier(.2,.7,.2,1) .2s backwards}

}
.gram{font-size:1.05rem; color:var(--ink-2); margin-bottom:1.6rem}
.gram i{font-style:italic}
.sense{font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem); line-height:1.3; max-width:26ch; margin-bottom:1.5rem}
  /* etymology thread */
.root{
  max-width:38ch; color:var(--ink-2); font-size:1.02rem;
  border-left:2px solid var(--gold); padding-left:1.1rem; margin-bottom:2rem;
}
.root b{font-weight:500; font-style:italic; color:var(--gold)}
.pitch{display:flex; align-items:baseline; gap:1.5rem; flex-wrap:wrap}
.pitch .say{font-size:1.15rem; max-width:30ch}
.go{
  font-size:1rem; color:var(--oxblood); border-bottom:1px solid var(--oxblood);
  padding-bottom:2px; transition:background .18s ease;
}
.go:hover{background:rgba(122,46,46,.09)}

/* running sections, separated by printed rules rather than boxes */
section{padding:clamp(3rem,7vw,5rem) 0; border-top:1px solid var(--rule)}
h2{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.5rem); max-width:20ch; margin-bottom:1.4rem}
.lead{font-size:1.1rem; color:var(--ink-2)}

/* the mechanism — a definition list, because that is what it is */
.mech{display:grid; gap:2.25rem 3rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); margin-top:2.5rem}
.mech h3{font-size:1.22rem; margin-bottom:.5rem; font-style:italic}
.mech p{color:var(--ink-2); font-size:1rem; margin:0; max-width:34ch}
.mech .n{color:var(--gold); font-size:.95rem; font-style:italic; display:block; margin-bottom:.3rem}

/* evidence — phone sits quietly beside the claim */
.evidence{display:grid; grid-template-columns:1fr auto; gap:clamp(2rem,6vw,5rem); align-items:center}
.evidence .phone{width:min(15rem,58vw); filter:drop-shadow(0 26px 46px rgba(20,22,28,.22))}

/* questions */
.q{border-top:1px solid var(--rule); padding:1.15rem 0}
.q:last-of-type{border-bottom:1px solid var(--rule)}
.q summary{cursor:pointer; list-style:none; font-size:1.1rem; display:flex; gap:1.25rem; align-items:baseline}
.q summary::-webkit-details-marker{display:none}
.q summary::after{content:""; margin-left:auto; width:.62rem; height:.62rem; flex:0 0 auto;
  border-right:1px solid var(--ink-2); border-bottom:1px solid var(--ink-2);
  transform:rotate(45deg) translateY(-.18rem); transition:transform .2s ease}
.q[open] summary::after{transform:rotate(225deg) translateY(-.1rem)}
.q p{margin:.85rem 0 0; color:var(--ink-2); max-width:56ch; font-size:1.02rem}

/* colophon */
.colophon{border-top:1px solid var(--rule); padding:2.25rem 0 3.5rem; color:var(--ink-3); font-size:.95rem}
.colophon a{border-bottom:1px solid var(--rule)}
.colophon a:hover{color:var(--oxblood); border-color:var(--oxblood)}
.colophon p{margin:0 0 .4em}

/* legal documents — set as a book page */
.doc{max-width:36rem; padding:clamp(2.5rem,6vw,4rem) 0 4rem}
.doc h1{font-size:clamp(1.9rem,1.5rem + 1.5vw,2.6rem); margin-bottom:.4rem}
.doc h2{font-size:1.18rem; margin:2.4rem 0 .55rem; max-width:none}
.doc p,.doc li{color:var(--ink-2)}
.doc ul{padding-left:1.1em} .doc li{margin:.28em 0}
.doc a{color:var(--oxblood); border-bottom:1px solid rgba(122,46,46,.3); word-break:break-word}
.doc .inshort{border-left:2px solid var(--gold); padding:.1rem 0 .1rem 1.05rem; font-style:italic; color:var(--ink)}
.doc .meta{color:var(--ink-3); font-size:.95rem}
.doc dt{font-style:italic; color:var(--ink); margin-top:1.5rem}
.doc dd{margin:.3em 0 0; color:var(--ink-2)}

:focus-visible{outline:2px solid var(--oxblood); outline-offset:3px}
@media (max-width:760px){ .evidence{grid-template-columns:1fr} .evidence .phone{margin-top:2rem} }

/* the ink theme — the app's other half */
@media (prefers-color-scheme:dark){
  :root{
    --vellum:#12151E; --page:#171B26; --deep:#1C2130;
    --ink:#EFE8DA; --ink-2:#A9A79E; --ink-3:#7C7A73;
    --rule:#2B303C; --gold:#C79A45; --oxblood:#C97A6B;
  }
  .entry hr{background:var(--ink)}
  .go:hover{background:rgba(201,122,107,.12)}
  .evidence .phone{filter:drop-shadow(0 26px 46px rgba(0,0,0,.5))}
}

/* contents list in the legal documents */
.doc .toc{margin:.4rem 0 1.6rem; padding-left:1.4rem; color:var(--ink-2); font-size:.98rem; line-height:1.75}
.doc .toc li{margin:.1em 0}
.doc h1 + .meta{margin-top:-.15rem}
.doc .inshort{margin:1.1rem 0}