/* itsori.com — home. Values from Figma "Portfolio Wireframes" (nodes 376:5234, 393:6151). */

:root {
  --paper: #eeedea;
  --ink: #121212;
  --rule: #283170;
  --muted: #6e6e6e;
  --blue: #0b4f9c;
  --yellow: #efd052;
  --terracotta: #ab5438;
  --white: #fff;

  --sans: "Outfit", system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, monospace;

  --nav-h: 0px; /* sticky offset for the cover stack; set by .has-nav */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

p, h1, h2 { margin: 0; font: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.page { padding: 24px; }
.sheet { display: flex; flex-direction: column; }

.mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.8px;
}

/* ---------- Mark (the circular O) — built in em so it scales from one font-size ---------- */
/* 1em = the 220px disc in Figma; every child position is its Figma px / 220 */

.mark {
  --mark: 220px;
  position: relative;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  font-size: var(--mark);
  -webkit-mask: url("assets/mark-mask-ellipse.svg") 0 0 / 1em 1em no-repeat;
  mask: url("assets/mark-mask-ellipse.svg") 0 0 / 1em 1em no-repeat;
}
.mark--logo { -webkit-mask-image: url("assets/logo-mask-ellipse.svg"); mask-image: url("assets/logo-mask-ellipse.svg"); }

.mark > * { position: absolute; max-width: none; }
.mark__disc { inset: 0; width: 1em; height: 1em; }
.mark__u1 { left: 0.25218em; top: 0.16836em; width: 0.60189em; height: 0.5799em; }
.mark__u2 { left: 0.1666em; top: 0.25078em; width: 0.60189em; height: 0.5799em; }
.mark__o {
  left: 0.22987em;
  top: -0.04558em;
  font-size: 0.78516em;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  color: var(--yellow);
  white-space: nowrap;
}

/* ---------- Nav (home B) ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.has-nav { --nav-h: 73px; }

.nav__cell {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 72px;
  padding: 0 20px;
  border-right: 1px solid var(--ink);
  font-size: 16px;
  white-space: nowrap;
  transition: background-color 0.2s;
}
.nav__cell:hover { background: rgba(255, 255, 255, 0.5); }
.nav__cell--logo { flex: 0 0 350px; }
.nav__cell--cta {
  flex: 0 0 240px;
  border-right: 0;
  background: var(--yellow);
  font-weight: 500;
}
.nav__cell--cta:hover { background: var(--yellow); }
.nav__cell--cta:hover .nav__arrow { transform: translateX(4px); }
.nav__arrow { transition: transform 0.2s; }
.nav__ext { color: var(--muted); }

.logo {
  position: relative;
  display: block;
  width: 145.12px;
  height: 30px;
  overflow: clip;
}
.logo .mark { --mark: 30.0158px; position: absolute; left: 1.46px; top: 0; }
.logo__word {
  position: absolute;
  left: 52.11px;
  top: 1.42px;
  font-size: 21.53px;
  font-weight: 900;
  line-height: normal;
  text-transform: uppercase;
  color: var(--blue);
  white-space: nowrap;
}

/* ---------- Giant wordmark ---------- */

.wordmark {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: 40px 40px 24px;
  border-bottom: 1px solid var(--rule);
  overflow: clip;
  container-type: inline-size;
}
/* Proportions of the 1312px content row at 1440: mark 220, gap 32, text 296 */
.wordmark { gap: min(32px, 2.44cqi); }
.wordmark .mark { --mark: min(220px, 16.77cqi); }
.wordmark__text {
  font-size: min(296px, 22.56cqi);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--blue);
  white-space: nowrap;
}

/* ---------- Opening sentence ---------- */

.intro {
  padding: 56px 40px;
  border-bottom: 1px solid var(--rule);
}
.intro p {
  max-width: 977.563px;
  font-size: 44px;
  line-height: 1.18;
  letter-spacing: -0.66px;
}
.intro em {
  font-family: var(--serif);
  font-size: 49px;
  color: var(--terracotta);
}
.intro a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  transition: color 0.2s;
}
.intro a:hover,
.intro a:focus-visible { color: var(--terracotta); } /* colour only — the underline keeps the same weight on every link, hovered or not */

/* ---------- Cover stack (Figma "Stack · state 1–4/4", 393:6151) — 400px covers stick under the nav and the next slides
   over; each cover keeps its own card, which fades out as the next cover arrives (stack.js). ---------- */

.stack { position: relative; --slot: 400px; }
.stack__item {
  position: sticky;
  top: var(--nav-h);
  display: block;
  height: var(--slot);
  overflow: clip;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
}
.stack__media { position: absolute; inset: 0; overflow: clip; background: #1e1e1e; }
.stack__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack__img--goatc { object-position: 72% 77%; } /* Ori’s Figma crop: plane right, clear of the card */
.stack__img--goatc-sea { object-position: 100% 50%; } /* Figma "image 1330" (502:4926): strip pinned right so the tail meets the edge as in the 1392 frame */
.stack__img--oasis { object-position: 50% 40%; } /* Ori’s Figma crop */
.stack__img--drift { animation: cover-drift 16s ease-in-out infinite alternate; }
@keyframes cover-drift { from { object-position: 46% 50%; scale: 1.06; } to { object-position: 54% 50%; scale: 1; } }
.stack__count { position: absolute; z-index: 1; top: 20px; right: 26px; font-size: 12px; letter-spacing: 0.07em; color: #fff; }

/* Komodor cover — the CTA-footer line drawing (Lottie, 8s seamless: raft → pod cap → hex beam → fins) on the
   footer's white → peach → orange ground with the fine diagonal hatch. Canvas is 196% of the slot height, pinned
   right, top −37%, so the structure bleeds off the bottom like the footer. */
.kcover {
  container-type: size;
  background:
    repeating-linear-gradient(135deg, rgba(74, 35, 24, 0.07) 0 1px, transparent 1px 13.6px),
    linear-gradient(180deg, #f7f8fa 0%, #f7f8fa 11%, #f9efec 21%, #fae5de 32%, #fcdccf 42%, #fed4c4 51%, #ffccb8 59%,
      #fdc0a8 65%, #fbb69d 69%, #f7a78a 74%, #f39474 80%, #ef815d 87%, #ea6f47 93%, #d1603a 97%, #bb5635 100%);
}
.kcover__anim { --c: min(196cqh, 125cqi); position: absolute; top: calc(var(--c) * -0.19); right: calc(var(--c) * -0.009); width: var(--c); height: var(--c); }
.kcover ~ .stack__count { color: var(--ink); }
.kcover__anim svg { display: block; }

/* Card · stacked — 380 × 218, 24px from the left, centred in the 400px slot */
.card {
  position: absolute;
  z-index: 3;
  left: 24px;
  top: 91px;
  display: flex;
  flex-direction: column;
  width: 380px;
  padding: 18px 20px 20px;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  text-decoration: none;
}
.card__type { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--ink); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; }
.card__title { font-size: 52px; font-weight: 300; line-height: 1.05; letter-spacing: -0.02em; white-space: nowrap; }
.card__desc { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; padding: 56px 0 10px; border-bottom: 1px solid var(--ink); }
.card__desc p:first-child { flex: 1 0 0; min-width: 1px; font-size: 13px; line-height: 1.4; }
.card__desc p:last-child { font-size: 20px; line-height: 1; transition: transform 0.2s; }
.card:hover .card__desc p:last-child, .stack__item:hover .card__desc p:last-child { transform: translateX(4px); }
.card:focus-visible { outline: 2px solid var(--blue, #0b4f9c); outline-offset: 3px; }

/* card fades out as the next cover starts to slide over it, back in when scrolling up (stack.js) */
.stack__item > .card { transition: opacity 0.35s ease, translate 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stack__item.is-covered > .card { opacity: 0; translate: 0 -12px; pointer-events: none; }

/* ---------- More work ---------- */

.more-head {
  position: relative; /* sits above the sticky stack */
  padding: 22px 20px;
  background: var(--paper);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.56px;
  white-space: nowrap;
}

.index { position: relative; background: var(--paper); }
.index__row {
  display: flex;
  align-items: center;
  height: 88px;
  overflow: clip;
  transition: background-color 0.2s;
}
.index__row:hover { background: rgba(255, 255, 255, 0.5); }
.index__row > div { display: flex; align-items: center; height: 100%; padding-left: 16px; white-space: nowrap; }
.index__no { flex: 0 0 64px; }
/* Name never shrinks below its text (basis auto), so it can't run under the tags;
   the tags column gives way instead and wraps to two lines when space is tight. */
.index__name {
  flex: 1 0 auto;
  padding-left: 24px !important;
  padding-right: 24px;
  font-size: 48px;
  font-weight: 300;
  letter-spacing: -1.5px;
}
.index__tags { flex: 0 1 420px; min-width: 150px; color: var(--muted); }
.index__row > .index__tags { white-space: normal; line-height: 1.5; }
.index__go { flex: 0 0 110px; }

/* Home A: ruled table; Home B: open rows with a large arrow */
.home-a .more-head { border-bottom: 1px solid var(--ink); }
.home-a .index__row { border-bottom: 1px solid var(--ink); }
.home-a .index__no { border-right: 1px solid var(--ink); }
.home-a .index__tags,
.home-a .index__go { border-left: 1px solid var(--ink); }
.home-b .index__go { font-size: 25px; }
.home-b .index__go span { transition: transform 0.2s; }
.home-b .index__row:hover .index__go span { transform: translate(3px, -3px); }

/* ---------- Small works + Substack ---------- */

.closing {
  position: relative;
  display: flex;
  align-items: flex-start;
  overflow: clip;
  background: var(--paper);
  container-type: inline-size; /* the Small works frame scales from this row's width */
}

.substack {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 1px;
  padding: 20px 40px 32px;
  overflow: clip;
  container-type: inline-size;
}
/* Always 3 lines (explicit <br>s, no wrapping); the type scales down to fit.
   Widest line ("Read my Notes about") is 8.75em wide, so 11.4cqi of the column keeps it inside; capped at the Figma 104px. */
.substack p {
  width: 100%;
  font-size: min(104px, 11.4cqi);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.0385em;
  white-space: nowrap;
}
.substack .accent { color: var(--terracotta); }
.substack em { font-family: var(--serif); color: var(--terracotta); }
/* hover underline — same weight and baseline offset under every word, in each word's own colour (ink / terracotta),
   drawn left → right. Positioned from the baseline (Outfit sits 1em, Instrument Serif 0.99em below the box top). */
@property --u-c { syntax: "<color>"; inherits: false; initial-value: transparent; }
.substack__u {
  --u-base: 1em;
  --u-c: transparent;
  background: linear-gradient(var(--u-c), var(--u-c)) 0 calc(var(--u-base) + 0.075em) / 0% 0.045em no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* OUT — unified: every line fades away together (0.2s) at full length, then resets its width out of sight */
  transition: --u-c 0.2s ease, background-size 0s linear 0.2s;
}
em.substack__u { --u-base: 0.99em; }
/* IN — one fast sweep (0.28s total, split by each segment's share of the width) top line → bottom line; substack.js fine-tunes the split */
.substack p > :nth-child(1) { --d: 0s;    --t: .083s; }
.substack p > :nth-child(2) { --d: .083s; --t: .039s; }
.substack p > :nth-child(4) { --d: .122s; --t: .063s; }
.substack p > :nth-child(5) { --d: .185s; --t: .024s; }
.substack p > :nth-child(7) { --d: .209s; --t: .071s; }
.substack:not(.is-typing):hover .substack__u, .substack:not(.is-typing):focus-visible .substack__u { --u-c: currentColor; background-size: 100% 0.045em; transition: --u-c 0s, background-size var(--t, 0.1s) linear var(--d, 0s); }
/* typing (substack.js): characters keep their space while hidden, so nothing reflows */
.substack .ch { visibility: hidden; }
.substack .ch.is-on { visibility: visible; }
.substack__cur { display: inline-block; position: relative; width: 0; }
.substack__cur::after { content: ""; position: absolute; left: 0.04em; bottom: -0.12em; width: 0.05em; height: 0.92em; background: var(--ink); }
.substack__cur.is-blink::after { animation: cur-blink 1s steps(1) infinite; }
@keyframes cur-blink { 50% { opacity: 0; } }

.small { flex-shrink: 0; overflow: clip; }
.small__media { display: block; position: relative; height: 402.033px; }
.small__media img { width: 100%; height: 100%; object-fit: cover; }

/* Home A: small work on the left with a caption row and dots */
.home-a .closing { border-bottom: 1px solid var(--ink); }
.home-a .small {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px;
  padding-bottom: 20px;
  border-right: 1px solid var(--ink);
}
.home-a .small__media { width: 100%; }
.home-a .small__caption {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--ink);
  font-size: 15px;
  white-space: nowrap;
}
.home-a .small__caption span:last-child { color: var(--muted); }
.home-a .substack { height: 479px; gap: 28px; }

/* Home B: small work on the right — pill caption over a fade, ring arrows */
.home-b .closing { height: auto; } /* follows the 4:5 small-works frame */
.home-b .substack { height: auto; align-self: stretch; } /* same height as the frame, title centred */
.home-b .small { position: relative; width: 445px; }
.home-b .small__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 170.276px;
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0), rgba(18, 18, 18, 0.5) 112.14%);
}
.home-b .small__caption {
  position: absolute;
  left: 50%;
  top: 342px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 336.158px;
  padding: 10px 16px 10px 25px;
  border-radius: 50px;
  background: var(--white);
  font-size: 15px;
  white-space: nowrap;
}
.home-b .small__arrows { position: absolute; top: 0; right: 0; display: flex; }
.home-b .small__arrows button + button { margin-left: -4.42px; }
.home-b .small__arrows button:hover { opacity: 0.7; }

/* ---------- Footer ---------- */

.footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 72px 64px 40px;
  overflow: clip;
  background: var(--blue);
  color: var(--white);
}
.footer__o {
  position: absolute;
  top: -16px;
  left: 42px;
  width: 382px;
  pointer-events: none;
} /* Figma “Letter · wordmark” O in its Hover state (built by home.js from the wordmark glyph) */
.footer__o svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer__top { position: relative; display: flex; align-items: flex-end; }
.footer__title {
  font-size: 64px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -3px;
}
.footer__title span { color: #efd055; }
.footer__cta { display: block; color: inherit; text-decoration: none; } /* title → WhatsApp */
.footer__cta:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; }
.footer__contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  white-space: nowrap;
}
.footer__contact a:hover { text-decoration: underline; }
.footer__icons { flex-direction: row; gap: 10px; } /* same round icon buttons as the mobile menu */
.footer__icons a:hover { text-decoration: none; }
.footer__icons .sn-icon svg { width: 20px; height: 20px; }
.footer__bottom { position: relative; display: flex; }
.footer__bottom p { font-family: var(--mono); font-size: 11px; letter-spacing: 0.66px; }

.home-a .footer__o { left: 532px; }
.home-a .footer__top { justify-content: space-between; }
.home-a .footer__title { width: 727.389px; }
/* Home B footer (Figma 393:6370): one row, right-aligned — title · [icons / © ] */
.home-b .footer { padding: 72px 64px; gap: 0; }
.home-b .footer__top { justify-content: flex-end; align-items: center; gap: 48px; }
/* Title always fully visible: it shrinks (never wraps further) when the row runs out of room; 64px is the Figma size */
.home-b .footer { container-type: inline-size; }
.home-b .footer__cta { flex: 0 1 auto; min-width: 0; }
.home-b .footer__title { width: auto; max-width: 609.824px; white-space: nowrap; font-size: min(64px, calc((100cqi - 254px) * 0.1236)); /* 518px-wide title at 64px + 48px gap + 206px icons */ line-height: 0.9375; letter-spacing: -0.047em; }
.footer__side { display: flex; flex-direction: column; align-items: flex-end; gap: 48px; }
.footer__copy { font-family: var(--mono); font-size: 11px; letter-spacing: 0.66px; white-space: nowrap; }

/* ---------- Narrow screens (no Figma frame — kept close to the desktop system) ---------- */

@media (max-width: 1100px) {
  .nav__cell--logo { flex-basis: auto; }
  .nav__cell--cta { flex-basis: 180px; }
  .index__tags { flex-basis: 260px; }
}

@media (max-width: 760px) {
  .page { padding: 12px; }
  .nav { overflow-x: auto; scrollbar-width: none; }
  .nav__cell { flex: 0 0 auto; gap: 12px; }
  .wordmark { padding: 24px 20px 16px; }
  .intro { padding: 32px 20px; }
  .intro p { font-size: 28px; }
  .intro em { font-size: 31px; }
  /* Figma mobile: year · name with tags under it · ↗ */
  .index__row { display: grid; grid-template-columns: 52px 1fr 44px; grid-template-rows: auto auto; height: auto; padding: 14px 0; row-gap: 4px; }
  .index__row > div { height: auto; }
  .index__no { grid-row: 1 / 3; }
  .index__go { grid-column: 3; grid-row: 1 / 3; }
  .index__row > .index__tags { grid-column: 2; grid-row: 2; padding-left: 24px; font-size: 11px; white-space: normal; }
  .index__name { font-size: 28px; letter-spacing: -0.8px; white-space: normal !important; line-height: 1.05; }
  .index__no { flex-basis: 52px; padding-left: 12px !important; }
  .index__go { flex-basis: 44px; }
  .closing { flex-direction: column; height: auto !important; }
  .home-b .closing { flex-direction: column-reverse; }
  .substack { height: auto !important; width: 100%; padding: 40px 20px; } /* full width: the 3-line type scales from this column (container query) */
  .small { width: 100% !important; border-right: 0 !important; }
  .footer { padding: 56px 20px 32px; }
  .footer__top { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer__title { width: auto !important; font-size: 44px; line-height: 44px; letter-spacing: -1.5px; }
  .footer__bottom { justify-content: flex-start !important; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ===================== Update · Oct 2026 ===================== */

/* Giant wordmark — letters lift up-right and extrude on hover (home.js builds the SVG).
   Figma 393:6172 / 404:95: word fills the row, 40px sides, 72px top (room for the lift), 40px bottom. */
.wordmark { display: block; padding: 72px 40px 40px; overflow: visible; }
.wordmark > .mark { display: none; }
.wordmark__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wordmark__letters svg { display: block; width: 100%; height: auto; overflow: visible; }
.wm-l { cursor: pointer; }
.wm-face { fill: var(--blue); transform: translate(var(--bx), var(--by)); transition: fill 0.28s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.wm-side { fill: var(--terracotta); opacity: 0; transition: opacity 0.22s; }
.wm-inner { fill: #71b99e; opacity: 0; transition: opacity 0.22s; }
.wm-l:hover .wm-face, .wm-l.is-on .wm-face { fill: var(--yellow); transform: none; }
.wm-l:hover .wm-side, .wm-l:hover .wm-inner, .wm-l.is-on .wm-side, .wm-l.is-on .wm-inner { opacity: 1; }

/* Small works — 5 slides, title + date, arrows, dots, auto-advance (home.js). Figma 422:53023 / 422:53139 */
/* 445 × 556 at the 1392px row; below that it shrinks in step with the Substack title (both scale with the row width) */
.sw { position: relative; width: min(445px, 31.97cqi); height: auto; aspect-ratio: 445 / 556; flex-shrink: 0; overflow: hidden; container-type: inline-size; background: #1e1e1e; color: var(--white); }
.sw__track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sw__track::-webkit-scrollbar { display: none; }
.sw__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; overflow: hidden; color: var(--ink); }
.sw__slide img, .sw__slide video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sw__slide:hover img, .sw__slide:hover video { transform: scale(1.03); } /* GIF works ship as looping muted MP4s */
.sw__slide::before, .sw__slide::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; }
.sw__slide::before { top: 0; height: 110px; background: linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)); z-index: 1; }
.sw__slide::after { bottom: 0; height: 45%; background: linear-gradient(rgba(18, 18, 18, 0), rgba(18, 18, 18, 0.5)); }
/* Caption scales with the frame (445px = Figma size) so the text stays readable when the frame shrinks;
   if it still runs out of room, the category gives way before the title. */
.sw__cap { position: absolute; z-index: 2; left: min(20px, 3.4cqi); right: min(20px, 3.4cqi); bottom: min(20px, 3.4cqi); display: flex; justify-content: space-between; gap: min(12px, 2.7cqi); padding: min(10px, 2.2cqi) min(16px, 3.6cqi) min(10px, 2.2cqi) min(25px, 4.5cqi); border-radius: 50px; background: var(--white); font-size: clamp(12px, 3.37cqi, 15px); white-space: nowrap; }
.sw__cap span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sw__cap span:first-child { flex: 0 1 auto; }
.sw__cap span:last-child { flex: 0 3 auto; }
/* home.js adds .is-compact when the full caption can't fit: category text hidden, link icon kept */
.sw__cap.is-compact span:last-child { display: flex; align-items: center; flex: 0 0 auto; font-size: 0; overflow: visible; }
.sw__cap.is-compact .sw__ext { margin-left: 0; }
.sw__cap span:last-child { color: var(--muted); }
/* link arrow — off by default; ↗ for [data-ext] (new tab), → for [data-int] (project page). Figma: “External link” / “Project link” toggles */
.sw__ext { display: none; width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; background: var(--blue, #0b4f9c);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M8 2H3.5M8 2V6.5' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 8L8 2M8 2H3.5M8 2V6.5' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform 0.2s; }
.sw__slide[data-ext] .sw__ext { display: inline-block; }
.sw__slide[data-ext]:hover .sw__ext { transform: translate(2px, -2px); }
.sw__slide[data-int] .sw__ext { display: inline-block; width: 13px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5H10.5M10.5 5L6.8 1.3M10.5 5L6.8 8.7' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5H10.5M10.5 5L6.8 1.3M10.5 5L6.8 8.7' stroke='black' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sw__slide[data-int]:hover .sw__ext { transform: translateX(3px); }
.sw__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sw__arrows { position: absolute; z-index: 3; top: 20px; right: 20px; display: flex; gap: 4px; }
.sw__arrows button { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid currentColor; color: var(--white); font-size: 18px; line-height: 1; transition: background-color 0.2s, color 0.2s; }
.sw__arrows button:hover { background: var(--white); color: var(--ink); }
.home-b .closing .sw { align-self: flex-start; }

@media (max-width: 760px) {
  .wordmark { padding: 28px 16px 16px; }
  .sw { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .sw__cap { left: 14px; right: 14px; bottom: 14px; font-size: 14px; }
  .sw__arrows { top: 14px; right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wm-face, .wm-side, .wm-inner { transition: none; }
}

/* utility: hidden sections (e.g. Komodor Motion + Sales deck, hidden for now) */
[hidden] { display: none !important; }

/* ---------- Footer motion (footer.js): O parallax that never crosses the title, title reveal, colour-swap word ---------- */
.footer__o { transform: translate(var(--ox, 0px), var(--oy, 0px)); will-change: transform; transition: opacity 0.3s ease; }
.footer__title .fw, .footer__title .fw__i { color: inherit; } /* only the word wrappers; without JS "something" keeps its yellow */
.footer__title .footer__swap { color: var(--c, #efd055); transition: color 0.3s ease; }
.fw { display: inline-block; overflow: clip; overflow-clip-margin: 0.12em; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fw__i { display: inline-block; }
.footer__title.is-ready .fw__i { transform: translateY(105%); }
.footer__title.is-in .fw__i { transform: none; transition: transform 0.9s cubic-bezier(0.2, 0.75, 0.15, 1) calc(var(--k, 0) * 70ms); }
@media (max-width: 760px) {
  .home-b .footer { padding: 50px 20px 210px; }   /* Figma 404:219 */
  .home-b .footer__top { justify-content: flex-start; align-items: flex-start; gap: 28px; }
  .home-b .footer__title { font-size: 36px; line-height: 1.08; letter-spacing: -0.03em; }
  .footer__side { align-items: flex-start; gap: 28px; }
  .footer__o { width: 382px; top: 226px; left: 75px; }
}
@media (prefers-reduced-motion: reduce) {
  .footer__title.is-ready .fw__i { transform: none; }
}

/* ---------- Stack · mobile + reduced motion ---------- */
@media (max-width: 760px) {
  .stack { --slot: 460px; } /* Figma mobile cover height */
  .card { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; } /* Figma mobile: card sits 16px from the bottom, cover shows above */
  .card__title { font-size: 36px; }
  .card__desc { padding-top: 32px; }
  .stack__count { top: 14px; right: 14px; }
  .stack__img--goatc-sea { object-position: 50% 0; } /* mobile source is the 390 × 460 Figma crop (508:1302) */
  .kcover__anim { --c: 108cqi; top: calc(var(--c) * -0.167); right: calc(var(--c) * -0.036); } /* Figma mobile: structure above the card, bleeding off the top */
}
@media (prefers-reduced-motion: reduce) {
  .stack__img--drift { animation: none; }
  .stack__item > .card { transition: opacity 0.2s; translate: none !important; }
}

/* ---------- Nav on the home sheet: edge to edge, like Figma (the sheet keeps its 24px margins) ---------- */
.sheet > .site-nav { margin: -24px -24px 0; }

/* ---------- Small works pill: project left, piece right; fades out while the track moves ---------- */
.sw__cap { transition: opacity 0.35s ease, transform 0.35s ease; }
.sw__cap span:first-child { color: var(--ink); }
.sw__track.is-moving .sw__cap { opacity: 0; transform: translateY(8px); }
.sw__arrows button { border: 0; width: 36px; height: 36px; font-size: 22px; }
.sw__arrows button:hover { background: none; color: var(--white); opacity: 0.7; }
@media (max-width: 760px) { .sheet > .site-nav { margin: -12px -12px 0; } }

/* Typography: avoid single-word last lines (widows) */
html body :is(p, li, figcaption, dd) { text-wrap: pretty; }

/* Footer: Privacy link next to the copyright */
.footer__legal { margin-left: 24px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-transform: uppercase; }
.footer__legal:hover { opacity: .75; }

/* More work: no year column (Figma 393:6285 / 404:175 — year hidden) */
.index__no { display: none !important; }
@media (max-width: 760px) {
  .index__row { grid-template-columns: 1fr 44px; }
  .index__row > .index__name, .index__row > .index__tags { grid-column: 1; }
  .index__go { grid-column: 2; }
}

/* Footer edge to edge: cancel the sheet inset (.page padding) under the blue footer */
.sheet > .footer { margin: 0 -24px -24px; }
@media (max-width: 760px) { .sheet > .footer { margin: 0 -12px -12px; } }

/* Opening sentence: always 3 lines, no single word on a line - break after the first sentence,
   type scales with the column (desktop 44px at 978px = 4.5cqi) so the lines never rewrap */
.intro { container-type: inline-size; }
.intro p { font-size: min(44px, 4.45cqi); letter-spacing: -0.015em; text-wrap: wrap !important; }
.intro em { font-size: 1.114em; }