/* Zeist. Paper and indigo ink, with the prints carrying all the colour.
   The name is never printed: it is the paper left bare in the ink. See BRAND.md. */
@font-face{font-family:Prata;src:url(/fonts/Prata-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Medium.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#f6f1e4;
  --ink:#1c2145;
  --ink-2:#4d5272;
  --rule:rgb(28 33 69 / .2);
  --serif:Prata,"Times New Roman",serif;
  --sans:Jost,system-ui,sans-serif;
  --gutter:clamp(20px,4vw,56px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.4 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
p,h1,h2,ul,figure{margin:0;padding:0}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* The masthead sits over the first season's print */
.mast{position:absolute;z-index:3;left:0;right:0;top:0;padding:clamp(14px,2.4vw,28px) var(--gutter);color:var(--paper);pointer-events:none}
.mast a{pointer-events:auto}
.word{font:400 clamp(88px,min(23vw,34vh),300px)/.95 var(--serif);letter-spacing:-.02em;margin-left:-.03em}
.tag{font-size:clamp(19px,2vw,28px);font-weight:500;line-height:1.2;margin-top:.5em}
.wheel{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:12px;font-size:clamp(16px,1.4vw,19px);font-weight:500}
.wheel a{padding:5px 0;border-bottom:1px solid transparent}
.wheel a.now{border-bottom-color:currentColor}

/* A season: a full-screen print, then its wall */
.cover{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:var(--ink);color:var(--paper)}
.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.over{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(20px,3vw,40px)}
.title{font:400 clamp(58px,11vw,170px)/1 var(--serif);letter-spacing:-.015em;margin-left:-.02em}
.status{font-size:clamp(18px,1.8vw,24px);font-weight:500;margin-top:10px}
.ethos{font-size:clamp(18px,1.8vw,24px);line-height:1.25;max-width:26em}
.ethos a{text-decoration:underline;text-underline-offset:4px}

/* Words are bare paper. Behind them sits one more pass of indigo, multiplied like ink, so the print keeps its colour */
.cover::after,.season:first-child .cover::before{content:"";position:absolute;left:0;right:0;pointer-events:none}
.cover::after{bottom:0;height:50%;mix-blend-mode:multiply;background:linear-gradient(to top,rgb(28 33 69 / .62),rgb(28 33 69 / 0))}
.season:first-child .cover::before{top:0;height:62%;z-index:1;mix-blend-mode:multiply;background:linear-gradient(to bottom,rgb(28 33 69 / .66),rgb(28 33 69 / .66) 56%,rgb(28 33 69 / 0))}
.season:first-child .title{font-size:clamp(36px,5vw,64px)}
.season:first-child .status{margin-top:6px}
.over{z-index:2}

.wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.tile{display:flex;flex-direction:column;background:var(--paper)}
.tile img{width:100%;aspect-ratio:4/5;object-fit:cover}
.label{display:block;padding:12px 14px 22px}
.name{display:block;font:400 clamp(21px,2.1vw,30px)/1.15 var(--serif)}
.line{display:block;margin-top:5px;font-size:15.5px;line-height:1.3;color:var(--ink-2)}
@media (hover:hover){
  .tile img{transition:filter .25s}
  .tile:hover img{filter:saturate(1.2) contrast(1.04)}
  .tile:hover .name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}
.wall .tile:nth-child(odd) .label{padding-left:var(--gutter)}
.wall.n3 .tile:last-child{grid-column:1/-1}
.wall.n3 .tile:last-child img{aspect-ratio:5/4}
@media (min-width:760px){
  .wall.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wall.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wall.n3 .tile:last-child{grid-column:auto}
  .wall.n3 .tile:last-child img{aspect-ratio:4/5}
  .wall.n3:has(.wide){grid-template-columns:1fr 1fr 2fr}
  .wall.n3 .tile.wide img{aspect-ratio:8/5}
  .wall .tile:nth-child(odd) .label{padding-left:18px}
  .wall .tile:first-child .label{padding-left:var(--gutter)}
  .wall.n2 .tile img{aspect-ratio:5/4}
  .label{padding:16px 18px 30px}
  .line{font-size:16.5px}
}

/* Colophon */
.colophon{padding:30px var(--gutter) 36px;border-top:1px solid var(--rule);display:grid;gap:8px;color:var(--ink-2)}
.colophon a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.today:empty{display:none}
.legal{margin-top:10px}

/* The prints */
.sheet-head{padding:clamp(20px,3vw,36px) var(--gutter) clamp(28px,5vw,56px);max-width:52em}
.back{font:400 28px/1 var(--serif)}
.sheet-head h1{font:400 clamp(52px,10vw,130px)/1.02 var(--serif);letter-spacing:-.015em;margin:clamp(24px,5vw,56px) 0 16px -.02em}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px;padding:0 var(--gutter) 56px}
.print.wide{grid-column:1/-1}
.print img{width:100%}
.print figcaption{padding-top:9px}
.print .name{font-size:18px;line-height:1.25}
.print .line{font-size:14.5px}
.print a{text-decoration:underline;text-underline-offset:2px}
@media (min-width:760px){.gallery{grid-template-columns:repeat(4,minmax(0,1fr))}.print.wide{grid-column:span 2}}

.lost .title{font-size:clamp(42px,8vw,110px)}
.lost .ethos{margin-top:12px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}