:root {
  --black: #000; --white: #fff;
  --red: #e01418;       /* the cutout's sticker outline: the one accent, for stickers, tape and notes */
  --ash: #a1a1aa;       /* secondary text on black */
  --graphite: #5f5f67;  /* secondary text on white */
  --rule: #e6e6e9;
  --mist: #f3f3f4;
  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1); /* GlowMatch's own entrance curve */
  --io: cubic-bezier(.76, 0, .24, 1);  /* the loading screen's exit curve */
  --late: 0s;                          /* how much later the hero's entrance starts: html.intro sets the loading screen's length */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--black); color: var(--white); font-family: "Archivo", system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
/* on these the ring's colour (currentColor) is also the colour behind it, so draw it inside the control, or snug in the switch's padding */
.nav .cta:focus-visible, .btn:focus-visible, .ctrl button:focus-visible, .moods [aria-pressed="true"]:focus-visible { outline-offset: -4px; }
.seg button:focus-visible { outline-offset: 1px; }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad); }
.xp { font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
/* hand-set rag: no orphans, balanced headings */
h1, h2, h3, blockquote, .lead { text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--black); color: var(--white); }
[data-nav="dark"] ::selection, .t-strategy ::selection { background: var(--white); color: var(--black); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--graphite); }
/* grey copy with the key phrase picked out */
.muted b, p.intro b { font-weight: 600; color: var(--black); }
p.intro b { color: var(--white); }

/* nav: frosted glass in the tone of what is under it, dark over black and light over the white sheet */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; padding: 4px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; background: rgba(38,38,42,.72); color: var(--white); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); white-space: nowrap; }
.nav a { text-decoration: none; padding: 9px 15px; border-radius: 999px; font-size: 15px; font-weight: 500; }
.nav .av { flex: none; width: 32px; height: 32px; margin-left: 4px; border-radius: 50%; overflow: hidden; }
.av img, .ld-cap img, .fly img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; } /* one crop for the avatar, the photo in the loading screen and the one that flies between them */
.nav .me { font-stretch: 125%; font-weight: 800; padding-left: 12px; margin-right: 10px; }
.nav .links { display: flex; }
.nav .links a:hover { background: rgba(128,128,128,.16); }
.nav .cta { background: var(--white); color: var(--black); margin-left: 6px; transition: background .5s var(--ease), color .5s var(--ease); }
.nav.on-light { background: rgba(255,255,255,.72); color: var(--black); border-color: rgba(0,0,0,.08); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.nav.on-light .cta { background: var(--black); color: var(--white); }
#path, #about { scroll-margin-top: 90px; } /* nav links land with the heading clear of the fixed pill */

/* loading screen. Under html.intro the whole timeline runs on CSS delays, so a script that is late or fails can't trap the page; script.js only counts and flies the photo.
   Letters pop in from 0.15 s, the capsule opens at 0.8 s, the letters slide out at 1.85 s, the screen lifts at 1.97 s, the photo lands in the nav at 2.8 s,
   the hero starts 2.7 s late (--late), and at 4.5 s the screen is hidden whatever else happened.
   Along the bottom Glowy rides a timeline from 0.08 s to 1.58 s at a steady speed, so a keyframe diamond set at a moment (--t, in ms) sits where Glowy is at that moment, and Glowy cheers at the end. */
.ld { display: none; position: fixed; inset: 0; z-index: 100; grid-template-rows: 1fr auto; padding: clamp(20px, 3vw, 44px); background: var(--white); color: var(--black); }
.ld-back { display: none; position: fixed; inset: 0; z-index: 99; background: var(--graphite); } /* a second sheet behind the white one: it lifts a moment later, so a grey band shows between white and black */
html.intro { --late: 2.7s; }
html.intro .ld { display: grid; animation: ld-lift 1s var(--io) 1.97s forwards, ld-gone 1ms 4.5s forwards; } /* the lift comes first: script.js reads its clock */
html.intro .ld-back { display: block; animation: ld-lift 1s var(--io) 2.04s forwards, ld-gone 1ms 4.5s forwards; }
/* the photo builds the nav: it lands at 2.8 s with a squash (script.js flies it there; without the script it simply appears), the pill unrolls out of it to the right,
   then the name, the links and the button come in one after another. Until 2.8 s the nav is invisible, and it sits above the loading screen so the last of the lifting sheets can't cover the landing.
   51px is the pill's height, so the unroll starts as the circle around the photo. script.js marks the nav .built when the button has landed, which switches all of this off:
   left on, an entrance would replay with its three-second wait whenever its element came back from display: none, as the links do when a window is widened past 640px */
html.intro .nav:not(.built) { z-index: 102; opacity: 0; animation: ld-show 1ms 2.8s forwards, nav-open .65s var(--io) 2.9s backwards; }
html.intro .nav:not(.built) .av { animation: nav-land .5s cubic-bezier(.34, 1.4, .64, 1) 2.8s backwards; }
html.intro .nav:not(.built) :is(.me, .links a) { animation: nav-in .5s var(--ease) calc(3.1s + var(--n, 0) * 70ms) backwards; }
html.intro .nav .links a:nth-child(1) { --n: 1; }
html.intro .nav .links a:nth-child(2) { --n: 2; }
html.intro .nav .links a:nth-child(3) { --n: 3; }
html.intro .nav:not(.built) .cta { animation: nav-pop .5s cubic-bezier(.34, 1.56, .64, 1) 3.45s backwards; }
@keyframes nav-open { from { clip-path: inset(0 calc(100% - 51px) 0 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes nav-land { 0% { transform: scale(1.25, .75); } 55% { transform: scale(.93, 1.07); } }
@keyframes nav-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes nav-pop { from { opacity: 0; transform: scale(.6); } }
.ld-word { place-self: center; display: flex; align-items: center; font-size: clamp(56px, 19vw, 300px); }
.ch { display: block; overflow: clip; padding: .04em .015em; }
.ch > span { display: block; transform-origin: 50% 100%; animation: ld-pop .8s cubic-bezier(.34, 1.4, .64, 1) calc(var(--i) * 90ms + 150ms) both, ld-out .55s var(--io) calc(1850ms + var(--i) * 40ms) forwards; }
/* the I of ZIAD: a black stem that opens into the portrait */
.ld-cap { position: relative; width: .2em; height: .72em; margin: 0 .05em; border-radius: .03em; background: var(--black); overflow: hidden; transform-origin: 50% 100%; animation: ld-pop .8s cubic-bezier(.34, 1.4, .64, 1) .24s both, ld-open .75s var(--io) .8s both; }
.ld-cap img { opacity: 0; transform: scale(1.5); animation: ld-reveal .9s var(--ease) .95s both; }
.ld-bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: clamp(16px, 3vw, 40px); animation: ld-fade .4s var(--ease) both, ld-away .3s 1.85s forwards; } /* in at once: the first keyframe fires at 0.15 s */
/* an animation timeline: frame ticks with a taller one every fifth, a fill, keyframe diamonds, and Glowy riding it as the playhead */
.ld-track { --p: 0%; position: relative; height: 40px; border-bottom: 2px solid #d4d4d8;
  background: repeating-linear-gradient(90deg, #a1a1aa 0 2px, transparent 2px 60px) left bottom / 100% 16px no-repeat, repeating-linear-gradient(90deg, #c4c4cc 0 1px, transparent 1px 12px) left bottom / 100% 9px no-repeat; }
.ld-fill { position: absolute; left: 0; bottom: -3px; height: 4px; width: var(--p); border-radius: 2px; background: var(--black); }
/* one diamond per event: the four letters and the portrait opening. Hollow until its moment, then it fills, on the same clock and the same delay as the thing it stands for */
.ld-key { position: absolute; left: calc((var(--t) - 80) / 1500 * 100%); bottom: -6px; width: 10px; height: 10px; margin-left: -5px; transform: rotate(45deg); background: var(--white); box-shadow: inset 0 0 0 2px #a1a1aa; animation: ld-key .3s var(--ease) calc(var(--t) * 1ms) forwards; }
.ld-head { position: absolute; left: var(--p); bottom: 3px; width: 46px; margin-left: -23px; transform-origin: 50% 100%; animation: ld-ride .28s ease-in-out infinite alternate; }
.ld-head img:first-child { animation: ld-away 1ms 1.58s forwards; }
.ld-yay { position: absolute; left: 0; bottom: 0; opacity: 0; transform-origin: 50% 100%; animation: ld-yay .45s cubic-bezier(.34, 1.56, .64, 1) 1.58s forwards; } /* the excited face jumps in when the playhead reaches the end */
.ld-count { font-size: clamp(40px, 5vw, 72px); font-variant-numeric: tabular-nums; }
.ld-count small { font-size: .2em; font-stretch: 100%; font-weight: 600; letter-spacing: 0; color: var(--graphite); vertical-align: top; margin-left: .5em; }
.fly { position: fixed; z-index: 101; overflow: hidden; border-radius: 999px; } /* the photo on its way from the word to the avatar */
@keyframes ld-fade { from { opacity: 0; transform: translateY(10px); } }
@keyframes ld-away { to { opacity: 0; } }
@keyframes ld-pop { 0% { transform: translateY(105%) scale(1, 1.3); } 60% { transform: translateY(0) scale(1.1, .88); } 80% { transform: scale(.97, 1.04); } 100% { transform: none; } }
@keyframes ld-open { from { width: .2em; border-radius: .03em; } to { width: .52em; border-radius: .26em; } }
@keyframes ld-reveal { to { opacity: 1; transform: scale(1.04); } }
@keyframes ld-out { to { transform: translateY(-115%); } }
@keyframes ld-lift { to { transform: translateY(-100%); border-radius: 0 0 48px 48px; } }
@keyframes ld-ride { from { transform: rotate(7deg); } to { transform: translateY(-4px) rotate(12deg); } }
@keyframes ld-key { 40% { transform: rotate(45deg) scale(1.7); } to { background: var(--black); box-shadow: inset 0 0 0 2px var(--black); } }
@keyframes ld-yay { 0% { opacity: 1; transform: scale(.6); } 55% { opacity: 1; transform: translateY(-16px) scale(1.25) rotate(-8deg); } 100% { opacity: 1; transform: none; } }
@keyframes ld-gone { to { visibility: hidden; } }
@keyframes ld-show { to { opacity: 1; } }

/* hero */
.hero { --h1: clamp(40px, 7.2vw, 112px); padding: 150px 0 120px; }
.hero > .wrap { position: relative; }
.hero h1 { font-size: var(--h1); max-width: 15ch; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .06em; }
.w > span { display: inline-block; }
.spark { width: .6em; height: .6em; margin-left: .06em; fill: currentColor; } /* a four-point sparkle closes the headline */

/* the hand-made layer: stickers, tape and handwriting in black, white and the red of the cutout's outline.
   Role stickers sit around the headline on wide screens only (on a phone the headline fills the width). They are placed in headline ems (--x, --y) so they keep their spot as the type scales;
   they sway, and script.js lets them be dragged. rotate, scale and translate are set one by one so the sway, the entrance and the drag never fight over transform */
.stickers { display: none; }
@media (min-width: 1025px) {
  .stickers { display: block; }
  .sticker { position: absolute; z-index: 2; left: calc(var(--pad) + var(--x) * var(--h1)); top: calc(var(--y) * var(--h1)); rotate: var(--tilt); padding: .7em 1.15em; border-radius: 999px; background: var(--white); color: var(--black); box-shadow: 0 8px 22px rgba(0,0,0,.5); font-size: clamp(14px, 1.2vw, 18px); font-stretch: 112%; font-weight: 700; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; cursor: grab; user-select: none; touch-action: none; }
  .sticker:active { cursor: grabbing; }
  .sticker.red { background: var(--red); color: var(--white); }
  .sticker.line { background: var(--black); color: var(--white); box-shadow: inset 0 0 0 2px var(--white), 0 8px 22px rgba(0,0,0,.5); }
}
/* handwritten asides with a drawn arrow, which points down and to the left unless --ar turns it */
.hand, .note { font-family: "Caveat", cursive; font-weight: 600; line-height: 1; }
.note { position: absolute; z-index: 2; display: flex; align-items: center; gap: 4px; rotate: var(--tilt, -4deg); font-size: 27px; white-space: nowrap; pointer-events: none; }
.note.col { flex-direction: column; align-items: flex-start; }
.arr { flex: none; width: 54px; height: 30px; overflow: visible; rotate: var(--ar, 0deg); fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; }
.gm-head h2 { position: relative; }
.gm-head .note { left: min(64%, 360px); bottom: calc(100% + 4px); }
@media (hover: none) { .gm-head .note { display: none; } } /* nothing to hover with */
.t-glowy { position: relative; }
.t-glowy .note { right: 18px; bottom: 30px; --tilt: -3deg; --ar: 18deg; }
@media (min-width: 1025px) and (max-width: 1279px) { .t-glowy .note { display: none; } } /* the tile is at its narrowest here and the mood buttons fill both rows */
.band .note { left: calc(50% + var(--bh) * .23); top: calc(var(--bh) * .1); --tilt: 5deg; color: var(--red); }
.scrap b { padding: 5px 12px 7px; background: var(--white); color: var(--black); font-weight: inherit; }
.scrap .arr { width: 76px; height: 42px; margin: 12px 0 0 -34px; --ar: -32deg; } /* a bigger arrow, swung down towards the face */
@media (prefers-reduced-motion: no-preference) {
  .spark { animation: turn 9s linear infinite; }
  .rv.in .arr { animation: draw .7s var(--ease) .5s backwards; }
  @keyframes turn { to { rotate: 360deg; } }
  @keyframes draw { from { stroke-dashoffset: 120; } }
}
@media (min-width: 1025px) and (prefers-reduced-motion: no-preference) {
  .sticker { animation: stick .5s cubic-bezier(.34, 1.56, .64, 1) calc(1s + var(--late) + var(--i) * 130ms) backwards, sway 4s ease-in-out calc(var(--i) * -1.3s) infinite alternate; } /* slapped on after the headline has risen */
  @keyframes stick { from { opacity: 0; scale: 1.6; } }
  @keyframes sway { from { rotate: calc(var(--tilt) - 2deg); } to { rotate: calc(var(--tilt) + 2deg); } }
}
p.intro { margin-top: 30px; max-width: 48ch; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.45; color: var(--ash); } /* p.intro, not .intro: html.intro marks the loading screen */
.reel { position: relative; margin-top: 64px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #161616; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.ctrl { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 8px; }
.ctrl button { border: 0; border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 600; background: rgba(0,0,0,.62); color: #fff; backdrop-filter: blur(8px); }
html:not(.js) .ctrl { display: none; } /* without the script the buttons do nothing */
.cap { margin-top: 14px; font-size: 15px; color: var(--ash); }
/* mouse screens with the script on: the reel's stage pins to the screen and the card grows to the biggest 16:9 that fits it. script.js moves --g from 0 to 1 */
@media (min-width: 600px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js .grow { --g: 0; --full: min(100%, 100vh * 16 / 9); --card: min(min(100%, 1320px) - 2 * var(--pad), var(--full)); --w: calc(var(--card) + (var(--full) - var(--card)) * var(--g));
    height: 160vh; margin-top: calc(64px - (100vh - var(--card) * 9 / 16) / 2); } /* the card is centred in a screen-high stage: this margin lands it 64px under the intro, where it sits without the pin */
  html.js .grow-pin { position: sticky; top: 0; height: 100vh; max-width: none; padding: 0; display: grid; grid-template: minmax(0, 1fr) auto minmax(0, 1fr) / 100%; justify-items: center; overflow: hidden; pointer-events: none; } /* the stage overlaps the intro, so only the reel takes clicks */
  html.js .reel { grid-row: 2; width: var(--w); margin: 0; border-radius: calc(18px * (1 - var(--g))); pointer-events: auto; }
  html.js .cap { grid-row: 3; width: var(--w); opacity: calc(1 - var(--g) * 4); }
}
/* scroll reveals: script.js adds .rv, then .in once the element is on screen */
.rv { opacity: 0; }
.rv.in { opacity: 1; animation: rv 1s var(--ease) backwards; }
@keyframes rv { from { opacity: 0; transform: translateY(32px); } }
@media (prefers-reduced-motion: no-preference) {
  .w > span { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i) * 55ms + 120ms + var(--late)); }
  .reel { animation: settle 1.4s var(--ease) calc(.55s + var(--late)) both; }
  .pop { animation: pop .6s cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes rise { from { transform: translateY(105%); } }
  @keyframes settle { from { opacity: 0; transform: scale(.96); } }
  @keyframes pop { from { transform: scale(.7) rotate(-8deg); } }
}

/* white sheet */
.sheet { background: var(--white); color: var(--black); border-radius: 40px 40px 0 0; }

/* GlowMatch intro */
.gm { padding: 120px 0 40px; }
.gm-head { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: end; }
.wordmark { position: relative; display: block; width: min(100%, 560px); aspect-ratio: 2000 / 355; background: var(--black); -webkit-mask: url(assets/wordmark.svg) left center / contain no-repeat; mask: url(assets/wordmark.svg) left center / contain no-repeat; }
/* the wordmark's own colours lie over the black, hidden: a pool of light uncovers them at the cursor (script.js sets --mx and --my), and a band of colour runs across once when the logo first scrolls in.
   --r and --s are registered so they can animate; a browser without @property switches the glow on at once and skips the band */
@property --r { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --s { syntax: '<percentage>'; inherits: false; initial-value: -40%; }
.wordmark::before { content: ""; position: absolute; inset: 0; background: url(assets/wordmark.svg) left center / contain no-repeat; transition: --r .6s var(--ease);
  -webkit-mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r, 0px) * .3), transparent var(--r, 0px)), linear-gradient(100deg, transparent calc(var(--s, -40%) - 35%), #000 calc(var(--s, -40%) - 12%), #000 calc(var(--s, -40%) + 12%), transparent calc(var(--s, -40%) + 35%));
  mask: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), #000 calc(var(--r, 0px) * .3), transparent var(--r, 0px)), linear-gradient(100deg, transparent calc(var(--s, -40%) - 35%), #000 calc(var(--s, -40%) - 12%), #000 calc(var(--s, -40%) + 12%), transparent calc(var(--s, -40%) + 35%)); }
@media (hover: hover) { .wordmark:hover::before { --r: 170px; } }
.rv.in .wordmark::before { animation: wm-sweep 1.6s var(--io) .7s; } /* .in arrives with the scroll reveal, so reduced motion gets no band */
@keyframes wm-sweep { to { --s: 140%; } }
.lead { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.2; font-weight: 600; max-width: 28ch; }
.gm-head p + p { margin-top: 20px; max-width: 46ch; font-size: clamp(17px, 1.45vw, 21px); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--rule); }
.facts dt { font-size: 14px; color: var(--graphite); }
.facts dd { font-size: clamp(18px, 1.7vw, 24px); font-stretch: 112%; font-weight: 700; line-height: 1.2; margin-top: 6px; }

/* panorama: the one bold moment */
.pano-sticky { padding: 72px 0; }
.pano-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.pano-head h2 { font-size: clamp(30px, 3.6vw, 52px); max-width: 16ch; }
.pano-head p, .work-head p { max-width: 44ch; font-size: clamp(17px, 1.45vw, 21px); } /* ch widths, so the bigger type keeps its line count */
/* default: swipe sideways (touch screens, reduced motion, script off) */
.pano-track { display: flex; margin-top: 36px; padding: 0 var(--pad); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
@media (pointer: fine) { .pano-track { scrollbar-width: thin; } } /* a mouse can't swipe, so give it a bar to drag */
/* slides are 4:5 and at most 106vw tall, so about 85vw wide: one fits a phone with the next peeking in. max-width: none so img's max-width can't squeeze them */
.pano-track img { height: min(62vh, 520px, 106vw); aspect-ratio: 4 / 5; width: auto; max-width: none; flex: none; scroll-snap-align: center; }
.pano-track img:first-child { border-radius: 14px 0 0 14px; }
.pano-track img:last-child { border-radius: 0 14px 14px 0; }
.pano-foot { display: flex; align-items: center; gap: 18px; margin-top: 28px; font-size: 15px; }
.pano-foot b { font-weight: 700; min-width: 4.2em; font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: 2px; background: var(--rule); }
.bar i { display: block; height: 100%; width: 10%; background: var(--black); }
/* mouse screens with the script on: pin the strip and pan it with the page scroll */
@media (min-width: 600px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.js .pano-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 76px 0 20px; }
  html.js .pano-sticky > .wrap { width: 100%; }
  html.js .pano-track { overflow: visible; scroll-snap-type: none; will-change: transform; margin-top: 28px; }
  html.js .pano-track img { height: clamp(240px, calc(100vh - 360px), 600px); }
  html.js .pano-foot { margin-top: 22px; }
}

/* work */
.work { padding: 110px 0 120px; }
.work-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.work-head h2 { font-size: clamp(30px, 3.6vw, 52px); }
.bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; gap: 20px; margin-top: 44px; }
.tile { display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: var(--mist); }
.tile .media { position: relative; overflow: hidden; }
/* each tile reads top down: what kind of work, the headline, one line about it, then the work itself */
.tile .meta { padding: 28px 30px 26px; }
.tile h3 { font-size: clamp(24px, 2.3vw, 34px); font-stretch: 112%; font-weight: 700; line-height: 1.1; }
.tile p { margin-top: 10px; font-size: 17px; color: var(--graphite); max-width: 46ch; }
.tile .kind { display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--graphite); }
.wide { grid-column: 1 / -1; }
.t-scan .media { aspect-ratio: 4 / 5; background: #f6f1ec; }
.t-scan .media video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 641px) {
  .t-scan { grid-row: span 2; }
  .t-scan .media { flex: 1; aspect-ratio: auto; min-height: 0; }
}
.phones { display: flex; justify-content: center; gap: 4%; height: 380px; padding: 36px 5% 0; }
.phones img { width: 30%; height: auto; align-self: flex-start; border-radius: 14px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); transition: opacity .35s var(--ease); }
.t-ui.dark .phones img { box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.phones img:nth-child(2) { margin-top: -18px; }
.pair img { width: 38%; }
.t-ui { transition: background .5s var(--ease), color .5s var(--ease); }
.t-ui.dark { background: var(--black); color: var(--white); }
.t-ui.dark p, .t-ui.dark .kind { color: var(--ash); }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start; gap: 12px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid currentColor; }
.seg button, .moods button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.seg button[aria-pressed="true"] { background: currentColor; }
.seg button[aria-pressed="true"] span { color: var(--white); }
.t-ui.dark .seg button[aria-pressed="true"] span { color: var(--black); }
.t-glowy .media { flex: 1; min-height: 220px; display: grid; place-items: center; }
.t-glowy .media img { height: 190px; width: auto; }
.moods { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 30px 28px; }
.moods button { border: 1px solid var(--rule); background: var(--white); }
.moods button[aria-pressed="true"] { background: var(--black); border-color: var(--black); color: var(--white); }
.t-id { background: var(--white); border: 1px solid var(--rule); }
.t-id .media { flex: 1; display: grid; place-items: center; padding: 0 24px 28px; }
.t-strategy { background: var(--black); color: var(--white); padding: 28px 30px; justify-content: space-between; gap: 28px; }
.t-strategy blockquote { font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; line-height: 1.4; }
.t-strategy p, .t-strategy .kind { color: var(--ash); margin-top: 0; }
.stat { display: flex; align-items: center; gap: 20px; }
.stat b { font-size: clamp(72px, 8vw, 120px); line-height: .8; color: var(--white); }
@media (min-width: 1025px) {
  .bento { grid-template-columns: repeat(12, 1fr); }
  .t-scan { grid-column: 1 / span 5; }
  .t-ui { grid-column: 6 / span 7; }
  .t-glowy { grid-column: 6 / span 3; }
  .t-id { grid-column: 9 / span 4; }
  .t-chat { grid-column: 1 / span 7; }
  .t-strategy { grid-column: 8 / span 5; }
}
@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .phones { height: auto; padding-bottom: 30px; } /* the phones are small enough here to show whole */
}

/* torn-paper band: Ziad cut out in front of his roles, which flow along a wave behind him */
.band { --bh: clamp(340px, 44vw, 600px); position: relative; height: var(--bh); margin: 0 0 120px; overflow: hidden; background: var(--black); color: var(--white);
  clip-path: polygon(0 18px, 4% 8px, 8% 20px, 12% 6px, 16% 15px, 20% 4px, 24% 17px, 28% 9px, 32% 21px, 36% 7px, 40% 14px, 44% 3px, 48% 16px, 52% 8px, 56% 19px, 60% 5px, 64% 13px, 68% 22px, 72% 9px, 76% 17px, 80% 4px, 84% 14px, 88% 7px, 92% 19px, 96% 10px, 100% 16px,
    100% calc(100% - 12px), 96% calc(100% - 3px), 92% calc(100% - 18px), 88% calc(100% - 6px), 84% calc(100% - 15px), 80% calc(100% - 2px), 76% calc(100% - 20px), 72% calc(100% - 8px), 68% calc(100% - 14px), 64% calc(100% - 4px), 60% calc(100% - 19px), 56% calc(100% - 9px), 52% calc(100% - 16px), 48% calc(100% - 3px), 44% calc(100% - 13px), 40% calc(100% - 21px), 36% calc(100% - 7px), 32% calc(100% - 15px), 28% calc(100% - 2px), 24% calc(100% - 18px), 20% calc(100% - 10px), 16% calc(100% - 20px), 12% calc(100% - 5px), 8% calc(100% - 14px), 4% calc(100% - 4px), 0 calc(100% - 16px)); }
/* the tear boils: three tracings of the edge, each a few pixels off, held for two frames in turn, the way a hand-drawn line is kept alive */
@media (prefers-reduced-motion: no-preference) {
  .band { animation: band-boil .5s step-end infinite; }
  @keyframes band-boil {
    33% { clip-path: polygon(0 19px, 4% 6px, 8% 20px, 12% 10px, 16% 16px, 20% 4px, 24% 20px, 28% 12px, 32% 18px, 36% 11px, 40% 12px, 44% 1px, 48% 20px, 52% 4px, 56% 18px, 60% 1px, 64% 10px, 68% 23px, 72% 12px, 76% 19px, 80% 6px, 84% 11px, 88% 8px, 92% 19px, 96% 8px, 100% 19px, 100% calc(100% - 9px), 96% calc(100% - 5px), 92% calc(100% - 15px), 88% calc(100% - 2px), 84% calc(100% - 17px), 80% calc(100% - 4px), 76% calc(100% - 23px), 72% calc(100% - 11px), 68% calc(100% - 17px), 64% calc(100% - 6px), 60% calc(100% - 15px), 56% calc(100% - 8px), 52% calc(100% - 13px), 48% calc(100% - 4px), 44% calc(100% - 12px), 40% calc(100% - 19px), 36% calc(100% - 9px), 32% calc(100% - 14px), 28% calc(100% - 5px), 24% calc(100% - 18px), 20% calc(100% - 8px), 16% calc(100% - 20px), 12% calc(100% - 6px), 8% calc(100% - 13px), 4% calc(100% - 2px), 0 calc(100% - 19px)); }
    66% { clip-path: polygon(0 19px, 4% 7px, 8% 22px, 12% 7px, 16% 14px, 20% 5px, 24% 15px, 28% 6px, 32% 22px, 36% 7px, 40% 14px, 44% 1px, 48% 16px, 52% 5px, 56% 21px, 60% 3px, 64% 10px, 68% 25px, 72% 10px, 76% 18px, 80% 7px, 84% 12px, 88% 7px, 92% 18px, 96% 11px, 100% 17px, 100% calc(100% - 10px), 96% calc(100% - 1px), 92% calc(100% - 19px), 88% calc(100% - 2px), 84% calc(100% - 13px), 80% calc(100% - 4px), 76% calc(100% - 22px), 72% calc(100% - 7px), 68% calc(100% - 13px), 64% calc(100% - 4px), 60% calc(100% - 17px), 56% calc(100% - 7px), 52% calc(100% - 19px), 48% calc(100% - 1px), 44% calc(100% - 14px), 40% calc(100% - 17px), 36% calc(100% - 10px), 32% calc(100% - 16px), 28% calc(100% - 2px), 24% calc(100% - 15px), 20% calc(100% - 13px), 16% calc(100% - 18px), 12% calc(100% - 3px), 8% calc(100% - 14px), 4% calc(100% - 6px), 0 calc(100% - 15px)); }
  }
}
.band-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-wave text { font-size: 168px; font-stretch: 125%; font-weight: 800; letter-spacing: -.02em; }
.band-wave .w1 { fill: var(--white); }
.band-wave .w2 { fill: none; stroke: var(--white); stroke-width: 2.5px; }
.band-cut { position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-50%); height: calc(100% - 26px); width: auto; max-width: none; } /* fills the band: head just under the top tear, shoulders run off the bottom */

/* path */
.path { padding: 0 0 120px; }
.path h2, .about h2 { font-size: clamp(30px, 3.6vw, 52px); }
.timeline { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); margin-top: 68px; border-top: 2px solid var(--black); }
.timeline li { position: relative; padding: 30px 18px 0 0; }
.timeline li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--black); }
.timeline li.now::before { display: none; }
.timeline .glowy-dot { position: absolute; top: -21px; left: -10px; width: 40px; }
/* wide screens: Glowy flies the line one hop per step, leaving a dotted trail, and each step fills in as it lands (script.js sets .flight, .on and --p).
   The trail is six arcs drawn in a 6 by 1 box and stretched from the first dot to Glowy's resting place, then uncovered from the left */
.trail { display: none; }
.flight .trail { display: block; position: absolute; bottom: 100%; left: calc(-600% + 7px); width: calc(600% + 3px); height: 28px; margin-bottom: 4px; overflow: visible; clip-path: inset(-8px calc((1 - var(--p, 0)) * 100%) -8px -8px); fill: none; stroke: var(--black); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 9; }
.flight .trail path { vector-effect: non-scaling-stroke; }
.flight .glowy-dot { will-change: transform; }
.flight li::before { background: var(--white); box-shadow: inset 0 0 0 2px var(--black); transition: background .4s var(--ease); }
.flight li > div, .flight li > p { opacity: .3; transition: opacity .5s var(--ease); }
.flight li.on::before { background: var(--black); }
.flight li.on > div, .flight li.on > p { opacity: 1; }
.when { font-size: 15px; font-weight: 700; color: var(--graphite); }
.what { margin-top: 6px; font-size: clamp(17px, 1.45vw, 21px); font-weight: 700; line-height: 1.2; }
.detail { margin-top: 8px; font-size: 16px; line-height: 1.45; color: var(--graphite); }
@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; border-top: 0; border-left: 2px solid var(--black); margin-left: 7px; }
  .timeline li { padding: 0 0 34px 30px; }
  .timeline li::before { top: 4px; left: -8px; }
  .timeline .glowy-dot { top: -8px; left: -21px; }
}

/* about */
.about { padding: 0 0 150px; }
.about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; margin-top: 44px; align-items: start; }
/* the portrait is a print taped to the page at a tilt; it swings the other way, with a bounce, while the mouse is on it */
.print { position: relative; rotate: -3deg; padding: 14px 14px 10px; border: 1px solid var(--rule); background: var(--white); box-shadow: 0 22px 44px rgba(0,0,0,.16); transition: rotate .5s cubic-bezier(.34, 1.8, .64, 1); }
.print:hover { rotate: 2deg; }
.print::before, .print::after { content: ""; position: absolute; z-index: 1; top: -14px; width: 100px; height: 30px; background: var(--red); opacity: .88; } /* two strips of tape across the top corners */
.print::before { left: -24px; rotate: -38deg; }
.print::after { right: -24px; rotate: 34deg; }
.print figcaption { padding-top: 10px; text-align: center; font-size: 30px; }
.portrait { width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; object-fit: cover; object-position: 50% 30%; }
.about-copy p { font-size: clamp(18px, 1.55vw, 22px); max-width: 52ch; }
.about-copy p + p { margin-top: 18px; }
.kit { display: grid; grid-template-columns: max-content 1fr; gap: 10px 28px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 15.5px; }
.kit dt { color: var(--graphite); }
.btn { display: inline-block; margin-top: 36px; padding: 13px 26px; border-radius: 999px; background: var(--black); color: var(--white); font-size: 16px; font-weight: 600; text-decoration: none; transition: background .3s var(--ease); }
.btn:hover { background: #2b2b30; }

/* contact */
.contact-wrap { background: var(--white); }
.contact { background: var(--black); color: var(--white); border-radius: 40px 40px 0 0; padding: 130px 0 0; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; }
.contact > .wrap { width: 100%; }
.contact h2 { font-size: clamp(38px, 6vw, 92px); max-width: 14ch; }
.contact .intro { margin-top: 24px; }
.email { display: inline-block; margin-top: 48px; font-size: clamp(24px, 4.4vw, 64px); font-stretch: 112%; font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .18em; transition: text-decoration-thickness .3s var(--ease); overflow-wrap: anywhere; }
.email:hover { text-decoration-thickness: 6px; }
.contact-links { display: flex; gap: 28px; margin-top: 32px; font-size: 16px; }
/* the name is the last thing on the page: its baseline sits on the bottom edge */
.giant { margin-top: auto; padding-top: 120px; font-size: 12.2vw; line-height: .72; white-space: nowrap; text-align: center; }

@media (max-width: 900px) {
  .gm-head, .about-grid { grid-template-columns: 1fr; gap: 32px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .print { max-width: 320px; margin: 0 24px; } /* the margin keeps the tilt and the tape inside a phone's screen */
}
@media (max-width: 640px) {
  .nav .links { display: none; }
  .hero { padding-top: 120px; }
  .reel { border-radius: 12px; }
  .ctrl { left: 10px; bottom: 10px; gap: 6px; }
  .ctrl button { padding: 6px 12px; font-size: 13px; }
  .sheet, .contact { border-radius: 28px 28px 0 0; }
}