/* strutcloset.com — "The sentence is the layout" (taste-skill), in Strut's own type, colour and arches. */

@font-face {
  font-family: "Figtree";
  src: url("assets/fonts/figtree.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #FAF8F5;
  --surface: #F1EEE9;
  --stage: #EEEAE4;
  --wall: #F3EBE0;            /* the welcome screen's alcove: paper with a fifth of oak */
  --ink: #1A1714;
  --muted: #6E665E;
  --paper: #FAF8F5;
  --paper-muted: #C9C1B6;
  --cream: #F4F0E8;           /* the S on the app icon */
  --accent: #F0532B;
  --accent-strong: #D9441F;
  --on-accent: #1A1714;

  --margin: 28px;
  --display: clamp(64px, 9.4vw, 150px);
  --head: clamp(40px, 4.6vw, 72px);
  --title: clamp(24px, 2.2vw, 32px);
  --lead: 20px;
  --text: 17px;
  --small: 14px;
  /* Every arch is one shape at every size: round shoulders of 35% of the frame's width, at most 240px, over a
     flat top, and 28px feet. Half the width would close a phone frame into a dome while a wide one stays
     square-shouldered. Frames read their width from a container (cqi). */
  --arch: .35;
  --arch-max: 240px;
  --arch-foot: 28px;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
main { container-type: inline-size; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--text)/1.5 "Figtree", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One button shape for the whole page: Strut's pill. Orange on ink and paper, ink on orange. */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-size: var(--text); font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease-out), background-color 180ms ease;
}
.button:active { transform: scale(.97); }
.button svg { width: 20px; height: 20px; fill: currentColor; }
.link { font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .22em; text-decoration-thickness: .07em; transition: text-decoration-color 180ms ease; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-strong); }
  .link:hover { text-decoration-color: currentColor; }
}

.dark { background: var(--ink); color: var(--paper); }
.display { font-size: var(--display); line-height: .96; font-weight: 800; letter-spacing: -.045em; }
.heading { font-size: var(--head); line-height: 1; font-weight: 800; letter-spacing: -.035em; text-wrap: balance; }
.title { font-size: var(--title); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.lead { font-size: var(--lead); line-height: 1.45; }

/* ---------- Hero: the sentence, with the closet inside it ---------- */

.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: auto 1fr; padding: var(--margin) var(--margin) 18vh; overflow: hidden; }
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { display: block; width: 104px; height: 27px; fill: currentColor; }
.hero__body { align-self: center; justify-self: center; display: grid; justify-items: center; gap: 36px; text-align: center; }
.hero__title { max-width: 12ch; }
.line { display: block; overflow: hidden; padding: .02em 0 .12em; margin-bottom: -.1em; }
.line > span { display: inline-flex; align-items: center; gap: .18em; white-space: nowrap; }
.hero__lede { max-width: 42ch; color: var(--paper-muted); }
.hero__lede strong { color: var(--paper); font-weight: 600; }

/* The window in the sentence: one line tall, a rail of real pieces sliding past. */
.slot {
  position: relative; display: inline-block; flex: none;
  width: 2.4em; height: .78em; border-radius: .39em .39em .14em .14em; overflow: hidden; background: var(--wall);
  transform: translateY(.04em);
}
.slot__rod { position: absolute; left: 0; right: 0; top: 16%; height: 3px; background: #9C958A; }
.slot__track { position: absolute; left: 0; top: 9%; display: flex; height: 160%; }
.slot__track img { height: 100%; width: auto; margin-right: -.12em; transform-origin: 50% 0; }

/* ---------- Built from what you own: an alcove that rises over the dark ---------- */

.alcove {
  position: relative; z-index: 1; margin: -14vh var(--margin) 0;
  --shoulder: min((100cqi - 2 * var(--margin)) * var(--arch), var(--arch-max));
  border-radius: var(--shoulder) var(--shoulder) var(--arch-foot) var(--arch-foot);
  background: var(--wall);
  padding: clamp(120px, 14vw, 220px) clamp(28px, 5vw, 80px) clamp(56px, 6vw, 96px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(32px, 4vw, 64px); align-items: center;
}
.own__stack { font-size: clamp(52px, 6.6vw, 110px); line-height: .92; font-weight: 800; letter-spacing: -.045em; }
.own__stack span { display: block; white-space: nowrap; }
.own__stack span + span { color: var(--muted); }
.own__facts { display: grid; gap: 18px; max-width: 44ch; margin-top: 40px; }
.own__pieces {
  width: clamp(260px, 28vw, 440px); transform: rotate(-4deg); pointer-events: none;
  filter: drop-shadow(0 18px 24px rgba(42, 31, 20, .18)); /* taste-skill-ignore: the app's cut-out shadow */
}

/* ---------- It knows your day: the heading holds on the left while the reasons pass on the right ---------- */

.rows { padding: clamp(140px, 16vw, 240px) var(--margin) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--margin); align-items: start; }
.rows > .heading { grid-column: 1 / 5; position: sticky; top: 18vh; max-width: 8ch; font-size: clamp(48px, 6vw, 96px); }
.rows__list { grid-column: 6 / 13; display: grid; gap: clamp(40px, 4vw, 64px); }
.row { display: grid; grid-template-columns: clamp(160px, 16vw, 240px) minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); align-items: center; }
.row__text { display: grid; gap: 10px; max-width: 36ch; }
.row { container-type: inline-size; }
.row__photo { margin: 0; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 35% 35% 20px 20px / 28% 28% 20px 20px; background: var(--wall); }
.row__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ---------- From a photo to your rail: pinned while the four steps pass ---------- */

.steps { position: relative; height: 310svh; margin-top: clamp(140px, 16vw, 240px); }
.steps__pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--margin); align-items: center; padding: 0 var(--margin); }
.steps__text { grid-column: 1 / 6; display: grid; gap: 36px; }
.steps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.steps__list button {
  all: unset; box-sizing: border-box; display: grid; gap: 4px; width: 100%; cursor: pointer;
  padding: 16px 20px; border-radius: 24px; color: var(--muted);
  transition: background-color 240ms ease, color 240ms ease;
}
.steps__list strong { font-size: var(--title); line-height: 1.15; font-weight: 700; letter-spacing: -.02em; }
.steps__list span { display: none; font-size: var(--text); color: var(--ink); max-width: 38ch; }
.steps__list button[aria-current="true"] { background: var(--wall); color: var(--ink); }
.steps__list button[aria-current="true"] span { display: block; }
.steps__list button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.steps__arch { grid-column: 7 / 13; container-type: inline-size; }
.steps__frame {
  /* Its height, as a token: the closet inside scales by it, so a wide, short frame (a tablet) keeps the shelf in view. */
  --frame-h: min(82svh, 760px);
  position: relative; height: var(--frame-h); overflow: hidden;
  --shoulder: min(100cqi * var(--arch), var(--arch-max));
  border-radius: var(--shoulder) var(--shoulder) var(--arch-foot) var(--arch-foot); background: var(--wall);
}
.state { position: absolute; inset: 0; display: grid; place-items: center; padding-top: 6%; opacity: 0; transition: opacity 260ms ease; }
.state.is-on { opacity: 1; }
.viewfinder { position: relative; width: min(56%, 320px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 24px; background: #2A2724; }
.viewfinder img { width: 100%; height: 100%; object-fit: cover; }
.viewfinder::after { content: ""; position: absolute; left: 50%; bottom: 6%; width: 60px; height: 60px; margin-left: -30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, .45); } /* taste-skill-ignore: the app's shutter ring */
.cutout { display: grid; justify-items: center; gap: 14px; }
.cutout img { width: min(46%, 260px); filter: drop-shadow(0 12px 18px rgba(42, 31, 20, .2)); } /* taste-skill-ignore: the app's cut-out shadow */
.cutout__name { font-size: var(--lead); font-weight: 700; }
.cutout__tags { display: flex; gap: 8px; }
.cutout__tags span { padding: 4px 10px; border-radius: 8px; background: rgba(26, 23, 20, .07); font-size: var(--small); font-weight: 500; }
/* The app's closet, small: tops on the rail, shoes on a timber shelf, a bag on a brass peg. */
.rail { align-self: stretch; width: min(100%, var(--frame-h) * .92); display: flex; flex-direction: column; padding: calc(var(--frame-h) * .1) 0 calc(var(--frame-h) * .07); }
.rail__top { position: relative; }
.rail__rod { position: absolute; left: -100vw; right: -100vw; top: 10px; height: 8px; background: #A39C91; }
.rail__pieces { position: relative; display: flex; justify-content: center; }
.rail__below { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 6%; padding: 0 6%; }
/* The plank: its top seen from a little above, then its front edge, the app's wood and wood shade. */
.shelf { position: relative; flex: 0 1 64%; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 3% 11px; }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: #D5B68E; border-bottom: 5px solid #B3926B; border-radius: 0 0 3px 3px; }
.shelf img { position: relative; z-index: 1; width: 29%; height: auto; margin-bottom: -3px; filter: drop-shadow(0 4px 5px rgba(42, 31, 20, .2)); } /* taste-skill-ignore: the app's shelf shadow */
.peg { flex: 0 0 21%; align-self: center; display: grid; justify-items: center; }
.peg__hook { position: relative; z-index: 1; width: 22px; height: 22px; margin-left: 10px; }
.peg img { width: 100%; height: auto; margin-top: -12px; filter: drop-shadow(0 8px 10px rgba(42, 31, 20, .18)); } /* taste-skill-ignore: the app's garment shadow */
.hang { position: relative; flex: none; width: 23%; margin: 0 -1%; transform-origin: 50% 0; }
.hang img { width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(42, 31, 20, .18)); } /* taste-skill-ignore: the app's garment shadow */
.wear { display: grid; gap: 12px; width: min(56%, 320px); }
.wear__card { border-radius: 24px; overflow: hidden; background: var(--surface); }
.wear__card img { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; }
.wear__card p { padding: 12px 16px 14px; font-size: var(--small); }
.wear__card strong { display: block; font-size: var(--text); }
.wear .button { background: var(--ink); color: var(--paper); }

/* ---------- The invitation: the app's orange launch screen, with its S ---------- */

.invite { position: relative; overflow: hidden; background: var(--accent); color: var(--ink); margin-top: clamp(120px, 12vw, 200px); padding: clamp(96px, 12vh, 160px) var(--margin) clamp(72px, 9vh, 120px); }
.invite__s { position: absolute; right: -6vw; top: 50%; width: min(64vw, 900px); height: auto; aspect-ratio: 1185 / 1208; transform: translateY(-50%) rotate(-8deg); fill: var(--cream); pointer-events: none; }
.invite__title { position: relative; max-width: 9ch; }
.invite__lede { position: relative; margin-top: 28px; max-width: 34ch; }
.platforms { position: relative; margin-top: clamp(48px, 6vw, 88px); display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: var(--margin); }
.platform { display: grid; gap: 14px; align-content: start; padding: 28px; border-radius: var(--arch-foot); background: var(--cream); }
.platform__head { display: flex; align-items: center; gap: 14px; }
.platform__icon { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; }
.platform__icon svg { width: 24px; height: 24px; fill: currentColor; }
.platform h3 { font-size: var(--title); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.platform ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.platform .button { justify-self: start; margin-top: 6px; background: var(--ink); color: var(--paper); }
.platform .button[aria-disabled="true"] { background: rgba(26, 23, 20, .1); color: var(--muted); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .platform .button:hover { background: #000; } }

/* ---------- Footer: an invitation over the cropped name ---------- */

.footer { position: relative; min-height: 100svh; overflow: hidden; padding: clamp(64px, 10vh, 120px) var(--margin) 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 var(--margin); align-content: start; }
.footer__invite { grid-column: 1 / 8; display: grid; gap: 28px; align-content: start; }
.footer__invite .button { justify-self: start; }
.footer__links { grid-column: 10 / 13; display: grid; gap: 10px; align-content: start; }
.footer__links a { text-decoration: none; }
.footer__legal { position: absolute; left: var(--margin); right: var(--margin); bottom: calc(28vw * .68); display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; font-size: var(--small); color: var(--paper-muted); }
.footer__name { position: absolute; left: calc(var(--margin) - 1vw); bottom: 0; width: calc(100% + 6vw); height: auto; aspect-ratio: 4432 / 1138; transform: translateY(30%); fill: var(--paper); }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js .hero [data-line] { transform: translateY(105%); animation: line-up 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * 110ms); }
  .js .hero [data-load] { opacity: 0; transform: translateY(12px); animation: rise 600ms var(--ease-out) forwards; animation-delay: var(--d); }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .own__pieces { opacity: 0; transform: translateY(40px) rotate(-4deg); transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-expo); }
  .js .alcove.is-in .own__pieces { opacity: 1; transform: rotate(-4deg); }
  .js .invite__s { transform: translateY(-40%) rotate(-14deg); transition: transform 1400ms var(--ease-expo); }
  .js .invite.is-in .invite__s { transform: translateY(-50%) rotate(-8deg); }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Phones ---------- */

@media (max-width: 820px) {
  :root { --margin: 20px; --display: 13.5vw; --head: clamp(36px, 9vw, 52px); --title: 22px; --lead: 17px; }
  .hero { min-height: 0; padding-bottom: 22vh; }
  .hero__body { gap: 28px; padding-top: 96px; }
  .line > span { flex-direction: column; gap: .12em; }
  .slot { width: 3.2em; height: 1em; border-radius: .5em .5em .16em .16em; }
  /* One column: the look stands in the top of the alcove, as the welcome screen's clothes do, and the words follow. */
  .alcove { margin: -12vh 12px 0; grid-template-columns: 1fr; padding: 48px 20px 40px; --shoulder: min((100cqi - 24px) * var(--arch), var(--arch-max)); }
  .own__stack { font-size: 11.2vw; }
  .own__pieces { order: -1; width: min(58vw, 340px); justify-self: center; margin-bottom: 16px; }
  .rows { grid-template-columns: 1fr; }
  .rows > .heading { grid-column: 1; position: static; max-width: none; margin-bottom: 40px; }
  .rows__list { grid-column: 1; gap: 40px; }
  .row { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; }
  .row__photo { border-radius: 35% 35% 14px 14px / 28% 28% 14px 14px; }
  .steps { height: 300svh; }
  .steps__pin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 16px; padding: 16px var(--margin) 20px; }
  .steps__arch { grid-column: 1; grid-row: 1; }
  .steps__frame { --frame-h: 50svh; }
  .steps__text { grid-column: 1; grid-row: 2; gap: 12px; }
  .steps__text .heading { font-size: 28px; }
  .steps__list button { padding: 10px 14px; }
  .steps__list button:not([aria-current="true"]) { display: none; }
  .steps__count { display: block; }
  .invite__s { right: -34vw; top: auto; bottom: -6vw; width: 96vw; }
  .js .invite__s, .js .invite.is-in .invite__s { transform: rotate(-8deg); }
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .wear { width: 50%; }
  .platform .button { justify-self: stretch; }
  .footer { grid-template-columns: 1fr; padding: 72px var(--margin) calc(34vw * .68 + 112px); min-height: 0; }
  .footer__invite, .footer__links { grid-column: 1; }
  .footer__invite .button { justify-self: stretch; }
  .footer__links { grid-auto-flow: column; justify-content: start; gap: 18px; margin-top: 32px; font-size: var(--small); }
  .footer__legal { bottom: calc(34vw * .68 + 16px); flex-direction: column; }
  .footer__name { width: calc(100% + 30vw); }
}
.steps__count { display: none; font-size: var(--small); font-weight: 600; color: var(--muted); }