/* ============================================================================
   INTERIOR PAGES
   ========================================================================= */

.phead{ background:var(--ink) }
.phead .display,.phead h1{ margin:0 }
.phead__in{ display:grid; gap:var(--g4); max-width:none }
.phead__in h1{ max-width:13em }
.phead__in .lead{ max-width:54ch }

/* ══ FILTER STRIP ══ single-line scroll on mobile ══════════ */
.filters{
  display:flex; gap:var(--g2); overflow-x:auto; scrollbar-width:none;
  padding-block:.25rem; margin-bottom:var(--g6);
  -webkit-overflow-scrolling:touch;
}
.filters::-webkit-scrollbar{ display:none }
.chip{
  flex:none; min-height:44px; display:inline-flex; align-items:center;
  padding:.6rem 1.1rem; border:0; border-radius:var(--radius); cursor:pointer;
  background:transparent; color:var(--on-ink-muted);
  box-shadow:inset 0 0 0 1px rgba(242,239,231,.2);
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--tr-micro);
  text-transform:uppercase; white-space:nowrap;
  transition:color .24s var(--ease), background-color .24s var(--ease), box-shadow .24s var(--ease);
}
.chip:hover{ color:var(--on-ink) }
.chip[aria-pressed="true"]{ background:var(--accent); color:#fff; box-shadow:none }

/* ══ PORTFOLIO GRID ═══════════════════════════════════════ */
.pgrid{ display:grid; gap:var(--g3) }
.pgrid .tile img{ aspect-ratio:4/5 }
.pgrid .tile[data-tall] img{ aspect-ratio:3/4 }
@media (min-width:640px){ .pgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .pgrid{ grid-template-columns:repeat(3,1fr); gap:var(--g4) } }
.pcount{ display:flex; align-items:baseline; gap:var(--g2); margin-bottom:var(--g4) }

/* ══ THE RECORD, as a CV ══════════════════════════════════ */
.cv{ display:grid; gap:var(--g6) }
.cv__row{ display:grid; gap:var(--g1) var(--g5); align-items:baseline }
.cv__yr{ font-family:var(--mono); font-size:var(--fs-small); color:var(--accent);
  font-variant-numeric:tabular-nums }
.paper .cv__yr{ color:var(--accent-ink) }
.cv__t{ font-family:var(--display); font-weight:700; font-size:clamp(1.15rem,2vw,1.5rem);
  letter-spacing:-.02em; line-height:1.2; font-variation-settings:"opsz" 32 }
.cv__m{ font-size:var(--fs-small); color:var(--on-ink-muted) }
.paper .cv__m{ color:var(--on-paper-muted) }
@media (min-width:720px){
  .cv__row{ grid-template-columns:7rem minmax(0,1fr) auto; gap:var(--g5) }
  .cv__m{ text-align:right }
}

/* ══ DOCUMENTARY STRIP ════════════════════════════════════ */
.docs{ display:grid; gap:var(--g3) }
.docs figure{ margin:0; display:grid; gap:var(--g2) }
.docs img{ width:100%; aspect-ratio:3/2; object-fit:cover; box-shadow:inset 0 0 0 1px var(--ink-3) }
.docs figcaption{ font-family:var(--mono); font-size:var(--fs-micro);
  letter-spacing:var(--tr-micro); text-transform:uppercase; color:var(--on-ink-muted) }
@media (min-width:640px){ .docs{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .docs{ grid-template-columns:repeat(4,1fr) } }

/* ══ SPEC / PRICE LIST ════════════════════════════════════ */
.spec{ display:grid; gap:var(--g5) }
.spec__row{ display:grid; gap:var(--g1) var(--g4); align-items:baseline }
.spec__k{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.02em;
  font-variation-settings:"opsz" 24 }
.spec__v{ font-family:var(--mono); font-size:var(--fs-small); color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap }
.paper .spec__v{ color:var(--accent-ink) }
.spec__n{ font-size:var(--fs-small); color:var(--on-ink-muted) }
.paper .spec__n{ color:var(--on-paper-muted) }
@media (min-width:720px){
  .spec__row{ grid-template-columns:minmax(0,14rem) minmax(0,1fr) auto; gap:var(--g5) }
  .spec__v{ text-align:right }
}
/* two-column variant, for the narrow sidebar where a 3-column row would
   force "$2,000 to $2,500" onto two lines */
.spec--pair .spec__row{ grid-template-columns:minmax(0,1fr) auto; gap:var(--g4) }
.spec--pair .spec__v{ text-align:right }

/* ══ CARD GRID (master class modules) ═════════════════════ */
.mods{ display:grid; gap:var(--g5) }
.mods li{ display:grid; gap:var(--g2); padding:var(--g5);
  background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--ink-3) }
.paper .mods li{ background:var(--paper-2); box-shadow:inset 0 0 0 1px rgba(23,20,15,.14) }
.mods .micro{ color:var(--accent) }
.paper .mods .micro{ color:var(--accent-ink) }
.mods p{ font-size:var(--fs-small); color:var(--on-ink-muted); max-width:40ch }
.paper .mods p{ color:var(--on-paper-muted) }
@media (min-width:700px){ .mods{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .mods{ grid-template-columns:repeat(3,1fr) } }

/* ══ FORM ═════════════════════════════════════════════════ */
.form{ display:grid; gap:var(--g5) }
.fgrid{ display:grid; gap:var(--g4) }
@media (min-width:640px){ .fgrid--2{ grid-template-columns:repeat(2,1fr) } }
.field{ display:grid; gap:.5rem }
.field > label,.fset > legend{
  font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:var(--tr-micro);
  text-transform:uppercase; color:var(--on-ink-muted); padding:0;
}
.paper .field > label,.paper .fset > legend{ color:var(--on-paper-muted) }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:.85rem 1rem; border:0; border-radius:var(--radius);
  background:var(--ink-2); color:var(--on-ink);
  box-shadow:inset 0 0 0 1px rgba(242,239,231,.22);
  transition:box-shadow .2s var(--ease);
}
.field textarea{ min-height:140px; resize:vertical; line-height:1.55 }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0; box-shadow:inset 0 0 0 2px var(--accent) }
.field input::placeholder,.field textarea::placeholder{ color:#77716A }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23ADA69B' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.75rem }
.hint{ font-size:var(--fs-micro); color:var(--on-ink-muted) }
.hint a{ display:inline-flex; align-items:center; min-height:44px }

.fset{ border:0; margin:0; padding:0; display:grid; gap:var(--g3) }
.opts{ display:flex; flex-wrap:wrap; gap:var(--g2) }
.opt{ position:relative }
.opt input{ position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.opt span{ display:flex; align-items:center; min-height:44px; padding:.6rem 1.05rem;
  border-radius:var(--radius); box-shadow:inset 0 0 0 1px rgba(242,239,231,.22);
  font-size:var(--fs-small); color:var(--on-ink-muted);
  transition:color .2s var(--ease), background-color .2s var(--ease), box-shadow .2s var(--ease) }
.opt input:checked + span{ background:var(--accent); color:#fff; box-shadow:none }
.opt input:focus-visible + span{ outline:2px solid var(--accent-lift); outline-offset:2px }

.drop{ display:grid; gap:var(--g2) }
.drop input[type=file]{ min-height:auto; padding:.9rem 1rem; font-size:var(--fs-small) }
.drop input[type=file]::file-selector-button{
  border:0; border-radius:var(--radius); margin-right:.85rem; padding:.55rem 1rem;
  background:var(--accent); color:#fff; font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.02em; text-transform:uppercase; cursor:pointer }
.preview{ display:flex; flex-wrap:wrap; gap:var(--g2) }
.preview img{ width:76px; height:76px; object-fit:cover; box-shadow:inset 0 0 0 1px var(--ink-3) }

.fstatus{ padding:var(--g4); font-size:var(--fs-small); line-height:1.55 }
.fstatus.is-ok{ background:rgba(217,67,47,.12); box-shadow:inset 0 0 0 1px var(--accent); color:var(--on-ink) }
.fstatus.is-bad{ background:rgba(242,239,231,.06); box-shadow:inset 0 0 0 1px rgba(242,239,231,.3) }
.fstatus a{ color:var(--accent) }
.btn.is-busy{ opacity:.75; cursor:progress }

@media (min-width:1040px){
  .book__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
    gap:clamp(3rem,6vw,6rem); align-items:start }
  .book__aside{ position:sticky; top:var(--g8) }
}
.book__aside{ display:grid; gap:var(--g5); padding:var(--g5);
  background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--ink-3) }
.book__aside h3{ font-size:1.15rem }
.book__aside p{ font-size:var(--fs-small); color:var(--on-ink-muted); max-width:36ch }

/* ══ MAP / STUDIO ═════════════════════════════════════════ */
.mapwrap{ position:relative; background:var(--ink-2); box-shadow:inset 0 0 0 1px var(--ink-3) }
.mapwrap iframe{ display:block; width:100%; height:clamp(300px,45vw,480px); border:0; filter:grayscale(.35) contrast(1.05) }

/* ══ SOCIAL STRIP ══ curated, self hosted, cannot go blank ═ */
.social{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--g2) }
.social a{ display:block; overflow:clip; box-shadow:inset 0 0 0 1px var(--ink-3) }
.social img{ width:100%; aspect-ratio:1; object-fit:cover;
  transition:transform .6s var(--ease) }
.social a:hover img{ transform:scale(1.05) }
@media (hover:none){ .social a:hover img{ transform:none } }
@media (min-width:640px){ .social{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:1040px){ .social{ grid-template-columns:repeat(6,1fr) } }

/* judging rows carry no third column, so the grid must not reserve one */
@media (min-width:720px){
  .cv__row--pair{ grid-template-columns:7rem minmax(0,1fr) }
}