/* ============================================================
   ANTARCTIC SAPIENS — THE HOUSE STYLESHEET
   The shared system for every room of the site.

   The home page (index.html) keeps its own inline stylesheet
   because it carries the camera rig — six nested transforms and
   a photograph that has to stay pinned to the middle of the
   screen. Nothing else on the site needs any of that, and
   loading it everywhere would mean every room paying for the
   descent it does not perform.

   What lives here is the part that IS shared: the tokens, the
   chrome, and the catalogue primitives. If a value exists in
   both files it exists in both on purpose — the home is frozen
   art direction, this is the system that has to keep growing.

   ── THE FRAMING LAW ─────────────────────────────────────────
   The blueprint's real instruction is not "put an eye on the
   home page". It is that the circular vignette becomes the
   house's framing device everywhere: covers cropped through
   the iris, portraits inside thin rings, section markers as
   small circles. That law is implemented here, once, in .iris
   and .pfield — so a room built next year inherits it for free.
   ============================================================ */

@font-face{
  font-family:'Tobias';
  src:url('../fonts/tobias-vf.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Tobias';
  src:url('../fonts/tobias-italic.woff2') format('woff2');
  font-weight:400; font-style:italic; font-display:swap;
}
/* Geist Sans and Geist Mono are not in fonts/ yet. They are open
   source; drop the woff2 files in, add two @font-face blocks
   here, and delete the system stacks from --mono/--sans. */

:root{
  --ink:#0F0F0C; --ink-deep:#08080A;
  --bone:#EDE6D8;
  --bone-dim:rgba(237,230,216,.74);
  --bone-faint:rgba(237,230,216,.62);
  --hair:rgba(237,230,216,.14);
  --hair-soft:rgba(237,230,216,.08);
  --red:#D8432C; --red-link:#E4573F; --red-deep:#A82A1B;
  --blue:#6E93AD;

  --tobias:'Tobias',Georgia,'Times New Roman',serif;
  --mono:'Geist Mono','SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Geist Sans',-apple-system,BlinkMacSystemFont,'Inter',system-ui,'Segoe UI',sans-serif;

  --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --gap:clamp(72px,9vw,132px);
  --pad:clamp(20px,4.6vw,56px);
  --hdr:62px;

  /* the room's own zone of the eye — overridden per page */
  --eye-z:2.4; --eye-x:38%; --eye-y:34%; --eye-op:.15;

  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--ink); scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body{
  margin:0; overflow-x:clip;
  background:var(--ink); color:var(--bone);
  font-family:var(--sans); font-size:1.125rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; }
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{ margin:0; }
ol,ul{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--red); color:var(--bone); }
:focus-visible{ outline:2px solid var(--red-link); outline-offset:3px; border-radius:2px; }

/* ============================================================
   UTILITIES
   ============================================================ */
.wrap{ width:min(1200px,100% - (var(--pad) * 2)); margin-inline:auto; }
.wrap--narrow{ width:min(760px,100% - (var(--pad) * 2)); }
.wrap--mid{ width:min(980px,100% - (var(--pad) * 2)); }

/* The catalogue layer. Never below .8rem, and only ever at .8rem
   for true one- or two-word labels — everything that carries real
   information (dates, shelf marks, source counts, the whole filter
   column) sits at .9rem and up, because a monospaced 12.8px on a
   phone is not a reading size, it is a decoration. */
.m{ font-family:var(--mono); font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; line-height:1.5; }
.m--label{ font-size:.8rem; letter-spacing:.1em; }
.m--big{ font-size:1rem; letter-spacing:.04em; }
.lede{ font-size:clamp(1.125rem,1.6vw,1.3rem); line-height:1.62; max-width:64ch; color:rgba(237,230,216,.94); }
.dim{ color:var(--bone-faint); }
.blue{ color:var(--blue); }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skiplink{
  position:fixed; top:8px; left:8px; z-index:120; transform:translateY(-200%);
  background:var(--bone); color:var(--ink); padding:10px 16px;
  font-family:var(--mono); font-size:.8rem; letter-spacing:.03em; text-transform:uppercase;
}
.skiplink:focus{ transform:none; }

/* ============================================================
   THE FIELD — every room sits inside its own zone of the eye
   ------------------------------------------------------------
   One fixed layer, one photograph, a different magnification and
   a different centre per room. The Library sits in the stroma,
   the Studio in the crypts, Editions in the folds, the Dispatch
   on the collarette, the Colophon in the pupil — the same map
   the home page flies through, held still.

   It costs one already-cached image and no JavaScript. The scrim
   over it is flat rather than radial for the reason the home
   found out the hard way: a vignette is strongest in the middle
   and gone by the time it reaches the columns of text, which is
   exactly where the bright filaments are.
   ============================================================ */
.pfield{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--ink); overflow:hidden; }
.pfield__eye{
  position:absolute; inset:0;
  background-image:url('../img/eye.jpg');
  background-repeat:no-repeat;
  background-position:var(--eye-x) var(--eye-y);
  background-size:calc(100% * var(--eye-z)) auto;
  opacity:var(--eye-op);
}
.pfield__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,8,10,.86) 0%, rgba(8,8,10,.34) 34%, rgba(8,8,10,.34) 66%, rgba(8,8,10,.86) 100%),
    rgba(8,8,10,.28);
}
.grain{ position:fixed; inset:0; width:100%; height:100%; z-index:70; pointer-events:none; opacity:.13; mix-blend-mode:overlay; }
.shell{ position:relative; z-index:2; }
.shell :where(p,h1,h2,h3,h4,dt,dd,span,a,li,label,b,em,strong,td,th){ text-shadow:0 1px 3px rgba(4,5,8,.6); }
.band :where(p,h1,h2,h3,h4,dt,dd,span,a,li,label,b,em,strong,td,th),.band{ text-shadow:none; }
/* Igual que la banda: lo que trae su propio fondo claro no
   necesita que lo protejan de la fotografía que tiene detrás. */
.btn--pri,.btn--pri :where(span,b,em,strong),
.skiplink,.Btn__count{ text-shadow:none; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding-inline:var(--pad);
  background:linear-gradient(180deg, rgba(10,10,9,.92) 0%, rgba(10,10,9,.6) 70%, rgba(10,10,9,0) 100%);
  backdrop-filter:blur(9px) saturate(120%); -webkit-backdrop-filter:blur(9px) saturate(120%);
}
.brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand svg{ width:22px; height:22px; display:block; color:var(--bone); }
.brand__wm{ font-family:var(--mono); font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:rgba(237,230,216,.8); white-space:nowrap; }
.nav-t{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nav-b,.nav-close{ display:none; }
.nav{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); }
.nav__list{ display:flex; align-items:center; gap:clamp(12px,2vw,26px); }
.nav__list a{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase;
  color:rgba(237,230,216,.46); display:inline-flex; align-items:baseline; gap:7px; padding-block:6px;
  transition:color .3s ease;
}
.nav__list a:hover{ color:rgba(237,230,216,.96); }
.nav__list .n{ color:rgba(237,230,216,.26); font-size:.7rem; transition:color .3s ease; }
.nav__list a:hover .n{ color:var(--blue); }
.nav__list .c{ display:none; }
/* the room you are standing in */
.nav__list a[aria-current="page"]{ color:var(--bone); }
.nav__list a[aria-current="page"] .n{ color:var(--red); }
.nav__aside{ display:flex; align-items:center; gap:clamp(12px,1.6vw,20px); }
.nav__rule{ width:1px; height:14px; background:rgba(237,230,216,.1); display:block; }
.corr{ font-family:var(--mono); font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(216,67,44,.78); transition:color .3s ease; }
.corr:hover{ color:var(--red-link); text-decoration:underline; text-underline-offset:4px; }
.lang{ font-family:var(--mono); font-size:.74rem; letter-spacing:.1em; color:rgba(237,230,216,.32); }
.lang b{ color:rgba(237,230,216,.8); font-weight:400; }
.lang a{ transition:color .3s ease; }
.lang a:hover{ color:var(--bone); }

/* ============================================================
   PAGE HEAD — the way every room opens
   ============================================================ */
.phead{ padding:calc(var(--hdr) + clamp(56px,9vw,110px)) 0 var(--gap); position:relative; }
.crumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-faint); margin-bottom:var(--s4);
}
.crumb svg{ width:13px; height:13px; flex:0 0 auto; color:var(--blue); }
.crumb b{ color:var(--bone-dim); font-weight:400; }
.crumb em{ font-style:normal; color:rgba(237,230,216,.28); }
.crumb a{ color:var(--bone-faint); }
.crumb a:hover{ color:var(--bone); }

h1,.h1{
  font-family:var(--tobias); font-weight:300;
  font-size:clamp(2.5rem,6.2vw,5rem); line-height:1.04; letter-spacing:-.018em;
  max-width:17ch; text-wrap:balance;
}
h1 .soft,.h1 .soft{ color:rgba(237,230,216,.6); }
h2.sh{
  font-family:var(--tobias); font-size:clamp(1.9rem,3.9vw,3rem); font-weight:400;
  line-height:1.1; letter-spacing:-.012em; max-width:18ch; text-wrap:balance;
}
h3.sh3{ font-family:var(--tobias); font-weight:400; font-size:clamp(1.35rem,2.1vw,1.72rem); line-height:1.24; letter-spacing:-.008em; text-wrap:balance; }
.standfirst{
  font-family:var(--tobias); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.42;
  color:rgba(237,230,216,.9); max-width:40ch;
}

/* ============================================================
   SECTIONS, RULES, MARKERS
   ============================================================ */
.sec{ padding-block:var(--gap); position:relative; }
.sec--tight{ padding-block:calc(var(--gap) * .58); }
.rule{ border:0; border-top:1px solid var(--hair-soft); margin:0; }
.mark{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone-faint); margin-bottom:var(--s4);
}
.mark svg{ width:13px; height:13px; flex:0 0 auto; color:var(--blue); }
.mark b{ color:var(--bone-dim); font-weight:400; }
.mark em{ font-style:normal; color:rgba(237,230,216,.24); }

.cta{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--red-link); padding-block:8px; border-bottom:1px solid rgba(228,87,63,.34);
  transition:border-color .3s ease, gap .3s ease;
}
.cta:hover{ border-color:var(--red-link); gap:14px; }
.cta--quiet{ color:var(--bone-dim); border-bottom-color:var(--hair); }
.cta--quiet:hover{ color:var(--bone); border-bottom-color:var(--bone-dim); }
/* [hidden] es una regla del navegador con la misma especificidad
   que .cta, y la nuestra viene después, así que gana: un botón
   .cta marcado hidden se seguía viendo. Vale para cualquier
   elemento del sistema, no sólo para este. */
[hidden]{ display:none !important; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.07em; text-transform:uppercase;
  padding:15px 26px; border:1px solid transparent; cursor:pointer;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn--pri{ background:var(--bone); color:var(--ink); }
.btn--pri:hover{ transform:translateY(-2px); background:#fff; }
.btn--sec{ border-color:var(--hair); color:var(--bone-dim); }
.btn--sec:hover{ border-color:var(--bone-dim); color:var(--bone); transform:translateY(-2px); }
.btns{ display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }

.tag{ display:inline-block; border:1px solid var(--hair); padding:2px 7px; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone-faint); }
.tag--sw{ border-color:rgba(216,67,44,.42); color:var(--red-link); }
.tag--ext{ border-color:rgba(110,147,173,.42); color:var(--blue); }

/* ============================================================
   THE IRIS CROP — the house's one imaging law
   ------------------------------------------------------------
   Square container, circular mask, the photograph inside it
   positioned by a hotspot rather than by its centre. That last
   part is the whole point: the second motif of the house is a
   tiny figure against an enormous thing, so the subject is
   usually small and off-centre, and an automatic centre crop
   destroys precisely the best-composed covers.

   --hx/--hy are the hotspot, in percent, per image. They are
   data, not styling — they live in the catalogue file next to
   the alt text, which is where the CMS will keep them.
   ============================================================ */
.iris{
  position:relative; aspect-ratio:1; border-radius:50%; overflow:hidden; background:var(--ink-deep);
  box-shadow:inset 0 0 0 1px rgba(237,230,216,.16), 0 34px 60px -34px rgba(0,0,0,.95);
  transition:transform .55s cubic-bezier(.2,.8,.3,1), box-shadow .55s ease;
}
.iris img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:var(--hx,50%) var(--hy,50%);
  display:block;
}
.iris::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(8,8,10,0) 58%, rgba(8,8,10,.5) 100%);
}
a:hover > .iris,.card:hover .iris{ transform:translateY(-6px) scale(1.015); box-shadow:inset 0 0 0 1px var(--red), 0 40px 70px -32px rgba(0,0,0,1); }

/* ============================================================
   THE GALLERY — covers looked at through the pupil
   ============================================================ */
.gallery{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(28px,3.6vw,54px) clamp(24px,3vw,44px); }
@media (min-width:900px){ .gallery > *:nth-child(3n+2){ margin-top:64px; } }
.card{ display:block; }
.card__t{ font-family:var(--tobias); font-weight:400; font-size:clamp(1.18rem,1.55vw,1.45rem); line-height:1.2; letter-spacing:-.008em; margin-top:var(--s3); max-width:22ch; text-wrap:balance; transition:color .3s ease; }
.card:hover .card__t{ color:#fff; }
/* The byline. Tobias, small, quiet: month, year, and the author's
   two letters.

   The shelf mark used to live on this line and has been taken
   off it. `AS·MA·009` is real information — house, current,
   sequence — but on the front of a cover it is unlabelled
   symbology, and a reader who has to work out what it means is
   a reader not reading the title. It stays where it is named:
   the Index view, under a column head that says Shelf mark, and
   the essay's own catalogue card. */
.card__when{
  margin-top:14px; display:flex; align-items:baseline; gap:16px;
  font-family:var(--tobias); font-weight:400; font-size:1rem;
  letter-spacing:.005em; color:rgba(237,230,216,.72);
}
.card__by{ color:rgba(237,230,216,.5); }
.card:hover .card__when{ color:rgba(237,230,216,.86); }

.card__meta{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(237,230,216,.64); }
.card__meta .sig{ color:var(--blue); }
.band .card__when{ color:rgba(15,15,12,.7); }
.band .card__by{ color:rgba(15,15,12,.5); }

/* ============================================================
   THE INDEX — the same archive as a library card file
   ------------------------------------------------------------
   The gallery seduces; the index accredits. This is the view an
   editor or a prospective Studio client uses to judge the whole
   archive in thirty seconds, so it is dense, complete, and set
   in the catalogue face from end to end.
   ============================================================ */
.idx{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:.9rem; letter-spacing:.02em; }
.idx th{
  text-align:left; font-weight:400; padding:0 14px 12px 0;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,230,216,.46);
  border-bottom:1px solid var(--hair);
}
.idx td{ padding:13px 14px 13px 0; border-bottom:1px solid var(--hair-soft); vertical-align:top; color:var(--bone-dim); }
.idx tr:hover td{ background:rgba(237,230,216,.035); }
.idx .c-sig{ color:var(--blue); white-space:nowrap; }
.idx .c-date{ white-space:nowrap; color:rgba(237,230,216,.6); }
.idx .c-title{ font-family:var(--tobias); font-size:1.1rem; letter-spacing:0; text-transform:none; color:var(--bone); line-height:1.3; }
.idx tr:hover .c-title{ color:#fff; }
.idx .c-thumb{ width:52px; padding-right:18px; }
/* the empty left column exists so the cover can appear in it */
.idx .c-thumb .iris{ width:40px; opacity:0; transition:opacity .3s ease, transform .3s ease; box-shadow:inset 0 0 0 1px rgba(237,230,216,.2); transform:none; }
.idx tr:hover .c-thumb .iris{ opacity:1; }
.idx .c-num{ text-align:right; color:rgba(237,230,216,.56); }

/* ============================================================
   FACETS AND SEARCH
   ============================================================ */
.filters{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s4); }
.facet{ border-top:1px solid var(--hair); padding-top:var(--s3); }
.facet__h{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,230,216,.46); margin-bottom:14px; font-weight:400; }
.facet__list{ display:flex; flex-wrap:wrap; gap:8px; }
.opt{
  display:inline-flex; align-items:baseline; gap:8px; cursor:pointer;
  border:1px solid var(--hair-soft); padding:7px 12px;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bone-faint); transition:border-color .25s ease, color .25s ease, background-color .25s ease;
}
.opt:hover{ border-color:var(--hair); color:var(--bone-dim); }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.opt .k{ font-size:.72rem; color:rgba(237,230,216,.34); }
.opt:has(input:checked){ border-color:var(--red); color:var(--bone); background:rgba(216,67,44,.12); }
.opt:has(input:checked) .k{ color:var(--red-link); }
.opt:has(input:focus-visible){ outline:2px solid var(--red-link); outline-offset:2px; }

.search{ position:relative; }
.search input{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair);
  padding:14px 0 14px 26px; color:var(--bone);
  font-family:var(--mono); font-size:1rem; letter-spacing:.02em;
}
.search input::placeholder{ color:rgba(237,230,216,.34); text-transform:none; }
.search input:focus{ outline:none; border-bottom-color:var(--red); }
.search svg{ position:absolute; left:0; top:50%; translate:0 -50%; width:15px; height:15px; color:rgba(237,230,216,.4); }

.toolbar{ display:flex; justify-content:space-between; align-items:flex-end; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s5); }
.viewtoggle{ display:inline-flex; border:1px solid var(--hair-soft); }
.viewtoggle button{
  background:none; border:0; cursor:pointer; padding:9px 15px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(237,230,216,.44); transition:color .25s ease, background-color .25s ease;
}
.viewtoggle button[aria-pressed="true"]{ color:var(--bone); background:rgba(237,230,216,.07); }
.viewtoggle button:hover{ color:var(--bone-dim); }
.count{ font-family:var(--mono); font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(237,230,216,.5); }
.count b{ color:var(--bone); font-weight:400; }

/* An empty state is a sentence, not a shrug. */
.empty{ padding:var(--s7) 0; border-top:1px solid var(--hair-soft); }
.empty p{ font-family:var(--tobias); font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.32; max-width:30ch; color:var(--bone-dim); }

/* ============================================================
   THE CATALOGUE CARD — the sidebar of every essay and case
   ============================================================ */
.catalog{ border-top:1px solid var(--hair); }
.catalog div{ display:flex; justify-content:space-between; gap:var(--s2); padding-block:11px; border-bottom:1px solid var(--hair-soft); font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.catalog dt{ color:rgba(237,230,216,.56); }
.catalog dd{ color:var(--bone-dim); text-align:right; }

/* ============================================================
   THE BONE BAND — the paper inverse of the ink field
   ============================================================ */
.band{ position:relative; z-index:3; background:var(--bone); color:var(--ink); padding-block:var(--gap); }
.band .mark{ color:rgba(15,15,12,.46); }
.band .mark b{ color:rgba(15,15,12,.74); }
.band .mark em{ color:rgba(15,15,12,.28); }
.band .mark svg,.band .crumb svg{ color:var(--red-deep); }
.band .lede{ color:rgba(15,15,12,.82); }
.band .dim{ color:rgba(15,15,12,.6); }
.band .cta{ color:var(--red-deep); border-bottom-color:rgba(168,42,27,.32); }
.band .cta:hover{ border-bottom-color:var(--red-deep); }
.band .rule,.band .catalog{ border-color:rgba(15,15,12,.18); }
.band .catalog div{ border-color:rgba(15,15,12,.1); }
.band .catalog dt{ color:rgba(15,15,12,.56); }
.band .catalog dd{ color:rgba(15,15,12,.8); }
.band .standfirst{ color:rgba(15,15,12,.8); }

/* ============================================================
   FORMS — one component, two grounds
   ------------------------------------------------------------
   Every capture on the site posts the same shape to the same
   place, and carries the door it was entered through. That is
   the whole segmentation system: not seven forms, one form and
   seven labels.
   ============================================================ */
.form{ border-top:1px solid var(--hair); padding-top:var(--s4); }
.form__label{ display:block; font-family:var(--mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,230,216,.56); margin-bottom:12px; }
.form__row{ display:flex; gap:10px; flex-wrap:wrap; }
.form input[type=email],.form input[type=text],.form textarea,.form select{
  flex:1 1 240px; min-width:0; background:transparent; border:1px solid var(--hair);
  padding:15px 16px; color:var(--bone);
  font-family:var(--mono); font-size:.92rem; letter-spacing:.02em;
}
.form textarea{ width:100%; flex-basis:100%; resize:vertical; min-height:150px; line-height:1.6; }
.form input::placeholder,.form textarea::placeholder{ color:rgba(237,230,216,.34); text-transform:none; }
.form input:focus,.form textarea:focus,.form select:focus{ outline:none; border-color:var(--red); }
/* :not(.Btn) so the split Dispatch button below keeps its own
   geometry instead of inheriting the plain one */
.form button[type=submit]:not(.Btn){
  background:var(--red-deep); color:var(--bone); border:1px solid var(--red-deep);
  padding:15px 28px; cursor:pointer;
  font-family:var(--mono); font-size:.82rem; letter-spacing:.09em; text-transform:uppercase;
  transition:background-color .3s ease, transform .3s ease;
}
.form button[type=submit]:not(.Btn):hover{ background:#C0331F; transform:translateY(-2px); }
/* In flight. The success state now waits for the server to say
   yes — see js/house.js — so there is a moment between the click
   and the answer that the reader has to be able to see. Without
   it the button looks broken and gets clicked again. */
.form.is-sending{ cursor:progress; }
.form.is-sending .form__fields{ opacity:.55; transition:opacity .2s ease; }
.form button[disabled]{ opacity:.5; cursor:progress; transform:none !important; }
.form__pot{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form__fine{ margin-top:14px; font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(237,230,216,.46); max-width:52ch; line-height:1.7; }
.form__err{ display:none; margin-top:12px; font-family:var(--mono); font-size:.78rem; letter-spacing:.05em; color:var(--red-link); }
.form.is-bad .form__err{ display:block; }
.form__ok{ display:none; font-size:1.05rem; line-height:1.6; color:var(--bone-dim); max-width:44ch; }
.form.is-done .form__fields{ display:none; }
.form.is-done .form__ok{ display:block; }
.form__grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s2); }
.form__field{ display:block; }
.form__field > span{ display:block; font-family:var(--mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,230,216,.52); margin-bottom:8px; }
.form__field input,.form__field select,.form__field textarea{ width:100%; }
.form__check{ display:flex; gap:11px; align-items:flex-start; font-family:var(--mono); font-size:.78rem; letter-spacing:.04em; line-height:1.6; color:var(--bone-dim); cursor:pointer; }
.form__check input{ margin-top:4px; accent-color:var(--red); flex:0 0 auto; }

/* ── THE DISPATCH BUTTON ──────────────────────────────────────
   A split button: the action on the left, the running count of
   the list on the right, with a notch pointing back at it.
   Adapted from a Uiverse.io component by vinodjangid07.

   TWO DELIBERATE DEPARTURES FROM THE ORIGINAL SNIPPET
   · The red is the house red, not rgb(238,0,0). The blueprint
     rations colour to one red and a second one four shades away
     reads as a mistake rather than a choice. One line to change
     back if that is wanted.
   · 50px tall rather than 35px, so it sits level with the email
     field beside it. The 60/40 split, the radius, the shadow and
     the hover and active states are the original's.

   THE COUNT IS NOT WIRED TO ANYTHING YET. It increments locally
   and persists per browser. Until the CRM exists it starts from
   zero on purpose: a seeded subscriber figure would be exactly
   the unsourced number this house tells its clients not to
   publish. See docs/ARQUITECTURA.md §6.4. */
.Btn{
  height:50px; flex:0 0 auto;
  display:inline-flex; align-items:stretch; justify-content:flex-start;
  border:none; border-radius:5px; overflow:hidden;
  box-shadow:5px 5px 10px rgba(0,0,0,.089);
  cursor:pointer; background-color:transparent; padding:0; box-sizing:border-box;
}
/* Sized by its content, not by a fixed width and a 60/40 split.
   The original snippet's percentages were fine for the word it
   was written around; here the label is longer, and the moment
   the real Geist Mono replaces the system fallback every one of
   those numbers changes again. Padding is the only measurement
   that survives a font swap. */
.Btn__left{
  background-color:var(--red-deep);
  display:flex; align-items:center; justify-content:center; gap:9px;
  padding:0 20px 0 16px;   /* the extra 4px on the right is the notch's clearance */
  transition:background-color .25s ease;
}
.Btn__left svg{ width:15px; height:15px; color:#fff; flex:0 0 auto; transition:transform .2s ease; }
.Btn__label{
  color:#fff; font-weight:400; line-height:1; white-space:nowrap;
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
}
.Btn__count{
  display:flex; align-items:center; justify-content:center;
  min-width:58px; padding:0 14px;
  color:var(--red-deep); font-weight:600;
  font-family:var(--mono); font-size:.9rem; line-height:1; letter-spacing:.02em;
  position:relative; background-color:#fff;
}
.Btn__count::before{
  content:""; position:absolute; left:-4px; top:50%; margin-top:-4px;
  height:8px; width:8px; background-color:#fff; transform:rotate(45deg);
}
.Btn:hover .Btn__left{ background-color:#C0331F; }
.Btn:active .Btn__left{ background-color:#8E2216; }
.Btn:active .Btn__left svg{ transform:scale(1.15); transform-origin:top; }

.band .form{ border-top-color:rgba(15,15,12,.2); }
.band .form__label{ color:rgba(15,15,12,.54); }
.band .form input[type=email],.band .form input[type=text],.band .form textarea,.band .form select{ border-color:rgba(15,15,12,.28); color:var(--ink); }
.band .form input::placeholder,.band .form textarea::placeholder{ color:rgba(15,15,12,.38); }
.band .form input:focus,.band .form textarea:focus{ border-color:var(--red-deep); }
.band .form__fine{ color:rgba(15,15,12,.5); }
.band .form__ok{ color:rgba(15,15,12,.86); }
.band .form__field > span,.band .form__check{ color:rgba(15,15,12,.62); }

/* ============================================================
   PROSE — essay bodies, editor's notes, the long stretches
   ============================================================ */
.prose{ max-width:64ch; font-size:1.125rem; line-height:1.75; color:rgba(237,230,216,.88); }
.prose p + p{ margin-top:var(--s3); }
.prose h2{ font-family:var(--tobias); font-weight:400; font-size:clamp(1.5rem,2.4vw,1.95rem); line-height:1.2; margin-top:var(--s6); margin-bottom:var(--s2); color:var(--bone); }
.prose h3{ font-family:var(--tobias); font-weight:400; font-size:1.3rem; margin-top:var(--s5); margin-bottom:10px; color:var(--bone); }
.prose a{ color:var(--red-link); border-bottom:1px solid rgba(228,87,63,.34); }
.prose a:hover{ border-color:var(--red-link); }
.prose blockquote{ margin:var(--s5) 0; padding-left:var(--s3); border-left:1px solid var(--red); font-family:var(--tobias); font-style:italic; font-size:1.3rem; line-height:1.42; color:var(--bone); }
.prose ul{ margin-top:var(--s3); }
.prose li{ position:relative; padding-left:26px; margin-bottom:10px; }
.prose li::before{ content:""; position:absolute; left:2px; top:.62em; width:7px; height:7px; border-radius:50%; border:1px solid var(--blue); }
.band .prose{ color:rgba(15,15,12,.84); }
.band .prose h2,.band .prose h3,.band .prose blockquote{ color:var(--ink); }
.band .prose a{ color:var(--red-deep); border-bottom-color:rgba(168,42,27,.3); }

/* ============================================================
   LISTS THAT CARRY DATA
   ============================================================ */
.deflist{ border-top:1px solid var(--hair); }
.deflist > div{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3); padding-block:var(--s3); border-bottom:1px solid var(--hair-soft); }
.deflist dt{ font-family:var(--mono); font-size:.8rem; letter-spacing:.1em; color:var(--blue); padding-top:5px; }
.deflist b{ font-family:var(--tobias); font-weight:400; font-size:1.32rem; display:block; line-height:1.28; }
.deflist span{ display:block; font-size:.98rem; line-height:1.6; color:var(--bone-faint); margin-top:6px; }
.band .deflist{ border-top-color:rgba(15,15,12,.2); }
.band .deflist > div{ border-bottom-color:rgba(15,15,12,.1); }
.band .deflist dt{ color:var(--red-deep); }
.band .deflist span{ color:rgba(15,15,12,.66); }

.house{ border-top:1px solid var(--hair-soft); }
.house div{ display:flex; justify-content:space-between; gap:var(--s3); padding-block:12px; border-bottom:1px solid var(--hair-soft); font-family:var(--mono); font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; }
.house dt{ color:rgba(237,230,216,.52); }
.house dd{ color:var(--bone-dim); text-align:right; }

/* ============================================================
   DISCLOSURE — the FAQ, which is prose that folds
   ============================================================ */
.qa{ border-top:1px solid var(--hair); }
.qa details{ border-bottom:1px solid var(--hair-soft); }
.qa summary{
  list-style:none; cursor:pointer; padding-block:var(--s3);
  display:flex; align-items:baseline; gap:var(--s3);
  font-family:var(--tobias); font-size:clamp(1.15rem,1.7vw,1.36rem); line-height:1.3;
  transition:color .25s ease;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:"+"; margin-left:auto; flex:0 0 auto;
  font-family:var(--mono); font-size:1.1rem; color:var(--blue); transition:transform .3s ease;
}
.qa details[open] summary::after{ transform:rotate(45deg); }
.qa summary:hover{ color:#fff; }
.qa .a{ padding-bottom:var(--s4); max-width:66ch; color:rgba(237,230,216,.82); line-height:1.72; }
.qa .a p + p{ margin-top:var(--s2); }

/* ============================================================
   THE SHELF — Editions are objects, not thumbnails
   ============================================================ */
.shelf{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(32px,4.5vw,72px); }
.book{ display:block; }
.book__obj{
  position:relative; aspect-ratio:3/4; overflow:hidden; transform:rotate(var(--rot,-4deg));
  box-shadow:0 40px 60px -34px rgba(0,0,0,.95), inset 0 0 0 1px rgba(237,230,216,.1);
  transition:transform .6s cubic-bezier(.2,.8,.3,1), box-shadow .6s ease;
  background:var(--ink-deep);
}
.book:hover .book__obj{ transform:rotate(0deg) translateY(-8px); box-shadow:0 52px 74px -32px rgba(0,0,0,1), inset 0 0 0 1px rgba(216,67,44,.5); }
.book__obj img{ width:100%; height:100%; object-fit:cover; object-position:var(--hx,50%) var(--hy,50%); display:block; }
.book__obj::after{ content:""; position:absolute; inset:0 auto 0 0; width:9px; background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(255,255,255,.07) 60%, rgba(0,0,0,.4)); }
.book__t{ font-family:var(--tobias); font-weight:400; font-size:1.26rem; line-height:1.22; margin-top:var(--s3); }
.book__m{ margin-top:9px; font-family:var(--mono); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(237,230,216,.6); }

/* ============================================================
   PORTRAITS — the editors, inside thin rings
   ============================================================ */
.folk{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(40px,6vw,88px); }
.folk__p{ position:relative; width:clamp(140px,17vw,196px); }
.folk__p .iris{ box-shadow:inset 0 0 0 1px rgba(237,230,216,.22); }
.folk__ring{ position:absolute; inset:-9px; border-radius:50%; border:1px solid var(--hair); pointer-events:none; }
.folk__bio{ margin-top:var(--s4); max-width:42ch; color:rgba(237,230,216,.84); line-height:1.72; }
.folk__bio p + p{ margin-top:12px; }

/* ============================================================
   THE FOUR MOVEMENTS — the case study frame
   ============================================================ */
.moves{ counter-reset:mv; }
.move{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(24px,4vw,64px); padding-block:var(--s6); border-top:1px solid var(--hair-soft); }
.move__n{ font-family:var(--mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); padding-top:9px; white-space:nowrap; }
.move h3{ font-family:var(--tobias); font-weight:400; font-size:clamp(1.5rem,2.5vw,2rem); line-height:1.18; margin-bottom:var(--s3); }
.move .prose{ max-width:60ch; }

/* ============================================================
   ISSUES — the Dispatch reading room
   ============================================================ */
.issues{ border-top:1px solid var(--hair); }
.issue{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--s3); align-items:baseline; padding-block:var(--s3); border-bottom:1px solid var(--hair-soft); transition:background-color .25s ease; }
.issue:hover{ background:rgba(237,230,216,.035); }
.issue__n{ font-family:var(--mono); font-size:.82rem; letter-spacing:.1em; color:var(--blue); }
.issue__s{ font-family:var(--tobias); font-size:1.22rem; line-height:1.28; }
.issue:hover .issue__s{ color:#fff; }
.issue__d{ font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:rgba(237,230,216,.52); white-space:nowrap; }
.band .issues{ border-top-color:rgba(15,15,12,.2); }
.band .issue{ border-bottom-color:rgba(15,15,12,.1); }
.band .issue:hover{ background:rgba(15,15,12,.04); }
.band .issue__n{ color:var(--red-deep); }
.band .issue:hover .issue__s{ color:#000; }
.band .issue__d{ color:rgba(15,15,12,.54); }

/* two doors, side by side, so the visitor classifies themselves */
.doors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,44px); }
.door{ border:1px solid var(--hair); padding:clamp(24px,3vw,38px); display:flex; flex-direction:column; gap:var(--s2); transition:border-color .3s ease; }
.door:hover{ border-color:rgba(237,230,216,.26); }
.door h3{ font-family:var(--tobias); font-weight:400; font-size:1.4rem; line-height:1.24; }
.door p{ color:var(--bone-faint); font-size:1rem; line-height:1.66; flex:1 1 auto; }
.band .door{ border-color:rgba(15,15,12,.2); }
.band .door:hover{ border-color:rgba(15,15,12,.4); }
.band .door p{ color:rgba(15,15,12,.66); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ position:relative; z-index:2; border-top:1px solid var(--hair-soft); padding-block:var(--s6) var(--s5); }
.foot__grid{ display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr); gap:var(--s5); }
.foot p{ font-size:.95rem; line-height:1.65; color:rgba(237,230,216,.66); max-width:44ch; }
.foot p + p{ margin-top:var(--s2); }
.foot h3{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(237,230,216,.5); font-weight:400; margin-bottom:var(--s2); }
.foot li{ margin-bottom:9px; }
.foot li a{ font-family:var(--mono); font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--bone-dim); }
.foot li a:hover{ color:var(--bone); }
.foot__base{ margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--hair-soft); display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:rgba(237,230,216,.5); }
.foot__note{ color:rgba(216,67,44,.58); }

/* ============================================================
   MOTION
   ============================================================ */
.io .rv{ opacity:.38; transform:translateY(20px); transition:opacity .8s cubic-bezier(.2,.8,.3,1), transform .8s cubic-bezier(.2,.8,.3,1); }
.io .rv.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
  .rv{ opacity:1 !important; transform:none !important; }
  .grain{ opacity:.09; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .gallery,.shelf{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .folk,.doors{ grid-template-columns:1fr; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .idx .c-thumb{ display:none; }
}
@media (max-width:880px){
  .nav-b{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone); border:1px solid var(--hair); padding:8px 13px; }
  .nav{
    position:fixed; top:0; left:0; z-index:60;
    width:100vw; width:100dvw; height:100vh; height:100dvh;
    background:var(--ink);
    display:flex; flex-direction:column; align-items:stretch; justify-content:center;
    gap:0; padding:96px var(--pad) 40px;
    clip-path:circle(0% at calc(100% - 56px) 32px);
    visibility:hidden;
    transition:clip-path .62s cubic-bezier(.7,0,.2,1), visibility 0s linear .62s;
    overflow-y:auto;
  }
  .nav-t:checked ~ .nav{ clip-path:circle(150% at calc(100% - 56px) 32px); visibility:visible; transition:clip-path .62s cubic-bezier(.7,0,.2,1), visibility 0s; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__list li{ border-bottom:1px solid var(--hair-soft); }
  .nav__list a{ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:2px; align-items:baseline; padding-block:18px; font-family:var(--tobias); font-size:1.9rem; letter-spacing:-.01em; text-transform:none; color:var(--bone); }
  .nav__list .n{ font-family:var(--mono); font-size:.8rem; color:var(--blue); }
  .nav__list .c{ display:block; grid-column:2; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(237,230,216,.36); }
  .nav__aside{ margin-top:var(--s5); justify-content:space-between; }
  .nav__rule{ display:none; }
  .corr{ font-size:.9rem; }
  .nav-close{ display:block; position:absolute; top:20px; right:var(--pad); cursor:pointer; font-family:var(--mono); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); border:1px solid var(--hair); padding:8px 13px; }
  @media (prefers-reduced-motion: reduce){
    .nav{ transition:none; clip-path:none; display:none; }
    .nav-t:checked ~ .nav{ display:flex; }
  }
  .move{ grid-template-columns:1fr; gap:var(--s2); }
  .form__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  :root{ --hdr:56px; }
  .gallery,.shelf{ grid-template-columns:1fr; gap:var(--s5); }
  .gallery .iris,.card__iris{ max-width:340px; }
  .shelf{ max-width:300px; }
  .book__obj{ transform:none; }
  .foot__grid{ grid-template-columns:1fr; gap:var(--s4); }
  .brand__wm{ font-size:.66rem; letter-spacing:.12em; }
  /* the catalogue layer comes up on a phone, where it is being
     read at arm's length by somebody who is not twenty-five */
  .m,.card__meta,.idx{ font-size:1rem; }
  .idx td{ padding-right:10px; }
  .idx .c-hide{ display:none; }
  .issue{ grid-template-columns:auto minmax(0,1fr); }
  .issue__d{ grid-column:2; }
}
@media (max-width:400px){
  .btn{ width:100%; justify-content:center; }
  .brand__wm{ display:none; }
}