/* ============================================================
   Kevin Raposo Creative Media Inc. — site stylesheet
   Design system "Press Box": derived from the logo (navy, mid
   blue, cyan), photojournalism (slug lines, hairline rules,
   contact-sheet grids, mono metadata) and printed match programmes
   (warm paper, big uppercase headlines, numbered sections).
   Self-hosted Source Sans Pro (SIL Open Font License, Adobe).
   No frameworks. Local files only.
   ============================================================ */

@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/SourceSansPro-Regular.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/SourceSansPro-Semibold.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/SourceSansPro-Bold.woff2") format("woff2"); }

:root {
  --ink:        #0c0f13;
  --ink-2:      #171b21;
  --ink-3:      #23292f;
  --paper:      #f4f2ec;
  --paper-2:    #e7e5df;   /* separates from --paper without reading as beige */
  --white:      #ffffff;
  --text:       #171b21;
  --muted:      #5f6672;
  --line:       #d8d4ca;
  --line-soft:  #ece8de;   /* a hairline that separates without drawing a box */
  --line-strong:#b9b3a4;
  --line-dark:  rgba(255,255,255,.16);
  --navy:       #0a2d47;
  --brand:      #1b7fae;
  --brand-deep: #0f5f88;
  --cyan:       #33a9c2;
  --cyan-soft:  #8fd3e4;
  --star:       #e6a300;

  --wrap: 1280px;
  --wrap-wide: 1560px;
  --gutter: clamp(1.1rem, 3vw, 2.4rem);

  --ff: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --track-label: .1em;    /* every mono uppercase label: slugs, meta, captions, table heads */
  --track-btn:   .09em;   /* uppercase button and filter text */
  --track-tight: -.01em;  /* headlines and the big display numbers */
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --display-num: clamp(1.15rem, 1rem + .35vw, 1.55rem);
  --step--3: .72rem;
  --step--2: .82rem;
  --step--1: clamp(.88rem, .84rem + .18vw, .98rem);
  --step-0:  clamp(1.02rem, .98rem + .2vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.08rem + .55vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.3rem + 1.1vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.7rem, 1.7rem + 4.3vw, 5.4rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--ff); font-size: var(--step-0); line-height: 1.55;
  color: var(--text); background: var(--paper); -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern", "liga";
}
::selection { background: var(--cyan); color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-deep); text-underline-offset: .14em; text-decoration-thickness: 1px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; }
button { font: inherit; }

/* ---------- type ---------- */
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); font-weight: 700; }
h1, h2 { text-transform: uppercase; letter-spacing: var(--track-tight); line-height: .96; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); line-height: 1.15; letter-spacing: var(--track-tight); }
h4 { font-size: var(--step-0); }
p  { margin: 0 0 1em; }
.lede { font-size: var(--step-1); line-height: 1.42; color: var(--muted); max-width: 60ch; }
.mono, .slug, .eyebrow, .meta { font-family: var(--mono); }
.eyebrow {
  font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--brand-deep); margin: 0 0 1rem; font-weight: 600;
}
.slug { font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.slug b { color: var(--ink); font-weight: 600; }
.on-dark, .section--dark, .cta-band, .site-footer { color: #cfd6de; }
.on-dark h1, .on-dark h2, .on-dark h3, .section--dark h1, .section--dark h2, .section--dark h3, .cta-band h2 { color: #fff; }
.on-dark .lede, .section--dark .lede { color: #aeb9c5; }
.on-dark .eyebrow, .section--dark .eyebrow { color: var(--cyan-soft); }
.on-dark .slug, .section--dark .slug { color: #9aa7b4; } .on-dark .slug b, .section--dark .slug b { color: #fff; }
.on-dark a, .section--dark a { color: var(--cyan-soft); } .on-dark a:hover, .section--dark a:hover { color: #fff; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
/* kept for anything that genuinely needs to bleed wider; every section on the site uses
   .wrap so the left edge never moves between one section and the next */
.wrap--wide { width: min(100% - 2 * var(--gutter), var(--wrap-wide)); }
.post-body { max-width: 68ch; }
.wrap-narrow { width: min(100% - 2 * var(--gutter), 800px); margin-inline: auto; }
.section { padding: clamp(2.8rem, 5.4vw, 5rem) 0; }
.section--tight { padding: clamp(2.2rem, 4.5vw, 3.6rem) 0; }
.section--dark { background: var(--ink); }
.section--grey { background: var(--paper-2); }
.section--white { background: var(--white); }
/* where two bands of the same tone meet, a hairline is the only separation, which reads as
   an arbitrary line. Alternating tone does the work instead, so the rule is not needed. */
.section + .section--white, .section--white + .section { border-top: 0; }
.section--rule { border-top: 1px solid var(--line); }
.center { text-align: center; } .mt-0 { margin-top: 0; }
.grid-2 { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.05fr .95fr; align-items: start; }
.grid-2 > * { min-width: 0; }
@media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }

/* numbered section head: "01 / WHAT I SHOOT" + rule + headline */
.sec-head { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem 1.6rem; align-items: start; margin-bottom: clamp(1.6rem, 3.5vw, 2.6rem); }
.sec-head__num { font-family: var(--mono); font-size: var(--step--1); letter-spacing: var(--track-label); color: var(--brand-deep); padding-top: .55rem; white-space: nowrap; }
.sec-head__num::after { content: ""; display: block; width: 100%; height: 2px; background: var(--brand); margin-top: .5rem; }
.sec-head h2 { margin: 0; }
.sec-head .lede { margin: 1rem 0 0; }
.sec-head--row { grid-template-columns: auto 1fr auto; }
.sec-head--row .sec-head__aside { grid-column: 3; align-self: end; padding-bottom: .2rem; }
.sec-head > * { min-width: 0; }
@media (max-width: 700px) { .sec-head, .sec-head--row { grid-template-columns: 1fr; gap: .8rem; } .sec-head__num { padding-top: 0; } .sec-head__num::after { width: 3.2rem; } .sec-head--row .sec-head__aside { grid-column: 1; align-self: start; } }
.section--dark .sec-head__num { color: var(--cyan-soft); } .section--dark .sec-head__num::after { background: var(--cyan); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.5rem; font-weight: 700; font-size: var(--step--1); letter-spacing: var(--track-btn); text-transform: uppercase;
  line-height: 1; text-decoration: none; white-space: nowrap; border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  background: var(--ink); color: #fff; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary { background: var(--brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--navy); border-color: var(--navy); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }
.on-dark .btn--ghost, .section--dark .btn--ghost, .cta-band .btn--ghost, .hero--photo .btn--ghost { color: #fff; border-color: rgba(255,255,255,.7); }
.on-dark .btn--ghost:hover, .section--dark .btn--ghost:hover, .cta-band .btn--ghost:hover, .hero--photo .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--lg { padding: 1.15rem 1.9rem; font-size: var(--step-0); }
.btn--arrow::after { content: "→"; font-family: var(--mono); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(244,242,236,.94); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--line-strong); }
.site-header__inner { display: flex; align-items: center; gap: 1.6rem; min-height: 72px; }
.brand-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand-logo img { height: 50px; width: auto; display: block; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.55rem; }
.nav > a { font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; color: var(--ink); padding: .4rem 0; border-bottom: 2px solid transparent; }
.nav > a:hover, .nav > a[aria-current="page"] { border-bottom-color: var(--brand); color: var(--brand-deep); }
.header-cta { display: flex; align-items: center; gap: .5rem; margin-left: .4rem; }
.header-phone { font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-decoration: none; color: var(--muted); white-space: nowrap; }
.header-phone:hover { color: var(--brand-deep); }
.header-cta .btn { padding: .78rem 1.1rem; font-size: var(--step--2); }
.nav-toggle { display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; background: none; border: 1px solid var(--ink); border-radius: 0; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; position: relative; width: 20px; height: 2px; margin: 0 auto; background: var(--ink); }
.nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; }
@media (max-width: 1040px) {
  .nav-toggle { display: block; }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line-strong); padding: .4rem var(--gutter) 1.4rem; max-height: calc(100vh - 100%); overflow: auto; }
  .nav[data-open="true"] { display: flex; }
  .nav > a { padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: var(--step--1); }
  .header-cta { flex-direction: column; align-items: stretch; margin-left: 0; gap: .6rem; }
  .header-cta .btn { margin-top: 1rem; padding: 1rem 1.4rem; font-size: var(--step--2); }
  .header-cta .btn + .btn { margin-top: 0; }
  .brand-logo img { height: 42px; }
}

/* ---------- home hero: split, type left, cycling frame right ---------- */
.hero-split { padding-bottom: clamp(1rem, 2vw, 1.8rem); }
/* the whole hero is meant to be visible without scrolling: the grid takes the window
   height minus the header, and the picture sizes itself to what is left */
.hero-split__grid { min-height: calc(100svh - 72px - clamp(1rem, 2vw, 1.8rem)); align-items: center; }
.hero-split__grid > * { min-height: 0; min-width: 0; }
.hero-split__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(1.6rem, 4vw, 3.4rem); align-items: stretch; }
/* the slack in the column pools in ONE place, above the buttons, instead of being
   shared out between every paragraph and leaving the type stranded in holes */
.hero-split__text { padding: clamp(1.4rem, 3vh, 2.6rem) 0; display: flex; flex-direction: column; gap: 0; }
.hero-split__text .slug { margin: 0 0 clamp(1.1rem, 3.2vh, 2.4rem); }
.hero-split__text h1 { margin: 0 0 clamp(1rem, 2.4vh, 1.9rem); font-size: clamp(2.3rem, 1.1rem + 3.3vw + 1.2vh, 5.4rem); line-height: .98; }
.hero-split__text h1 em { font-style: normal; color: var(--brand); }
.hero-split__text .lede { max-width: 44ch; margin: 0; line-height: 1.46; }
.hero-split__actions { margin-top: auto; padding-top: clamp(1.4rem, 3.4vh, 2.8rem); }
.hero-rail { margin-top: clamp(1.4rem, 3.2vh, 2.6rem); padding-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.8rem; }
.hero-rail div { border-top: 1px solid var(--line-strong); padding-top: .7rem; }
.hero-rail b { display: block; font-size: var(--display-num); line-height: 1.05; letter-spacing: var(--track-tight); }
.hero-rail span { font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.frame { position: relative; display: flex; flex-direction: column; align-self: stretch; }
/* a defined portrait panel: the photograph sets the shape, the text column no longer stretches it */
.frame__media { position: relative; width: 100%; flex: 1; min-height: clamp(420px, 52vh, 640px); max-height: calc(100svh - 72px - 8.5rem); background: var(--ink); overflow: hidden; }
.frame__media picture { position: absolute; inset: 0; display: block; }
.frame__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.frame__media picture:nth-child(n+2) { opacity: 0; animation: heroFade 21s ease-in-out infinite; }
.frame__media picture:nth-child(2) { animation-delay: 7s; }
.frame__media picture:nth-child(3) { animation-delay: 14s; }
@keyframes heroFade { 0% { opacity: 0 } 4% { opacity: 1 } 33% { opacity: 1 } 37% { opacity: 0 } 100% { opacity: 0 } }
.frame__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0 .8rem; border-top: 2px solid var(--ink); font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.frame__bar b { color: var(--ink); font-weight: 600; }
.frame__bar .dot { display: inline-block; width: 8px; height: 8px; background: var(--brand); margin-right: .5rem; vertical-align: 0; }
/* short laptop screens: tighten the type so the whole hero still lands above the fold */
@media (min-width: 901px) and (max-height: 1000px) {
  .hero-split__text h1 { font-size: clamp(2.2rem, 1rem + 3.1vw + 1.1vh, 4.6rem); margin: 0 0 clamp(.8rem, 2vh, 1.4rem); }
  .hero-split__text .lede { font-size: var(--step-0); line-height: 1.44; max-width: 44ch; }
  .hero-split__actions { padding-top: clamp(1rem, 2.4vh, 2rem); }
  .hero-rail { margin-top: clamp(1rem, 2.4vh, 2rem); gap: .7rem 1.4rem; }
  .btn--lg { padding: .95rem 1.5rem; font-size: var(--step--1); }
}
/* shorter still (a 13in laptop with a dock and a bookmarks bar): trim again so the
   headline, the buttons and the rail all stay above the fold */
@media (min-width: 901px) and (max-height: 820px) {
  .hero-split__text { padding: clamp(.8rem, 2vh, 1.6rem) 0; }
  .hero-split__text .slug { margin-bottom: clamp(.7rem, 2vh, 1.4rem); }
  .hero-split__text h1 { font-size: clamp(2.05rem, 1rem + 2.7vw + .9vh, 3.9rem); margin-bottom: clamp(.7rem, 1.8vh, 1.2rem); }
  .hero-split__text .lede { font-size: var(--step-0); line-height: 1.42; }
  .hero-split__actions { padding-top: clamp(.9rem, 2vh, 1.6rem); }
  .hero-rail { margin-top: clamp(.9rem, 2vh, 1.6rem); }
}

@media (max-width: 900px) {
  .hero-split__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero-split__text { padding-top: 1.6rem; }
  .frame { order: -1; }                 /* on a phone the photograph leads, then the headline */
  /* match the shape of the phone-specific crop exactly, so object-fit has nothing left
     to cut. A 16:10 box over a 4:3 file was trimming 17% off the top and bottom, which
     is what took the heads off the sports and event frames. */
  .frame__media { aspect-ratio: 4 / 3; min-height: 0; max-height: none; }
  .hero-split__text { padding-top: 1.1rem; }
  .hero-split__text .slug { margin-bottom: .55rem; }
  .hero-split__text h1 { font-size: clamp(2.1rem, 8.6vw, 3.1rem); margin: 0 0 .7rem; }
  .hero-split__text .lede { font-size: var(--step-0); line-height: 1.45; max-width: none; }
  .hero-split__actions { margin-top: 0; padding-top: 1.1rem; }
  .hero-rail { margin-top: 1.3rem; padding-top: 0; }
  .frame__bar { padding-bottom: .5rem; }
  .hero-rail { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (max-width: 520px) { .hero-rail { gap: .8rem; } }

/* ---------- what I shoot: the offer, at reading size, not a row of tiny pills ---------- */
.spec-list { list-style: none; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; padding: 0; display: grid; gap: 0 clamp(1.6rem, 3vw, 3rem); grid-template-columns: repeat(3, 1fr); }
.spec-list li { font-size: var(--step-0); font-weight: 600; letter-spacing: var(--track-tight); padding: .95rem 0; border-top: 1px solid var(--line); }
/* one hairline weight throughout, the same one the client quotes use */
@media (max-width: 860px) { .spec-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .spec-list { grid-template-columns: 1fr; } }

/* ---------- client quotes: the named ones, with a job title attached ---------- */
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 3vw, 3rem); margin-top: clamp(1.8rem, 3.4vw, 2.8rem); }
.quote-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 62rem; }
.quote { margin: 0; display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.quote blockquote { margin: 0 0 1.4rem; font-size: clamp(1.02rem, .97rem + .28vw, 1.18rem); line-height: 1.5; }
.quote figcaption { margin-top: auto; }
.quote b { display: block; font-weight: 600; letter-spacing: var(--track-tight); }
/* reserve two lines for the job title so the NAMES line up across the row, not just
   the bottom edges of titles that happen to wrap differently */
.quote span { display: block; margin-top: .25rem; min-height: 2.9em; font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); line-height: 1.45; }
@media (max-width: 900px) { .quote-grid, .quote-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .quote-grid, .quote-grid--2 { grid-template-columns: 1fr; gap: 1.8rem; } }

/* ---------- services: three columns divided by hairlines ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.svc { padding: 1.6rem 1.6rem 1.9rem; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: background-color .15s ease; }
/* the three cards share one set of rows, so the picture, the name, the price line, the
   description and the link sit on the same line across all three whatever the text length */
@supports (grid-template-rows: subgrid) {
  .svc-grid { grid-template-rows: auto auto auto 1fr auto; }
  .svc { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0; }
  .svc .svc__link { margin-top: 0; align-self: end; }
}
.svc:last-child { border-right: 0; }
.svc:hover { background: var(--white); }
.svc__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); margin: 0 0 1.1rem; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.svc:hover .svc__media img { transform: scale(1.03); }
.svc__price { font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); margin: 0 0 .9rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); min-height: 3.1em; }
/* the price line is also a <p> inside .svc, so it has to be excluded here or the
   type selector out-ranks .svc__price and both lines render at the same size */
.svc p:not(.svc__price) { color: var(--muted); font-size: var(--step-0); }
.svc__link { margin-top: auto; padding-top: .8rem; font-weight: 700; color: var(--brand-deep); font-size: var(--step--1); }
.svc:hover .svc__link { color: var(--navy); }
@media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } .svc { border-right: 0; border-bottom: 1px solid var(--line-strong); } .svc:last-child { border-bottom: 0; } }

.work-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: clamp(1.2rem, 2.5vw, 1.8rem); }
.work-head .lede { margin: 0; max-width: 46ch; }
.work-filter { margin: 0; }
.work-more { margin: 0; font-weight: 700; font-size: var(--step--1); }
.work-more a { color: var(--cyan-soft); text-decoration: none; }
.work-more a:hover { color: #fff; text-decoration: underline; }
.work-set[hidden] { display: none; }

/* ---------- galleries (masonry) ---------- */
/* justified rows: within a row every picture is scaled to one shared height and the row
   fills the width exactly, so nothing is cropped and the gallery ends on a straight line
   instead of the ragged bottom a column layout always leaves */
.masonry { display: flex; flex-direction: column; gap: 14px; }
.jrow { display: flex; gap: 14px; }
.masonry figure { flex: 1 1 0; min-width: 0; margin: 0; position: relative; background: var(--paper-2); cursor: zoom-in; overflow: hidden; }
.masonry img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.masonry figure:hover img { transform: scale(1.025); }
.masonry figcaption { position: absolute; inset: auto 0 0 0; padding: 2rem .85rem .75rem; font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.4; color: #fff; background: linear-gradient(to top, rgba(5,8,12,.88), rgba(5,8,12,.4) 55%, transparent); opacity: 0; transition: opacity .2s ease; }
.masonry figure:hover figcaption, .masonry figure:focus-within figcaption { opacity: 1; }
.section--dark .masonry figure { background: var(--ink-2); }
.masonry--single .jrow { display: block; } .masonry--single figure { max-width: 800px; }
.masonry--single img { height: auto; }
@media (max-width: 900px) { .jrow { flex-wrap: wrap; } .masonry figure { flex: 1 1 100%; } }
@media (max-width: 700px) { .masonry, .masonry--post { columns: 2 150px; column-gap: 8px; } .masonry figure { margin-bottom: 8px; } }

/* one filter control, shared by the home gallery, the portfolio filters, the blog
   categories and the archive's competition bar, so they cannot drift apart */
/* margin-bottom only: the shorthand would reset margin-inline and knock the archive bar,
   which is also a .wrap, off the page's centred column */
.gallery-filter, .arch-jump { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
.gallery-filter button, .arch-jump a { font-family: var(--mono); font-size: var(--step--1); line-height: 1; letter-spacing: var(--track-btn); text-transform: uppercase; cursor: pointer; padding: .95rem 1.35rem; border-radius: 0; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; }
.gallery-filter button span, .arch-jump a span { opacity: .55; margin-left: .4rem; }
.gallery-filter button:hover, .arch-jump a:hover { border-color: var(--ink); color: var(--ink); }
.gallery-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.section--dark .gallery-filter button { border-color: rgba(255,255,255,.3); color: #d5dde5; }
.section--dark .gallery-filter button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- lightbox ---------- */
.lb { position: fixed; inset: 0; z-index: 200; display: none; background: rgba(6,8,11,.97); }
.lb.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.lb__bar { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem; color: #c9d1da; font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; }
.lb__close, .lb__nav button { font-family: var(--mono); font-size: .76rem; letter-spacing: var(--track-label); text-transform: uppercase; background: none; border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 0; cursor: pointer; padding: .5rem .85rem; }
.lb__close:hover, .lb__nav button:hover { background: #fff; color: var(--ink); }
.lb__stage { display: grid; place-items: center; padding: 0 1rem; min-height: 0; }
.lb__stage img { max-width: min(1500px, 96vw); max-height: 76vh; width: auto; height: auto; object-fit: contain; }
.lb__foot { padding: .9rem 1.2rem 1.4rem; text-align: center; color: #d5dde5; font-size: var(--step--1); }
.lb__nav { display: flex; gap: .6rem; justify-content: center; margin-top: .7rem; }

/* ---------- hub page cover: full-bleed frame with slug, title block below ---------- */
.cover { position: relative; background: var(--ink); overflow: hidden; }
.cover__media { position: relative; height: clamp(320px, 44vw, 620px); max-height: 66svh; }
.cover__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover__slug { position: absolute; left: 0; right: 0; bottom: 0; padding: .7rem var(--gutter); background: linear-gradient(to top, rgba(5,8,12,.75), transparent); color: #fff; font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; display: flex; justify-content: space-between; gap: 1rem; }
.cover__slug span:last-child { color: var(--cyan-soft); }
/* the title block is a section like any other: the gap under it is the same gap that
   sits between every other pair of sections on the site, so the rhythm never changes */
.masthead { padding: clamp(2.2rem, 5vw, 4rem) 0 clamp(2.8rem, 5.4vw, 5rem); }
/* top-aligned, not bottom-aligned: the headline and the paragraph beside it should start
   on the same line. The aside is nudged down by the difference in half-leading so the
   cap heights line up, not the invisible line boxes. */
.masthead__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(1.4rem, 4vw, 3.4rem); align-items: start; }
.masthead h1 { margin: 0; font-size: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem); }
.masthead .slug + h1 { margin-top: .8rem; }
.masthead__aside { padding-top: .55rem; }
.masthead .lede { margin: 0; }
.masthead__aside .btn-row { margin-top: 1.4rem; }
@media (max-width: 860px) { .masthead__grid { grid-template-columns: 1fr; } .masthead__aside { padding-top: 0; } .masthead__aside .lede { margin-top: .4rem; } }
.masthead--dark { background: var(--ink); border-bottom-color: var(--ink-3); }
.masthead--dark h1 { color: #fff; } .masthead--dark .lede { color: #aeb9c5; } .masthead--dark .slug { color: #9aa7b4; } .masthead--dark .slug b { color: #fff; }
.masthead--dark a { color: var(--cyan-soft); }

/* ---------- credential / assignment strip ---------- */
.creds { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creds__inner { padding: clamp(1.4rem, 3vw, 2.2rem) 0; display: grid; grid-template-columns: auto 1fr; gap: 1rem 2rem; align-items: center; }
.creds__label { font-family: var(--mono); font-size: var(--step--2); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin: 0; }
.creds__list { display: flex; flex-wrap: wrap; gap: .4rem .6rem; list-style: none; margin: 0; padding: 0; grid-column: 2; }
.creds__list li { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); border: 1px solid var(--line-strong); padding: .38rem .65rem; }
.creds__inner .logo-wall { grid-column: 2; }
.creds__inner .logo-wall + .creds__list { grid-column: 2; margin-top: .2rem; }
@media (max-width: 760px) { .creds__inner { grid-template-columns: 1fr; } .creds__list, .creds__inner .logo-wall { grid-column: 1; } }

/* ---------- logo wall: contact-sheet grid ---------- */
.logo-wall { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); grid-template-columns: repeat(5, 1fr); }
.logo-tile { display: grid; place-items: center; height: 136px; padding: 1rem .55rem; background: var(--paper); transition: background-color .15s ease; }
/* every logo file is normalised onto the same canvas, so one box size renders them all
   at the same scale and they line up across the grid */
.logo-tile img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .95; transition: filter .2s ease, opacity .2s ease; }
.logo-tile:hover { background: var(--white); } .logo-tile:hover img { filter: none; opacity: 1; }
.logo-wall--xs { grid-template-columns: repeat(6, 1fr); background: transparent; border: 0; gap: 8px; }
.logo-wall--xs .logo-tile { height: 100px; border: 1px solid var(--line-strong); padding: .5rem .6rem; }
.logo-wall--xs .logo-tile img { width: 100%; height: 100%; object-fit: contain; filter: none; opacity: 1; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } .logo-wall--xs { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } .logo-tile { height: 82px; padding: .5rem .3rem; } .logo-wall--xs { grid-template-columns: repeat(2, 1fr); } }
.client-more { margin: 1.4rem auto 0; font-size: var(--step--1); color: var(--muted); line-height: 2; text-align: center; max-width: 68ch; }
/* no underline: the linked names on the home page and the plain ones on the portfolio
   pages have to read as one treatment */
.client-more a { font-weight: 700; color: var(--ink); text-decoration: none; }
/* names with no site of their own read at the same weight, without pretending to be links */
.client-more b { font-weight: 700; color: var(--ink); }
.client-more a:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: .2em; }

/* ---------- reviews: the Google widget look from the live site ---------- */
.rv-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
@media (max-width: 860px) { .rv-wrap { grid-template-columns: 1fr; gap: 1.2rem; } }

.rv-summary { text-align: center; }
.rv-summary__word { font-size: 1.55rem; font-weight: 700; letter-spacing: var(--track-tight); color: var(--brand-deep); margin: 0 0 .2rem; text-transform: uppercase; }
.rv-summary__stars { font-size: 1.9rem; letter-spacing: .06em; margin: 0 0 .3rem; color: var(--star); }
.rv-summary__count { margin: 0 0 .5rem; font-size: var(--step--1); color: var(--text); }
.rv-summary__count b { font-weight: 700; }
.rv-summary__g { text-decoration: none; display: inline-block; }
.g-word { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; font-family: "Source Sans Pro", Arial, sans-serif; }

.rv-track-wrap { position: relative; min-width: 0; padding-inline: 4px; }
.rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 320px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 4px; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }

/* the review cards came from a third-party widget with rounded corners and a drop
   shadow; nothing else on the site has either, so they get the same hard edge and
   hairline as every other card */
.rv { scroll-snap-align: start; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 0; padding: 1.1rem 1.15rem 1.2rem; display: flex; flex-direction: column; gap: .55rem; }
.section--grey .rv { background: #f6f5f2; }
.rv__head { display: flex; align-items: center; gap: .7rem; }
.rv__avatar { width: 42px; height: 42px; border-radius: 0; color: #fff; font-weight: 700; font-size: 1.1rem; display: grid; place-items: center; flex-shrink: 0; }
.rv__who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rv__who strong { font-size: var(--step--1); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv__when { font-size: var(--step--2); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a client's job title is the proof: let it wrap instead of trailing off in an ellipsis */
.rv__role { white-space: normal; overflow: visible; line-height: 1.3; }
.rv__source { margin-left: auto; flex-shrink: 0; }
.rv__source--quote { font-size: 2.4rem; line-height: .62; color: var(--brand); font-weight: 700; }
.g-mark { width: 20px; height: 20px; display: block; }
.rv__stars { display: flex; align-items: center; gap: .35rem; }
.rv__stars .stars { color: var(--star); font-size: 1rem; letter-spacing: .04em; }
.rv__check { width: 16px; height: 16px; }
.rv__text { margin: 0; font-size: var(--step--1); line-height: 1.5; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv.is-open .rv__text { -webkit-line-clamp: unset; display: block; }
.rv__more { align-self: start; margin-top: auto; padding: .5rem 0; margin-bottom: -.5rem; border: 0; background: none; color: var(--muted); font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.rv__more:hover { color: var(--brand-deep); text-decoration: underline; }

.rv-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 0; border: 1px solid var(--line-strong); background: var(--white); color: var(--ink); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; z-index: 2; }
.rv-arrow:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.rv-arrow--prev { left: -19px; } .rv-arrow--next { right: -19px; }
.rv-arrow[hidden] { display: none; }
@media (max-width: 700px) { .rv-arrow { display: none; } .rv-track { grid-auto-columns: minmax(240px, 84%); } }

/* ---------- about ---------- */
.lede--lead { color: var(--ink); font-size: var(--step-1); line-height: 1.4; margin: 0 0 1.2rem; max-width: 62ch; }
.about-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: .85fr 1.15fr; align-items: start; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-portrait img { width: 100%; }
.about-portrait .frame__bar { border-top-width: 1px; }
.creds-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-top: 1.4rem; }
.creds-row img { height: 74px; width: auto; display: block; border: 1px solid var(--line-strong); }
@media (max-width: 520px) { .creds-row img { height: 60px; } }
.factbar { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); margin: 0 0 clamp(2rem, 4vw, 3rem); }
.factbar div { padding: 1.1rem 1rem; border-right: 1px solid var(--line-strong); }
.factbar div:last-child { border-right: 0; }
@media (max-width: 860px) { .factbar { grid-template-columns: repeat(2, 1fr); }
  .factbar div:nth-child(2n) { border-right: 0; }
  .factbar div:nth-child(-n+2) { border-bottom: 1px solid var(--line-strong); } }
@media (max-width: 460px) { .factbar { grid-template-columns: 1fr; }
  .factbar div { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .factbar div:last-child { border-bottom: 0; } }
.factbar b { display: block; font-size: var(--display-num); line-height: 1.05; color: var(--ink); letter-spacing: var(--track-tight); }
.factbar span { display: block; font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-top: .35rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy); color: #d5e2ec; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lede { color: #b6cbdb; }
.cta-band .btn--primary { background: #fff; color: var(--navy); border-color: #fff; }
.cta-band .btn--primary:hover { background: var(--cyan-soft); border-color: var(--cyan-soft); color: var(--ink); }
.cta-band .fineprint { margin-top: 1rem; font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: #9fb8ca; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #98a3af; padding: 3.4rem 0 1.8rem; font-size: var(--step--1); }
.site-footer a { color: #d5dde5; text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.site-footer .brand-logo img { height: 56px; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 1rem; }
.site-footer h4 { color: #fff; font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: .9rem; font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
/* footer links are a nav, not running text: give each one a row a thumb can hit */
.site-footer li { margin-bottom: .1rem; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 40px; padding: .1rem 0; }
.footer-bottom { margin-top: 2.6rem; padding-top: 1.3rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; justify-content: space-between; font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.rate-table { width: 100%; border-collapse: collapse; font-size: var(--step--1); min-width: 0; }
.rate-table th, .rate-table td { text-align: left; padding: .75rem .7rem; border-bottom: 1px solid var(--line-strong); vertical-align: top; }
.rate-table th { font-family: var(--mono); font-weight: 600; font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--ink); }
.rate-table td:not(:first-child), .rate-table th:not(:first-child) { text-align: right; white-space: nowrap; }
.rate-table td:not(:first-child) { font-family: var(--mono); font-weight: 600; font-size: var(--step--1); }
.rate-table .sub { display: block; color: var(--muted); font-size: var(--step--2); font-weight: 400; }
.tw-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rate-note { font-size: var(--step--1); color: var(--muted); margin-top: .9rem; }
.sub-head { font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0; line-height: 1.15; margin: 0 0 .9rem; padding-bottom: .6rem; border-bottom: 2px solid var(--ink); }
.rate-group + .rate-group { margin-top: 2.4rem; }
.rate-stack { display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); grid-template-columns: 1fr; max-width: 900px; }
.rate-stack .rate-group + .rate-group { margin-top: 0; }
@media (max-width: 700px) { .rate-table { font-size: var(--step--2); } .rate-table th, .rate-table td { padding: .55rem .35rem; } .rate-table th:not(:first-child) { white-space: normal; font-size: var(--step--3); } .rate-table td:not(:first-child) { font-size: var(--step--2); } .rate-table .sub { font-size: var(--step--2); } }

.calc-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.6rem; border: 1px solid var(--ink); width: max-content; max-width: 100%; }
.calc-tabs button { font-family: var(--mono); font-size: var(--step--1); line-height: 1; letter-spacing: var(--track-btn); text-transform: uppercase; cursor: pointer; padding: .95rem 1.35rem; border: 0; border-right: 1px solid var(--ink); background: transparent; color: var(--ink); }
.calc-tabs button:last-child { border-right: 0; }
.calc-tabs button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.calc { display: grid; grid-template-columns: 1.35fr .65fr; gap: 14px; align-items: start; }
.calc__body { background: var(--white); border: 0; padding: 1.7rem 1.8rem; }
.calc__step[hidden] { display: none; } .calc__step + .calc__step:not([hidden]) { margin-top: 1.8rem; }
.calc__q { font-size: var(--step-0); font-weight: 700; margin: 0 0 .3rem; }
.calc__hint { font-size: var(--step--1); color: var(--muted); margin: 0 0 .9rem; }
.calc__choice { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem; margin-bottom: .35rem; cursor: pointer; border: 1px solid var(--line-soft); background: var(--white); transition: border-color .12s ease, background-color .12s ease; }
.calc__choice:hover { border-color: var(--line-strong); background: #fbfaf7; }
.calc__choice input { margin-top: .18rem; accent-color: var(--brand); width: 20px; height: 20px; flex-shrink: 0; }
.calc__choice:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: #f4fafc; }
.calc__choice-body { display: flex; flex-direction: column; gap: .18rem; }
.calc__choice-label { font-weight: 700; font-size: var(--step--1); }
.calc__choice-note { font-size: var(--step--2); color: var(--muted); line-height: 1.45; }
.calc__slider { margin-bottom: 1.3rem; }
.calc__slider-head { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--step--1); font-weight: 600; margin-bottom: .45rem; }
.calc__slider-val { font-family: var(--mono); font-size: 1.2rem; font-weight: 700; color: var(--brand-deep); }
.calc__slider input[type="range"] { width: 100%; accent-color: var(--brand); }
.calc__total { background: var(--ink); color: #c9d1da; padding: 1.5rem; position: sticky; top: 88px; }
.calc__lines { min-height: 1.5rem; }
.calc__line { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step--1); padding: .45rem 0; border-bottom: 1px solid var(--line-dark); }
.calc__line span:last-child { font-family: var(--mono); }
.calc__line--credit { color: #8fe0ad; }
.calc__grand { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.1rem; }
.calc__grand span { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: #93a2b1; }
.calc__amount { font-family: var(--mono); font-size: 2.1rem; font-weight: 700; color: #fff; letter-spacing: var(--track-tight); line-height: 1; }
.calc__total.is-live .calc__amount { color: var(--cyan-soft); }
.calc__tax { font-size: var(--step--2); color: #93a2b1; margin: .35rem 0 0; text-align: right; font-family: var(--mono); }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; } .calc__total { position: static; } }

/* ---------- form ---------- */
.form-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, 1fr); max-width: 920px; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: 700; font-size: var(--step--1); }
.field .hint { font-weight: 400; color: var(--muted); font-size: var(--step--2); }
.on-dark .field .hint, .section--dark .field .hint { color: #9fb0bf; }
.field input, .field select, .field textarea { font: inherit; font-size: var(--step-0); color: var(--text); padding: .85rem .9rem; background: var(--white); border: 1px solid var(--line-strong); border-radius: 0; width: 100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(51,169,194,.45); outline-offset: 1px; border-color: var(--brand); }
.field textarea { min-height: 130px; resize: vertical; }
.field--check label { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-size: var(--step--1); line-height: 1.45; }
.field--check input { width: 20px; height: 20px; flex-shrink: 0; margin-top: .15rem; accent-color: var(--brand); }
.consent { font-size: var(--step--2); color: #9fb0bf; margin: -.3rem 0 0; }
.sent { background: #10331e; border: 1px solid #2f7d4c; padding: 1.5rem; max-width: 920px; }
.sent h3 { color: #8ff0b5; margin-bottom: .4rem; } .sent p { margin: 0; color: #bfe8cd; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
/* the heading keeps the page's left edge; only the question list narrows */
.faq details { max-width: 820px; border-top: 1px solid var(--line-strong); padding: 1.1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; min-height: 44px; font-weight: 700; font-size: var(--step-0); list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 1.4rem; color: var(--brand-deep); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .9rem 0 0; color: var(--muted); max-width: 68ch; }

/* ---------- blog + archive ---------- */
.posts { display: grid; gap: clamp(1.1rem, 2vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 1.4rem; }
.post { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line-strong); transition: background-color .15s ease, border-color .15s ease; }
.post:hover { background: var(--white); border-color: var(--ink); }
.post[hidden] { display: none; }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-2); display: block; }
.post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.post:hover .post__media img { transform: scale(1.03); }
.post__media--none { background: repeating-linear-gradient(135deg, var(--paper-2) 0 8px, var(--paper) 8px 16px); }
.post__body { padding: 1.05rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.post__cat { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brand-deep); }
.post__title { font-weight: 700; font-size: var(--step-0); line-height: 1.25; }
.post__meta { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); color: var(--muted); margin-top: auto; padding-top: .5rem; }
/* the negative margin cancels the sticky bar's own padding, so the buttons start at the
   same distance below the masthead as the blog filters do */
.arch-jump { margin-top: -.9rem; padding: .9rem 0; position: sticky; top: 72px; z-index: 30; background: rgba(244,242,236,.96); backdrop-filter: blur(10px); }
.arch-jump a:hover { background: var(--ink); color: #fff; } .arch-jump a:hover span { opacity: .7; }
.arch-group { padding: 2.4rem 0 .6rem; scroll-margin-top: 140px; }
.arch-group h2 { font-size: var(--step-2); margin-bottom: 1rem; display: flex; align-items: baseline; gap: .8rem; }
.arch-count { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); color: var(--muted); text-transform: none; }
.shoots { display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.shoot { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--paper); border: 1px solid var(--line-strong); }
.shoot:hover { background: var(--white); border-color: var(--ink); }
.shoot__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-2); display: block; }
.shoot__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shoot__body { padding: .8rem .9rem 1rem; display: flex; flex-direction: column; gap: .3rem; }
.shoot__title { font-weight: 700; font-size: var(--step--1); line-height: 1.3; }
.shoot__meta { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); color: var(--muted); }

/* ---------- post pages ---------- */
.post-page .masthead h1 { font-size: var(--step-3); max-width: 28ch; }
.post-body p { font-size: var(--step-0); line-height: 1.7; max-width: 70ch; }
.post-body h2 { font-size: var(--step-2); margin-top: 1.8rem; text-transform: none; }
.post-body h3, .post-body h4 { font-size: var(--step-1); margin-top: 1.6rem; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 1.6rem 0; background: var(--ink); overflow: hidden; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-embed[data-yt] { cursor: pointer; }
.video-embed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 0; border: 0; background: var(--brand); cursor: pointer; display: grid; place-items: center; transition: background-color .15s ease; }
.video-play span { width: 0; height: 0; border-left: 26px solid #fff; border-top: 16px solid transparent; border-bottom: 16px solid transparent; margin-left: 6px; }
.video-embed:hover .video-play { background: var(--navy); }
.post-nav { display: grid; gap: 1px; background: var(--line-strong); border: 1px solid var(--line-strong); grid-template-columns: 1fr 1fr; margin: 1.5rem auto 3rem; }
.post-nav__a { text-decoration: none; color: inherit; background: var(--paper); padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; }
.post-nav__a:hover { background: var(--white); }
.post-nav__a span { font-family: var(--mono); font-size: var(--step--3); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--brand-deep); }
.post-nav__a strong { font-size: var(--step--1); line-height: 1.3; }
.post-nav__a--r { text-align: right; grid-column: 2; }
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } .post-nav__a--r { grid-column: 1; text-align: left; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print { .site-header, .ticker, .cta-band, .site-footer, .lb { display: none !important; } }