:root{--caseShell:1100px;--paper:#FAF9F6;--surface:#FFF;--well:#F1F0EC;--ink:#12151A;--inkDim:#454B55;--inkFaint:#656C78;--rule:#E4E2DC;--ruleStrong:#CFCCC4;--signal:#0E8A5F;--signalText:#0A6B4A;--signalOnDark:#5CCFA5;--signalSoft:#E3F0EA;--shadow:0 1px 2px rgba(10,12,14,.05),0 12px 30px -18px rgba(10,12,14,.22)}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--signalText);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,p{margin:0}
@keyframes ygRise{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}

/* ---------- adaptive tiers ---------- */

/* The main grid is auto-fit minmax(280px,1fr); it resolves to a single column
   while the `span 2` child still asks for two, which invents an implicit
   column and overflows the viewport. Reset the span before the columns. */
@media (max-width:860px){
[data-r="casemain"]{grid-template-columns:1fr!important}
[data-r="span2"]{grid-column:auto!important}
[data-r="caseaside"]{position:static!important}
}

/* Phone: the hero figure is decorative and unreadable below 340px of width. */
@media (max-width:700px){
[data-fig]{height:clamp(120px,34vw,168px)!important}
[data-r="caseaside"]{border-radius:10px!important}
}
@media (max-height:520px) and (orientation:landscape){
[data-fig]{height:132px!important}
}

/* Touch: no state may depend on a cursor that never arrives. */
@media (hover:none){
[data-r="caseaside"]{box-shadow:none!important}
}

/* Wide: the column stops floating in empty margin. */
@media (min-width:1600px){:root{--caseShell:1280px}}
@media (min-width:1920px){:root{--caseShell:1400px}}


/* hover states */
[data-h="themeridian1"]:hover{border-color:var(--signalText) !important;color:var(--signalText) !important;transform:translateY(-2px) !important}
[data-h="themeridian2"]:hover{border-color:var(--signalText) !important;color:var(--signalText) !important}