/* JR PEREZ portfolio. Permanent design language, see DESIGN-LANGUAGE.md.
   Three grounds (green, frost, red), three typefaces, hard edges, no gradients, no radii.
   Token names (--ink, --ink-muted, --ink-faint, --ink-ghost, --ground, --shade, --hot) are read by
   js/figures.js through getComputedStyle. Do not rename them. */

:root {
  --green: #0F2A1E;
  --green-deep: #081A10;
  --green-ask: #050E09;
  --red: #A8423D;
  --hot: #BA4B46;       /* red on green: large display type only, or small mono marks */
  --hot-small: #D9776F; /* small red text on green */
  --oxblood: #2A0B08;   /* accents on red, never body text on green */
  --frost: #EEF2EE;

  --f-sans: "Schibsted Grotesk", Arial, sans-serif;
  --f-disp: "Red Hat Display", Arial, sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, Menlo, monospace;

  --gut: 40px;           /* page gutter */
  --tile: 440px;         /* carousel pitch: 420 tile + 20 gap (kept in js/site.js) */

  /* canvas colors, default = on green */
  --ink: #EEF2EE;
  --ink-muted: rgba(238, 242, 238, .72);
  --ink-faint: rgba(238, 242, 238, .55);
  --ink-ghost: rgba(238, 242, 238, .14);
  --ground: #0F2A1E;
  --shade: rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--green); color: var(--frost); font-family: var(--f-sans); font-size: 16px; line-height: 1.5; }
a { color: inherit; }
img, canvas { max-width: 100%; display: block; }
h1, h2, h3, p, figure, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; }
sub { font-size: .7em; line-height: 0; }
:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--frost); color: var(--green); padding: 10px 16px; z-index: 10; font-weight: 800; }
.skip:focus { left: 0; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- type roles ---------- */
.cap   { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; line-height: 1.9; }
.mono  { font-family: var(--f-mono); font-size: 12px; }
.label { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.btn   { display: inline-block; background: var(--frost); color: var(--green); padding: 16px 26px; text-decoration: none; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.btn.lg { padding: 18px 30px; }
.btn.sm { padding: 11px 20px; }
.btn:hover { background: var(--green); color: var(--frost); outline: 2px solid var(--frost); outline-offset: -2px; }
.g-frost .btn { background: var(--green); color: var(--frost); }
.g-frost .btn:hover { background: var(--frost); color: var(--green); outline-color: var(--green); }
.g-red .btn:hover { background: var(--oxblood); color: var(--frost); outline: none; }
.link  { font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid currentColor; padding-bottom: 3px; text-decoration: none; }
.btn:focus-visible { outline-color: var(--green); outline-offset: -5px; }
.g-red .btn:focus-visible, .g-green .btn:focus-visible { outline-color: var(--green); }

/* ---------- grounds ---------- */
.g-green { background: var(--green); color: var(--frost); }
.g-frost {
  background: var(--frost); color: var(--green);
  --ink: #0F2A1E; --ink-muted: rgba(15,42,30,.75); --ink-faint: rgba(15,42,30,.55); --ink-ghost: rgba(15,42,30,.12); --ground: #EEF2EE;
}
.g-red {
  background: var(--red); color: var(--frost);
  --ground: #A8423D; --hot: #2A0B08;
}

/* ---------- ask strip ---------- */
.ask { background: var(--green-ask); color: var(--frost); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 8px var(--gut); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.ask a { text-decoration: none; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0; text-transform: none; }

/* ---------- hero (home and project) ---------- */
.hero { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 880px; }
.hero > * { position: relative; }
.hero .art { position: absolute; pointer-events: none; }
.hero .art.cad { right: -4%; top: 40px; width: 78%; max-width: 1200px; filter: grayscale(1) contrast(1.15) brightness(1.3); mix-blend-mode: screen; opacity: .9; }
.hero .art.line { right: 2%; top: 90px; width: 62%; max-width: 980px; max-height: 620px; object-fit: contain; filter: invert(1); opacity: .92; }
.hero canvas.art.scene { right: 0; top: 70px; width: min(64%, 980px); height: 660px; }
.nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 26px var(--gut); font-size: 14px; font-weight: 600; }
.nav nav { display: flex; gap: 28px; flex: 1 1 200px; }
.nav nav a, .nav .end a { text-decoration: none; }
.nav nav a:hover, .nav nav a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.nav .mark { font-weight: 900; font-size: 26px; letter-spacing: .02em; flex: 0 0 auto; text-decoration: none; }
.nav .end { flex: 1 1 200px; display: flex; justify-content: flex-end; }
.hero .kicker { padding: 36px var(--gut) 0; }
.phero .kicker { padding: 0 var(--gut) 20px; }
.hero .grow { flex: 1; min-height: 40px; }
.hero h1 { padding: 0 var(--gut); font-weight: 900; line-height: .78; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; font-size: clamp(84px, 17.4vw, 270px); }
.hero h1 .r { color: var(--hot); }
.hero .below { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; padding: 36px var(--gut) 40px; }
.hero .below .acts { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* project hero title: Red Hat Display, size set per title length */
.phero { min-height: 900px; }
.phero h1 { font-family: var(--f-disp); font-size: clamp(96px, 20vw, 300px); }
.phero h1.s1 { font-size: clamp(80px, 14.5vw, 230px); }
.phero h1.s2 { font-size: clamp(72px, 13vw, 210px); }
.phero h1.s3 { font-size: clamp(56px, 9.4vw, 150px); line-height: .86; white-space: normal; max-width: 12ch; }
.phero .lede { padding: 36px var(--gut) 56px; max-width: calc(34ch + 2 * var(--gut)); font-size: 20px; line-height: 1.4; }
.phero .lede p { max-width: 34ch; }

/* ---------- project bar (red) ---------- */
.bar { background: var(--red); color: var(--frost); padding: 28px 0 36px; }
.bar-head { display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gut) 20px; }
.bar-head .ctl { display: flex; gap: 8px; }
.bar-head button { width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: var(--frost); border: 1px solid var(--frost); }
.bar-head button.next { background: var(--frost); color: var(--red); }
.bar-head button:hover { background: var(--frost); color: var(--red); }
.bar-head button.next:hover { background: transparent; color: var(--frost); }
.bar-view { overflow: hidden; padding-left: var(--gut); }
.bar-track { display: flex; gap: 20px; will-change: transform; }
.tile { flex: 0 0 420px; height: 210px; display: flex; gap: 20px; padding: 20px 28px 20px 0; color: var(--frost); text-decoration: none; border-right: 1px solid rgba(238,242,238,.35); position: relative; --ground: #933A35; --hot: #2A0B08; }
.tile:focus-visible { outline: 2px solid var(--frost); outline-offset: -4px; }
.tile .thumb, .tile .mini { flex: 0 0 150px; height: 168px; position: relative; overflow: hidden; }
.tile .thumb img { width: 100%; height: 100%; object-fit: contain; filter: invert(1); padding: 4px; }
.tile canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tile .mini { display: none; }
.tile .over { display: none; }
.tile .idle { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.tile .nm { font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.01em; display: block; }
.tile .ds { font-size: 14px; line-height: 1.4; display: block; margin-top: 6px; }
.tile .ov { font-size: 14px; line-height: 1.4; display: none; }
.tile .nmv { font-weight: 800; font-size: 16px; line-height: 1.1; display: none; }
.tile .open { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; display: block; border-bottom: 1px solid currentColor; align-self: flex-start; padding-bottom: 2px; }
.tile.on { background: rgba(0,0,0,.12); }
.tile.on .thumb.art { display: none; }
.tile.on .mini { display: block; }
.tile.on .nm, .tile.on .ds { display: none; }
.tile.on .nmv, .tile.on .ov { display: block; }
.tile.on .idle .top { display: flex; flex-direction: column; gap: 8px; }
.tile.still .thumb.art { display: none; }
.tile.still .mini { display: block; }
.tile .clone-note { display: none; }

/* ---------- numbered feature pages (home 01-03) ---------- */
.feature { position: relative; overflow: hidden; min-height: 760px; display: flex; flex-wrap: wrap; align-items: center; padding: 60px var(--gut); gap: 24px 56px; font-family: var(--f-disp); }
.feature .shade { position: absolute; inset: 0; background: var(--green-deep); }
.feature > *:not(.shade) { position: relative; }
.rail { display: flex; flex-direction: column; gap: 10px; font-family: var(--f-mono); font-size: 16px; }
.rail span { opacity: .45; }
.rail span.on { opacity: 1; }
.feature .copy { display: flex; flex-direction: column; gap: 22px; max-width: 440px; }
.feature .num { font-weight: 900; font-size: 140px; line-height: .8; letter-spacing: -.04em; color: var(--hot); }
.feature h2 { font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -.02em; }
.feature h2 a { text-decoration: none; }
.feature h2 a:hover, .feature h2 a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.feature p { font-family: var(--f-sans); font-size: 15px; line-height: 1.5; max-width: 36ch; opacity: .92; }
.feature .meta { font-family: var(--f-mono); font-size: 12px; line-height: 1.7; opacity: .85; }
.feature .copy .btn { align-self: flex-start; font-family: var(--f-sans); }
.feature .fig { flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; }
.feature .fig img { max-width: 100%; width: 700px; filter: invert(1); opacity: .94; }
.feature .fig.cad img { width: 780px; filter: grayscale(1) contrast(1.2) brightness(1.35); mix-blend-mode: screen; opacity: 1; }
.feature.f2 .shade { clip-path: polygon(0 24%, 36% 8%, 66% 36%, 56% 100%, 0 100%); }
.feature.f1 .shade { clip-path: polygon(40% 0, 100% 0, 100% 80%, 76% 100%, 44% 88%, 52% 44%); }
.feature.f3 .shade { clip-path: polygon(40% 0, 100% 0, 100% 74%, 80% 100%, 38% 90%, 48% 46%); }

/* ---------- contact band (red) ---------- */
.contact { display: flex; flex-wrap: wrap; align-items: stretch; }
.contact .words { flex: 1.4 1 520px; min-width: 0; padding: 96px var(--gut) 72px; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.contact h2 { font-weight: 900; font-size: clamp(48px, 6.6vw, 96px); line-height: .92; letter-spacing: -.03em; text-wrap: balance; }
.contact .row { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.contact .addr { font-size: 18px; font-weight: 600; }
.contact .photo { flex: 1 1 420px; min-width: 0; min-height: 620px; position: relative; overflow: hidden; background: var(--red); }
.contact .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 24% 40%; filter: grayscale(1) contrast(1.1) brightness(1.1); mix-blend-mode: multiply; }

/* ---------- project page bands ---------- */
.brief { padding: 88px var(--gut) 72px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 48px; }
.brief .b { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.brief p { font-size: 18px; line-height: 1.45; font-weight: 500; max-width: 34ch; }
.brief li { font-size: 17px; line-height: 1.35; font-weight: 600; padding: 0 0 9px; }
.brief li:last-child { padding-bottom: 0; }

.work { padding: 0 var(--gut) 88px; display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: flex-start; }
.work .figs { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.panel { background: var(--green); color: var(--frost); --ink: #EEF2EE; --ink-muted: rgba(238,242,238,.72); --ink-faint: rgba(238,242,238,.55); --ink-ghost: rgba(238,242,238,.14); --ground: #0F2A1E; padding: 28px; display: flex; flex-direction: column; gap: 16px; }
.panel canvas { width: 100%; height: auto; aspect-ratio: 4 / 3; }
.panel canvas[data-h="400"] { aspect-ratio: 2 / 1; }
.panel canvas[data-h="700"] { aspect-ratio: 8 / 7; }
.panel .pair { display: flex; flex-direction: column; gap: 18px; }
.stages { display: flex; flex-wrap: wrap; gap: 4px 18px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.stages li { transition: color 300ms; }
.stages li.on { color: var(--ink); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .stages li { transition: none; } }
.work figcaption { font-size: 14px; line-height: 1.45; max-width: 64ch; opacity: .85; }
.facts { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 36px; }
.facts .it { display: flex; flex-direction: column; gap: 10px; }
.facts .it p { font-size: 17px; line-height: 1.5; max-width: 40ch; }
.facts .it a { font-weight: 600; }
.facts .links { flex-direction: row; flex-wrap: wrap; gap: 12px; }

.gallery { padding: 0 var(--gut) 96px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 32px; align-items: center; }
.gallery figure { display: flex; flex-direction: column; gap: 12px; min-width: 0; grid-column: span 6; }
.gallery .wide { grid-column: 1 / -1; }
@media (max-width: 900px) { .gallery figure { grid-column: 1 / -1; } }
.gallery .im { display: flex; justify-content: center; align-items: center; }
.gallery img { max-height: 520px; width: auto; max-width: 100%; }
.gallery .line .im { background: var(--green); padding: 28px; }
.gallery .line img { filter: invert(1); }
.gallery .cutout .im { background: var(--green); padding: 28px; }
.gallery figcaption { font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; }

.nextp { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 48px; padding: 72px var(--gut); text-decoration: none; background: var(--green-deep); color: var(--frost); cursor: pointer; }
.nextp .txt { display: flex; flex-direction: column; gap: 18px; flex: 1 1 520px; min-width: 0; }
.nextp .t { font-family: var(--f-disp); font-weight: 900; font-size: clamp(44px, 7.4vw, 120px); line-height: .88; letter-spacing: -.04em; text-transform: uppercase; text-wrap: balance; }
.nextp .t .r { color: var(--hot); }
.nextp .d { font-size: 16px; font-weight: 600; }
.nextp .go { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.nextp .sq { width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; background: var(--frost); color: var(--green); transition: transform 220ms ease, background 220ms, color 220ms; }
.nextp:hover .sq, .nextp:focus-visible .sq { background: var(--red); color: var(--frost); transform: translateX(10px); }
.nextp:hover .t, .nextp:focus-visible .t { text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 10px; text-decoration-color: var(--hot); }
.nextp:focus-visible { outline: 3px solid var(--frost); outline-offset: -8px; }
@media (prefers-reduced-motion: reduce) { .nextp .sq { transition: none; } .nextp:hover .sq { transform: none; } }
.pcontact { display: flex; flex-wrap: wrap; gap: 28px 64px; justify-content: space-between; align-items: center; padding: 56px var(--gut); }
.pcontact .ask-l { font-size: 26px; font-weight: 800; line-height: 1.12; max-width: 24ch; }
.pcontact .acts { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.pcontact .addr { font-size: 16px; font-weight: 600; }
.foot { background: var(--green-ask); padding: 20px var(--gut); font-family: var(--f-mono); font-size: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }

@media (max-width: 1100px) { .brief { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  :root { --gut: 20px; }
  .hero { min-height: 720px; }
  .hero h1 { font-size: 15.4vw; }
  .phero h1 { font-size: 19vw; }
  .phero h1.s1 { font-size: 14.5vw; }
  .phero h1.s2 { font-size: 12.5vw; }
  .phero h1.s3 { font-size: 10.2vw; }
  .hero .art.cad { width: 130%; right: -30%; top: 90px; opacity: .55; }
  .hero .art.line { width: 100%; right: 0; top: 110px; opacity: .45; }
  .hero canvas.art.scene { width: 100%; height: 520px; opacity: .55; }
  .nav .mark { order: -1; flex-basis: 100%; }
  .nav nav, .nav .end { flex: 1 1 auto; }
  .feature { min-height: 0; padding: 48px var(--gut); }
  .feature .num { font-size: 96px; }
  .feature h2 { font-size: 40px; }
  .rail { flex-direction: row; }
  .contact .words { padding: 64px var(--gut) 48px; }
  .contact .photo { min-height: 420px; }
  .brief { padding: 56px var(--gut) 48px; grid-template-columns: 1fr; gap: 36px; }
  .work { padding-bottom: 56px; }
  .nextp { padding: 48px var(--gut); }
  .nextp .sq { width: 84px; height: 84px; }
  .panel { padding: 14px; }
}