/* ==========================================================================
   Leticia Marie Holtz — Production Design
   Static stylesheet. No build step, no dependencies.
   ========================================================================== */

:root {
  --ink: #1A1814;
  --ink-2: #3d382d;
  --ink-3: #4a4437;
  --paper: #F1EDE4;
  --paper-2: #EBE6DA;
  --frame: #e4ded0;
  --rule: #d8d1c2;
  --muted: #8b8474;
  --rust: #9A4A22;
  --rust-lit: #E39A66;
  --cream: #F4F1E9;

  --mono: 'Courier Prime', 'Courier New', monospace;
  --serif: 'Crimson Pro', Georgia, serif;

  --pad: clamp(20px, 4vw, 48px);
  --max: 1200px;
  /* Width of the hero copy column. The scrim geometry is derived from this, so
     the ink and the text it protects can never drift apart. */
  --copy: 600px;
  /* Right edge of the copy column, and where the scrim's falloff resolves. */
  --copy-edge: calc(var(--pad) + var(--copy));
  --scrim-clear: min(calc(var(--copy-edge) + 40px), 94%);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  text-wrap: pretty;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2 { margin: 0; font-weight: 400; }
p { margin: 0; }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 12px 20px; background: var(--ink); color: var(--paper);
  font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.skip:focus { left: 8px; top: 8px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

/* --- section rule -------------------------------------------------------- */

.rule { display: flex; align-items: baseline; gap: 20px; margin-bottom: 44px; }
.rule__title {
  font: 700 12px/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase; color: var(--ink);
}
.rule__line { flex: 1; height: 1px; background: var(--rule); }
.rule__note {
  font: 400 12px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* --- image frames -------------------------------------------------------- */

.frame { position: relative; min-width: 0; background: var(--frame); overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame--43 { aspect-ratio: 4 / 3; }
.frame--45 { aspect-ratio: 4 / 5; }
.frame--1  { aspect-ratio: 1; }

/* Empty placeholder: caption tells the client what belongs here. Delete the
   .is-empty class (and drop in an <img>) once the real photo exists.        */
.frame.is-empty::after {
  content: attr(data-note);
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px; text-align: center;
  background: repeating-linear-gradient(135deg, #e4ded0 0 8px, #ddd6c6 8px 16px);
  font: 400 11px/1.7 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: #9b9280;
}

.caption {
  display: block; margin-top: 12px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; height: min(88vh, 840px); min-height: 560px; background: var(--frame); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }

/* Ink panel measured in px off the copy column, not in viewport percentages, so
   the ink and the text it protects can't drift apart as the window narrows.
   Tilted 100deg to match the original: the axis rotates about the hero's centre,
   which pushes the lower half of the edge rightward — and the copy sits in the
   lower half, so it gains cover rather than losing it.
   The many stops trace an ease curve; an even two-stop ramp reads as a visible
   band edge because perceived brightness doesn't track alpha linearly. */
.hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(20,18,14,.9) 0%,
    rgba(20,18,14,.89) calc(var(--copy-edge) - 240px),
    rgba(20,18,14,.86) calc(var(--copy-edge) - 190px),
    rgba(20,18,14,.81) calc(var(--copy-edge) - 145px),
    rgba(20,18,14,.73) calc(var(--copy-edge) - 105px),
    rgba(20,18,14,.62) calc(var(--copy-edge) - 70px),
    rgba(20,18,14,.49) calc(var(--copy-edge) - 40px),
    rgba(20,18,14,.35) calc(var(--copy-edge) - 15px),
    rgba(20,18,14,.21) calc(var(--copy-edge) + 5px),
    rgba(20,18,14,.1) calc(var(--copy-edge) + 22px),
    rgba(20,18,14,.03) calc(var(--copy-edge) + 34px),
    rgba(20,18,14,0) var(--scrim-clear));
}
.hero__scrim--top {
  position: absolute; top: 0; left: 0; right: 0; height: 160px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,18,14,.92), rgba(20,18,14,.5) 55%, rgba(20,18,14,0));
}

.hero__layer {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}

/* --- header -------------------------------------------------------------- */

.header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 26px var(--pad);
  pointer-events: auto;
}
.header__mark {
  font: 700 13px/1 var(--mono);
  letter-spacing: .24em; text-transform: uppercase; color: var(--paper);
  white-space: nowrap;
}
.nav {
  display: flex; gap: clamp(18px, 3vw, 32px);
  font: 400 12px/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--paper);
}
.nav a { transition: color .12s ease; }
.nav a:hover { color: var(--rust-lit); }

.nav-toggle {
  display: none; align-items: center; gap: 9px;
  margin: 0; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--paper);
  font: 700 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
}
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars i { display: block; height: 2px; background: currentColor; }

/* --- hero plate ---------------------------------------------------------- */

.plate {
  display: grid; grid-template-columns: minmax(0, var(--copy)) minmax(0, 1fr);
  width: 100%; max-width: var(--max); margin-inline: auto;
  padding: 0 var(--pad) clamp(48px, 8vw, 76px);
}
.plate__body { pointer-events: auto; }
.plate__eyebrow {
  display: block; margin-bottom: 30px;
  font: 700 15px/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--rust-lit);
}
.plate h1 {
  margin-bottom: 26px;
  font-size: clamp(26px, 3vw, 35px); line-height: 1.34; letter-spacing: -.01em;
  color: var(--cream);
}
/* Measure capped short of the column edge so the line ends inside the scrim's
   covered zone rather than in its falloff. */
.plate p {
  max-width: 26em;
  margin-bottom: 36px;
  font-size: clamp(17px, 1.7vw, 20px); line-height: 1.65; color: #ded8ca;
}
.plate__actions {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  padding-top: 26px; border-top: 1px solid rgba(241,237,228,.22);
}
.plate__actions a {
  font: 700 12px/1 var(--mono);
  letter-spacing: .18em; text-transform: uppercase; color: var(--paper);
}
.plate__actions a:first-child { border-bottom: 1px solid #D98A5A; padding-bottom: 5px; }
.plate__actions a:last-child { font-weight: 400; color: #a49d8d; }
.plate__actions a:hover { color: var(--rust-lit); }

/* --- work ---------------------------------------------------------------- */

.section { padding-block: clamp(48px, 7vw, 64px) clamp(56px, 9vw, 84px); }

.work__grid {
  display: grid; grid-template-columns: 1.35fr minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px); align-items: start;
}
.work__meta {
  display: block; margin-bottom: 16px;
  font: 400 12px/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase; color: var(--rust);
}
.work__body h2 { margin-bottom: 8px; font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; }
.work__studio {
  display: block; margin-bottom: 24px;
  font: 400 12px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.work__body p { font-size: 20px; line-height: 1.65; color: var(--ink-3); }
.work__body p + p { margin-top: 20px; }

.thumbs {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 24px); margin-top: 48px;
}

/* --- scope --------------------------------------------------------------- */

.scope { border-top: 1px solid var(--rule); background: var(--paper-2); }
.scope__grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.scope p {
  margin-bottom: 26px;
  font-size: clamp(20px, 2.3vw, 26px); line-height: 1.55; color: var(--ink-2);
}
.scope p:last-of-type { margin-bottom: 34px; }
.scope__email {
  display: inline-block;
  font: 400 clamp(18px, 2vw, 24px)/1.2 var(--mono); letter-spacing: .02em;
  border-bottom: 1px solid var(--rust); padding-bottom: 9px;
  transition: color .12s ease;
}
.scope__email:hover { color: var(--rust); }
.scope__meta {
  display: flex; flex-wrap: wrap; gap: 26px; margin-top: 34px;
  font: 400 12px/1 var(--mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.scope__meta a:hover { color: var(--rust); }

/* --- footer -------------------------------------------------------------- */

.footer {
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  padding: 26px var(--pad); background: var(--ink); color: #8a8172;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: .18em; text-transform: uppercase;
}
.footer strong { font-weight: 400; color: var(--paper); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .work__grid { grid-template-columns: 1fr; }
  .scope__grid { grid-template-columns: 1fr; }
  .scope__figure { max-width: 420px; }
  .plate { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .nav-toggle { display: flex; }
  .nav {
    position: absolute; top: 100%; right: var(--pad);
    flex-direction: column; gap: 0;
    min-width: 190px; background: rgba(20,18,14,.96);
    /* No border while collapsed — a border on a max-height:0 box still paints,
       which is what was drawing a stray line under the header. */
    border: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .24s ease;
  }
  .nav.is-open { max-height: 240px; border: 1px solid rgba(241,237,228,.18); }
  .nav a { padding: 16px 20px; border-bottom: 1px solid rgba(241,237,228,.12); }
  .nav a:last-child { border-bottom: 0; }
  .hero { height: auto; min-height: 0; }
  .hero__media { position: relative; height: 58vh; }
  .hero__layer { position: static; }
  .hero__scrim { display: none; }
  /* Header stays pinned over the top of the photograph, with the top scrim
     behind it for contrast. */
  .hero__scrim--top { height: 150px; z-index: 1; background: linear-gradient(to bottom, rgba(20,18,14,.95), rgba(20,18,14,.6) 55%, rgba(20,18,14,0)); }
  .header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; pointer-events: auto; }
  /* Off the photo, the plate sits on ink so the copy keeps its contrast. */
  .plate { background: var(--ink); padding-top: 40px; }
  .thumbs { grid-template-columns: 1fr 1fr; }
  .thumbs .frame:last-child { grid-column: span 2; aspect-ratio: 16 / 9; }
}

@media (max-width: 440px) {
  .thumbs { grid-template-columns: 1fr; }
  .thumbs .frame:last-child { grid-column: auto; aspect-ratio: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
}

@media print {
  .nav, .nav-toggle, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .hero__scrim, .hero__scrim--top { display: none; }
  .plate h1, .plate p, .plate__actions a { color: #000 !important; }
}