/* portal-work.css: the cloned work (znerold.com/work and its cases) in Portal's type and colours.
 * Loaded after the v6 stylesheets. Layout, media and copy are v6's; this file swaps the fonts for
 * Portal's (Rethink Sans for display and reading, Nyght Serif Light Italic for the turned words,
 * Uncut Sans Medium for nav and small text, Fragment Mono for labels), the ground for Portal's
 * white index and brand-coloured case pages, and the chrome for Portal's header and footer. */

@font-face { font-family: "Rethink Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/_assets/fonts.gstatic.com/s/rethinksans/v5/AMODz4SDuXOMCPfdoglY9JQuWHBGG0X45DmqkmFRCEvmma-aua4.woff2") format("woff2"); }
@font-face { font-family: "Rethink Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/_assets/fonts.gstatic.com/s/rethinksans/v5/AMODz4SDuXOMCPfdoglY9JQuWHBGG0X45DmqklNRCEvmma-aua4.woff2") format("woff2"); }
@font-face { font-family: "Rethink Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/_assets/fonts.gstatic.com/s/rethinksans/v5/AMODz4SDuXOMCPfdoglY9JQuWHBGG0X45Dmqkr9WCEvmma-aua4.woff2") format("woff2"); }
@font-face { font-family: "Nyght Serif Light Italic"; font-display: swap;
  src: url("/_assets/framerusercontent.com/assets/3AmdPkevlrHjCrQ4Rabx0lqNXRU.woff2") format("woff2"); }
@font-face { font-family: "Uncut Sans Medium"; font-display: swap;
  src: url("/_assets/framerusercontent.com/assets/s9HxPLJHVbBpli9cgtgTJGTtotI.woff2") format("woff2"); }
@font-face { font-family: "Fragment Mono"; font-display: swap;
  src: url("/_assets/fonts.gstatic.com/s/fragmentmono/v6/4iCr6K5wfMRRjxp0DA6-2CLnB45HhrUI.woff2") format("woff2"); }

/* ── colour ───────────────────────────────────────────────────────────── */
html:has(body.portal-work), body.portal-work {
  --v4-paper: #FFFFFF; --v4-paper-2: #F4F4F4; --v4-paper-3: #EBEBEB;
  --v4-ink: #000000; --v4-ink-2: #2B2B2B; --v4-mute: #6B6B6B;
  --v4-line: #E2E2E2; --v4-line-soft: #EFEFEF; --v4-accent: #000000;
  background: var(--v4-paper); color: var(--v4-ink);
}
body.portal-case { background: var(--pw-ground, #000); }
html:has(body.portal-case.pw-dark), body.portal-case.pw-dark {
  --v4-paper: var(--pw-ground); --v4-paper-2: color-mix(in srgb, var(--pw-ground) 88%, #fff);
  --v4-paper-3: color-mix(in srgb, var(--pw-ground) 80%, #fff);
  --v4-ink: #FFFFFF; --v4-ink-2: rgba(255,255,255,.86); --v4-mute: rgba(255,255,255,.66);
  --v4-line: rgba(255,255,255,.18); --v4-line-soft: rgba(255,255,255,.1); --v4-accent: #FFFFFF;
}
html:has(body.portal-case.pw-light), body.portal-case.pw-light {
  --v4-paper: var(--pw-ground); --v4-paper-2: color-mix(in srgb, var(--pw-ground) 92%, #000);
  --v4-ink: #000000; --v4-ink-2: #2B2B2B; --v4-mute: #555555; --v4-line: rgba(0,0,0,.14); --v4-accent: #000000;
}
html:has(body.portal-case) { background: var(--pw-ground, #000); }

/* ── type ─────────────────────────────────────────────────────────────── */
body.portal-work, body.portal-work * { font-family: "Rethink Sans", "Helvetica Neue", Arial, sans-serif !important; }
body.portal-work i, body.portal-work em, body.portal-work .v6-mast i, body.portal-work .v6-h i {
  font-family: "Nyght Serif Light Italic", Georgia, serif !important; font-style: normal; font-weight: 400; letter-spacing: -.01em;
}
body.portal-work .v6-label, body.portal-work .v6-label *, body.portal-work dt,
body.portal-work .v6-case-status, body.portal-work .v6-plate-meta, body.portal-work .v6-row__y,
body.portal-work .v6-row__d, body.portal-work .v6-row__c, body.portal-work .v6-index-head,
body.portal-work .v6-career__when, body.portal-work .v6-cursor-label__meta {
  font-family: "Fragment Mono", ui-monospace, monospace !important; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px !important; font-weight: 400;
}
body.portal-work .v6-opening, body.portal-work .v6-mast, body.portal-work .v6-case-title,
body.portal-work .v6-case-open, body.portal-work .v6-h, body.portal-work .v6-case-next__name,
body.portal-work .v6-career__who {
  font-weight: 500; letter-spacing: -.035em;
}
body.portal-index .v6-opening { font-size: clamp(48px, 6.25vw, 90px) !important; line-height: 1.02; letter-spacing: -.04em; color: var(--v4-ink); max-width: none; }
body.portal-case .v6-case-title { font-size: clamp(44px, 7vw, 100px); line-height: .95; letter-spacing: -.05em; }
body.portal-case .v6-case-sub { font-family: "Nyght Serif Light Italic", Georgia, serif !important; font-weight: 400; color: var(--v4-ink-2); }
body.portal-work .v6-case-text p, body.portal-work .v6-lede { font-size: clamp(18px, 1.6vw, 23px); line-height: 1.32; letter-spacing: -.015em; }
body.portal-work .v6-cap, body.portal-work .v6-small, body.portal-work .v6-case-credit {
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif !important; font-size: 13px; letter-spacing: 0;
}
body.portal-work .v6-case-facts dd { font-size: 16px; line-height: 1.35; }
body.portal-work .v6-cursor-label { background: #000; color: #fff; }
body.portal-case.pw-dark .v6-cursor-label { background: #fff; color: #000; }
body.portal-case.pw-dark .v6-plate-logo.is-white img, body.portal-case.pw-dark .pw-logo img { filter: invert(1); }
body.portal-case.pw-dark .v6-plate-logo:not(.is-white) img { filter: invert(1); }

/* ── Portal header and footer ─────────────────────────────────────────── */
.pw-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 70;
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; align-items: center;
  padding: 20px 20px 0; height: 36px;
}
.pw-logo { display: block; width: 91px; line-height: 0; }
.pw-logo img { width: 91px; height: auto; display: block; }
.pw-nav { display: contents; }
.pw-nav a, .pw-foot a, .pw-foot span {
  font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif !important; font-size: 12px; line-height: 1.2;
  color: var(--v4-ink); text-decoration: none; justify-self: center;
}
.pw-nav a:hover, .pw-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pw-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.pw-foot {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; align-items: center; gap: 12px;
  padding: 40px 20px 28px; margin-top: 80px;
}
.pw-foot .pw-foot__studio { font-family: "Nyght Serif Light Italic", Georgia, serif !important; }
.pw-foot > :first-child { justify-self: start; }
body.portal-work .v6-page { padding-top: 0; }
body.portal-work .v6-case-head { padding-top: 120px; }
body.portal-index .v6-intro { padding-top: 110px; min-height: 0; }
@media (max-width: 760px) {
  .pw-head { grid-template-columns: auto 1fr 1fr 1fr 1fr; gap: 6px; padding: 16px 16px 0; }
  .pw-logo, .pw-logo img { width: 72px; }
  .pw-foot { grid-template-columns: 1fr 1fr; row-gap: 14px; padding: 32px 16px 24px; }
  .pw-foot a, .pw-foot span { justify-self: start; }
  body.portal-case .v6-case-head { padding-top: 84px; }
  body.portal-index .v6-intro { padding-top: 84px; }
}

/* v6's own chrome, footer and glass are gone; anything that still targets them is quiet */
body.portal-work .v6-chrome, body.portal-work .v6-chrome::before, body.portal-work .v6-chrome::after { display: none !important; }
/* the Portal mark is white artwork: black on light grounds, as on portaldesign.com */
body.portal-index .pw-logo img, body.portal-case.pw-light .pw-logo img { filter: invert(1); }
body.portal-case.pw-dark .pw-logo img { filter: none; }

/* ── /archive: the earlier case studies ────────────────────────────── */
body.portal-archive { margin: 0; }
.pa { max-width: 1400px; margin: 0 auto; padding: 120px 20px 0; }
.pa-title { font-size: clamp(48px, 6.25vw, 90px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin: 0 0 18px; }
.pa-lede { font-family: "Uncut Sans Medium", "Helvetica Neue", Arial, sans-serif !important; font-size: 14px; margin: 0 0 64px; color: #2B2B2B; }
.pa-lede a { color: inherit; }
.pa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 56px 20px; }
.pa-item { display: block; color: #000; text-decoration: none; }
.pa-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #F4F4F4; }
.pa-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.pa-item:hover .pa-media img { transform: scale(1.03); }
.pa-name { display: block; margin-top: 14px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.pa-meta { display: block; margin-top: 4px; font-family: "Fragment Mono", ui-monospace, monospace !important; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #6B6B6B; }
@media (max-width: 760px) { .pa { padding-top: 84px; } .pa-grid { grid-template-columns: 1fr; gap: 40px; } }