/* ============================================================
   YAFA — SITE
   An asymmetric catalogue grid with a permanently reserved
   left column. Margin is the material.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--t-ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.62;
  font-weight: 380;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 420ms linear, color 420ms linear;
}

::selection { background: rgba(140,111,63,.22); }

img, svg, video, picture { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }

hr { border: 0; border-top: var(--hair); margin: 0; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- TYPE VOICES ------------------------------------- */

.mono {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-quiet);
  font-weight: 400;
  line-height: 1.7;
}
.mono--plain { text-transform: none; letter-spacing: .02em; }

.statement {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 4.4vw, 58px);
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--t-ink);
}
.statement em { font-style: italic; }

.title-l {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 5.6vw, 76px);
  line-height: 1.02;
  letter-spacing: -.018em;
}

.title-m {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(25px, 2.9vw, 38px);
  line-height: 1.12;
  letter-spacing: -.012em;
}

.lede {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.66;
  color: var(--t-ink);
  max-width: 46ch;
  font-weight: 380;
}

.body-copy { max-width: 62ch; }
.body-copy p + p { margin-top: 1.05em; }
.body-copy a { border-bottom: 1px solid rgba(110,87,48,.42); color: var(--t-brass); }
.body-copy a:hover { border-bottom-color: var(--brass); }

.quiet { color: var(--t-quiet); }
.faint { color: var(--t-faint); }

/* ---------- SHELL ------------------------------------------- */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The catalogue grid. Left sixth reserved, permanently. */
.grid {
  display: grid;
  grid-template-columns: var(--col-reserved) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
}
.grid > .col-reserved { grid-column: 1; }
.grid > .col-measure  { grid-column: 2; min-width: 0; }

/* ---------- NAVIGATION -------------------------------------
   A vertical stack in the reserved column. No bar across the
   top, no hamburger, no logo lockup competing with the work. */

.chrome {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: calc(var(--col-reserved) + var(--gutter));
  padding: 34px var(--s-2) 30px var(--gutter);
  display: flex;
  flex-direction: column;
  z-index: 60;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.wordmark {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .30em;   /* the one permitted letterspaced cap */
  text-transform: uppercase;
  color: var(--t-brass);
  display: block;
  margin-bottom: 30px;
}

.nav { display: flex; flex-direction: column; gap: 5px; }
.nav a {
  position: relative;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t-ink);
  opacity: .55;
  transition: opacity var(--hover);
  padding-left: 22px;
}
.nav a:hover { opacity: 1; }
.nav a[aria-current="page"] { opacity: 1; }
.nav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0; top: .72em;
  width: 12px; height: 1px;
  background: var(--brass);
}

/* Breadcrumb doubles as the position readout and never moves. */
.breadcrumb { margin-top: 20px; }

.chrome-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }

.rete-return {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t-quiet);
  transition: color var(--hover);
}
.rete-return:hover { color: var(--t-brass); }

/* Content sits clear of the fixed chrome on desktop */
.shell { padding-left: calc(var(--col-reserved) + var(--gutter)); }
.shell > .page,
.shell > section > .page { padding-left: var(--col-gap); }

/* ---------- FOOTER ------------------------------------------ */

.colophon {
  margin-top: var(--s-7);
  padding: var(--s-4) 0 var(--s-5);
  border-top: var(--hair);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
}
.colophon a { color: var(--t-brass); transition: color var(--hover); }
.colophon a:hover { color: var(--brass); }
.colophon .seal {
  margin-left: auto;
  font-family: var(--arabic);
  font-size: 26px;
  letter-spacing: .1em;
  color: var(--t-brass);
  opacity: .8;
  line-height: 1;
}

/* ---------- THE PLATE ---------------------------------------
   A closed ratio set, enforced at the component. Where a plate
   has not been exposed yet it renders as a catalogue blank —
   numbered, dated, and legible as a decision rather than a gap. */

.plate { position: relative; display: block; }
.plate__frame {
  position: relative;
  overflow: hidden;
  background: var(--candoglia);
  border: var(--hair-soft);
}
.room-stone .plate__frame { background: #211E1A; }

.r-4x5   { aspect-ratio: 4 / 5; }
.r-1x1   { aspect-ratio: 1 / 1; }
.r-5x7   { aspect-ratio: 5 / 7; }
.r-2x1   { aspect-ratio: 2 / 1; }
.r-cine  { aspect-ratio: 2.39 / 1; }

.plate__frame > picture { position: absolute; inset: 0; }

.plate__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* the grade: hold the grey, refuse the golden hour */
  filter: saturate(.42) contrast(1.03) brightness(.98);
  transition: filter 320ms linear, opacity var(--rise);
}
.plate:hover .plate__frame img { filter: saturate(.72) contrast(1.04); }

/* ---------- LQIP --------------------------------------------
   A 20px blur, held behind the plate until the photograph
   decodes. It is armed from JS rather than written into the
   markup, so if the reveal never runs the photograph is visible
   anyway — a blank plate is a decision here, an invisible one
   would be a fault.
   ------------------------------------------------------------ */

.plate__frame.has-lqip::before {
  content: "";
  position: absolute; inset: -5%;
  background-image: var(--lqip);
  background-size: cover;
  background-position: center;
  filter: blur(14px) saturate(.42);
  transition: opacity 420ms linear;
  z-index: 0;
}
.plate__frame.has-lqip img { opacity: 0; transition: opacity 420ms linear; }
.plate__frame.has-lqip.is-loaded img { opacity: 1; }
.plate__frame.has-lqip.is-loaded::before { opacity: 0; }

/* the catalogue blank */
.plate__blank {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(14px, 1.6vw, 22px);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 13px,
      rgba(14,14,13,.028) 13px 14px
    ),
    var(--candoglia);
}
.room-stone .plate__blank {
  background:
    repeating-linear-gradient(-45deg, transparent 0 13px, rgba(226,216,196,.04) 13px 14px),
    #211E1A;
}
.plate__blank::after {
  content: "";
  position: absolute; inset: 0;
  border: var(--hair-soft);
  pointer-events: none;
}
.plate__blank .bk-top,
.plate__blank .bk-bot { display: flex; justify-content: space-between; gap: 12px; }
.plate__blank .bk-mid {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--t-faint);
  align-self: center; text-align: center;
}

.plate__cap {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .03em;
  color: var(--t-quiet);
  display: flex; gap: 14px; flex-wrap: wrap;
}
.plate__cap .n { color: var(--t-brass); }

/* rise: images enter at 8px offset, once, never on re-scroll */
[data-rise] { opacity: 0; transform: translateY(8px); }
[data-rise].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--rise), transform var(--rise);
}

/* ---------- SCHEDA ------------------------------------------
   Four lines plus process, monospaced, in the reserved margin.
   It proves the method without ever claiming it. */

.scheda { font-family: var(--mono); font-size: 10.5px; line-height: 1.95; }
.scheda dt {
  color: var(--t-faint);
  letter-spacing: .12em; text-transform: uppercase;
  font-size: 9.5px;
}
.scheda dd { margin: 0 0 9px; color: var(--t-ink); letter-spacing: .01em; }
.scheda dd:last-child { margin-bottom: 0; }

/* ---------- SECTION HEADS ----------------------------------- */

.movement { margin-top: var(--s-6); }
.movement:first-child { margin-top: 0; }

.mv-head {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding-bottom: 10px;
  border-bottom: var(--hair);
  margin-bottom: var(--s-4);
}
.mv-head h2 {
  font-family: var(--ui);
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
}
.mv-head .mv-n { font-family: var(--mono); font-size: 10.5px; color: var(--t-brass); }
.mv-head .mv-note { margin-left: auto; }

/* ---------- WORK REGISTER -----------------------------------
   A ruled register, not a gallery. The plate is the same size
   for every project, which removes ranking by thumbnail. */

.register { border-top: var(--rule); }

.entry {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) clamp(150px, 20vw, 268px);
  gap: var(--s-3) var(--col-gap);
  padding: var(--s-4) 0;
  border-bottom: var(--hair);
  align-items: start;
  transition: background var(--hover);
}
.entry:hover { background: rgba(140,111,63,.035); }
.entry__n { font-family: var(--mono); font-size: 10.5px; color: var(--t-brass); }
.entry__n span { display: block; color: var(--t-faint); margin-top: 3px; }
.entry__title { font-family: var(--serif); font-weight: 300; font-size: clamp(26px,2.6vw,36px); line-height: 1.06; letter-spacing: -.012em; }
.entry__thesis { margin-top: 12px; font-size: 14px; max-width: 48ch; color: var(--t-ink); }
.entry__meta { margin-top: 16px; }
.entry__plate .plate__frame { border: var(--hair-soft); }
.entry__plate img { filter: saturate(0) contrast(1.02) brightness(1.01); }
.entry:hover .entry__plate img { filter: saturate(.6) contrast(1.04); }

.entry[hidden] { display: none; }

/* filters — the medium lens, not a genre silo */
.lens { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: var(--s-3); }
.lens button {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--t-faint);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color var(--hover), border-color var(--hover);
}
.lens button:hover { color: var(--t-ink); }
.lens button[aria-pressed="true"] { color: var(--t-brass); border-bottom-color: var(--brass); }

/* ---------- CONFRONTO ---------------------------------------
   One frame, two moments, a line of light crossing it.
   The camera does not move. Nothing here autoplays. */

.confronto { position: relative; user-select: none; touch-action: pan-y; }
.confronto__stage {
  position: relative; overflow: hidden;
  background: var(--stone);
  aspect-ratio: 2 / 1;
  cursor: ew-resize;
}
.confronto__layer { position: absolute; inset: 0; }
.confronto__layer > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.confronto__layer img { width: 100%; height: 100%; object-fit: cover; }
.confronto__layer--after { clip-path: inset(0 0 0 var(--wipe, 50%)); }

.confronto__line {
  position: absolute; top: 0; bottom: 0;
  left: var(--wipe, 50%);
  width: 1px;
  background: linear-gradient(to bottom,
     rgba(255,230,189,.15), rgba(255,230,189,.92) 42%, rgba(255,230,189,.15));
  box-shadow: 0 0 22px 4px rgba(255,230,189,.22);
  pointer-events: none;
}
.confronto__cap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 12px;
  font-family: var(--mono); font-size: 10.5px; color: var(--t-quiet);
}
.confronto__cap span:last-child { text-align: right; }
.confronto__hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(230,223,209,.5);
  pointer-events: none; transition: opacity 300ms linear;
}
.confronto.is-touched .confronto__hint { opacity: 0; }

/* scale bars — a real dimension is what makes a claim scholarly */
.scalebar { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 9.5px; color: var(--t-faint); }
.scalebar i { display: block; height: 1px; width: 46px; background: currentColor; opacity: .7; }

/* ---------- ATLAS ------------------------------------------- */

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: var(--s-4) var(--col-gap);
}
.atlas-plate { transition: opacity 320ms linear; }
.atlas-plate[hidden] { display: none; }

.atlas-bar {
  display: flex; flex-wrap: wrap; gap: 10px 34px;
  padding: 14px 0; border-top: var(--hair); border-bottom: var(--hair);
  margin-bottom: var(--s-4);
  position: sticky; top: 0; z-index: 30;
  background: var(--paper);
}
.atlas-bar__group { display: flex; flex-wrap: wrap; gap: 3px 15px; align-items: baseline; }
.atlas-bar__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--t-faint); }
.atlas-bar button {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  color: var(--t-quiet); border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color var(--hover), border-color var(--hover);
}
.atlas-bar button:hover { color: var(--t-ink); }
.atlas-bar button[aria-pressed="true"] { color: var(--t-brass); border-bottom-color: var(--brass); }
.atlas-count { margin-left: auto; }

/* ---------- NOTES ------------------------------------------- */

.note-entry { display: block; padding: var(--s-4) 0; border-bottom: var(--hair); transition: background var(--hover); }
.note-entry:first-of-type { border-top: var(--rule); }
.note-entry:hover { background: rgba(140,111,63,.035); }
.note-entry h3 { font-family: var(--serif); font-weight: 300; font-size: clamp(24px,2.4vw,33px); line-height: 1.1; letter-spacing: -.01em; }
.note-entry p { margin-top: 10px; max-width: 56ch; font-size: 14px; }

.essay { max-width: 64ch; font-size: 16px; line-height: 1.72; }
.essay p { margin-bottom: 1.15em; }
.essay p:first-of-type::first-line { letter-spacing: .015em; }
.essay h3 { font-family: var(--ui); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; margin: 2.2em 0 .9em; }
.essay blockquote {
  font-family: var(--serif); font-size: 24px; line-height: 1.32; font-weight: 300;
  padding-left: var(--s-3); border-left: 1px solid var(--brass);
  margin: 1.6em 0; color: var(--t-ink);
}
.essay .fn { font-family: var(--mono); font-size: 10.5px; line-height: 1.8; color: var(--t-quiet); border-top: var(--hair); padding-top: 14px; margin-top: 2.4em; }

/* ---------- STUDIO ------------------------------------------ */

.cap-list { list-style: none; padding: 0; margin: 0; }
.cap-list li {
  display: flex; gap: var(--s-2); justify-content: space-between;
  padding: 11px 0; border-bottom: var(--hair-soft);
  font-size: 14px;
}
.cap-list li span:last-child { font-family: var(--mono); font-size: 10.5px; color: var(--t-faint); text-transform: uppercase; letter-spacing: .1em; text-align: right; }

.swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px,1fr)); gap: 2px; }
.swatch { padding: 0; }
.swatch i { display: block; height: 78px; border: var(--hair-soft); }
.swatch b { display: block; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; margin-top: 8px; color: var(--t-ink); }
.swatch em { display: block; font-family: var(--mono); font-size: 9.5px; font-style: normal; color: var(--t-faint); }

.contact-line { font-family: var(--serif); font-weight: 300; font-size: clamp(22px,2.6vw,34px); line-height: 1.3; }
.contact-line a { border-bottom: 1px solid rgba(110,87,48,.4); }
.contact-line a:hover { border-bottom-color: var(--brass); }

/* ---------- HOME -------------------------------------------- */

.opening { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: var(--s-6) 0 var(--s-5); }

.doors { border-top: var(--rule); }
.door {
  display: grid; grid-template-columns: 62px minmax(0,1fr) auto;
  gap: var(--s-3); align-items: baseline;
  padding: 22px 0; border-bottom: var(--hair);
  transition: background var(--hover);
}
.door:hover { background: rgba(140,111,63,.04); }
.door__n { font-family: var(--mono); font-size: 10.5px; color: var(--t-brass); }
.door__name { font-family: var(--serif); font-weight: 300; font-size: clamp(24px,2.5vw,34px); line-height: 1; letter-spacing: -.01em; }
.door__desc { font-size: 13.5px; color: var(--t-quiet); max-width: 40ch; }

/* ---------- UTILITIES --------------------------------------- */

.stack-1 > * + * { margin-top: var(--s-1); }
.stack-2 > * + * { margin-top: var(--s-2); }
.stack-3 > * + * { margin-top: var(--s-3); }
.stack-4 > * + * { margin-top: var(--s-4); }
.stack-5 > * + * { margin-top: var(--s-5); }
.stack-6 > * + * { margin-top: var(--s-6); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--col-gap); }
.sticky { position: sticky; top: 34px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper); padding: 10px 16px;
  font-family: var(--mono); font-size: 11px; z-index: 200;
}
.skip:focus { left: var(--gutter); top: 12px; }

:focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; }

/* ============================================================
   MOBILE — the verdict is rendered here.
   The reserved column collapses to a caption line above each
   plate; navigation becomes a row fixed to the bottom edge.
   ============================================================ */

@media (max-width: 900px) {
  body { font-size: 15px; }

  .shell { padding-left: 0; padding-bottom: 74px; }
  .shell > .page { padding-left: var(--gutter); }

  .chrome {
    position: fixed; inset: auto 0 0 0;
    width: 100%; height: auto;
    flex-direction: row; align-items: center;
    gap: 0;
    padding: 0 var(--gutter);
    background: var(--paper);
    border-top: var(--hair);
    box-shadow: 0 -12px 30px -22px rgba(14,14,13,.5);
  }
  .wordmark { margin: 0; font-size: 11px; letter-spacing: .22em; padding: 18px 0; }
  .nav { flex-direction: row; gap: 0; margin-left: auto; }
  .nav a { padding: 18px 0 18px 15px; font-size: 10px; letter-spacing: .13em; }
  .nav a[aria-current="page"]::before { top: auto; bottom: 12px; left: 15px; width: 10px; }
  .breadcrumb, .chrome-foot { display: none; }

  .grid { grid-template-columns: minmax(0,1fr); row-gap: var(--s-2); }
  .grid > .col-reserved, .grid > .col-measure { grid-column: 1; }
  .sticky { position: static; }

  .entry { grid-template-columns: minmax(0,1fr); gap: var(--s-2); }
  .entry__plate { order: -1; max-width: 260px; }
  .entry__title { font-size: 28px; }

  .pair { grid-template-columns: 1fr; }
  .door { grid-template-columns: 44px minmax(0,1fr); }
  .door__desc { grid-column: 2; }

  .confronto__stage { aspect-ratio: 4 / 5; cursor: ns-resize; }
  .confronto__layer--after { clip-path: inset(var(--wipe, 50%) 0 0 0); }
  .confronto__line { left: 0; right: 0; top: var(--wipe, 50%); bottom: auto; width: auto; height: 1px;
    background: linear-gradient(to right, rgba(255,230,189,.15), rgba(255,230,189,.92) 42%, rgba(255,230,189,.15)); }
  .confronto__cap { grid-template-columns: 1fr; gap: 4px; }
  .confronto__cap span:last-child { text-align: left; }

  .atlas-grid { grid-template-columns: repeat(auto-fill, minmax(140px,1fr)); }
  .atlas-bar { position: static; }

  .colophon { flex-direction: column; gap: var(--s-2); }
  .colophon .seal { margin-left: 0; }
}

@media (max-width: 560px) {
  .atlas-grid { grid-template-columns: 1fr 1fr; }
  .nav a { font-size: 9.5px; letter-spacing: .1em; padding-left: 11px; }
  .nav a[aria-current="page"]::before { left: 11px; width: 8px; }
}

/* Reduced motion: camera moves become cuts, the light stops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  [data-rise] { opacity: 1; transform: none; }
}

/* Print — the folio is the leave-behind, so let it print cleanly. */
@media print {
  .chrome, .lens, .atlas-bar, .confronto__hint { display: none !important; }
  .shell { padding: 0; }
  body { background: #fff; color: #000; }
}

/* ---- STRATA — collapsed by default, never auto-expanded ---- */

.strata { border-top: var(--hair); border-bottom: var(--hair); }
.strata > summary {
  list-style: none; cursor: pointer;
  padding: 15px 0;
  display: flex; align-items: center; gap: 12px;
  color: var(--t-quiet);
  transition: color var(--hover);
}
.strata > summary::-webkit-details-marker { display: none; }
.strata > summary::before {
  content: "+"; font-family: var(--mono); font-size: 13px; color: var(--brass);
  line-height: 1;
}
.strata[open] > summary::before { content: "–"; }
.strata > summary:hover { color: var(--t-ink); }
.strata__body { padding: 0 0 var(--s-4); }

/* ---- PROJECT / NOTE FOOT ----------------------------------- */

.proj-nav {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: var(--hair);
  display: flex; justify-content: space-between; gap: var(--s-3);
}
.proj-nav a { color: var(--t-quiet); transition: color var(--hover); }
.proj-nav a:hover { color: var(--t-brass); }

/* ---- HEADS on interior pages -------------------------------- */

.page-head { padding: var(--s-6) 0 var(--s-5); }
.page-head h1 { font-family: var(--serif); font-weight: 300;
  font-size: clamp(34px,5vw,68px); line-height: 1; letter-spacing: -.018em; }
.page-head .lede { margin-top: var(--s-3); }