/* Tokens + primitives shared by the home page and case studies.
   Values measured from the reference design (Appendix A of the plan); implementation is original. */
:root {
  --paper: #eef3f4;
  --ink: #0b1026;
  --ink-soft: #4b5575;
  --brand: #0063ad;
  --sky: #29a3ff;
  --rule: #0b102624;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Onest", system-ui, sans-serif;
  --gutter: clamp(16px, 5vw, 72px);
  --max: 1280px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --cut-md: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  --cut-lg: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  /* frosted glass for the nav pills */
  --glass: linear-gradient(135deg, #ffffff80, #ffffff2e);
  --glass-border: #fff9;
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff59, 0 12px 32px -14px #283c6e59;
  color-scheme: light;
}

*, ::before, ::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
ul { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, ::before, ::after { transition-duration: 0.01ms !important; transition-delay: 0s !important; animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

.icon { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 200; padding: 8px 14px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 16px; }

/* Condensed display type: Bricolage Grotesque at wdth 75 / opsz 96 */
.cond { font-family: var(--display); font-variation-settings: "wdth" 75, "opsz" 96; font-weight: 800; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; }

/* Topographic rings; paths are injected by main.js initContours() */
.contours, .hero-contours { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contours { z-index: -1; }
.contours path, .hero-contours path { fill: none; stroke: var(--ink); stroke-opacity: 0.06; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.hero-contours path { stroke-opacity: 0.07; }

/* HUD card: eight 1px gradients draw corner brackets. --b = bracket length, --c = bracket colour */
.hud {
  --c: var(--ink);
  --b: 10px;
  --fill: #eef3f4b8;
  position: relative;
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(var(--c), var(--c)) left top / var(--b) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) right top / var(--b) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / var(--b) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px var(--b) no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / var(--b) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px var(--b) no-repeat,
    var(--fill);
  animation: slide-in 0.9s var(--ease) both;
}
.hud:nth-child(2) { animation-delay: 0.1s; }
.hud:nth-child(3) { animation-delay: 0.2s; }
.hud-link:hover { --c: var(--brand); }
/* Cards on the paper flow: translucent fill, brackets grow + recolour on hover */
.paper .hud { --fill: color-mix(in srgb, var(--paper) 78%, transparent); padding: 20px 22px; animation: none; transition: background-size 0.35s var(--ease); }
.paper .hud:hover { --c: var(--accent, var(--brand)); --b: 22px; }
.hud-label { color: var(--brand); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }

/* Chamfered button (top-left + bottom-right corners cut 10px) */
.cut-btn { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; padding: 11px 18px; border: 1px solid var(--brand); color: var(--brand); background: color-mix(in srgb, var(--paper) 85%, transparent); clip-path: var(--cut); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s, color 0.2s; }
.cut-btn:hover { background: var(--brand); color: var(--paper); }
.cut-btn:focus-visible { outline-color: currentColor; outline-offset: -4px; } /* clip-path would clip an outset ring; currentColor contrasts with the fill in every state */
.cut-btn .icon { width: 14px; height: 14px; }
.cut-btn.is-solid { background: var(--brand); color: var(--paper); }
.cut-btn.is-solid:hover { background: none; color: var(--brand); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { padding: 3px 10px; border: 1px solid var(--rule); color: var(--ink-soft); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Sky-blue light sweep across media on hover */
.burn { position: relative; overflow: hidden; }
.burn::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -90px; width: 70px; pointer-events: none; mix-blend-mode: screen; transform: skew(-14deg); background: linear-gradient(90deg, #0000, #29a3ff00 20%, #29a3ffe6 50%, #29a3ff00 80%, #0000); }
.burn:hover::after, .project:hover .burn::after { animation: burn 0.9s var(--ease) forwards; }

.paper { position: relative; background: var(--paper); }

/* Full-bleed colour band from a max-width element: spread shadow paints the sides, clip-path keeps it horizontal */
.tone { color: var(--ink); background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax); padding-bottom: clamp(80px, 10vw, 130px); }
.tone-ink { --paper: #0b1026; --ink: #eef3f4; --ink-soft: #aab3cf; --brand: #29a3ff; --accent: #29a3ff; --rule: #eef3f433; }
.tone-ink .contours path { stroke-opacity: 0.08; }
.tone .cut-btn:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tone-ink .cut-btn:hover { background: var(--accent); color: #0b1026; border-color: var(--accent); }

/* ---------- Scroll reveal (html.reveal-ready is set by the inline head script) ---------- */
.reveal-ready [data-reveal] {
  --d: calc(var(--i, 0) * 90ms);
  transition: opacity 0.9s var(--ease) var(--d), translate 0.9s var(--ease) var(--d), background-size 0.35s var(--ease);
}
.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 36px; }
/* "scan" sections: a paper-coloured sheet with a brand-colour leading edge slides down off each element */
.reveal-ready [data-reveal-style="scan"] [data-reveal]:not([data-reveal="wipe"]) { position: relative; }
.reveal-ready [data-reveal-style="scan"] [data-reveal]:not([data-reveal="wipe"], :focus-within) { overflow: clip; }
.reveal-ready [data-reveal-style="scan"] [data-reveal]:not(.is-visible) { opacity: 1; translate: none; }
.reveal-ready [data-reveal-style="scan"] [data-reveal]:not([data-reveal="wipe"])::after {
  content: ""; position: absolute; top: -60px; left: 0; right: 0; z-index: 3; height: calc(100% + 60px); pointer-events: none;
  background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--brand) 25%, transparent) 56px, var(--brand) 58px, var(--paper) 60px);
  transition: translate 1.2s var(--ease) var(--d);
}
.reveal-ready [data-reveal-style="scan"] [data-reveal].is-visible::after { translate: 0 100%; }
/* a focused item is unclipped (so its focus ring shows), so the finished sheet must not show below it */
.reveal-ready [data-reveal-style="scan"] [data-reveal].is-visible:focus-within::after { visibility: hidden; }
/* "wipe": condensed headings rise out of a clip */
.reveal-ready [data-reveal="wipe"]:not(.is-visible) { opacity: 1; translate: none; }
.reveal-ready [data-reveal="wipe"] > .cond { transition: translate 1.1s var(--ease), clip-path 1.1s var(--ease); }
.reveal-ready [data-reveal="wipe"]:not(.is-visible) > .cond { clip-path: inset(-20% -5% 100%); translate: 0 0.35em; }

@keyframes rise { from { opacity: 0; transform: translateY(28px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide-in { from { opacity: 0; translate: 24px; } }
@keyframes burn { to { left: 110%; } }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } }
@keyframes case-in { from { opacity: 0; translate: 0 24px; } }