/* maxmorrish.com, the poster system every page shares (28 October 2026): the family tokens, the base, labels, corner
   rows, the sigil, buttons, the giant titles and their masked rise, rows and ledger rows, big figures, arrivals,
   magnetic buttons, the context cue and the page transitions. Home adds home.css; inner pages add style.css.
   Hot red on black, Voice (Cook Conthic) for anything set large or as a label, Libre Caslon for reading. No rounded
   corners: hovers invert. Every arrival is set by a script on elements below the fold, so without JS nothing waits. */
@font-face{font-family:"Voice";src:url(/fonts/conthic-voice.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Anton";src:url(/fonts/anton-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Caslon Text";src:url(/fonts/libre-caslon-text-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{
  --black:#050303;
  --red:#ef2a40;            /* family red-ink: type, labels, fills, 4.97:1 on black */
  --red-fill:#d0142c;       /* family red: big display fills */
  --red-deep:#4a0b14;
  --line:rgba(239,42,64,.3);
  --paper:#f3efe6;
  --muted:#b5afa4;
  --display:"Voice","Anton","Arial Narrow",sans-serif;
  --body:"Libre Caslon Text",Georgia,serif;
  --pad:clamp(16px,3.2vw,48px);
  --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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--black)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--black);color:var(--paper);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--red)}
@view-transition{navigation:auto}
p,h1,h2,h3,blockquote,figure,ol,ul{margin:0;padding:0}
h1,h2,h3{font-weight:400}
ol,ul{list-style:none}
button{font:inherit}
::selection{background:var(--red-fill);color:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:60;background:var(--red);color:var(--black);padding:8px 12px;font-family:var(--display);text-transform:uppercase}
:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

/* ---------- Shared pieces ---------- */
.label{font-family:var(--display);font-size:clamp(13px,1.25vw,18px);line-height:1.1;letter-spacing:.02em;text-transform:uppercase;color:var(--red)}
.label a{text-decoration:none}
.label a:hover{color:var(--paper)}
.label a.cite{text-decoration:underline;text-underline-offset:.2em}   /* a link inside a label, not a nav item */
.small{font-size:15px;color:var(--muted)}
.corners{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.corners>:first-child{justify-self:start}
.corners>:last-child{justify-self:end;text-align:right}
.sig{display:block;width:22px;height:22px;fill:none;stroke:var(--red);stroke-width:34;stroke-linejoin:miter;stroke-linecap:square}
.mark .sig{width:40px;height:40px;stroke-width:26}

.grain{position:absolute;inset:-50%;background-image:var(--grain);opacity:.22;mix-blend-mode:overlay;pointer-events:none;z-index:4}

.js .grain{animation:grain .6s steps(1) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}}

.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;background:var(--red);color:var(--black);
  font-family:var(--display);font-size:20px;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border:1px solid var(--red)}
.btn:hover{background:var(--black);color:var(--red)}
.btn-big{height:64px;padding:0 36px;font-size:28px}

.mega{margin-top:clamp(28px,4vw,64px);font-family:var(--display);font-size:clamp(64px,14vw,240px);line-height:.82;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--red);text-wrap:balance}
.mega-tight{margin-top:0;font-size:clamp(60px,8.6vw,150px)}
/* Titles rise line by line out of fixed masks (home.js). Only titles still below the fold are held back, and
   only by the script, so without JS every title is simply there. */
.mega .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.mega .ln>span{display:block}
.mega.pre .ln>span{transform:translateY(108%)}
.mega.is-rise .ln>span{transform:none;transition:transform 900ms cubic-bezier(.16,1,.3,1) calc(var(--l,0) * 80ms)}
.lead{margin-top:24px;max-width:46ch;font-size:clamp(18px,1.6vw,22px)}

/* Rows: name in the display face, the line beside it */
.rows{margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--line)}
.rows li{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.rows h3{font-family:var(--display);font-size:clamp(26px,3vw,46px);line-height:1;text-transform:uppercase;color:var(--red)}
.rows h3 a{text-decoration:none}
.rows h3 a:hover{color:var(--paper)}
.rows p{max-width:56ch}
.rows-tight{margin-top:0}
.rows-tight li{grid-template-columns:1fr;gap:8px}
.rows-tight h3{font-size:clamp(24px,2.4vw,36px)}

/* Projects and samples: rows like Second State's artists, the figure set large on the right */
.ledger{margin-top:clamp(40px,5vw,80px);border-top:1px solid var(--line)}
.q-row{display:grid;grid-template-columns:clamp(120px,16vw,220px) minmax(0,1fr) minmax(0,auto);grid-template-areas:"thumb name fig" "thumb tag fig" "thumb status fig";
  column-gap:clamp(16px,2.4vw,36px);row-gap:6px;align-items:start;padding:22px 0;border-bottom:1px solid var(--line)}
.q-thumb{grid-area:thumb;width:100%;aspect-ratio:16/10;object-fit:cover;
  filter:grayscale(1) contrast(1.15) brightness(.72) sepia(1) hue-rotate(-48deg) saturate(7) brightness(.95)}
.q-row h3{grid-area:name;font-family:var(--display);font-size:clamp(24px,2.6vw,40px);line-height:1;text-transform:uppercase;color:var(--red)}
.q-row h3 a{text-decoration:none}
.q-row{position:relative}
.q-row h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.q-row h3 a:hover{color:inherit}
.q-row:hover{background:var(--red-deep);box-shadow:-16px 0 0 var(--red-deep),16px 0 0 var(--red-deep)}
.q-row:hover h3{color:var(--paper)}
.q-row:has(a:focus-visible){outline:2px solid var(--paper);outline-offset:6px}
.q-row a:focus-visible{outline:0}
.q-tagline{grid-area:tag;max-width:52ch}
.q-status{grid-area:status;font-size:14px;color:var(--muted);max-width:56ch}
.q-figure{grid-area:fig;max-width:15rem;text-align:right}
.fig{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(44px,5.6vw,92px);line-height:.85;color:var(--red)}
.fig-label{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:var(--muted)}
.q-sample{grid-template-areas:"thumb name name" "thumb tag tag" "thumb status status"}

.handles li{display:grid;grid-template-columns:7rem 1fr;gap:16px;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--line);min-width:min(100%,520px)}

/* ---------- Footer ---------- */
.footer{padding:clamp(40px,6vw,80px) var(--pad) var(--pad);border-top:1px solid var(--line)}

/* ---------- Arrivals (home.js): rows, the timeline, figures and pictures settle in as they reach the screen.
   Everything here is set by the script on elements still below the fold, so without JS nothing is held back. */
.rv{position:relative}
.rv.rv-pre{border-bottom-color:transparent}
.rv.rv-pre>*{opacity:0;transform:translateY(16px)}
.rv.rv-pre::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left}
.rv.rv-in>*{opacity:1;transform:none;transition:opacity 700ms cubic-bezier(.16,1,.3,1) var(--d),transform 700ms cubic-bezier(.16,1,.3,1) var(--d)}
.rv.rv-in::before{transform:none;transition:transform 700ms cubic-bezier(.16,1,.3,1) var(--d)}

.q-thumb{--blur:0px;filter:grayscale(1) contrast(1.15) brightness(.72) sepia(1) hue-rotate(-48deg) saturate(7) brightness(.95) blur(var(--blur))}
.rv-pre .q-thumb{--blur:10px}
.rv-in .q-thumb{transition:filter 1000ms cubic-bezier(.16,1,.3,1) var(--d)}

/* magnetic buttons */
.mag{transition:transform 500ms cubic-bezier(.16,1,.3,1)}
.mag.pull{transition:transform 120ms linear}

@media (max-width:699px){
  .rows li{grid-template-columns:1fr;gap:8px}
  .q-row{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"thumb name" "thumb tag" "status status" "fig fig"}
  .q-sample{grid-template-areas:"thumb name" "thumb tag" "status status"}
  .q-figure{text-align:left;max-width:none;margin-top:6px}
  .handles li{grid-template-columns:5.5rem 1fr}
  .footer .corners{grid-template-columns:1fr;gap:8px}
  .footer .corners>*{justify-self:start;text-align:left}
}

/* ---------- The context cue: a square red label beside the pointer over a whole-row link, saying what the click
   does (poster.js; fine pointers only, never with reduced motion). The system cursor stays. */
.cue{position:fixed;z-index:70;left:0;top:0;padding:7px 9px 5px;background:var(--red);color:var(--black);pointer-events:none;
  font:400 13px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;opacity:0}
.cue.on{opacity:1}
@media (prefers-reduced-motion:no-preference){.cue{transition:opacity 150ms}}

/* ---------- Page transitions: the root crossfades; a row's thumbnail and its case's hero (vt.js names the pair)
   travel between the two pages. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root),::view-transition-new(root){animation-duration:280ms;animation-timing-function:linear}
  ::view-transition-group(*){animation-duration:650ms;animation-timing-function:cubic-bezier(.76,0,.24,1)}
  ::view-transition-group(root){animation-duration:280ms}
}
@media (prefers-reduced-motion:reduce){
  .js .grain{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
@media print{.grain,.cue{display:none}}