/* Opinion work page — rebuilt from Figma "works-opinion" (pYerAoMQJ0vxt2FurFNnXc, node 6645:14130), 1440 × 21440.
   Black canvas → the page uses the site's dark theme (html.theme-dark, see css/style.css).
   Everything inside .op-board is placed in Figma px (top = Figma y − 87, the header height) and
   js/works/opinion.js scales the whole board with `zoom`: down below 1440, never above 1440 (wider screens keep it centred).
   App screens, cards and posters are 2x webp exports in assets/works/opinion/; all copy is live text. */

@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

.theme-dark {
  --bg: #0f0f0f;                 /* Figma canvas */
  --shape-grid-line: #171717;    /* +8 on the background */
  --shape-grid-hover: #262626;
  --shape-grid-hover-fill: #1c1c1c;
}

:root {
  --op-orange: #ed6432;   /* OPINION brand orange */
  --op-flame: #ff5917;    /* FIFA panel */
  --op-lime: #bbe124;     /* order book / trades / rules labels */
  --op-body: #bababa;     /* body copy on black */
  --op-body-light: #686868;
}

/* ---------- Intro (same as the Versa hero: 1440 wide, shrinks below 1440, never grows) ---------- */
.op-intro {
  position: relative;
  width: 1440px;
  height: 674px;                 /* Figma 87 → 761 (where the brand banners start) */
  margin: 0 auto;
  zoom: var(--intro-zoom, 1);
  font-family: "Geist", var(--font);
  color: #fff;
}
.op-intro :where(h1, p) { margin: 0; }
.op-intro img { display: block; max-width: none; }

/* ---------- Board (1440 wide, zoomed to the window) ---------- */
.op-board {
  position: relative;
  width: 1440px;
  height: 19782px;               /* Figma 761 → 20543 (bottom of the three closing posters + 80); the outro adds its own gap */
  margin: 0 auto;
  zoom: var(--board-zoom, 1);
  font-family: "Geist", var(--font);
  color: #fff;
}
.op-board :where(h1, h2, h3, p, figure) { margin: 0; }
.op-board img { display: block; max-width: none; }

/* Every layer sits at its Figma position. */
.o { position: absolute; }

/* Full-bleed layers (photos, panels) paint under the content. */
.op-bg { z-index: 0; pointer-events: none; }
.op-board > :not(.op-bg) { z-index: 1; }

/* Rounded panels (1400 wide, radius 40) */
.op-panel { left: 20px; width: 1400px; border-radius: 40px; overflow: hidden; }
.op-panel--white { background: #fff; }
.op-panel--orange { background: var(--op-orange); }
.op-panel--grey { background: linear-gradient(180deg, #101010 0%, #444 100%); }
.op-panel--flame { background: var(--op-flame); }
.op-panel--photo img { width: 100%; height: 100%; object-fit: cover; }

/* Photo backdrops (Figma "pic1" / "pic2"): the picture stays 1440 wide and centred; its #0f0f0f
   ground runs out to both window edges on wide screens, covering the shape grid there. */
.op-bleed { background: #0f0f0f; box-shadow: 0 0 0 100vmax #0f0f0f; clip-path: inset(0 -100vmax); }

/* White band behind the share cards: runs out to both window edges past 1440 */
.op-band { left: 0; width: 1440px; background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }

/* ---------- Intro ---------- */
.op-back {
  font-family: var(--font);
  font-size: 16px; line-height: 20px; font-weight: 600;
  text-transform: uppercase; white-space: pre;
  color: #fff;
  transition: color var(--hover-dur) var(--hover-ease);
}
.op-back:hover { color: var(--op-orange); }

.op-lockup { display: flex; align-items: center; gap: 24px; }
.op-lockup img { width: 80px; height: 80px; }
.op-lockup span {
  font-family: var(--font);
  font-size: 44px; line-height: 55px; font-weight: 800;
  color: var(--op-orange);
}

.op-url {
  font-size: 18px; line-height: 23px; font-weight: 500;
  color: var(--op-orange); white-space: nowrap;
}

.op-lede { width: 882px; font-size: 22px; line-height: normal; font-weight: 700; }

/* ---------- Type ---------- */
.op-display { font-size: 36px; line-height: normal; font-weight: 600; }   /* "Welcome to OPINION" */
.op-display--m { font-weight: 500; }                                       /* Portfolio heading */
.op-big { font-size: 40px; line-height: normal; font-weight: 500; }        /* "Moving from an Interest…" */
.op-title { font-size: 22px; line-height: normal; font-weight: 500; white-space: nowrap; }
.op-text { font-size: 16px; line-height: normal; font-weight: 400; color: var(--op-body); }
.op-label { font-size: 20px; line-height: 24px; font-weight: 500; white-space: nowrap; color: var(--op-orange); }
.op-label--lime { color: var(--op-lime); }

.op-title--dark { color: #0f0f0f; }
.op-text--light { color: var(--op-body-light); }
.op-text--white { color: #fff; }
.op-stack p + p { margin-top: 21px; }   /* the blank line between the two Points paragraphs */

/* ---------- Intro on tablets and phones (≤1023px) ----------
   Above 1023 the intro is the 1440 Figma block zoomed down. Below that, zooming makes the copy too small,
   so the block drops the absolute Figma positions and reflows: the ledes wrap to the window at readable sizes. */
@media (max-width: 1023px) {
  .op-intro {
    display: flex; flex-direction: column; align-items: flex-start;
    width: auto; height: auto; zoom: 1;
    padding: 40px var(--gutter) 72px;
  }
  .op-intro > .o { position: static; }
  .op-lockup { margin-top: 56px; gap: 18px; }
  .op-lockup img { width: 64px; height: 64px; }
  .op-lockup span { font-size: 36px; line-height: 1.2; white-space: normal; }
  .op-url { margin-top: 14px; max-width: 100%; font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .op-lede { width: auto !important; max-width: 640px; font-size: 20px; line-height: 1.4; }
  .op-url + .op-lede { margin-top: 40px; }
  .op-lede + .op-lede { margin-top: 24px; }
}
@media (max-width: 767px) {
  .op-intro { padding: 32px var(--gutter) 56px; }
  .op-lockup { margin-top: 40px; gap: 14px; }
  .op-lockup img { width: 56px; height: 56px; }
  .op-lockup span { font-size: 30px; }
  .op-url { font-size: 15px; }
  .op-lede { font-size: 17px; line-height: 1.45; }
  .op-url + .op-lede { margin-top: 32px; }
  .op-lede + .op-lede { margin-top: 20px; }
}

/* ---------- Board on tablets and phones (≤1023px) ----------
   The board reads top to bottom (css/works/board-flow.css + js/works/board-flow.js); these are its copy sizes.
   Photos fill their section; the rounded panels become section plates inset 12px from the window. */
@media (max-width: 1023px) {
  .op-board .fl-sec--panel { margin: 12px; padding: 40px 20px; }
  .op-board .fl-sec--panel > .op-panel { border-radius: 28px; }
  .op-board .fl-sec--band { padding-block: 40px; }
  .op-display { font-size: 30px; line-height: 1.2; }
  .op-big { font-size: 32px; line-height: 1.2; }
  .op-big br { display: none; }
  .op-title { font-size: 22px; line-height: 1.3; }
  .op-text { font-size: 16px; line-height: 1.5; }
  .op-label { font-size: 18px; margin-top: 12px; }
}
@media (max-width: 767px) {
  .op-display { font-size: 26px; }
  .op-big { font-size: 26px; }
  .op-title { font-size: 20px; }
  .op-text { font-size: 15px; }
  .op-label { font-size: 16px; }
}