/* Obviously (OH no Type Co) from the Figma template: Regular for text, Wide for the headline. Needs a web licence before going live */
@font-face{font-family:Obviously;src:url(assets/fonts/obviously-regu.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Obviously Wide";src:url(assets/fonts/obviously-wide.woff2) format("woff2");font-weight:400;font-display:swap}
@view-transition{navigation:auto}

/* theme: black type and hairlines on white, grey for quiet labels */
:root{--ink:#111;--soft:#111;--accent:#8a8a8a;--paper:#fff;--sky:#e6e6e6;--line:1px solid var(--ink);--orange:#bf4d17}
*{box-sizing:border-box;margin:0}
html{color-scheme:only light}
body{font-family:Obviously,system-ui,sans-serif;font-size:clamp(17px,1.6vw,22px);color:var(--soft);background:var(--paper);overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block}

/* hero */
.hero{background:var(--paper);padding:0 6vw;view-transition-name:hero}
/* intro and quote share a full-bleed periwinkle panel, split by a hairline */
.top{display:flex;margin:0 -6vw;background:var(--sky);border-bottom:var(--line)}
/* two equal halves with the line in the middle; each block centred in its half, like a poster */
.intro,.quote{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 6vw}
.intro p{color:var(--ink);line-height:1.1;font-family:"Obviously Wide",Obviously,sans-serif}
.btns{display:flex;gap:12px;margin-top:36px}
/* labels are all lowercase, so trim to the x-height (not cap height) to centre the letters optically */
.btn{display:inline-block;text-align:center;line-height:1;text-box:trim-both ex alphabetic;border:var(--line);border-radius:999px;padding:20px 38px;color:var(--ink);transition:background .35s,color .35s}
.btn:hover,.btn.on{background:var(--ink);color:var(--paper)}
.quote{border-left:var(--line);line-height:1.1}
.quote span{max-width:20ch}
/* statement: one big justified paragraph in caps, the portrait cutting into its last lines,
   small caps links pinned bottom-left */
.statement{--fs:clamp(30px,4.4vw,76px);display:grid;grid-template-columns:46fr 33fr 21fr;padding:48px 0 0;border-bottom:var(--line)}
.statement h1{grid-area:1/1/2/4;position:relative;z-index:1;font:400 var(--fs)/.95 Obviously,sans-serif;text-transform:uppercase;text-align:justify;letter-spacing:-.01em}
.me{grid-area:1/2/3/3;margin-top:calc(var(--fs)*2.9);width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--sky)}
.links{grid-area:2/1;align-self:end;display:flex;flex-direction:column;padding-bottom:20px;font-size:.6em;text-transform:uppercase;line-height:1.25}
.links a:hover{text-decoration:underline}
.links .gap{height:1.25em}
.label{text-align:center;margin:56px 0 20px;color:var(--ink);font-size:1.2em;line-height:1.1}
.brands{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding-bottom:56px}
.tile{width:220px;height:136px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.tile:hover{transform:translateY(-6px)}
/* logo widths from the Figma template, as a share of the tile so they scale on smaller screens */
.tile img{height:auto}
.tile.w{background:#fff}.tile.d{background:#1d1d1d}.tile.o{background:var(--orange)}
.tile.w img{width:42%}.tile.d img{width:28%}.tile.o img{width:45%}

/* work rows */
/* a cobalt ticker leads into the work */
/* zero-height marker: the tabs turn compact once it scrolls out of view */
#tabs-mark{height:0}
.ticker{overflow:hidden;background:var(--ink);color:var(--paper);font-size:.7em;letter-spacing:.04em;padding:8px 0}
.ticker p{width:max-content;white-space:pre;animation:tick 40s linear infinite}
@keyframes tick{to{transform:translateX(-50%)}}
.tabs{display:flex;gap:48px;padding:14px 6vw;margin-bottom:20px;position:sticky;top:0;z-index:5;background:var(--paper);border-bottom:var(--line)}
.tabs button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.tabs button:not(.on){color:var(--accent)}.tabs button:not(.on):hover{opacity:.6}
/* switching sets: the new rows rise and fade in, staggered */
.set:not([hidden]) .row{animation:setin .8s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes setin{from{opacity:0;transform:translateY(28px)}}
.set .row:nth-child(2){animation-delay:.08s}.set .row:nth-child(3){animation-delay:.16s}.set .row:nth-child(4){animation-delay:.24s}
/* once stuck the labels shrink, like a magazine running header; height never changes so nothing below jumps */
.tabs.stuck button{transform:scale(.85)}
.tabs .on{text-decoration:underline;text-underline-offset:6px}
.row{overflow:hidden;margin-bottom:16px}
.track{display:flex;gap:16px;width:max-content;animation:slide 117s linear infinite;will-change:transform;backface-visibility:hidden}
.row.off .track{animation-play-state:paused}
.row.rev .track{animation-direction:reverse;animation-duration:142s}
.row{--h:min(62vw,648px)}
.track img{height:calc(var(--h)*var(--s,1));width:auto;aspect-ratio:1;object-fit:cover}
.row{transition:transform .6s cubic-bezier(.2,.7,.2,1);contain:layout paint;will-change:transform}
/* while the page is scrolling, rows ignore the mouse so hover effects don't fire mid-scroll */
.scrolling main .set{pointer-events:none}
.track img[data-src]{background:#f1e9dd}
/* hovered row grows 5%, the other shrinks 5%, so the gap between them stays the same */
@media (hover:hover){main:has(.row:hover) .row{transform:scale(.95)}main:has(.row:hover) .row:hover{transform:scale(1.05)}}
@keyframes slide{to{transform:translateX(calc(-50% - 8px))}}
/* edge arrows: hidden until the mouse nears that side, then a paper disc with a hairline arrow;
   deep in the edge zone it fills blue and the arrow leans further that way */
.row{position:relative;-webkit-user-select:none;user-select:none}
.nudge{position:absolute;top:50%;width:76px;height:76px;margin-top:-38px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .35s,transform .5s cubic-bezier(.2,.7,.2,1),background .35s,color .35s}
.nudge.l{left:6vw;transform:translateX(-12px) scale(.85)}.nudge.r{right:6vw;transform:translateX(12px) scale(.85)}
.nudge svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.row[data-near=l] .nudge.l,.row[data-near=r] .nudge.r{opacity:1;transform:none;pointer-events:auto}
.row.push .nudge{background:var(--ink);color:var(--paper)}
.row[data-near] .nudge:active{transform:scale(.9);transition-duration:.1s}
.row.push .nudge.l svg{transform:translateX(-5px)}.row.push .nudge.r svg{transform:translateX(5px)}

/* cover page */
.letter{min-height:70vh;padding:80px 6vw 120px;text-align:center;line-height:1.15}
.letter h2{font-weight:400;font-size:inherit;margin-bottom:64px;color:var(--accent)}
.cats{display:flex;justify-content:center;gap:36px;margin-bottom:72px;flex-wrap:wrap}
.cats a{position:relative}
.cats a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s}
.cats a:hover::after{transform:scaleX(1)}
.letter p{margin-bottom:44px;color:var(--ink)}
.back{display:inline-block;margin-top:24px;border-bottom:1.5px solid}

/* editorial motion */
.rise>*{opacity:0;transform:translateY(24px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise>*:nth-child(2){animation-delay:.12s}.rise>*:nth-child(3){animation-delay:.24s}
.rise>*:nth-child(4){animation-delay:.36s}.rise>*:nth-child(5){animation-delay:.48s}.rise>*:nth-child(6){animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
::view-transition-new(root){animation:wipe .7s cubic-bezier(.7,0,.2,1)}
::view-transition-old(root){animation:fade .7s ease both}
@keyframes wipe{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes fade{to{opacity:.4}}

/* touch screens: no hover, so press-and-hold pauses a row */
@media (hover:none){
  .row:active .track{animation-play-state:paused}
}

/* tablet */
@media (max-width:900px){
  .hero{padding:0 6vw}
  .brands{display:grid;grid-template-columns:repeat(3,1fr)}
  .tile{width:auto;height:auto;aspect-ratio:220/136}
  .row{--h:76vw}
}

/* phone: the quote becomes the headline, set big and condensed */
@media (max-width:600px){
  .hero{padding:0 16px}
  .top{flex-direction:column;margin:0 -16px}
  /* centring is for wide screens; on a phone everything stays left-aligned */
  .intro,.quote{align-items:stretch;text-align:left}
  .quote span{max-width:none}
  .label{text-align:left}
  .statement{--fs:9vw;grid-template-columns:1fr 1fr;column-gap:12px;padding-top:32px}
  .statement h1{grid-area:1/1/2/3}
  .me{grid-area:2/2;margin-top:24px}
  .links{grid-area:2/1}
  .brands{justify-content:flex-start}
  .intro{padding:44px 16px 36px}
  .quote{padding:32px 16px 40px;border-left:0;border-top:var(--line)}
  .btns{gap:10px}
  .btn{flex:1;padding:20px 0}
  .label{margin:36px 0 12px}
  .brands{padding-bottom:36px}
  .brands{gap:8px}
  .tile{border-radius:6px}

  .tabs{gap:32px;padding:14px 16px;margin-bottom:6px}
  .row{margin-bottom:8px}
  .track{gap:8px;animation-duration:75s}
  .row.rev .track{animation-duration:92s}
  @keyframes slide{to{transform:translateX(calc(-50% - 4px))}}
  .row{--h:92vw}
  .letter{padding:56px 16px 88px}
  .letter h2{margin-bottom:40px}
  .cats{gap:10px;margin-bottom:52px}
  .cats a{border:1.5px solid;border-radius:999px;padding:6px 16px}
  .cats a::after{display:none}
}

@media (prefers-reduced-motion:reduce){.track,.ticker p,.rise>*{animation:none;opacity:1;transform:none}}