/* ═══ WORLD 03 — CONTACT SHEET ═══════════════════════════════
   The studio's own working surface. Dense frame grid, mono
   metadata, chinagraph marks where a photographer would circle
   a select. Utility as an aesthetic — it earns trust because it
   looks like the craft rather than like marketing.
   Type   Barlow Condensed / JetBrains Mono
   Ground Neutral paper #F1F1EF
   Accent Chinagraph orange-red — the wax pencil
   ═════════════════════════════════════════════════════════ */

:root{
  --bg:#F1F1EF;
  --fg:#131313;
  --fg-soft:#6B6B69;
  --line:#D2D2CE;
  --inv-bg:#131313;
  --inv-fg:#F1F1EF;
  --accent:#E8452C;
  --accent-fg:#fff;
  --accent-hover:#C6351F;

  --font-display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body:"JetBrains Mono", ui-monospace, monospace;

  --fs-hero:clamp(3rem,12vw,8rem);
  --fs-h2:clamp(2.3rem,8vw,5rem);
  --fs-body:clamp(.86rem,1.4vw,.94rem);
  --tracking-display:-.01em;
  --lh-body:1.7;

  --radius:0px;
  --btn-radius:0px;
  --tile-ratio:3/2;
  --sect:clamp(4rem,10vw,8rem);
}

h1,h2{ font-weight:600; text-transform:uppercase; }
h3{ font-family:var(--font-display); font-weight:600; text-transform:uppercase;
    letter-spacing:.01em; font-size:1.3rem; }

/* Mono body wants smaller size and looser leading to stay readable */
p{ letter-spacing:-.01em; }

.brand{ font-family:var(--font-body); font-weight:700; letter-spacing:.1em; font-size:.85rem; }
.brand small{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; opacity:.65; }
.nav__links a{ font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; }

.btn{ font-family:var(--font-body); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; }

/* Hero — frame data pinned to the corners like a light table */
.hero{ --hero-align:end; }
.hero__scrim{ background:linear-gradient(to top, rgba(12,12,12,.92) 0%, rgba(12,12,12,.4) 50%, rgba(12,12,12,.15) 80%); }
.hero__eyebrow{ display:none; }
.hero__title{ line-height:.88; max-width:14ch; }
.hero__title em{ font-style:normal; color:var(--accent); }
.hero__sub{ font-size:.95rem; color:rgba(241,241,239,.75); max-width:52ch; }
.hero__tags{ border-top:1px solid rgba(241,241,239,.25); font-size:.66rem;
             letter-spacing:.1em; text-transform:uppercase; color:rgba(241,241,239,.65); }
.hero__tags li::before{ content:"[ "; opacity:.5; }
.hero__tags li::after{ content:" ]"; opacity:.5; }

/* Section heads read like a sheet header: rule, label, title */
.kicker{ display:none; }
.sec__head{ border-top:2px solid var(--fg); padding-top:.9rem; }
.sec__title em{ font-style:normal; color:var(--accent); }

/* Work — dense contact-sheet grid, frames numbered in the caption
   (frame numbers are the artefact here, not decorative kickers) */
.grid{ gap:.75rem; }
.tile{ position:relative; }
.tile img{ border:1px solid var(--line); }
.tile figcaption{ padding-top:.6rem; }
.tile__cat{ display:block; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
            color:var(--fg-soft); margin-bottom:.2rem; }
.tile h3{ font-size:1.1rem; }
.tile__metric{ font-size:.74rem; color:var(--accent); letter-spacing:-.01em; }

.tiers{ gap:.75rem; }
.tier{ border:1px solid var(--fg); padding:1.3rem 1.1rem; }
.tier h3{ font-size:1.5rem; }
.tier__price{ font-family:var(--font-display); font-weight:600; font-size:2rem; margin-bottom:.4rem; }
.tier__price span{ font-family:var(--font-body); font-size:.62rem; letter-spacing:.1em; }
.tier__hint{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; letter-spacing:.02em;
  color:var(--accent); margin:0 0 .9rem; border-bottom:1px solid currentColor; width:fit-content;
}
.tier.is-feature{ background:var(--fg); color:var(--inv-fg); }
.tier.is-feature p, .tier.is-feature .tier__price span{ color:rgba(241,241,239,.7); }
.tier.is-feature ul{ border-top-color:rgba(241,241,239,.3); }
.tier__flag{ position:absolute; top:0; right:0; background:var(--accent); color:#fff;
             font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:.25rem .5rem; margin:0; }
.tier li{ padding-left:1.2rem; position:relative; font-size:.82rem; }
.tier li::before{ content:"·"; position:absolute; left:.3rem; }

/* Process — frame numbers belong here, they're sequence not decoration */
.step__n{ display:block; font-size:.66rem; letter-spacing:.1em; color:var(--accent); margin-bottom:.4rem; }
.steps li{ border-top:1px solid var(--fg); border-bottom:0; padding-top:1.1rem; }
.step__time{ font-size:.72rem; color:var(--fg-soft); opacity:1; }

/* Studio portrait: the frame follows the image, not the reverse — no crop,
   whatever ratio the photo is. Swap the file and the layout just adapts. */
.studio__img img{ border:1px solid var(--line); aspect-ratio:auto; height:auto; object-fit:contain; }
.studio__txt .lead{ font-family:var(--font-display); font-size:1.75rem; line-height:1.15;
                    text-transform:uppercase; font-weight:600; }

.quotes blockquote{ border:1px solid var(--line); padding:1.3rem 1.2rem; }
.quotes blockquote p{ font-family:var(--font-body); font-size:.92rem; line-height:1.6; }
.quotes footer{ font-size:.74rem; }

.cta__title em{ font-style:normal; color:var(--accent); }
.foot__base{ border-top-color:rgba(241,241,239,.25); }
.foot__col h3{ font-family:var(--font-body); }

@media (min-width:560px){ .grid{ grid-template-columns:repeat(2,1fr); gap:1rem; } }
@media (min-width:900px){
  .grid{ grid-template-columns:repeat(3,1fr); gap:1.25rem; }
  .sec__head{ display:grid; grid-template-columns:1fr auto; align-items:end; gap:2rem; }
  .tiers{ gap:1rem; }
  .hero__title{ font-size:clamp(4.5rem,8vw,8rem); }
}