/* Plates. One product to a screen. Michroma for the statement, names and numbers, Host Grotesk for reading. */
:root { --display: 'Michroma', 'Eurostile', sans-serif; --text: 'Host Grotesk', 'Helvetica Neue', Arial, sans-serif; --num: 'Michroma', sans-serif;
  --name-face: var(--display); --name-w: 400; --name-ls: -.04em; --name-size: clamp(2.2rem, 6.6vw, 7rem); --name-lh: 1; --mark-w: 400; --mark-ls: -.03em; --h-w: 400; --h-size: .95rem; --h-ls: 0; --write-size: clamp(1.4rem, 2.7vw, 2.6rem) }

.mast { position: fixed; inset: 0 0 auto 0; z-index: 20; align-items: baseline; padding-block: clamp(14px, 1.8vw, 24px); font-size: .875rem; font-weight: 500; color: var(--mast-ink, var(--black)); transition: color .3s var(--out) }
.word { grid-column: 1 / span 3; font-family: var(--display); font-size: 1.35rem; letter-spacing: -.03em; line-height: 1; text-decoration: none }

.whole { display: block; height: 1em; width: auto; overflow: visible } .blk.over { fill: transparent } .proof, .stacked { display: none }
.word .whole, .s-back .whole { height: 22px } .s-back { display: inline-flex; align-items: center }
.mast-nav { grid-column: 7 / -1; justify-self: end; align-self: center } .mast-nav a { font-weight: 600; font-size: .95rem; text-decoration: none; padding: 8px 0 } .mast-nav a:hover { text-decoration: underline; text-underline-offset: .3em; text-decoration-thickness: 1.5px }
.mast { align-items: center } .word { grid-column: 1 / span 6 }

/* ── the hero: the programme at a glance. Five fields, five objects, one mark ── */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: clip; isolation: isolate }
.bands { position: absolute; inset: 0; display: flex }
.band { position: relative; flex: 1 1 0; min-width: 0; background: var(--field); color: var(--ink); overflow: clip; text-decoration: none; transition: flex-grow .7s var(--travel) }
.band img { position: absolute; left: 50%; top: 41%; width: clamp(520px, 46vw, 780px); aspect-ratio: 1312 / 816; translate: -50% -50%; pointer-events: none; transition: scale .7s var(--travel) }
.band-tag { position: absolute; left: var(--g); right: var(--g); top: calc(41% + clamp(130px, 12.5vw, 210px)); display: grid; justify-items: center; text-align: center; gap: 2px; opacity: 0; transition: opacity .25s var(--out); font-size: .8rem }
.band-tag b { font-family: var(--display); font-weight: 400; font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing: -.03em }
/* a field held for a product that does not exist yet: the place an object will sit is drawn dashed, because it is only possible.
   Its number is always shown, since the number is all it has */
.band.held .band-tag { opacity: .8 } .band.held .band-tag b { font-size: .8rem; font-family: var(--text); font-weight: 500; letter-spacing: 0 }
.slot { position: absolute; left: 50%; top: 41%; width: min(62%, 190px); aspect-ratio: 4 / 3; translate: -50% -50%; border: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent) }
@media (hover: hover) { .band:hover, .band:focus-visible { flex-grow: 2.3 } .band:hover img, .band:focus-visible img { scale: 1.12 } .band:hover .band-tag, .band:focus-visible .band-tag { opacity: 1; transition-delay: .25s } }
.band:focus-visible { outline-offset: -6px }
.hero-in { position: relative; height: 100%; pointer-events: none; align-content: space-between; padding-block: clamp(84px, 13svh, 140px) clamp(20px, 3vw, 44px) }
.hero h1 { grid-column: 1 / span 8; font-family: var(--display); font-weight: 400; font-size: clamp(1.35rem, 2.9vw, 3rem); line-height: 1.12; letter-spacing: -.04em; text-wrap: balance; color: var(--black) }
.hero-mark { grid-column: 1 / span 5; align-self: end; color: var(--black) } .hero-mark .mark { height: auto; width: 100%; stroke-width: 15 }
.hero-b { grid-column: 9 / -1; grid-row: 2; align-self: end; justify-self: end; text-align: right; font-weight: 500; font-size: .95rem; color: #F3F5EE; max-width: 22ch }
.hero-b .num { display: block; font-size: clamp(1.6rem, 2.6vw, 2.6rem); letter-spacing: -.03em; line-height: 1.1 }

/* one authored moment: the five fields are pulled up in turn, like proofs laid down on a table */
@media (prefers-reduced-motion: no-preference) {
  .band { animation: lay 1s calc(var(--i) * 90ms) var(--travel) both } .band img { animation: seat 1.3s calc(var(--i) * 90ms + .15s) var(--out) both }
  .hero h1, .hero-mark, .hero-b { animation: ink .6s .75s var(--out) both }
  @keyframes lay { from { clip-path: inset(100% 0 0 0) } to { clip-path: inset(0) } }
  @keyframes seat { from { translate: -50% -20%; opacity: 0 } }
  @keyframes ink { from { opacity: 0; translate: 0 12px } }
}

.plate { position: relative; isolation: isolate; height: 100svh; min-height: 560px; background: var(--field); color: var(--ink); overflow: clip; display: grid; align-items: end }
.plate > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none }
.plate-in { width: 100%; align-items: end; padding-bottom: clamp(20px, 3vw, 44px); row-gap: 6px }
.p-no { grid-column: 1 / -1; font-size: clamp(.8rem, 1.1vw, 1rem); width: fit-content }
.p-name { grid-column: 1 / span 9; font-family: var(--name-face, var(--display)); font-weight: var(--name-w, 400); font-size: var(--name-size); line-height: 1; letter-spacing: var(--name-ls) }
.p-name span { display: inline-block }
/* what it is, set like the kind on the plain sheet (.s-kind): small, spaced capitals. story.css sets .st-kind the same, so it holds still on the press */
.p-kind { grid-column: 1 / span 6; font: 500 clamp(.74rem, .95vw, .875rem)/1.3 'Atkinson Hyperlegible Next', var(--text); letter-spacing: .2em; text-transform: uppercase; margin-top: .9em }
.p-kind small { font-size: .8125rem; font-weight: 500; opacity: .7; margin-left: 1.4em }
/* the photographs already stand on the exact colour of their field, so nothing is feathered: a soft edge would show as a halo when the object travels */
.plate > img.float { -webkit-mask-image: none; mask-image: none }
/* the whole plate is the way in. There is no button: you press the product */
.p-open { position: absolute; inset: 0; z-index: 1 } .p-open:focus-visible { outline: 3px solid var(--ink); outline-offset: -10px }
.plate > img { transition: scale .9s var(--out) } @media (hover: hover) { .plate:hover > img { scale: 1.025 } } .plate:active > img { scale: .995; transition-duration: .15s }

/* the object settles as its plate arrives, tied to the scroll itself, never to a timer: plates.html eases it towards the scroll each frame */
} }
@media (max-width: 860px) {
  /* on a phone the fields lie down: five rows, each object at the right of its row, the mark above them on the sheet */
  .hero { height: auto; min-height: 100svh; display: grid; grid-template-rows: auto 1fr }
  .hero-in { grid-row: 1; height: auto; padding-block: 76px 18px; row-gap: 18px; background: var(--paper) } .hero h1 { grid-column: 1 / -1; grid-row: 2; font-size: clamp(1.15rem, 5.2vw, 1.7rem) } .hero-mark { grid-column: 1 / span 9; grid-row: 1 } .hero-b { display: none }
  .bands { position: relative; inset: auto; grid-row: 2; flex-direction: column; min-height: 62svh }
  .band img { left: 74%; top: 50%; width: auto; height: 190% } .slot { left: 74%; top: 50%; width: auto; height: 56% } .band-tag { opacity: 1; top: 0; bottom: 0; left: var(--m); right: 52%; align-content: center; justify-items: start; text-align: left } .band-tag b { font-size: 1.15rem }
  @keyframes lay { from { clip-path: inset(0 100% 0 0) } to { clip-path: inset(0) } }
  .plate > img { object-position: 50% 38%; transform-origin: 50% 38% } .p-name { grid-column: 1 / -1 } .p-kind { grid-column: 1 / -1 } .p-kind small { display: block; margin: 4px 0 0 }
}
/* on a portrait screen the whole object is shown, never a crop of it. Its ground is already the field */
@media (max-width: 860px) { .plate > img { object-fit: contain; object-position: 50% 36%; -webkit-mask-image: none; mask-image: none } }

/* ── the hero today: the mark and nothing else. 4ge is said "forge", so the mark is poured hot and cools to black, and is soft metal under the pointer ── */
.hero { --hot: #FFAE1A }
.hero-mark .whole { width: 100%; height: auto } .hero-proof { display: none }
.hero.solo { background: var(--paper) } .hero.solo .bands { display: none }
.hero.solo .hero-in { pointer-events: auto; align-content: stretch; grid-template-rows: auto 1fr auto }
.hero.solo h1 { grid-column: 1 / span 7; grid-row: 1 }
.hero.solo .hero-b { grid-column: 9 / -1; grid-row: 1; align-self: start; color: var(--black); max-width: none }
.hero-b a { display: inline-block; text-decoration: none } .hero-b a:hover { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1.5px } .hero-b .num { text-decoration: none }
.hero-b svg { display: inline-block; width: .7em; margin-left: .6em; vertical-align: -.1em; transition: translate .4s var(--out) } .hero-b a:hover svg { translate: 0 3px }
.hero.solo .hero-mark { grid-column: 1 / -1; grid-row: 3; width: min(100%, calc((100svh - 330px) * 484 / 196)) }
.hero.solo .hero-proof { grid-column: 5 / -1; grid-row: 2; align-self: end; justify-self: end; text-align: right; display: block; margin-bottom: 18px; color: var(--red); font-size: clamp(.8rem, 1.15vw, 1.05rem); opacity: 0; transition: opacity .25s var(--out) }
.hero-proof span { display: block; font: 500 .8125rem/1.5 var(--text); color: var(--black); margin-top: 4px }
.show-grid .hero.solo .hero-proof { opacity: 1 } .show-grid .hero-mark .proof { display: inline }
.hero-mark .blk { transition: fill 1.9s cubic-bezier(.3, 0, .2, 1) }   /* iron cools slowly */
@media (hover: hover) { :root:not(.fx-on) .hero-mark .blk:hover { fill: var(--hot); transition-duration: 0s } }
/* the mark is poured. Each of its six pieces (the 4's four blocks, then g, then e) fills from the bottom out of the white paper,
   bright at the surface, and cools to black. Nothing falls and no mould is drawn: the shape is only ever the metal.
   The cooling runs at one even pace, because an eased cooling seems to stop on red */
.hero { --straw: #FFD66B; --pour: cubic-bezier(.45, 0, .3, 1) }
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .blk:not(.over), .hero-mark .base { --at: calc(.2s + var(--n) * 130ms); animation: pour .75s var(--at) var(--pour) backwards, heat 1.85s var(--at) linear backwards }
  .hero-mark path.base:nth-of-type(1) { --n: 4 } .hero-mark path.base:nth-of-type(2) { --n: 5 }
  .hero.solo .hero-mark { animation: none } .hero.solo h1, .hero.solo .hero-b { animation-delay: 1.15s }
  @keyframes pour { from { clip-path: inset(100% 0 0 0) } to { clip-path: inset(0) } }
  @keyframes heat { 0% { fill: var(--straw) } 30% { fill: var(--hot) } 54% { fill: var(--red) } 100% { fill: currentColor } }
}
@media (max-width: 860px) {
  /* on a phone the mark stacks, the 4 over ge, and fills the height of the sheet */
  .hero.solo { height: 100svh; display: block } .hero.solo .hero-in { height: 100%; background: none; grid-template-rows: auto auto 1fr auto; padding-block: 76px var(--m); row-gap: 14px }
  .hero.solo h1 { grid-column: 1 / -1; grid-row: 1 } .hero.solo .hero-b { display: block; grid-column: 1 / -1; grid-row: 2; justify-self: start; text-align: left } .hero.solo .hero-proof { display: none }
  .hero.solo .hero-b .num { display: inline; font-size: inherit; margin-right: .7em }
  .hero.solo .hero-mark { grid-row: 4; width: min(100%, calc((100svh - 290px) * 272 / 408)) } .hero.solo .hero-mark .whole { display: none } .hero.solo .hero-mark .stacked { display: block }
}

/* what the mark does under the hand (fx.js). The canvas lies under the words and only shows while something moves */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden }

.hero-mark .blk { transform-box: fill-box; transform-origin: center }
.hero.solo { touch-action: pan-y }


/* a plate whose picture is a place, not an object (the Fireflies sky), fills its field at every size */
.plate > img.float.full { object-fit: cover; object-position: 50% 50% }