:root{
  --paper: oklch(0.955 0.02 88);
  --paper-2: oklch(0.925 0.026 86);
  --ink: oklch(0.24 0.028 155);
  --ink-soft: oklch(0.4 0.035 150);
  --rule: color-mix(in oklch, var(--ink) 55%, var(--paper));
  --green: oklch(0.3 0.06 155);
  --marigold: oklch(0.82 0.14 80);
  --oxblood: oklch(0.45 0.14 25);
  --gut: clamp(1rem, 3.5vw, 3rem);
  --nameplate: "UnifrakturMaguntia", "Old English Text MT", Georgia, serif;
  --display: "Gloock", "Didot", Georgia, serif;
  --body: "Newsreader", Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .2 0 0 0 0 .14 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grain) var(--paper);color:var(--ink);font-family:var(--body);font-size:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);line-height:1.5;overflow-x:clip;font-optical-sizing:auto}
a{hyphens:manual;color:var(--oxblood);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--oxblood);outline-offset:3px}
.ad-main :focus-visible{outline-color:var(--marigold)}
.wrap{padding-inline:var(--gut);max-width:1440px;margin-inline:auto}
.sc{font-family:var(--body);font-weight:500;font-size:0.8125rem;letter-spacing:0.14em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1;letter-spacing:-0.01em}

/* Masthead */
.mast{padding-top:clamp(0.75rem,2vw,1.25rem)}
.edition{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-bottom:0.55rem;border-bottom:1px solid var(--ink)}
.edition .mid{display:none}
@media (min-width:860px){.edition .mid{display:inline}}
.nameplate{position:relative;container-type:inline-size;display:grid;grid-template-columns:1fr;align-items:center;gap:0.75rem 1.5rem;padding-block:clamp(0.9rem,2.4vw,1.8rem)}
.nameplate::before{content:"";position:absolute;inset:0 calc(var(--gut) * -1);background:url("/assets/masthead-engraving.svg") center bottom/max(100%,1100px) auto no-repeat;opacity:0.26;pointer-events:none}
.nameplate > *{position:relative}
.title{font-family:var(--nameplate);font-weight:400;font-size:clamp(3rem,0.6rem + 11vw,9.6rem);line-height:0.95;letter-spacing:-0.005em;margin:0;text-align:center}
.title a{color:inherit;text-decoration:none}
.ear{background:var(--paper);border:1px solid var(--ink);padding:0.7rem 0.9rem;font-size:0.9rem;line-height:1.35;text-align:center;box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px var(--ink)}
.ear p{margin:0}
.nameplate{grid-template-columns:1fr 1fr}
.nameplate .title{grid-column:1 / -1;grid-row:1}
.ear-l{grid-row:2;grid-column:1}
.ear-r{grid-row:2;grid-column:2}
.ear{font-size:0.8rem;padding:0.5rem 0.6rem}
.ear .ear-h{font-size:1rem}
.ear .ear-h{font-family:var(--display);font-size:1.15rem;border-bottom:1px solid var(--rule);padding-bottom:0.3rem;margin-bottom:0.4rem}
.ear a{color:var(--ink);text-decoration:none}
.ear a:hover{text-decoration:underline}
@media (min-width:1100px){
  .nameplate{grid-template-columns:10.5rem minmax(0,1fr) 10.5rem}
  .nameplate .title{grid-column:2;grid-row:1}
  .ear{font-size:0.9rem;padding:0.7rem 0.9rem}
  .ear .ear-h{font-size:1.15rem}
  .ear-l{grid-column:1;grid-row:1}
  .ear-r{grid-column:3;grid-row:1}
  /* Blackletter "Complete Computing" is ~8.1× its font size wide; fit it between the two 10.5rem ears and their gaps. */
  .title{font-size:min(8.4rem, calc((100cqi - 24.5rem) / 8.6));white-space:nowrap}
}
.folio{display:flex;justify-content:space-between;flex-wrap:wrap;gap:0.3rem 1rem;padding-block:0.5rem;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);position:relative}
.folio::before{content:"";position:absolute;left:0;right:0;top:2px;border-top:1px solid var(--ink)}
@media (max-width:600px){
  .edition,.folio{font-size:0.68rem;letter-spacing:0.08em;flex-wrap:nowrap}
  .folio > span:last-child{display:none}
  .plate{aspect-ratio:3/2}
}
.nav{display:flex;flex-wrap:wrap;gap:0.35rem 1.4rem;padding-block:0.65rem;border-bottom:3px double var(--ink)}
.nav a{color:var(--ink);text-decoration:none}
.nav a:hover{text-decoration:underline}
.nav .cta-link{margin-left:auto;color:var(--oxblood);font-weight:700}

/* Front page */
.front{display:grid;grid-template-columns:1fr;gap:clamp(2rem,3.5vw,3rem);padding-block:clamp(1.75rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
.kicker{color:var(--oxblood);margin:0 0 0.8rem}
.lead h1{font-size:clamp(2.5rem,1rem + 5.2vw,6rem);line-height:0.95;letter-spacing:-0.025em;max-width:15ch}
.lead h1 i{font-family:var(--body);font-style:italic;font-weight:400;letter-spacing:-0.03em}
.deck{margin:clamp(1rem,2vw,1.5rem) 0 0;padding-bottom:clamp(1rem,2vw,1.5rem);border-bottom:1px solid var(--rule);font-style:italic;font-size:clamp(1.2rem,1.05rem + 0.7vw,1.6rem);line-height:1.3;max-width:34ch;color:var(--ink-soft)}
.story{display:grid;grid-template-columns:1fr;gap:1.25rem 2rem;margin-top:clamp(1.25rem,2.5vw,1.75rem)}
.copy{columns:1;column-gap:2rem;column-rule:1px solid var(--rule)}
.copy p{margin:0 0 0.9em;text-align:justify;hyphens:auto}
.dateline{font-weight:700;text-transform:uppercase;letter-spacing:0.04em;font-size:0.92em}
.jump{font-style:italic;text-align:left !important;break-inside:avoid}
.jump a{color:var(--ink);font-weight:500}
.pull{margin:0;padding:1rem 0;border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);align-self:start}
.pull p{margin:0;font-family:var(--display);font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);line-height:1.08;letter-spacing:-0.01em}
@media (min-width:640px){.copy{columns:2}}
@media (min-width:1100px){
  .front{grid-template-columns:minmax(0,1fr) 21rem}
  .rail{border-left:1px solid var(--rule);padding-left:clamp(1.5rem,2.5vw,2.25rem)}
  .story{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .pull{margin-top:0.25rem}
}

.art{margin:clamp(1.5rem,3vw,2.25rem) 0 0;border-top:1px solid var(--rule);padding-top:1rem}
.art img{width:100%;aspect-ratio:1200/320;object-fit:cover}
.art figcaption{margin-top:0.6rem;padding-top:0.5rem;border-top:1px solid var(--rule);font-size:0.9rem;line-height:1.4;font-style:italic;color:var(--ink-soft)}
.art figcaption b{font-style:normal;font-weight:700;color:var(--ink);letter-spacing:0.04em;text-transform:uppercase;font-size:0.8rem;margin-right:0.35rem}
.rail{display:grid;gap:1.75rem;align-content:start}
.contents{background:var(--marigold);color:var(--ink);padding:clamp(1.1rem,2vw,1.5rem);background-image:radial-gradient(circle,oklch(0.24 0.028 155 / 0.1) 0.9px,transparent 1.2px);background-size:5px 5px}
.contents h2{font-size:clamp(1.5rem,1.2rem + 0.8vw,1.9rem);margin-bottom:0.8rem}
.contents ol{list-style:none;margin:0;padding:0}
.contents li{display:grid;grid-template-columns:2.4rem 1fr;border-top:1px solid var(--ink);padding-block:0.55rem}
.contents li span{font-family:var(--display);letter-spacing:0.02em}
.contents a{color:var(--ink);text-decoration:none}
.contents a:hover{text-decoration:underline}
.town{border-top:3px solid var(--ink);padding-top:0.9rem;scroll-margin-top:1rem}
.town > .sc{color:var(--oxblood);margin:0 0 0.35rem}
.town h2{font-size:clamp(1.8rem,1.4rem + 1vw,2.3rem);margin-bottom:0.6rem}
.town ul{list-style:none;margin:0;padding:0;font-size:0.97rem;line-height:1.45}
.town li{padding-block:0.6rem;border-top:1px solid var(--rule)}
.town li b{font-weight:700}
.town .src{margin:0.6rem 0 0;padding-top:0.5rem;border-top:1px solid var(--rule);font-size:0.85rem;font-style:italic;color:var(--ink-soft)}

/* Section fronts */
.section{scroll-margin-top:1rem}
.dept{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem;border-top:4px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:0.55rem 0.45rem;margin-top:clamp(2rem,4vw,3rem)}
.dept > span:last-child{text-align:right}
.dept h2,.dept .dept-name{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,1.3rem + 2vw,3.2rem);line-height:1;margin:0;letter-spacing:-0.01em;text-align:center}
@media (max-width:560px){
  .dept{grid-template-columns:1fr auto}
  .dept h2,.dept .dept-name{grid-column:1 / -1;grid-row:1;text-align:left}
  .dept > span:first-child{grid-row:2}
}

.svc{display:grid;grid-template-columns:1fr}
.svc article{padding-block:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--rule)}
.svc article:first-child{border-top:0}
.svc .rn{font-family:var(--display);font-size:clamp(2.2rem,1.8rem + 1.6vw,3.4rem);line-height:1;color:var(--oxblood)}
.svc h3{font-size:clamp(1.8rem,1.4rem + 1.4vw,2.7rem);margin:0.5rem 0 0.8rem}
.svc p{margin:0 0 0.9rem;max-width:36ch}
.svc .also{font-style:italic;color:var(--ink-soft)}
@media (min-width:900px){
  .svc{grid-template-columns:repeat(3,1fr)}
  .svc article{border-top:0;padding-inline:clamp(1.5rem,2.5vw,2.5rem)}
  .svc article:first-child{padding-left:0}
  .svc article:last-child{padding-right:0}
  .svc article + article{border-left:1px solid var(--rule)}
}

.feat-head{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem 2rem;flex-wrap:wrap;padding-block:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2vw,1.25rem);border-bottom:1px solid var(--rule)}
.feat-head h2{font-size:clamp(2.3rem,1rem + 4.4vw,5rem);letter-spacing:-0.025em}
.feat-head p{margin:0;font-style:italic;max-width:30ch;color:var(--ink-soft)}
.apps{display:grid;grid-template-columns:1fr}
.feature{padding-block:clamp(1.5rem,3vw,2.25rem);border-top:1px solid var(--rule)}
.feature:first-child{border-top:0}
.plate{position:relative;margin:0 0 1rem;background:var(--paper-2);display:grid;place-items:center;padding:clamp(1.5rem,4vw,2.5rem);aspect-ratio:4/3;border:1px solid var(--ink);overflow:hidden}
.plate::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,oklch(0.15 0.02 155 / 0.22) 1px,transparent 1.35px) 0 0/6px 6px}
.plate.mari{background-color:var(--marigold)}
.plate.deep{background-color:var(--green)}
.plate.ox{background-color:var(--oxblood)}
.plate img{position:relative;width:clamp(7rem,26vw,10.5rem);border-radius:22%;box-shadow:0 1rem 2rem -1rem oklch(0.2 0.05 155 / 0.6)}
.feature .status{color:var(--oxblood);margin:0 0 0.5rem}
.feature h3{font-size:clamp(1.9rem,1.3rem + 1.8vw,2.8rem);letter-spacing:-0.02em;margin-bottom:0.6rem}
.feature .dek{margin:0 0 0.9rem;line-height:1.4;max-width:34ch}
@media (min-width:760px){
  .apps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feature{border-top:0;padding-inline:clamp(1rem,2vw,2rem)}
  .feature:first-child{padding-left:0}
  .feature:last-child{padding-right:0}
  .feature + .feature{border-left:1px solid var(--rule)}
}

.founder{display:grid;grid-template-columns:1fr;gap:1.25rem 3rem;padding-block:clamp(1.75rem,4vw,3rem)}
.founder h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.4rem);letter-spacing:-0.02em;max-width:12ch}
.founder blockquote{position:relative;margin:0;padding-left:clamp(1.5rem,3vw,2.5rem);border-left:3px solid var(--oxblood);font-style:italic;font-size:clamp(1.35rem,1.1rem + 1.1vw,2.1rem);line-height:1.28;max-width:34ch}
.founder blockquote p{margin:0}
@media (min-width:900px){.founder{grid-template-columns:1fr 2fr}}

/* Classifieds */
.ads{display:grid;grid-template-columns:1fr;gap:0;margin-top:1.25rem;border:1px solid var(--ink)}
.ad{padding:1.1rem 1.2rem 1.2rem;border-top:1px solid var(--ink);font-size:0.97rem;line-height:1.45}
.ad h3{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;font-size:1rem;margin:0 0 0.4rem}
.ad p{margin:0 0 0.7rem}
.ad .reply{margin:0;font-style:italic}
.ad-main{border-top:0;background:var(--green);color:var(--paper);padding:clamp(1.5rem,3.5vw,2.75rem);display:grid;gap:1rem;align-content:start}
.ad-main h2{font-size:clamp(2.4rem,1rem + 4.6vw,5.4rem);letter-spacing:-0.03em;line-height:0.95;color:var(--marigold)}
.ad-main p{margin:0;max-width:34ch;font-size:clamp(1.1rem,1rem + 0.5vw,1.35rem)}
.ad-main a.mail{justify-self:start;display:inline-block;background:var(--marigold);color:var(--green);text-decoration:none;font-weight:700;padding:0.85rem 1.2rem;overflow-wrap:anywhere;font-size:clamp(1rem,0.92rem + 0.45vw,1.3rem);transition:transform .35s var(--ease)}
.ad-main a.mail:hover{transform:translateY(-3px)}
@media (min-width:760px){
  .ads{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ad-main{grid-column:1 / -1}
  .ad + .ad:not(.ad-main){border-left:1px solid var(--ink)}
  .ad-main + .ad{border-left:0}
}
@media (min-width:1100px){
  .ads{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
  .ad-main{grid-column:1;grid-row:1 / span 3;border-right:1px solid var(--ink)}
  .ad + .ad:not(.ad-main){border-left:0}
  .ad-main + .ad{border-top:0}
}

.foot{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:0.5rem 1.5rem;margin-top:clamp(2.5rem,5vw,4rem);padding-block:1rem 1.75rem;font-size:0.95rem}
.foot::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);border-top:3px double var(--ink)}
.foot .colophon{font-style:italic;color:var(--ink-soft)}
.foot nav{display:flex;gap:1.25rem}

@media (prefers-reduced-motion:no-preference){
  .mast > *{animation:press 0.9s var(--ease) both}
  .mast > .nameplate{animation-delay:.08s}
  .mast > .folio{animation-delay:.16s}
  .mast > .nav{animation-delay:.22s}
  @keyframes press{from{opacity:0;transform:translateY(0.4rem)}}
}

/* Inner pages (privacy, support, 404) */
.mast-inner .title{font-size:clamp(2.6rem,0.8rem + 8vw,6.2rem)}
.mast-inner .nameplate{padding-block:clamp(0.7rem,1.8vw,1.2rem);grid-template-columns:1fr}
@media (min-width:1100px){.mast-inner .nameplate{grid-template-columns:1fr}.mast-inner .nameplate .title{grid-column:1}.mast-inner .title{font-size:min(6vw,6.4rem)}}
.page{padding-block:clamp(1.5rem,3.5vw,2.5rem) clamp(2rem,4vw,3rem)}
.page .dept{margin-top:0}
.page .head{padding-top:clamp(1rem,2.5vw,1.75rem);padding-bottom:clamp(1.25rem,2.5vw,1.75rem);border-bottom:1px solid var(--rule);margin-bottom:clamp(1.25rem,2.5vw,2rem)}
.page h1{font-size:clamp(2.6rem,1rem + 5vw,5.6rem);letter-spacing:-0.025em;line-height:0.95}
.page .updated{font-style:italic;color:var(--ink-soft);margin:0.8rem 0 0}
.prose{column-gap:clamp(1.75rem,3vw,2.75rem);column-rule:1px solid var(--rule)}
.prose h2{font-size:clamp(1.4rem,1.2rem + 0.7vw,1.8rem);margin:1.6rem 0 0.6rem;break-after:avoid}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{margin:0 0 0.9rem;hyphens:auto}
.prose ul{padding-left:1.2rem;margin:0 0 1rem;break-inside:avoid}
.prose li::marker{color:var(--oxblood)}
.prose .notice{break-inside:avoid}
.apps-help{display:grid;gap:0.9rem;margin:0.5rem 0 1.5rem;break-inside:avoid}
.prose .col-break{break-before:column;margin-top:0}
.apps-help div{border-top:1px solid var(--rule);padding-top:0.8rem;break-inside:avoid}
.apps-help h3{font-size:1.4rem;margin-bottom:0.35rem}
.prose.short{max-width:40rem}
@media (min-width:760px){.prose:not(.short){columns:2}}
@media (min-width:1200px){.prose.three{columns:3}}