@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Anton&family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Cormorant+Garamond:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600&display=swap');

:root {
  /* Inter first — real Helvetica only exists on Apple devices, and Windows would
     otherwise silently substitute Arial. Helvetica kept as a fallback for Macs
     if Inter ever fails to load. */
  --wordmark: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Must match the rendered height of .site-nav — the hero offsets itself by it.
     The 44px icon boxes are the tallest thing in the row, not the logo:
     44 + 14 padding top and bottom + 1px border. */
  --nav-h: 73px;
  --bg: #faf8f4;
  --bg-soft: #f2eee7;
  --ink: #1c1a17;
  --body: #423c34;
  --muted: #7a7266;
  --accent: #b8683a;
  --line: rgba(28,26,23,0.12);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #faf8f4; }

h1, h2, h3, .serif { font-family: 'Instrument Serif', serif; font-weight: 400; }

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

/* NAV — solid paper so content never runs under it */
header.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 5vw;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
/* Icon-only mark, matched to the social glyphs. It sits in the same 44px box so
   all three share a baseline and touch target; the mark is set marginally taller
   than 22px because its open form reads lighter than the two solid tiles. */
/* Mark plus wordmark. Width is auto now that text sits beside the icon — the
   fixed 44px box that matched the social glyphs would clip it. */
.site-nav .logo {
  display: inline-flex; align-items: center; gap: 12px;
  height: 44px; margin-left: -4px;
  transition: transform 0.25s ease;
}
.site-nav .logo img { display: block; height: 26px; width: auto; flex: 0 0 auto; }
.logo-text {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: 21px; line-height: 1; color: var(--ink);
  white-space: nowrap;
}
.site-nav .logo:hover { transform: translateY(-1px); }
.site-nav .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.site-nav nav a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  position: relative; padding-bottom: 4px; color: var(--muted);
  transition: color 0.25s ease;
}
.site-nav nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--accent); transition: width 0.3s ease;
}
.site-nav nav a:hover { color: var(--ink); }
.site-nav nav a:hover::after { width: 100%; }

/* Social icons — icon-only links, so each carries its label in aria-label and
   gets a touch target bigger than its 22px glyph. Deliberately unscoped: the
   same pair appears in the nav and again under the contact email, and scoping
   these to .site-nav is what made the contact copies render unstyled. */
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  padding-bottom: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.social-link svg { width: 22px; height: 22px; display: block; }
.social-link::after { content: none; }
/* The icons carry their own brand colours now, so hover lifts and brightens
   rather than recolouring — a currentColor swap would fight the gradient. */
.social-link:hover { opacity: 0.82; transform: translateY(-1px); }
.social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.site-nav nav { display: flex; align-items: center; gap: 4px; }
/* Only the last icon pulls flush to the page margin — otherwise the gap between
   the two icons collapses along with it. */
.site-nav nav .social-link:last-child { margin-right: -10px; }

/* HERO — currently the photographic variant (see .hero.has-image below).
   To go back to the wordmark on plain paper, drop the "has-image" class and the
   <div class="hero-bg"></div> from .hero in index.html; the rules below go inert.
   The background file must be one you are cleared to publish AND one that lives
   outside /work/ — that path is password protected and 401s for a public
   visitor, so a photo referenced from there renders as an empty scrim. */
.hero {
  position: relative; overflow: hidden;
  margin-top: var(--nav-h);
  min-height: 62vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 100px 5vw;
}
.hero .eyebrow {
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 30px;
}
.hero h1 {
  font-family: var(--wordmark); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.2em;
  /* letter-spacing adds a trailing space that throws off optical centering */
  text-indent: 0.2em;
  font-size: clamp(23px, 5vw, 64px); line-height: 1.25;
  color: var(--ink); max-width: none;
}

/* TWO-LINE WORDMARK — an elegant serif name over a small plain sans label.
   Centring: letter-spacing appends a trailing space after the final letter but
   adds nothing before the first, so a centred line always drifts right of true
   centre. Correcting that with text-indent means guessing how the browser splits
   the indent under text-align:center — it does not divide the way you would
   predict. So instead each line is a flex item that shrink-wraps to its own
   width, and a negative margin-right cancels exactly one trailing letter-space.
   The centred box then equals the visible ink, at any tracking, with no
   magic numbers.

   The h1 font-size drives the NAME; DESIGN is sized as a fraction of it, so the
   two stay in proportion at every viewport. */
.hero h1.wordmark {
  letter-spacing: normal; text-indent: 0;
  line-height: 1;
  display: flex; flex-direction: column; align-items: center;
  font-size: clamp(34px, 7.6vw, 104px);
}
.hero h1.wordmark .wm-name,
.hero h1.wordmark .wm-word {
  letter-spacing: var(--ls);
  margin-right: calc(-1 * var(--ls));
}
/* Instrument Serif — the face already carrying every heading on the site, so the
   hero no longer introduces a typeface used nowhere else.
   Set in title case, not caps: the mixed-case letterforms are the point of this
   serif, and caps would throw away its lowercase entirely. */
.hero h1.wordmark .wm-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  text-transform: none;
  --ls: 0.005em;
  font-size: 1.02em;
  line-height: 1.02;
}
/* DESIGN does not try to span the name's width. At roughly a sixth of the size,
   matching that measure would need ~4em of tracking and the word would fall
   apart into loose letters. It sits as a small plain label instead —
   subordinate on purpose, which is what the size difference is for. */
.hero h1.wordmark .wm-word {
  /* Same serif as the name — one face across the whole lockup, per the mockup.
     DESIGN stays uppercase against the title-case name above it; that case
     contrast is what separates the two lines now that the tracking is closed up
     and both are set in the same face. */
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.62em;
  --ls: 0.04em;
  margin-top: 0.1em;
}
.hero .sub {
  margin-top: 32px; font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

/* Photographic variant — inert until .has-image is added.
   Public copy of the 150 N Riverside bar, deliberately kept outside /work/ so it
   is actually reachable without the portfolio password. */
/* Cover layout: wordmark held high in the frame, location line dropped to the
   base. .hero-bg is absolutely positioned and so out of flex flow — the only
   flex children are the h1 and .sub, which is what lets margin-top:auto push
   the sub all the way down regardless of how tall the viewport is. */
.hero.has-image {
  min-height: calc(100vh - var(--nav-h));
  padding: 14vh 5vw 5.5vh;
  justify-content: flex-start;
}
.hero.has-image .sub { margin-top: auto; }
.hero.has-image .hero-bg {
  position: absolute; inset: 0;
  background-image: url('../images/hero-riverside.jpg');
  background-size: cover; background-position: center;
}
/* Scrim: heavier top and bottom, lighter across the middle so the subject still
   reads through behind the wordmark. The extra stop at 62% holds contrast over
   the lit brass counter, which is the brightest band in this particular photo
   and sits directly behind the centred text. */
.hero.has-image .hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(16,13,10,0.62) 0%,
    rgba(16,13,10,0.44) 38%,
    rgba(16,13,10,0.52) 62%,
    rgba(16,13,10,0.68) 100%);
}
.hero.has-image > *:not(.hero-bg) { position: relative; }
.hero.has-image h1 { color: #fff; }
.hero.has-image .sub { color: rgba(255,255,255,0.88); }
/* A soft shadow rather than more scrim: the sub-line sits low on the lit marble
   floor, and darkening the whole photo enough to carry 12px type would flatten
   the thing worth showing. */
.hero.has-image h1,
.hero.has-image .sub { text-shadow: 0 1px 20px rgba(16,13,10,0.6); }

/* LOCKED WORK PANEL — stands in for a gallery thumbnail on the public page */
.locked-frame {
  background: var(--bg-soft); border: 1px solid var(--line);
  height: 34vh; min-height: 230px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.project-card:hover .locked-frame { border-color: rgba(184,104,58,0.45); background: #f0eae1; }
.locked-frame svg { color: var(--accent); }
.locked-frame .lock-text {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); line-height: 2;
}
.locked-frame .lock-text span { color: var(--muted); }

/* SECTIONS */
section { position: relative; padding: 130px 5vw; }
.section-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 24px;
}

/* ABOUT */
/* Portrait column widened now that the facts list is gone — with nothing beneath
   it, a 360px image left the column looking short against the bio text. */
.about-grid { display: grid; grid-template-columns: 480px 1fr; gap: 80px; align-items: start; }
.about-grid .about-media { max-width: 480px; }
.about-grid .headshot { width: 100%; }
.about-grid h2 { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.25; margin-bottom: 30px; }
.about-grid p { font-size: 17px; line-height: 1.85; color: var(--body); max-width: 56ch; }
.about-grid p + p { margin-top: 20px; }

/* Pull-quote line — the one sentence the bio turns on. */
.about-grid p.about-lede {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(25px, 2.7vw, 36px); line-height: 1.3;
  color: var(--ink); max-width: 18ch;
  margin-top: 44px; margin-bottom: 6px;
}
.about-subhead {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-top: 50px; margin-bottom: 18px;
}
.about-grid .about-subhead + p { margin-top: 0; }
.about-grid p.about-cta { margin-top: 30px; }
.about-cta a { border-bottom: 1px solid var(--accent); }
.about-footnote {
  margin-top: 36px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted);
}

/* DESIGN PORTFOLIO — two tiles, centred heading */
.portfolio-head {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(32px, 4.6vw, 62px); line-height: 1.15;
  text-align: center; margin-bottom: 70px;
}
.portfolio-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 46px;
  align-items: start;
}
.portfolio-tile { display: block; }
.tile-media {
  position: relative;
  overflow: hidden; background: var(--bg-soft);
  /* A fixed ratio rather than a height, so both tiles stay identical whatever
     their sources' proportions — one is an <img>, the other a CSS background
     with no intrinsic size at all. 16:9 matches the storefront photograph, so it
     seats uncropped; a taller box would cut the Reserve mark off the left pier. */
  aspect-ratio: 16 / 9;
}
.tile-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter 0.45s ease;
}

/* HOVER STATE — full colour at rest, desaturated under a grey wash on hover,
   with the overlay fading up over it. */
.tile-overlay {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; text-align: center;
  background: rgba(48,45,41,0.5);
  opacity: 0; transition: opacity 0.35s ease;
}
.overlay-text {
  font-family: 'Instrument Serif', serif; font-style: italic;
  font-size: clamp(22px, 2.4vw, 34px); color: #fff;
  text-shadow: 0 1px 20px rgba(16,13,10,0.6);
}

/* Only devices that actually hover get the hidden-until-hover behaviour. On
   touch there is no hover, so the overlay stays visible — otherwise a phone
   would never see the label. focus-visible opens it for keyboard users tabbing
   onto the tile link. */
@media (hover: hover) {
  .tile-media:hover img { filter: grayscale(1); }
  .tile-media:hover .tile-overlay,
  a.portfolio-tile:focus-visible .tile-overlay { opacity: 1; }
  a.portfolio-tile:focus-visible img { filter: grayscale(1); }
  .tile-residential:hover::before,
  .tile-residential:focus-within::before { filter: grayscale(1); }
}
@media (hover: none) {
  .tile-overlay { opacity: 1; }
}
.tile-label {
  margin-top: 20px; text-align: center;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink);
}
a.portfolio-tile:hover .tile-label { color: var(--accent); }

/* The residential rendering rides in as a BACKGROUND rather than an <img>, so a
   missing file degrades to an empty panel instead of a broken-image icon.
   Drop the file at assets/images/residential.jpg and the tile fills itself in. */
/* The rendering sits on a ::before rather than on the element itself, so the
   greyscale filter hits only the picture and not the overlay text above it. */
.tile-residential { background-color: var(--bg-soft); }
.tile-residential::before {
  content: ''; position: absolute; inset: 0;
  background-image: url('../images/residential.jpg');
  background-size: cover;
  /* The rendering is 1.60 against the tile's 16:9, so cover trims about 11% of
     its height. Biased above centre to keep the eucalyptus chandelier intact and
     spend the loss on empty floor instead. */
  background-position: center 42%;
  transition: filter 0.45s ease;
}

/* WORK / PROJECT CARDS */
.project-card {
  display: block; padding: 80px 0; border-top: 1px solid var(--line);
  cursor: pointer; position: relative;
}
.project-card:first-of-type { border-top: none; }
.project-card-inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: center; }
.project-card:nth-child(even) .project-card-inner { direction: rtl; }
.project-card:nth-child(even) .project-card-inner > * { direction: ltr; }
.project-card .frame { overflow: hidden; background: var(--bg-soft); }
.project-card .frame img {
  width: 100%; height: 58vh; object-fit: cover;
  transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.project-card:hover .frame img { transform: scale(1.05); }
.project-card .idx {
  font-family: 'Instrument Serif', serif; font-size: 13vw; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--line);
  position: absolute; top: -30px; left: -10px; z-index: -1;
}
.project-card .tag { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.project-card h3 { font-size: clamp(30px, 4.2vw, 54px); line-height: 1.12; margin-bottom: 20px; }
.project-card p.desc { font-size: 16px; line-height: 1.8; color: var(--body); max-width: 46ch; margin-bottom: 26px; }
.project-card .loc { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.project-card .view-link { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.project-card .view-link .arrow { display: inline-block; transition: transform 0.3s ease; }
.project-card:hover .view-link .arrow { transform: translateX(8px); }

/* RECOGNITION — press quotes and awards.
   The outlined numeral reuses the motif from .project-card .idx so the section
   reads as part of the same system rather than a bolted-on badge. */
/* Set full width, no measure limit — this line is the section's only heading now
   that the numbered label is gone, so it carries the whole opening statement. */
.rec-head {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(30px, 4.6vw, 62px); line-height: 1.18;
  max-width: none; margin-bottom: 96px;
}

/* Three press call-outs across one line, awards on their own row beneath.
   Rows are assigned explicitly rather than left to auto-placement, which would
   reflow the whole arrangement the moment any block changed height. */
.rec-stagger {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 46px;
  align-items: start;
}
.rec-stagger > * { min-width: 0; }
.rec-a { grid-column: 1; grid-row: 1; }            /* Cosmo, Wrigley  */
.rec-b { grid-column: 2; grid-row: 1; }            /* Cosmo, Michigan */
.rec-c { grid-column: 3; grid-row: 1; }            /* Architectural Digest */

/* A short accent rule heads each call-out instead of a full hairline — at a third
   of the width the hairline read as a table edge rather than a pull quote. */
.press-item::before {
  content: ''; display: block;
  width: 38px; height: 2px; background: var(--accent);
  margin-bottom: 22px;
}
/* Awards now sit under the experience timeline. The timeline's last row already
   carries a bottom rule, so this block gets clear space above it rather than a
   second rule stacked on the first. */
.awards-block { margin-top: 96px; }

.press-source {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 20px;
}
.press-source .dot { opacity: 0.5; margin: 0 4px; }
/* Cosmopolitan set to echo its masthead — heavy condensed caps in the magazine's
   magenta. Anton is the closest free face to that wordmark's proportions; the
   inherited 0.16em tracking has to be cancelled or it loses the tight fit that
   makes the logo recognisable. */
.brand-cosmo {
  font-family: 'Anton', 'Archivo Black', Impact, sans-serif;
  font-weight: 400;
  font-size: 1.45em;
  letter-spacing: 0.005em;
  color: #e0218a;
  line-height: 1;
  position: relative; top: 1px;
}
/* Architectural Digest set to echo its masthead — letterspaced Didone caps in
   black. Bodoni Moda carries the hairline serifs and extreme thick/thin contrast
   that make that wordmark read; the site's other serif is far too soft for it.
   Kept wider than Cosmopolitan because a Didone at tight tracking closes up. */
.brand-ad {
  font-family: 'Bodoni Moda', 'Playfair Display', Didot, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.3em;
  letter-spacing: 0.07em;
  color: var(--ink);
  line-height: 1;
}
/* Smaller now that three sit side by side; the column sets the measure, so the
   40ch cap is gone — at a third width it would never be reached anyway. */
.press-quote {
  font-family: 'Instrument Serif', serif; font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5; color: var(--ink); max-width: none;
  border: none; padding: 0; margin: 0;
}
/* Hanging quote mark, so the quote's first letter still aligns to the grid. */
.press-quote::before { content: '\201C'; margin-left: -0.42em; }
.press-quote::after { content: '\201D'; }
.press-title {
  margin-top: 22px; font-size: 13px; letter-spacing: 0.06em; color: var(--muted);
}
/* Article title heads the block now, above the publication line, so its spacing
   flips: nothing above, a small gap below. */
.press-title-top { margin-top: 0; margin-bottom: 10px; }
.press-project {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}
/* Column flex with flex-start so the underlined project link shrink-wraps to its
   own text rather than ruling across the full column width. */
.press-body { display: flex; flex-direction: column; align-items: flex-start; }
/* A second link directly under the first is a sibling, not a new block — it does
   not need the full gap that separates the links from the text above. */
.press-project + .press-project { margin-top: 12px; }
.press-project .arrow { display: inline-block; transition: transform 0.3s ease; }
.press-project:hover .arrow { transform: translateX(8px); }

.awards-label {
  margin-bottom: 22px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
}
.awards { display: flex; flex-direction: column; }
.award {
  display: grid; grid-template-columns: 190px 1fr; gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.award:last-child { border-bottom: 1px solid var(--line); }
.award-year {
  font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1;
  color: var(--accent);
}
.award-name { font-family: 'Instrument Serif', serif; font-size: 22px; }
.award-org { font-size: 14px; color: var(--muted); margin-top: 4px; }
.awards-inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 70px;
  align-items: start;
}
/* One citation for both years — the wording is identical, and repeating it under
   each would read as padding. The top padding matches the first award row's, so
   the two columns start on the same line rather than the citation riding high
   against the rule above it. */
.award-citation {
  margin-top: 0; padding-top: 26px; max-width: 46ch;
  font-size: 15px; line-height: 1.8; color: var(--body);
}

/* TIMELINE */
.timeline { display: flex; flex-direction: column; }
.tl-row {
  display: grid; grid-template-columns: 220px 1fr 200px; gap: 24px;
  padding: 26px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.tl-row:last-child { border-bottom: 1px solid var(--line); }
.tl-dates { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.tl-role { font-family: 'Instrument Serif', serif; font-size: 22px; }
.tl-org { font-size: 14px; color: var(--muted); margin-top: 4px; }
.tl-loc { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); text-align: right; }

/* CONTACT */
.contact { text-align: center; }
.contact h2 { font-size: clamp(38px, 6.5vw, 78px); margin-bottom: 40px; line-height: 1.1; }
.contact a.email { font-size: 19px; border-bottom: 1px solid var(--ink); padding-bottom: 4px; }
.contact-social { display: flex; justify-content: center; gap: 10px; margin-top: 40px; }
footer.site-footer {
  display: flex; justify-content: space-between; padding: 34px 5vw 54px;
  font-size: 12px; color: var(--muted); letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
}
footer.site-footer a { border-bottom: 1px solid var(--muted); }

.placeholder-flag {
  display: inline-block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #faf8f4; background: var(--accent); padding: 3px 9px; border-radius: 3px;
  margin-left: 8px; vertical-align: middle; font-family: 'Space Grotesk', sans-serif;
}

/* PROJECT PAGE — full-bleed hero, an intro held to the right half, then a
   two-column masonry gallery that keeps every photograph's own proportions. */
.pj-hero {
  margin-top: var(--nav-h);
  /* Was a full calc(100vh - nav). Reduced so the intro and spec list are visible
     without scrolling — the hero still bleeds edge to edge, it just no longer
     owns the whole first screen. */
  height: 68vh; min-height: 380px;
  overflow: hidden; background: var(--bg-soft);
  /* Overrides the 130px 5vw every other <section> carries — this one bleeds. */
  padding: 0;
}
.pj-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Photograph bleeds off the left edge to the halfway line; copy sits in the right
   half behind a heavy rule.
   No side padding on the section — that is what lets the photo reach the page
   edge — so each column carries its own horizontal spacing instead. */
.pj-intro {
  /* Uneven split: the photograph takes the larger share and the copy is pushed
     right into a narrower column. Not 50/50 — the image is the thing worth
     looking at, and the text still clears a comfortable measure at 42%. */
  display: grid; grid-template-columns: 58% 42%; gap: 0;
  /* No vertical padding at all: the photograph and the black rule run straight up
     into the hero, and the collage below butts against the bottom of the image. */
  padding: 0;
  align-items: stretch;
}
/* Collage section — a measured gap above and an equal one below, rather than the
   130px every other section carries, so the collage sits evenly in its own space
   instead of drifting toward the block above it. */
.pj-collage-section { padding-top: 76px; padding-bottom: 76px; }
/* Next Project follows straight on, so the only space between it and the collage
   is the collage's own 76px — matching the gap above. */
.pj-next { padding-top: 0; }
.pj-intro-inner {
  grid-column: 2;
  /* No rule between the columns — the gap alone separates them, so the padding
     is opened up a little to do that work on its own. */
  padding: 0 5vw 0 64px;
  /* Centre the copy against the photograph beside it. The column already
     stretches to the row height, so centring within it lines the text block's
     midpoint up with the image's. */
  display: flex; flex-direction: column; justify-content: center;
}
/* Hold the copy to a readable measure; half of a wide viewport is too long a line. */
.pj-intro p { max-width: 34rem; }
.pj-intro h1 {
  font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(34px, 4vw, 54px); line-height: 1.12; margin-bottom: 28px;
}
.pj-intro p { font-size: 16px; line-height: 1.85; color: var(--body); }
.pj-intro p + p { margin-top: 18px; }
.pj-intro b { font-weight: 600; color: var(--ink); }

/* Label/value pairs, as on the reference: a narrow label column and the value
   beside it, not beneath. */
.pj-specs { margin-top: 40px; border-top: 1px solid var(--line); }
.pj-spec {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.pj-spec dt {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.pj-spec dd { margin: 0; font-size: 14px; color: var(--ink); }

/* Masonry via CSS columns — no JS, and figures keep their intrinsic ratio
   because nothing sets a height. break-inside stops a photo splitting across
   the column boundary. */
.pj-gallery { column-count: 2; column-gap: 20px; }
.pj-gallery figure {
  break-inside: avoid; margin: 0 0 20px; overflow: hidden;
  background: var(--bg-soft); cursor: zoom-in;
}
.pj-gallery img {
  width: 100%; height: auto; display: block;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.pj-gallery figure:hover img { transform: scale(1.03); }

/* Photograph in the intro's left column, opposite the copy. Height follows from
   the width so the shot keeps its own proportions; align-self holds it to the top
   of the column rather than stretching it against the text beside it. */
.pj-figure { grid-column: 1; align-self: start; margin: 0; overflow: hidden; }
.pj-figure img { width: 100%; height: auto; display: block; }

/* Ania's own collage — a single tall composed image, shown whole and uncropped.
   Held to a column rather than the full page width: at 0.335 it is three times
   taller than it is wide, so full-bleed would run to nearly 4000px of scroll. */
.pj-collage { margin: 0 auto; max-width: 860px; }
.pj-collage img { width: 100%; height: auto; display: block; }

/* The floor plan runs full measure below the gallery — it is a drawing, not a
   photograph, so it is never cropped. */
.pj-plan { margin: 0; }
.pj-plan img { width: 100%; height: auto; display: block; }
.pj-plan figcaption {
  margin-top: 16px; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
}

.pj-credits { display: grid; grid-template-columns: 150px 1fr; gap: 20px; max-width: 640px; }
.pj-credits dt {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.pj-credits dd { margin: 0; font-size: 14px; line-height: 1.9; color: var(--ink); }

@media (max-width: 900px) {
  .pj-hero { height: 46vh; min-height: 280px; }
  /* One column: the photo still bleeds, but a vertical rule between stacked
     blocks would be meaningless, so it goes. */
  .pj-intro { grid-template-columns: 1fr; gap: 0; padding: 0 0 60px; }
  .pj-intro-inner { grid-column: 1; max-width: none; padding: 40px 6vw 0; }
  .pj-gallery { column-count: 1; }
  .pj-spec, .pj-credits { grid-template-columns: 1fr; gap: 2px; }
}

/* PROJECT SPLIT LANDING — photograph bleeding down the left, copy and plan on a
   tinted panel to the right, title reversed out over the photo. */
.project-split {
  display: grid; grid-template-columns: 47% 53%;
  min-height: calc(100vh - var(--nav-h));
  margin-top: var(--nav-h);
  /* Overrides the 130px 5vw that every other <section> carries — this one runs
     edge to edge, so the photograph bleeds off the left of the page. */
  padding: 0;
}
.ps-media { position: relative; overflow: hidden; background: var(--bg-soft); }
.ps-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* The storefront is a wide 16:9 frame dropped into a tall column, so cover
     crops hard. Biased left of centre to hold the brick pier, the Reserve mark
     and the siren in frame — dead centre loses the pier entirely. */
  object-position: 26% center;
}
.ps-title {
  position: absolute; top: 46px; left: 44px; right: 44px;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(22px, 2.1vw, 34px); line-height: 1.15;
  letter-spacing: 0.02em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 20px rgba(16,13,10,0.6);
}

.ps-panel {
  background: var(--bg-soft);
  padding: 92px 5vw 72px;
  display: flex; flex-direction: column; gap: 44px;
}
.ps-copy p {
  font-size: 15.5px; line-height: 1.85; color: var(--body);
  text-align: justify; hyphens: auto;
}
.ps-copy p + p { margin-top: 18px; }
.ps-copy b { font-weight: 600; color: var(--ink); }
/* The small square that opens the copy, as in the layout sketch. Inline-block so
   it sits on the first line rather than forcing its own. */
.ps-marker {
  display: inline-block; width: 11px; height: 11px;
  background: var(--ink); margin-right: 12px;
}
/* Plan as a background so a missing file degrades to an empty panel rather than
   a broken-image icon; contain, because a floor plan must never be cropped. */
/* An <img>, not a CSS background: the path then resolves against the page (each
   project has its own drawing in its own folder) and the plan can carry alt text.
   A missing file is hidden by the loader in motion.js rather than showing a
   broken-image icon. object-fit is contain because a floor plan must never crop. */
.ps-plan { flex: 1 1 auto; display: flex; align-items: flex-end; min-height: 260px; margin: 0; }
.ps-plan img {
  width: 100%; height: 100%; max-height: 420px;
  object-fit: contain; object-position: center bottom; display: block;
}

@media (max-width: 900px) {
  .project-split { grid-template-columns: 1fr; min-height: 0; }
  .ps-media { height: 62vh; }
  .ps-title { top: 28px; left: 6vw; right: 6vw; }
  .ps-panel { padding: 44px 6vw 52px; gap: 32px; }
  .ps-copy p { text-align: left; }
  .ps-plan { min-height: 220px; }
}

/* PROJECT DETAIL PAGE — title sits on paper, image runs full width beneath it */
.project-hero { padding: 190px 5vw 54px; }
.project-hero .tag { font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.project-hero h1 { font-size: clamp(40px, 7.5vw, 96px); line-height: 1.04; }
.project-hero .loc { margin-top: 20px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.project-hero-img img { width: 100%; height: 72vh; min-height: 380px; object-fit: cover; }

.project-intro { max-width: 720px; }
.project-intro p { font-size: 19px; line-height: 1.85; color: var(--body); }

.gallery {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
}
.gallery figure { overflow: hidden; cursor: zoom-in; background: var(--bg-soft); }
.gallery figure.span-4 { grid-column: span 4; }
.gallery figure.span-3 { grid-column: span 3; }
.gallery figure.span-2 { grid-column: span 2; }
.gallery figure.span-6 { grid-column: span 6; }
.gallery img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}
.gallery figure:hover img { transform: scale(1.04); }

.next-project {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line); padding-top: 40px;
}
.next-project .label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.next-project h3 { font-size: clamp(26px, 4vw, 42px); margin-top: 12px; }
.next-project .view-link { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; }
.next-project .view-link .arrow { display: inline-block; transition: transform 0.3s ease; }
.next-project:hover .view-link .arrow { transform: translateX(8px); }

/* LIGHTBOX */
#lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(250,248,244,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease;
}
#lightbox.open { opacity: 1; visibility: visible; }
#lightbox img {
  max-width: 88vw; max-height: 84vh; object-fit: contain;
  box-shadow: 0 20px 60px rgba(28,26,23,0.18);
}
#lightbox .lb-close, #lightbox .lb-prev, #lightbox .lb-next {
  position: absolute; background: none; border: none; color: var(--ink);
  cursor: pointer; font-family: 'Space Grotesk', sans-serif; font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
}
#lightbox .lb-close { top: 32px; right: 5vw; }
#lightbox .lb-prev { left: 5vw; top: 50%; transform: translateY(-50%); font-size: 28px; }
#lightbox .lb-next { right: 5vw; top: 50%; transform: translateY(-50%); font-size: 28px; }
#lightbox .lb-count { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); }

@media (max-width: 900px) {
  header.site-nav { padding: 14px 6vw; }
  /* Redefine the variable rather than hardcoding a height in the offsets below:
     these previously carried a literal 64px, which silently stopped matching the
     nav the moment the logo made it taller, and the header overlapped the hero. */
  /* 73px, not 69px: at this size the 44px social icons are taller than the 40px
     logo, so they — not the logo — set the row height. */
  :root { --nav-h: 73px; }
  .hero { padding: 80px 6vw; margin-top: var(--nav-h); min-height: 0; }
  .hero.has-image { padding: 12vh 6vw 5vh; min-height: calc(100vh - var(--nav-h)); }
  .hero h1 { letter-spacing: 0.14em; text-indent: 0.14em; }
  .locked-frame { height: auto; min-height: 190px; padding: 40px 20px; }
  .about-grid { grid-template-columns: 1fr; gap: 44px; }
  .about-grid .about-media { max-width: 100%; }
  .project-card-inner, .project-card:nth-child(even) .project-card-inner { grid-template-columns: 1fr; direction: ltr; gap: 30px; }
  .project-card .frame img { height: 46vh; }
  .portfolio-grid { grid-template-columns: 1fr; gap: 40px; }
  .portfolio-head { margin-bottom: 46px; }
  .tl-row { grid-template-columns: 1fr; gap: 6px; }
  .tl-loc { text-align: left; }
  /* Collapse the stagger: at this width the offsets read as broken alignment
     rather than as rhythm, so everything returns to one column in source order. */
  .rec-stagger { grid-template-columns: 1fr; row-gap: 54px; }
  .rec-a, .rec-b, .rec-c {
    grid-column: 1 / -1; grid-row: auto; margin-top: 0;
  }
  .rec-head { margin-bottom: 54px; }
  .award { grid-template-columns: 1fr; gap: 6px; }
  .awards-inner { grid-template-columns: 1fr; gap: 4px; }
  .award-citation { padding-top: 24px; max-width: none; }
  .project-hero { padding: 140px 6vw 40px; }
  .project-hero-img img { height: 52vh; min-height: 280px; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery figure.span-4, .gallery figure.span-3, .gallery figure.span-2 { grid-column: span 2; }
  section { padding: 84px 6vw; }
}