/* ==========================================================================
   K08 — Components (kit/components.html)
   Specimen frames plus mini versions of every PROOF component: navigation,
   heroes, work index, case-study modules, business, personal, content,
   commerce, proofing, media and overlays.
   Also loads layout-site.css for the embedded .site-header / .site-footer.

   Contents
      0. Specimen frames & helpers
      1. Navigation (header, mobile menu, sticky contact, footer)
      2. Hero variants
      3. Work index
      4. Case-study modules
      5. Business
      6. Personal
      7. Content
      8. Commerce & licensing
      9. Proofing
     10. Media
     11. Overlays & forms
   ========================================================================== */

/* 0. Specimen frames & helpers ------------------------------------------- */

/* Vertical rhythm between the blocks of a section */
.spec-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Responsive specimen grid; the modifier sets the minimum column width */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--spec-min, 300px)), 1fr));
  gap: 28px 24px;
}

.spec-grid--260 { --spec-min: 260px; }
.spec-grid--300 { --spec-min: 300px; }
.spec-grid--340 { --spec-min: 340px; }
.spec-grid--380 { --spec-min: 380px; }

/* One specimen: title + meta line, then a framed preview */
.spec {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.spec__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.spec__title {
  font-weight: 600;
}

.spec__frame {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--canvas);
}

.spec__body {
  padding: clamp(14px, 2vw, 24px);
}

/* Compact side padding for components shown inside a frame */
.inset {
  padding-inline: clamp(14px, 2vw, 24px);
}

/* Placeholder without rounded corners (follows no preset radius) */
.ph--flat {
  border-radius: 0;
}

/* Mono meta line in ink instead of muted */
.meta--plain {
  color: inherit;
}

/* Stamp variants */
.stamp--steep {
  transform: rotate(-6deg);
}

.stamp--xs {
  padding: 2px 5px;
  font-size: 9px;
}

/* Button helpers */
.btn--center {
  justify-content: center;
}

.btn--xs {
  min-height: 40px;
  padding: 6px 12px;
  font-size: 14px;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Chips (filters, tools, download sizes) */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip-row--spaced {
  margin-top: 6px;
}

.chip {
  padding: 5px 10px;
  border: 1px solid var(--ink);
  font-size: 13px;
}

.chip--on {
  background: var(--ink);
  color: var(--canvas);
}

.chip--lg {
  font-size: 14px;
}

.chip--sm {
  padding: 5px 9px;
  font-size: 12px;
}

/* Client names as type ("logo" wall) */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 36px;
}

.logo-wall__name {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: .02em;
  font-size: 20px;
  color: var(--muted);
}

/* Simple ruled line ("Now" list, speaking list) */
.line-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.line-item--split {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

/* 1. Navigation ---------------------------------------------------------- */

/* Header & footer come from layout-site.css; here they sit inside a frame */
.site-header--embedded {
  position: static;
}

.site-footer--embedded {
  margin-top: 0;
}


.site-footer__label--form {
  margin-bottom: 6px;
}

/* Language switch in the header */
.lang-switch {
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

/* Full-screen mobile menu (shown as a phone-sized mock) */
.mobile-menu {
  display: flex;
  flex-direction: column;
  width: min(100%, 360px);
  aspect-ratio: 9/17;
  padding: 18px;
  border: 1px solid var(--ink);
  background: var(--canvas);
}

.mobile-menu__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mobile-menu__brand {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 20px;
}

.mobile-menu__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ink);
}

.mobile-menu__links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.mobile-menu__link {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 40px;
  line-height: 1.1;
}

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-menu__cta {
  justify-content: center;
}

.mobile-menu__contact {
  font-size: 14px;
  color: var(--muted);
}

/* Sticky contact bar (mobile) */
.sticky-contact {
  display: flex;
  gap: 8px;
  max-width: 360px;
  padding: 8px;
  border: 1px solid var(--ink);
  background: var(--surface);
}

.sticky-contact__main {
  flex: 1;
  justify-content: center;
  padding: 8px;
}

.sticky-contact__icon {
  padding: 8px 12px;
}

/* 2. Hero variants ------------------------------------------------------- */

/* 1 · Positioning statement */
.hero-statement {
  padding-block: 24px;
}

.hero-statement__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-bottom: 28px;
}

.hero-statement__title {
  max-width: 11em;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .9;
  text-wrap: balance;
  font-optical-sizing: auto;
}

.hero-statement__ctas {
  margin-top: clamp(28px, 4vw, 48px);
}

.hero-statement__clients {
  margin-top: clamp(32px, 5vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* 2 · Full-bleed showreel (fixed dark colours, like a video frame) */
.hero-reel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 320px;
  background: #000;
  color: #EEE9E1;
}

.hero-reel__media {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, var(--ph) 0 10px, var(--ph-stripe) 10px 11px);
  filter: var(--img-filter);
  opacity: .55;
}

.hero-reel__bar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  width: 100%;
  padding: 0 20px 40px;
}

.hero-reel__title {
  max-width: 10em;
  font-size: 48px;
  line-height: .9;
  font-style: italic;
}

.hero-reel__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.hero-reel__time {
  font-size: 13px;
}

.reel-toggle {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #EEE9E1;
  background: transparent;
  color: #EEE9E1;
  font-family: var(--f-mono);
  font-size: 12px;
  cursor: pointer;
}

/* 3 · Contact sheet hero */
.hero-sheet {
  padding: 20px;
}

.hero-sheet__title {
  margin-bottom: 28px;
  font-size: 64px;
  line-height: .82;
}

.hero-sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 10px;
  background: var(--sheet);
}

.hero-sheet__frame {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hero-sheet__no {
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--edge);
}

.hero-sheet__ph {
  padding: 4px;
}

.hero-sheet__ph .ph__label {
  font-size: 10px;
}

/* 4 · Editorial cover  /  5 · Portrait and intro (12-col split) */
.hero-split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 24px;
  padding: 20px;
}

.hero-split__media {
  min-width: 0;
}

.hero-split__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.hero-split--cover .hero-split__media { grid-column: 1 / span 7; }
.hero-split--cover .hero-split__text  { grid-column: 8 / span 5; }
.hero-split--portrait .hero-split__media { grid-column: 1 / span 4; }
.hero-split--portrait .hero-split__text  { grid-column: 6 / span 7; }

.hero-split__title {
  font-size: 44px;
  line-height: .95;
}

.hero-split--portrait .hero-split__title {
  font-size: 40px;
  text-wrap: balance;
}

.hero-split__lead {
  margin: 0;
  max-width: 26em;
  font-size: var(--t-lead);
}

.hero-split--portrait .hero-split__lead {
  max-width: 30em;
  text-wrap: pretty;
}

/* 3. Work index ---------------------------------------------------------- */

/* Contact sheet with film edge */
.contact-sheet {
  padding: 14px clamp(14px, 2.5vw, 32px) 28px;
  background: var(--sheet);
}

.contact-sheet__edge {
  height: 10px;
  margin-bottom: 18px;
  background: repeating-linear-gradient(90deg, var(--sheet-ink) 0 10px, transparent 10px 26px);
  opacity: .8;
}

.contact-sheet__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 28px 18px;
}

.contact-sheet__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  color: var(--sheet-ink);
  text-decoration: none;
}

.contact-sheet__item:hover {
  color: var(--sheet-ink);
}

.contact-sheet__top {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--edge);
}

.contact-sheet__ph {
  padding: 8px;
}

.contact-sheet__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 22px;
}

.contact-sheet__caption {
  font-size: 14px;
  color: var(--sheet-muted);
}

/* List with hover preview */
.work-list {
  position: relative;
  padding: 16px;
}

.work-list__row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.work-list__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 22px;
}

.work-list__preview {
  position: absolute;
  right: 30px;
  top: 36px;
  width: 110px;
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .4);
}

/* Masonry (CSS columns) */
.masonry {
  columns: 2 120px;
  column-gap: 18px;
}

.masonry__item {
  margin-bottom: 18px;
  break-inside: avoid;
}

/* NDA card */
.nda-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nda-card__cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  aspect-ratio: 3/2;
  padding: 14px;
  background: var(--sheet);
  color: var(--sheet-ink);
  text-align: center;
}

.nda-card__badge {
  padding: 4px 10px;
  border: 2px solid var(--sheet-ink);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nda-card__desc {
  font-size: 15px;
}

.nda-card__link {
  color: var(--accent-text);
  font-weight: 600;
}

/* Filters */
.filter-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 4. Case-study modules -------------------------------------------------- */

/* Intro + metadata */
.case-intro__title {
  margin: 10px 0 14px;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 32px;
  line-height: 1;
}

.case-intro__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted);
}

/* Process with proof rounds */
.proof-rounds {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.proof-rounds__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proof-rounds__stamp {
  position: absolute;
  display: flex;
  top: 4px;
  right: 4px;
}

.hand-note {
  margin-top: 8px;
  font-family: var(--f-hand);
  font-size: 22px;
  color: var(--accent-text);
}

/* Result with baseline */
.result-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--ink);
  background: var(--surface);
}

.result-card__figure {
  position: relative;
  align-self: flex-start;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: clamp(48px, 5vw, 76px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.result-card__label {
  font-weight: 600;
}

.result-card__baseline {
  font-size: 15px;
  color: var(--muted);
}

.result-card__source {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* Testimonial with stamp */
.testimonial {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.testimonial__stamp {
  position: absolute;
  display: flex;
  top: 18px;
  right: 18px;
}

.testimonial__quote {
  max-width: 24em;
  margin: 0;
  padding-right: 96px;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
  text-indent: -.4em;
}

.testimonial__by {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial__avatar {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, var(--ph) 0 10px, var(--ph-stripe) 10px 11px);
  filter: var(--img-filter);
}

.testimonial__name {
  font-weight: 600;
}

.testimonial__role {
  font-size: 15px;
  color: var(--muted);
}

/* Pull quote */
.pull-quote {
  display: grid;
  grid-template-columns: minmax(0, 80px) minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: clamp(32px, 5vw, 64px) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.pull-quote__mark {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  font-size: 120px;
  line-height: .7;
  color: var(--accent);
}

.pull-quote__text {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.12;
}

.pull-quote__by {
  margin-top: 16px;
  color: var(--muted);
}

/* Contextual CTA band */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: clamp(28px, 4vw, 48px);
  background: var(--accent);
  color: var(--on-accent);
}

.cta-band__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.05;
}

.cta-band__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 14px 22px;
  background: var(--on-accent);
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.cta-band__button:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* 5. Business ------------------------------------------------------------ */

/* Package / price card */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
}

.price-card--featured {
  border-color: var(--ink);
}

.price-card__stamp {
  position: absolute;
  display: flex;
  top: -14px;
  right: 20px;
}

.price-card__name {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 30px;
  line-height: 1.05;
}

.price-card__pitch {
  font-size: 16px;
  color: var(--muted);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.price-card__from {
  font-size: 15px;
  color: var(--muted);
}

.price-card__amount {
  position: relative;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 52px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price-card__time {
  font-size: 15px;
}

.price-card__list {
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.price-card__list li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.check {
  color: var(--success);
}

.price-card__cta {
  justify-content: center;
}

/* Day rate */
.day-rate {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  align-items: end;
  gap: 20px;
  padding: 28px;
  background: var(--sheet);
  color: var(--sheet-ink);
}

.day-rate__kicker {
  font-family: var(--f-mono);
  font-size: 12px;
  color: var(--sheet-muted);
}

.day-rate__title {
  margin-top: 6px;
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 30px;
}

.day-rate__amount {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 52px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.day-rate__note {
  font-size: 15px;
  color: var(--sheet-muted);
}

/* Process steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}

.step__top {
  display: flex;
  justify-content: space-between;
}

.step__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 26px;
  line-height: 1.1;
}

.step__text {
  font-size: 16px;
  color: var(--muted);
  text-wrap: pretty;
}

/* FAQ accordion (native details/summary) */
.faq__item {
  padding: 16px 0;
  border-top: 1px solid var(--ink);
}

.faq__question {
  min-height: 32px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.faq__answer {
  max-width: 40em;
  margin: 10px 0 0;
  color: var(--muted);
}

/* Availability calendar (16 weeks) */
.avail-cal__weeks,
.avail-cal__labels {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  gap: 3px;
}

.avail-cal__week {
  height: 40px;
}

.avail-cal__week--booked {
  background: var(--ink);
}

.avail-cal__week--hold {
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(135deg, var(--ink) 0 2px, transparent 2px 6px);
}

.avail-cal__week--open {
  border: 1.5px solid var(--accent);
  background: var(--canvas);
}

.avail-cal__labels {
  margin-top: 6px;
}

.avail-cal__labels > div {
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--muted);
}

.avail-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 12px;
  font-size: 14px;
}

.avail-cal__key {
  display: flex;
  align-items: center;
  gap: 6px;
}

.avail-cal__swatch {
  width: 14px;
  height: 14px;
}

.avail-cal__swatch--open {
  border: 1.5px solid var(--accent);
}

/* Awards & press */
.press-list {
  border-top: 1px solid var(--ink);
}

.press-list__row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.press-list__year {
  font-family: var(--f-mono);
  font-size: 13px;
  color: var(--muted);
}

.press-list__note {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

/* Testimonial wall (CSS columns) */
.quote-wall {
  columns: 2 160px;
  column-gap: 10px;
}

.quote-wall__item {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  font-size: 14px;
  break-inside: avoid;
}

.quote-wall__by {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* 6. Personal ------------------------------------------------------------ */

/* CV block */
.cv-block {
  padding: 18px;
  background: var(--sheet);
  color: var(--sheet-ink);
}

.cv-block__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 24px;
}

.cv-block__meta {
  margin: 6px 0 12px;
  font-size: 14px;
  color: var(--sheet-muted);
}

.cv-block__button {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--sheet-ink);
}

/* 7. Content ------------------------------------------------------------- */

/* Journal cards */
.journal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 28px;
}

.journal-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.journal-card:hover .journal-card__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.journal-card__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 24px;
  line-height: 1.15;
}

/* Newsletter signup */
.newsletter-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  align-items: end;
  gap: 24px 48px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--line);
  background: var(--surface);
}

.newsletter-box__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.newsletter-box__title {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.05;
}

.newsletter-box__sample {
  color: var(--ink);
}

.newsletter-box__hint {
  font-size: 13px;
  color: var(--muted);
}

/* Labelled text field */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 15px;
  font-weight: 600;
}

.field__input {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
}

/* Link-in-bio block */
.bio-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bio-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

.bio-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}

.bio-link--primary,
.bio-link--primary:hover {
  border: 0;
  background: var(--accent);
  color: var(--on-accent);
}

.bio-link__title {
  display: block;
  font-size: 17px;
  font-weight: 600;
}

.bio-link__sub {
  display: block;
  font-size: 14px;
}

/* 8. Commerce & licensing ------------------------------------------------ */

/* Product card */
.product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.product-card__ph {
  padding: 10px;
}

.product-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.product-card__name {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 22px;
}

.product-card__price {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.product-card__desc {
  font-size: 14px;
  color: var(--muted);
}

/* Variant selectors */
.variant-group {
  margin-bottom: 10px;
}

.option-row {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.option {
  padding: 6px 10px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 13px;
}

.option--on {
  background: var(--ink);
  color: var(--canvas);
}

/* Checkout summary */
.checkout {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.checkout__row {
  display: flex;
  justify-content: space-between;
}

.checkout__row--muted {
  color: var(--muted);
}

.checkout__row--total {
  padding-top: 6px;
  border-top: 1px solid var(--line);
  font-weight: 600;
}

.checkout__consent {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  font-size: 12px;
}

/* License tiers */
.license-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.license-tier {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.license-tier--featured {
  border-color: var(--ink);
}

.license-tier__name {
  font-weight: 600;
}

.license-tier__price {
  font-family: var(--f-display);
  font-weight: var(--d-weight);
  text-transform: var(--d-case);
  letter-spacing: var(--d-track);
  font-size: 32px;
  font-variant-numeric: tabular-nums;
}

.license-tier__desc {
  font-size: 14px;
  color: var(--muted);
}

/* 9. Proofing ------------------------------------------------------------ */

/* Selection grid + counter */
.select-count {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.select-bar {
  height: 4px;
  margin-bottom: 10px;
  background: var(--line);
}

.select-bar__fill {
  width: var(--w, 0%);
  height: 100%;
  background: var(--ink);
}

.select-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.select-grid .is-picked {
  outline: 2.5px solid var(--accent);
  outline-offset: 2px;
  border-radius: 40%;
}

/* Comment per image */
.image-comment__ph {
  margin-bottom: 8px;
}

.image-comment__note {
  padding: 6px 8px;
  border: 1px solid var(--line);
  font-size: 14px;
}

/* Compare view */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

/* Approval + downloads */
.approval {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pinned annotations: position each pin with --x / --y */
.pin-board {
  --ratio: 4/3;
}

.pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -12px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--f-mono);
  font-size: 11px;
}

/* 10. Media -------------------------------------------------------------- */

/* Lightbox (always dark) */
.lightbox {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: #0D0C0B;
  color: #EEE9E1;
}

.lightbox__top {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 12px;
}

.lightbox__close {
  padding: 2px 8px;
  border: 1px solid #EEE9E1;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lightbox__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid #EEE9E1;
}

.lightbox__image {
  flex: 1;
  opacity: .8;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.lightbox__exif {
  font-family: var(--f-mono);
  font-size: 12px;
}

/* Showreel player (always dark) */
.player {
  display: flex;
  flex-direction: column;
  background: #000;
  color: #EEE9E1;
}

.player__poster {
  opacity: .6;
}

.player__badge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 3px 8px;
  background: #000;
  font-family: var(--f-mono);
  font-size: 12px;
}

.player__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
}

.player__button {
  padding: 6px 10px;
  border: 1px solid #EEE9E1;
  font-family: var(--f-mono);
  font-size: 12px;
}

.player__chapters {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 3fr 2fr 3fr;
  gap: 3px;
  min-width: 120px;
}

.player__track {
  height: 3px;
  background: rgba(238, 233, 225, .35);
}

.player__track--active {
  background: #FF5A4E;
}

.player__chapter {
  margin-top: 4px;
  font-family: var(--f-mono);
  font-size: 10px;
}

.player__time {
  font-family: var(--f-mono);
  font-size: 12px;
}

/* Filmstrip */
.filmstrip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px;
  background: var(--sheet);
}

.filmstrip__frame {
  flex: 0 0 160px;
  padding: 6px;
}

/* 11. Overlays & forms --------------------------------------------------- */

/* Modal */
.modal-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--ink);
  background: var(--surface);
}

.modal-demo__head {
  display: flex;
  justify-content: space-between;
}

.modal-demo__title {
  font-weight: 600;
}

.modal-demo__text {
  font-size: 14px;
  color: var(--muted);
}

.modal-demo__button {
  align-self: flex-start;
}

/* Drawer */
.drawer-demo {
  display: flex;
  justify-content: flex-end;
  height: 180px;
  background: rgba(0, 0, 0, .2);
}

.drawer-demo__panel {
  width: 60%;
  padding: 12px;
  border-left: 1px solid var(--ink);
  background: var(--surface);
  font-size: 14px;
}

.drawer-demo__rule {
  height: 1px;
  margin: 8px 0;
  background: var(--line);
}

/* Password gate */
.gate-demo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gate-demo__title {
  font-weight: 600;
}

.gate-demo__field {
  padding: 10px;
  border: 1px solid var(--ink);
  font-size: 14px;
  color: var(--muted);
}

.gate-demo__link {
  font-size: 13px;
  text-decoration: underline;
}

/* Cookie consent */
.cookie-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--ink);
  font-size: 14px;
}

.cookie-demo__title {
  font-weight: 600;
}

.cookie-demo__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.cookie-demo__button {
  padding: 6px;
  font-size: 13px;
}