/* ==========================================================================
   tangun.ca — Project case pages
   ---------------------------------------------------------------------------
   One architecture, thirteen projects. The page runs on a dark cinematic
   ground and leads with the work itself; type is reversed out over media.
   Everything a project needs to differ (its accent, its assets, its rhythm)
   is a custom property or a piece of markup, never a forked stylesheet, so
   the twelve pages that follow Dodoner reuse this file untouched.

   Per project, set on <body>:
     --accent        the brand's own colour, sampled from its real artwork
     --accent-deep   a darker companion from the same artwork

   Standalone by design: these pages do NOT load css/style.css. The home and
   portfolio pages own a scroll-snap + sticky-section system that would fight
   the choreography here, and sharing it would make every project page a
   reskin of the index rather than its own thing.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     A case page wears its project's colours, not one house palette. Each
     page sets the tokens below on <body> from its own artwork; the values
     here are only the fallback.

     Contrast is a hard constraint, not a preference: --ink on --ground must
     clear 7:1 and --text-secondary must clear 4.5:1, so copy stays readable
     at every size. That is what the opacity-based scheme this replaced kept
     getting wrong.
     --------------------------------------------------------------------- */
  --ground: #f5f6f7;          /* page field */
  --ground-raised: #eceef0;   /* alternating band, tinted with the brand */
  --ground-grey: #eeeff0;     /* neutral band, for artwork that needs no tint */
  --ground-deep: #16202e;     /* one deep band per page, in brand colour */
  --ink: #15181d;             /* primary copy */
  --text-secondary: rgba(21, 24, 29, 0.76);
  --text-tertiary: rgba(21, 24, 29, 0.54);
  --rule: rgba(21, 24, 29, 0.16);
  --paper: #ffffff;

  --accent: #4eb2ba;
  --accent-deep: #2f8e96;

  /* The hero scrim and vignette, as an RGB triplet so one value drives every
     alpha stop below. Deliberately a deep blue rather than black: black reads
     as an absence behind the artwork, where a blue sits behind it as a colour
     and lets the photograph keep its own temperature. Each page can override
     it with something drawn from its own palette. */
  --scrim-rgb: 12, 22, 48;

  /* A brand accent chosen to sing on a light ground goes dull on a dark one:
     Sütaş's #0090c9 on its navy measures 3.85:1, under the 4.5 minimum, which
     is why the eyebrows and the record figures were hard to read. Dark bands
     switch to a lightened companion instead of dimming the brand. */
  --accent-on-deep: #7fd3f2;

  /* Reversed copy, used only inside a --ground-deep band. */
  --on-deep: rgba(255, 255, 255, 0.95);
  --on-deep-secondary: rgba(255, 255, 255, 0.74);
  --on-deep-tertiary: rgba(255, 255, 255, 0.68);
  --rule-deep: rgba(255, 255, 255, 0.2);

  --font-display: "Unna", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --ease-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-quart-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);

  --dur-fast: 0.35s;
  --dur-mid: 0.7s;
  --dur-slow: 1.1s;

  --edge: clamp(20px, 5vw, 88px);
  --measure: 62ch;
  --max: 1440px;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Shared type ---------------------------------------------------------- */

.pf-display {
  font-family: var(--font-display);
  font-weight: 400;
  /* The 10:1 jump from display to body is the whole hierarchy. */
  font-size: clamp(3.4rem, 13vw, 13rem);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.pf-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.pf-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pf-eyebrow--accent { color: var(--accent); }

.pf-lede {
  font-size: clamp(1.05rem, 1.1vw + 0.85rem, 1.5rem);
  line-height: 1.55;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.pf-body {
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.pf-body + .pf-body { margin-top: 1.1em; }
.pf-body strong { color: var(--ink); font-weight: 500; }

/* ---- Page chrome ---------------------------------------------------------- */

.pf-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  background: transparent;
  pointer-events: none;
}
.pf-progress__bar {
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: 0 50%;
}

.pf-chrome {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px var(--edge);
  pointer-events: none;
}
.pf-chrome a { pointer-events: auto; }

/* Both chrome items ride on solid white with dark text. The chrome is fixed
   and passes over a saturated hero, a tinted ground and a white panel in one
   scroll, so it needs a plate that is legible against all three rather than a
   treatment tuned to any one of them. Difference blending and a dark blurred
   pill were both tried and both failed somewhere along that run.

   The mark alongside is deliberately left bare, matching the landing page. */
/* The mark is bare, exactly as the landing page uses it: a 30px image, no
   plate, no chip. .fixed-logo on index.html is the reference. */
.pf-mark {
  display: block;
  max-width: 30px;
  height: auto;
}
.pf-mark img {
  display: block;
  width: 30px;
  height: auto;
}

.pf-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(21, 24, 29, 0.1);
  border-radius: 100px;
  box-shadow: 0 2px 10px rgba(16, 20, 28, 0.14);
  transition: box-shadow var(--dur-fast) var(--ease-quart-out),
              transform var(--dur-fast) var(--ease-quart-out),
              gap var(--dur-fast) var(--ease-quart-out);
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink);
}
.pf-back:hover { gap: 15px; box-shadow: 0 4px 16px rgba(16, 20, 28, 0.2); }
.pf-back .pf-arrow { transition: transform var(--dur-fast) var(--ease-quart-out); }
.pf-back:hover .pf-arrow { transform: translateX(3px); }

/* ---- Hero -----------------------------------------------------------------
   The signature moment. The project opens full-bleed on one real photograph
   of the work, and as you scroll the frame closes to a cinematic band while
   the ground goes dark underneath and the title re-inks from the artwork's
   own colour to paper white. Driven frame by frame from work.js, not by a
   fixed-duration keyframe, so it tracks the scrollbar exactly.
   -------------------------------------------------------------------------- */

.pf-hero {
  position: relative;
  height: 230vh; /* tall track: gives the sticky frame room to hold its pin */
}

.pf-hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* As the frame closes, what shows around the band is the project's own
     ground colour. It was black before, which made every case open on the
     same void regardless of whose brand it was. */
  background: var(--ground);
}

/* The clip lives on the frame, not on the media, so that the media and the
   scrim above it are clipped by exactly the same rectangle. When each carried
   its own copy of the clip they drifted apart, because only the media is
   transformed, and the mismatch showed as a bright seam along the band. */
.pf-hero__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: clip-path;
  /* p=0 full bleed, p=1 a 40% letterbox band. */
  clip-path: inset(calc(var(--p, 0) * 30%) 0 calc(var(--p, 0) * 30%) 0);
}

.pf-hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  will-change: transform;
  /* The scale-up buys horizontal room so the mark can be pushed off centre,
     clearing the left of the frame for the title. */
  /* scale must out-run the push: at translateX(7%) the frame loses 7% of its
     width on the left, so the image needs at least 14% of overflow to cover
     it. 1.18 clears the 1.163 minimum with room to spare. */
  transform: scale(calc(1.18 + var(--p, 0) * 0.08)) translateX(7%);
}

/* A whisper of vignette so reversed type holds on a bright paper photograph
   without dimming the artwork itself. */
.pf-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(122% 92% at 50% 46%, transparent 52%, rgba(var(--scrim-rgb), 0.32) 100%);
  opacity: calc(0.26 + var(--p, 0) * 0.14);
}

/* Reversed type needs something to sit on. Most of this portfolio's hero
   artwork is product photography with bright highlights (milk, splash, white
   packs) exactly where a title wants to be, so a directional scrim rides above
   the image and below the text. Only the default hero needs it: an --ink hero
   is printing into a light sheet and would be muddied by one. */
.pf-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(104deg,
    rgba(var(--scrim-rgb), 0.82) 0%,
    rgba(var(--scrim-rgb), 0.56) 32%,
    rgba(var(--scrim-rgb), 0.14) 58%,
    transparent 74%);
  /* The scrim exists to make reversed type readable over a full-bleed
     photograph. Once the frame has closed there is no full bleed left to
     fight, and a gradient still sitting inside the band reads as a smear
     across the artwork rather than as part of the image. So it leaves with
     the curtain. The title keeps its own shadow for the closed state. */
  opacity: calc(1 - var(--p, 0));
}
.pf-hero--ink .pf-hero__scrim { display: none; }

.pf-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  padding: 0 var(--edge);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  /* At rest the block sits below centre, so the wordmark crosses the lower
     third of the artwork rather than cutting it in half. */
  transform: translate3d(0, calc(9vh - var(--p, 0) * 6vh), 0);
  /* The whole title block leaves as the curtain closes, title included. The
     closed band is the artwork's moment, and type competing with it there was
     both unreadable and unnecessary: by then the reader has the name. */
  opacity: calc(1 - var(--p, 0) * 1.45);
}

/* Two kinds of hero photograph, one mechanism.

   DEFAULT (.pf-hero) assumes saturated or dark artwork, which most of this
   portfolio is: the title reverses out in paper white over the image.

   .pf-hero--ink is for artwork that is essentially a white sheet, where
   reversed type has nothing to sit on. There the title prints INTO the
   photograph with multiply, taking the paper's own grain and darkening where
   it crosses the mark, so an overlap reads as one printed artefact rather
   than a collision between a photo and a caption. Multiply also keeps the
   contrast honest at every scroll position, with no colour interpolation to
   get wrong. */
/* Line breaks in a display title are a design decision, so they live in the
   markup as <br>. This just stops a stacked title from outgrowing the band it
   has to sit inside once the frame closes. */
.pf-hero__title--stack { font-size: clamp(3rem, 10.5vw, 10.5rem); }

.pf-hero__title {
  color: var(--paper);
  transform: translate3d(0, calc(var(--p, 0) * -1vh), 0);
  /* Two shadows: a tight one that holds the letterforms against a bright
     highlight, and a wide soft one for general separation. This is what keeps
     the title readable in the closed state once the scrim has gone. */
  text-shadow: 0 1px 3px rgba(10, 14, 22, 0.34),
               0 2px 50px rgba(10, 14, 22, 0.45);
}

.pf-hero--ink .pf-hero__title {
  color: var(--ink);
  mix-blend-mode: multiply;
  text-shadow: none;
}

/* Where multiply is unavailable the title still has to be legible. */
@supports not (mix-blend-mode: multiply) {
  .pf-hero--ink .pf-hero__title { mix-blend-mode: normal; }
}

.pf-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(var(--scrim-rgb), 0.85);
}
.pf-hero--ink .pf-hero__meta { color: rgba(23, 21, 15, 0.8); }

.pf-hero--ink .pf-hero__meta { text-shadow: none; }
.pf-hero__meta .pf-dot { color: var(--accent); }

/* Small reversed type over a photograph needs full strength and a shadow of
   its own. At 62% white it was legible on a screenshot and not on a screen. */
.pf-hero .pf-eyebrow {
  color: var(--paper);
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(var(--scrim-rgb), 0.85);
}
.pf-hero--ink .pf-eyebrow {
  color: rgba(23, 21, 15, 0.75);
  text-shadow: none;
}

.pf-hero__cue {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: calc(1 - var(--p, 0) * 2.4);
}
.pf-hero__cue span { display: block; }
.pf-hero__cue i {
  display: block;
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--paper), transparent);
  animation: cueDrop 2.1s var(--ease-expo-in-out) infinite;
}

@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: 50% 0; }
  45%  { transform: scaleY(1); transform-origin: 50% 0; }
  55%  { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ---- Section scaffolding -------------------------------------------------- */

.pf-section {
  position: relative;
  padding: clamp(90px, 13vh, 180px) var(--edge);
}

.pf-section__inner {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
}

.pf-section--tight { padding-top: clamp(50px, 7vh, 90px); }

/* Alternating density: a dense band of work, then room to breathe. */
.pf-section--sheet { background: var(--ground-raised); }

/* A neutral band for sections whose artwork carries its own ground. The logo
   plate is photographed on a grey-to-white sweep, and setting it on the
   brand-tinted band made the image look like a patch laid over the page
   rather than part of it. */
.pf-section--grey { background: var(--ground-grey); }

/* One deep band per page, in the project's own dark brand colour rather than
   a neutral black, with its copy tokens reversed for the duration. */
.pf-section--deep {
  background: var(--ground-deep);
  --accent: var(--accent-on-deep);
  --ink: var(--on-deep);
  --text-secondary: var(--on-deep-secondary);
  --text-tertiary: var(--on-deep-tertiary);
  --rule: var(--rule-deep);
  color: var(--on-deep);
}

.pf-rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* Section headers sit on the same left edge as everything else in the column.
   They used to be indented past a 120px margin holding an 01 / 02 / 03 marker,
   which put every title out of line with the copy, figures and cards beneath
   it for the sake of a number nobody needs. */
.pf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-bottom: clamp(38px, 5vh, 66px);
}

.pf-head__text { max-width: 46ch; }
.pf-head__text .pf-lede { margin-top: 18px; }

/* ---- Statement ------------------------------------------------------------ */

.pf-statement {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.pf-statement em {
  font-style: italic;
  color: var(--accent);
}

.pf-statement-grid { display: grid; gap: clamp(34px, 5vw, 80px); }
@media (min-width: 1000px) {
  .pf-statement-grid { grid-template-columns: 1.15fr 0.85fr; align-items: end; }
}

/* ---- The mark in motion ---------------------------------------------------
   The logo animation was delivered on a white background, so it is presented
   the way it would be presented in a deck: on its own sheet, lying on the
   dark ground. Trying to knock the white out would wreck the artwork.
   -------------------------------------------------------------------------- */

.pf-sheet {
  position: relative;
  background: #fff;
  border-radius: 3px;
  overflow: hidden;
  /* The animation file is 432x600. Rendering it any wider upscales a small
     portrait video into a soft, pixel-stretched slab, which is the opposite
     of craft on a page whose whole subject is a crisp printed mark. */
  width: 100%;
  max-width: 432px;
  margin-inline: auto;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 70px -34px rgba(16, 20, 28, 0.45);
  /* the sheet settles as it enters */
  transform: translate3d(0, 40px, 0) scale(0.985);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-expo-out),
              opacity var(--dur-slow) var(--ease-expo-out);
}
.pf-sheet.is-visible { transform: none; opacity: 1; }

.pf-sheet video { width: 100%; height: auto; }

.pf-sheet__caption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(21, 24, 29, 0.5);
}

.pf-motion-grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) {
  .pf-motion-grid { grid-template-columns: minmax(0, 1fr) 432px; }
}

.pf-replay {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 13px 22px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-quart-out),
              color var(--dur-fast) var(--ease-quart-out);
}
.pf-replay:hover { border-color: var(--accent); color: var(--accent); }
.pf-replay { background: var(--paper); }

/* ---- Media figures -------------------------------------------------------- */

.pf-figure {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ground-raised);
  box-shadow: 0 18px 44px -30px rgba(16, 20, 28, 0.5);
}

.pf-figure img { width: 100%; height: 100%; object-fit: cover; }

.pf-figure figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Clip-path wipe on enter. Decorative media only, never text.

   The clip goes on the media INSIDE the figure, never on the figure itself.
   A clip-path of inset(0 0 100% 0) collapses an element's intersection rect
   to nothing, so an observer watching that element reports ratio 0 and
   isIntersecting false even when it fills the screen. Watching the element
   you are hiding is a deadlock: hidden, therefore never seen, therefore
   never unhidden. Everything below the hero was invisible because of it. */
.pf-reveal { overflow: hidden; }
.pf-reveal img,
.pf-reveal video {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.04);
  transition: clip-path 1.15s var(--ease-expo-out),
              transform 1.5s var(--ease-expo-out);
}
.pf-reveal.is-visible img,
.pf-reveal.is-visible video {
  clip-path: inset(0 0 0 0);
  transform: none;
}
.pf-reveal--d1 img { transition-delay: 0.09s; }
.pf-reveal--d2 img { transition-delay: 0.18s; }

/* Asymmetric two-up: the larger plate bleeds past the edge on wide screens
   so the grid is felt rather than obeyed. */
.pf-plates { display: grid; gap: clamp(16px, 2.4vw, 30px); }
@media (min-width: 900px) {
  .pf-plates {
    grid-template-columns: 1.35fr 0.65fr;
    align-items: stretch;
  }
  .pf-plates__wide { margin-left: calc(var(--edge) * -1); }
  .pf-plates__wide .pf-figure { border-radius: 0 3px 3px 0; height: 100%; }
}

/* ---- Testimonial ----------------------------------------------------------
   Rendered as an attributed account, not as quotation marks: the founder's
   verbatim words are not in our source material, and inventing them would be
   putting words in a real person's mouth.
   -------------------------------------------------------------------------- */

.pf-account {
  display: grid;
  gap: clamp(28px, 4vw, 60px);
}
@media (min-width: 1000px) {
  .pf-account { grid-template-columns: 150px minmax(0, 1fr); }
}

.pf-account__mark {
  font-family: var(--font-display);
  font-size: 6rem;
  line-height: 0.7;
  color: var(--accent);
  opacity: 0.5;
}

.pf-account__text {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.3vw, 2.3rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 26ch;
}

.pf-account__by {
  margin-top: 26px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pf-account__by strong { color: var(--text-secondary); font-weight: 500; }

/* ---- The web strip --------------------------------------------------------
   The delivered site is a tall 250x650 capture. It scrolls inside its own
   window as the page scrolls past, which shows the whole page rather than a
   cropped thumbnail of its header.
   -------------------------------------------------------------------------- */

.pf-screen {
  position: relative;
  width: min(280px, 74vw);
  aspect-ratio: 250 / 430;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 40px 80px -40px rgba(16, 20, 28, 0.55);
}

.pf-screen img {
  width: 100%;
  height: auto;
  transform: translate3d(0, var(--strip-shift, 0px), 0);
  will-change: transform;
}

.pf-screen__chin {
  position: absolute;
  inset: auto 0 0 0;
  height: 42px;
  background: linear-gradient(to top, var(--ground) 10%, transparent);
  pointer-events: none;
}

.pf-digital-grid { display: grid; gap: clamp(34px, 5vw, 70px); align-items: center; }
@media (min-width: 900px) {
  .pf-digital-grid { grid-template-columns: 0.9fr 1.1fr; }
}

/* ---- Scope index ---------------------------------------------------------- */

.pf-scope {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.pf-scope li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: baseline;
  gap: 18px;
  padding: 17px 0;
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  color: var(--text-secondary);
  transform: translate3d(0, 16px, 0);
  opacity: 0;
  transition: transform var(--dur-mid) var(--ease-expo-out),
              opacity var(--dur-mid) var(--ease-expo-out),
              color var(--dur-fast) var(--ease-quart-out);
}
.pf-scope li.is-visible { transform: none; opacity: 1; }
.pf-scope li:hover { color: var(--ink); }

.pf-scope li span:first-child {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

@media (min-width: 800px) {
  .pf-scope { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 100px); }
  .pf-scope li:nth-child(-n+2) { border-top: 0; }
}

/* ---- Credits -------------------------------------------------------------- */

.pf-credits { display: grid; gap: 0; }
.pf-credits__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 700px) {
  .pf-credits__row { grid-template-columns: 180px minmax(0, 1fr); gap: 30px; align-items: baseline; }
}
.pf-credits__key {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.pf-credits__val { color: var(--text-secondary); font-size: 16px; }
.pf-credits__val strong { color: var(--ink); font-weight: 500; }

.pf-note {
  margin-top: 26px;
  padding: 16px 20px;
  border-left: 2px solid var(--accent);
  background: rgba(21, 24, 29, 0.04);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-tertiary);
  max-width: 60ch;
}

/* ---- Next project --------------------------------------------------------- */

.pf-next {
  position: relative;
  display: block;
  padding: clamp(70px, 12vh, 150px) var(--edge);
  border-top: 1px solid var(--rule);
  overflow: hidden;
}

.pf-next__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pf-next__title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 8vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--ink);
  transition: color var(--dur-mid) var(--ease-quart-out),
              transform var(--dur-mid) var(--ease-expo-out);
}
.pf-next:hover .pf-next__title {
  color: var(--next-accent, var(--accent));
  transform: translateX(clamp(8px, 1.4vw, 22px));
}

.pf-next__wash {
  position: absolute;
  inset: auto -10% -60% -10%;
  height: 120%;
  background: radial-gradient(60% 60% at 50% 100%, var(--next-accent, var(--accent)), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-quart-out);
  pointer-events: none;
}
.pf-next:hover .pf-next__wash { opacity: 0.16; }

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

.pf-footer {
  padding: 44px var(--edge) 56px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 30px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
.pf-footer a:hover { color: var(--accent); }

/* ---- Generic reveal ------------------------------------------------------- */

.pf-fade {
  transform: translate3d(0, 22px, 0);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-expo-out),
              opacity var(--dur-slow) var(--ease-expo-out);
}
.pf-fade.is-visible { transform: none; opacity: 1; }
.pf-fade--d1 { transition-delay: 0.1s; }
.pf-fade--d2 { transition-delay: 0.2s; }
.pf-fade--d3 { transition-delay: 0.3s; }

/* Line-by-line rise for display headings: each line is its own element and
   arrives on its own beat, never as a block fade. */
.pf-lines span {
  display: block;
  overflow: hidden;
}
.pf-lines span > i {
  display: block;
  font-style: inherit;
  transform: translate3d(0, 105%, 0);
  transition: transform 1s var(--ease-expo-out);
}
.pf-lines.is-visible span:nth-child(1) > i { transition-delay: 0.02s; }
.pf-lines.is-visible span:nth-child(2) > i { transition-delay: 0.12s; }
.pf-lines.is-visible span:nth-child(3) > i { transition-delay: 0.22s; }
.pf-lines.is-visible span:nth-child(4) > i { transition-delay: 0.32s; }
.pf-lines.is-visible span > i { transform: none; }

/* ---- Mobile --------------------------------------------------------------- */

@media (max-width: 768px) {
  .pf-hero { height: 180vh; }
  .pf-hero__media {
    /* a gentler close on a tall narrow screen, where a 30% crop top and
       bottom would swallow the mark itself, and no horizontal push because
       there is no room to spare across the short axis */
    transform: scale(calc(1.04 + var(--p, 0) * 0.06));
  }
  .pf-hero__frame {
    clip-path: inset(calc(var(--p, 0) * 20%) 0 calc(var(--p, 0) * 20%) 0);
  }
  .pf-hero__inner { transform: translate3d(0, calc(6vh - var(--p, 0) * 6vh), 0); }

  /* A narrow frame has no empty left third to place type in, so the scrim
     turns vertical and weights the lower half, where the title and its meta
     line actually sit. */
  .pf-hero__scrim {
    background: linear-gradient(180deg,
      rgba(var(--scrim-rgb), 0.5) 0%,
      rgba(var(--scrim-rgb), 0.26) 26%,
      rgba(var(--scrim-rgb), 0.62) 62%,
      rgba(var(--scrim-rgb), 0.82) 100%);
  }
  .pf-account__mark { font-size: 3.6rem; }
  .pf-plates__wide { margin-left: 0; }
  .pf-plates__wide .pf-figure { border-radius: 3px; }
}


/* ---- Figures band ---------------------------------------------------------
   Numbers a project can actually stand behind. Every figure carries its own
   source line underneath it, because a number with no provenance is the one
   thing this portfolio does not publish.
   -------------------------------------------------------------------------- */

.pf-figures {
  display: grid;
  gap: clamp(30px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.pf-figures__item {
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.pf-figures__num {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.pf-figures__label {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.pf-figures__src {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

/* ---- Awards ---------------------------------------------------------------
   One row per award, never rolled up into a single count. awards.md is
   explicit that entries stay separated by project and competition.
   -------------------------------------------------------------------------- */

.pf-awards { display: grid; gap: 0; border-top: 1px solid var(--rule); }

.pf-award {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 760px) {
  .pf-award { grid-template-columns: 54px minmax(0, 1.1fr) minmax(0, 0.9fr); }
}

.pf-award__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.6;
  transition: filter var(--dur-mid) var(--ease-quart-out),
              opacity var(--dur-mid) var(--ease-quart-out);
}
.pf-award:hover .pf-award__icon { filter: none; opacity: 1; }

.pf-award__comp {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
}

.pf-award__what {
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---- Sibling piece --------------------------------------------------------
   A related but separately credited project shown at the foot of a case,
   clearly labelled as its own thing rather than folded into the main one.
   -------------------------------------------------------------------------- */

.pf-sibling { display: grid; gap: clamp(22px, 3vw, 40px); }
@media (min-width: 880px) {
  .pf-sibling { grid-template-columns: 1fr 1fr; align-items: center; }
}
.pf-sibling__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 20px); }

/* ---- The engagement -------------------------------------------------------
   Who brought Akin onto the project. A full-width panel rather than a credit
   line, because on the big corporate work the commissioning studio is part of
   the story: it is how a designer gets near a brand at this scale at all.
   -------------------------------------------------------------------------- */

.pf-agency {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  padding: clamp(52px, 9vh, 118px) var(--edge);
}

/* Hairlines rather than a colour block: on a light page the panel is set off
   by its edges and its whiteness, which is quieter than a slab of navy and
   lets the client marks sit on the ground they were drawn for. */
.pf-agency::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  pointer-events: none;
}

.pf-agency__inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  gap: clamp(30px, 4vw, 64px);
}
@media (min-width: 980px) {
  .pf-agency__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}

.pf-agency__name {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-top: 16px;
  text-wrap: balance;
}

.pf-agency__role {
  margin-top: 22px;
  font-size: clamp(1.05rem, 1.1vw + 0.85rem, 1.4rem);
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
}

.pf-agency__clients {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-deep);
}

.pf-agency__clients ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.pf-agency__clients li {
  padding: 9px 16px;
  border: 1px solid var(--rule-deep);
  border-radius: 100px;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--on-deep);
  transition: border-color var(--dur-fast) var(--ease-quart-out),
              transform var(--dur-fast) var(--ease-quart-out);
}
.pf-agency__clients li:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* ---- The engagement, expanded ---------------------------------------------
   Additions for the studio panel once it had real researched substance to
   carry: the studio's own mark, its verifiable record, the corporations
   behind the brands it works for, and proof of its work.
   -------------------------------------------------------------------------- */

/* The panel's opening line is a section title, not a footnote. At the shared
   11px eyebrow size on navy it was neither big enough nor bright enough to
   register as the thing introducing the whole box. */
.pf-agency__kicker {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 22px;
}

.pf-agency__logo {
  width: clamp(190px, 20vw, 250px);
  height: auto;
  margin-bottom: 26px;
}

.pf-agency__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.6vw, 2.5rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.pf-agency__quote cite {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* The studio's record, stated as separable facts each of which can be
   checked, rather than as one sweeping adjective. */
.pf-agency__record {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: clamp(30px, 4vh, 46px);
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.pf-agency__record dt {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: var(--accent);
}
.pf-agency__record dd {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* The client wall. Brand logos grouped under the corporation that owns them,
   because the corporation is the claim and the brand is the evidence. Each
   mark sits on its own white tile: the files are full-colour artwork on
   transparency, and a red or green mark dropped straight onto navy is both
   hard to read and disrespectful of someone else's brand. */
.pf-wall {
  margin-top: clamp(34px, 4.5vh, 56px);
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .pf-wall { grid-template-columns: 1fr 1fr; }
}
.pf-wall__group--wide { grid-column: 1 / -1; }

.pf-wall__group {
  padding: 18px 20px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.pf-wall__corp {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.1;
  color: var(--ink);
}

.pf-wall__note {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pf-wall__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* No tile needed now: the marks are full-colour artwork on transparency and
   the panel is already white, which is the ground they were drawn for. */
.pf-wall__mark {
  display: grid;
  place-items: center;
  width: 86px;
  height: 60px;
  padding: 6px;
  transition: transform var(--dur-fast) var(--ease-quart-out);
}
.pf-wall__mark:hover { transform: translateY(-3px); }
.pf-wall__mark img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pf-agency__proof {
  margin-top: clamp(30px, 4vh, 48px);
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: 1fr;
}
/* Stacked rather than side by side. Two reasons: the work reads at a useful
   size instead of as a pair of thumbnails, and it puts height back into the
   evidence column, which went short once the argument copy moved across. */
.pf-agency__proof { grid-template-columns: 1fr; }
.pf-agency__proof figure {
  overflow: hidden;
  border-radius: 4px;
  background: var(--ground-raised);
}
.pf-agency__proof img { width: 100%; height: 100%; object-fit: cover; }
.pf-agency__proof figcaption {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pf-agency__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-quart-out),
              gap var(--dur-fast) var(--ease-quart-out);
}
.pf-agency__link:hover { border-color: var(--accent); gap: 15px; }

@media (min-width: 980px) {
  .pf-agency__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }

  /* The evidence column is much taller than the identity column, which left a
     few hundred pixels of empty navy beside it. Pinning the identity means the
     mark, the claim and the record stay with you while the client wall and the
     proof scroll past them, which is also the right reading order: who they
     are, then what backs it.

     Targeted by class rather than :first-child, so a full-width element can be
     placed above it without accidentally inheriting the pin. */
  /* The pin is gone: once the argument copy moved into this column it is no
     longer the short one, and a sticky element taller than the viewport just
     crops its own bottom. */
  .pf-agency__identity { align-self: start; }
}

/* ---- Proof card -----------------------------------------------------------
   Small, loud, and pointed outward. Its whole job is to send the reader to a
   third party for confirmation, so it reads as a different kind of object to
   everything around it: a white card on the page's tinted ground, with the
   accent doing the pointing.
   -------------------------------------------------------------------------- */

.pf-proof {
  position: relative;
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  align-items: center;
  max-width: 780px;
  margin-top: clamp(40px, 5vh, 66px);
  padding: clamp(24px, 3vw, 34px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 5px;
  box-shadow: 0 24px 54px -34px rgba(16, 20, 28, 0.5);
}
@media (min-width: 700px) {
  .pf-proof { grid-template-columns: minmax(0, 1fr) auto; }
}

.pf-proof__count {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.pf-proof__count b { color: var(--accent); font-weight: 400; }

.pf-proof__sub {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 46ch;
}

.pf-proof__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 100px;
  box-shadow: 0 1px 3px rgba(60, 64, 67, 0.16);
  transition: box-shadow var(--dur-fast) var(--ease-quart-out),
              transform var(--dur-fast) var(--ease-quart-out),
              border-color var(--dur-fast) var(--ease-quart-out);
}
.pf-proof__btn:hover {
  border-color: #d2d5d9;
  box-shadow: 0 2px 8px rgba(60, 64, 67, 0.26);
  transform: translateY(-1px);
}
.pf-proof__btn svg { flex: 0 0 auto; }
.pf-proof__btn .pf-proof__ext { color: #5f6368; font-size: 13px; }

/* The studio's own anniversary artwork, across the head of the panel. It does
   the job a team photo would have done, and it is the studio's own piece of
   design rather than a stock shot of an office. */
.pf-agency__banner {
  grid-column: 1 / -1;
  margin-bottom: clamp(8px, 1.5vh, 18px);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.pf-agency__banner img { width: 100%; height: auto; }
.pf-agency__banner figcaption {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-deep-tertiary);
}

/* ---- Red Dot block --------------------------------------------------------
   The single strongest credential in the panel, so it gets its own object
   rather than a line in a list: the mark, the award, the year, and exactly
   how small the team was that won it.
   -------------------------------------------------------------------------- */

/* Deliberately the one dark object in a white panel. It is the strongest
   credential on the page, and the Red Dot artwork we hold is reversed out for
   a dark ground, so the two requirements agree. */
.pf-reddot {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: center;
  margin-top: clamp(26px, 3.5vh, 40px);
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 5px;
  background: var(--ground-deep);
}
@media (min-width: 520px) {
  .pf-reddot { grid-template-columns: 84px minmax(0, 1fr); }
}

.pf-reddot__logo { width: 84px; height: auto; }

.pf-reddot__award {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.15;
  color: var(--on-deep);
}

.pf-reddot__year {
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-on-deep);
}

.pf-reddot__note {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--on-deep-secondary);
  max-width: 46ch;
}
.pf-reddot__note strong { color: var(--on-deep); font-weight: 500; }

/* ---- Awards, compact ------------------------------------------------------
   Two awards do not need a full-width band of their own. This is the same
   family as the proof card: a small object that interrupts the column and
   says its piece without taking over the page.
   -------------------------------------------------------------------------- */

.pf-laurels {
  max-width: 680px;
  margin-top: clamp(40px, 5vh, 64px);
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 5px;
  box-shadow: 0 24px 54px -34px rgba(16, 20, 28, 0.45);
}

.pf-laurels__line {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 30ch;
  text-wrap: balance;
}

.pf-laurels__list {
  display: grid;
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid var(--rule);
}

.pf-laurels__item {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.pf-laurels__item:last-child { border-bottom: 0; padding-bottom: 0; }

/* Full colour at a size where the badge is actually identifiable. Greyscaled
   at 40px these read as smudges, which is worse than leaving them out. */
.pf-laurels__icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.pf-laurels__name { font-size: 15px; color: var(--ink); }
.pf-laurels__name span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}