/* Novra Foods — the cinematic house. Color and type originate in system.css. */
*,:before,:after {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:6.5rem;
  background:var(--paper);
}
body {
  margin:0;
  color:var(--ink);
  font-family:var(--font-text);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection {
  background:var(--navy);
  color:var(--paper);
}
a {
  color:inherit;
  text-decoration:none;
}
button,input {
  font:inherit;
}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}
button {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.65;
}
button {
  color:inherit;
}
img {
  display:block;
  width:100%;
  height:auto;
}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid currentColor;
  outline-offset:6px;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3 {
  font-family:var(--font-display);
  font-weight:400;
}
h2 {
  font-size:clamp(3.4rem,6.1vw,6.6rem);
  line-height:1.02;
  letter-spacing:-.035em;
}
h2 em,h1 em {
  font-weight:400;
}
h3 {
  font-size:2.15rem;
  line-height:1.15;
  letter-spacing:-.015em;
}
p {
  color:var(--stone);
}
em {
  font-style:italic;
}
.skip-link {
  position:fixed;
  top:1rem;
  left:1rem;
  z-index:200;
  transform:translateY(-160%);
  padding:.8rem 1.2rem;
  background:var(--paper);
}
/* :focus-visible, not :focus. assets/gate.js puts focus here the moment the
 * entry notice is agreed to, and on :focus that painted a paper tab reading
 * SKIP TO CONTENT at the top left of a page nobody had tabbed into. A
 * programmatic focus does not match :focus-visible; a keyboard visitor does.
 * Why: docs/DECISIONS.md#skip-link-focus */
.skip-link:focus-visible {
  transform:translateY(0);
}
.site-header {
  position:absolute;
  z-index:30;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:2rem;
  padding:2.25rem 4.5%;
  color:var(--paper);
  border-bottom:1px solid var(--white-rule);
}
.wordmark {
  font-family:var(--font-display);
  font-size:2.2rem;
  line-height:.85;
  letter-spacing:.12em;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
}
.wordmark span {
  font-family:var(--font-ui);
  font-size:.63rem;
  line-height:1;
  letter-spacing:.5em;
  margin-top:.6rem;
  padding-left:.45em;
}
#site-nav {
  display:flex;
  align-items:center;
  gap:2.2rem;
  font-family:var(--font-ui);
  font-size:.88rem;
}
#site-nav a {
  position:relative;
  padding:.5rem 0;
}
#site-nav a:after {
  content:'';
  height:1px;
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s;
}
#site-nav a:hover:after {
  transform:scaleX(1);
}
.nav-invitation {
  margin-left:1rem;
}
.nav-invitation span {
  margin-left:1.4rem;
}
.menu-toggle {
  display:none;
}
.hero {
  position:relative;
  isolation:isolate;
  min-height:52rem;
  height:100svh;
  max-height:78rem;
  color:var(--paper);
  overflow:hidden;
  background:var(--navy);
}
.hero-picture,.hero-picture img,#depth-scene,.hero-shade {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.hero-picture img {
  object-fit:cover;
  object-position:50% 50%;
}
#depth-scene {
  opacity:0;
  pointer-events:none;
}
.hero.depth-ready #depth-scene {
  opacity:1;
}
.hero-shade {
  background:linear-gradient(90deg,var(--hero-dark) 0%,var(--hero-middle) 43%,transparent 85%),linear-gradient(0deg,var(--hero-dark),transparent 28%,transparent 74%,var(--hero-top));
  pointer-events:none;
}
.hero-content {
  position:relative;
  padding:11.5rem 4.5% 10rem;
  max-width:58rem;
  z-index:2;
}
.eyebrow {
  font-family:var(--font-ui);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:.9rem;
  color:var(--paper);
  margin-bottom:2.15rem;
}
.hero-eyebrow span {
  width:1.6rem;
  height:1px;
  background:currentColor;
  opacity:.55;
}
h1 {
  font-size:clamp(4.2rem,6.6vw,7.4rem);
  line-height:.96;
  letter-spacing:-.04em;
}
h1 span,h1 em {
  display:block;
}
.hero-description {
  color:var(--paper);
  font-family:var(--font-ui);
  font-size:1.04rem;
  line-height:1.6;
  margin:2rem 0;
  opacity:.9;
}
.button {
  font-family:var(--font-ui);
  font-size:.88rem;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:2.5rem;
  padding:1rem 1.3rem;
  min-height:3.5rem;
  transition:background .25s,color .25s,transform .25s;
}
.button-light {
  background:var(--paper);
  color:var(--navy);
}
.button:hover {
  transform:translateY(-1px);
  background:var(--linen);
}
.button span {
  font-size:1.35rem;
}
.hero-bottom {
  position:absolute;
  bottom:2rem;
  left:4.5%;
  right:4.5%;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:1rem;
  z-index:2;
  font-family:var(--font-ui);
}
.scroll-link {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:.8rem;
}
.scroll-line {
  height:2.9rem;
  width:1px;
  background:var(--white-rule);
  position:relative;
  overflow:hidden;
}
.scroll-line:after {
  content:'';
  position:absolute;
  background:var(--paper);
  height:45%;
  width:100%;
  animation:scrollHint 2.8s ease-in-out infinite;
}
.film-teaser {
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:1rem;
}
.film-teaser small {
  display:block;
  font-size:.76rem;
  margin-top:.2rem;
  opacity:.75;
}
.play-icon {
  width:3.3rem;
  height:3.3rem;
  display:grid;
  place-items:center;
  border:1px solid var(--white-rule);
  border-radius:50%;
  font-size:.65rem;
  transition:background .3s;
}
.film-teaser:hover .play-icon {
  background:var(--white-rule);
}
.section-pad {
  padding:6.5rem 7%;
}
.section-marker {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1.25rem;
  border-bottom:1px solid var(--linen-deep);
  font-family:var(--font-ui);
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--stone-light);
}
.house-grid {
  display:grid;
  grid-template-columns:1fr 2.15fr;
  gap:9%;
  padding-top:5rem;
}
.house-aside {
  padding-top:.6rem;
}
.house-letter {
  font-family:var(--font-display);
  font-size:9rem;
  line-height:1;
  color:var(--navy);
}
.house-aside p {
  font-style:italic;
  font-size:.93rem;
  line-height:1.8;
  margin-top:2rem;
}
.house-paragraphs {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:2.5rem;
  margin:2.2rem 0;
}
.house-paragraphs p {
  font-family:var(--font-ui);
  font-size:1.03rem;
  line-height:1.8;
}
.text-link {
  display:inline-flex;
  gap:3rem;
  justify-content:space-between;
  align-items:center;
  font-family:var(--font-ui);
  font-size:.85rem;
  border-bottom:1px solid var(--stone-light);
  padding:.6rem 0;
  transition:gap .3s;
}
.text-link:hover {
  gap:3.7rem;
}
.collection {
  background:var(--panel);
  padding-top:3rem;
}
.collection-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10%;
  padding:4.3rem 0;
}
.collection-heading p {
  max-width:22rem;
  font-family:var(--font-ui);
  font-size:1.05rem;
  line-height:1.8;
  padding-bottom:.4rem;
}
.category-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5.5rem 4.5%;
}
.category-card:nth-child(even) {
  margin-top:7rem;
}
.category-card:nth-child(odd) {
  margin-bottom:7rem;
}
.category-card {
  min-width:0;
}
.category-photo {
  position:relative;
  aspect-ratio:1.16;
  isolation:isolate;
  background:var(--linen);
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:auto;
  transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s;
}
.category-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}
.category-photo:hover img {
  transform:scale(1.055);
}
.category-photo:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,var(--photo-shade),transparent 24%,transparent 75%,var(--photo-shade));
  pointer-events:none;
}
.photo-index {
  position:absolute;
  top:1.3rem;
  left:1.4rem;
  font-family:var(--font-display);
  font-size:2.5rem;
  color:var(--paper);
  z-index:1;
  line-height:1;
}
.category-status {
  position:absolute;
  bottom:1.25rem;
  left:1.4rem;
  font-family:var(--font-ui);
  font-size:.74rem;
  letter-spacing:.04em;
  color:var(--paper);
  z-index:1;
}
.category-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin:1.55rem 0 .75rem;
}
.category-heading h3 {
  font-size:clamp(2rem,2.8vw,3.2rem);
}
.category-symbol {
  font-family:var(--font-ui);
  font-size:1.5rem;
  color:var(--stone-light);
}
.category-card>p {
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1.75;
  max-width:28rem;
}
.category-note {
  display:block;
  margin-top:1rem;
  font-family:var(--font-text);
  font-style:italic;
  font-size:.85rem;
  color:var(--stone-light);
}
.collection-footnote {
  margin-top:3.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--linen-deep);
  font-family:var(--font-ui);
  font-size:.78rem;
  max-width:100%;
  color:var(--stone-light);
}
/* ── the ledger ──────────────────────────────────────────────────────
 * The four cards are an <ol>: they are a ledger of categories, not four
 * unrelated articles, and a fifth arrives by adding one row. Both states a row
 * can be in are drawn below — withheld, which is what ships, and named, which
 * is used nowhere yet — so printing a name is a row edit and never a design
 * task. Same for a row that has no photograph.
 * Why: docs/DECISIONS.md#ledger-cinematic */
ol.ledger {
  margin:0;
  padding:0;
  list-style:none;
}
.ledger-row::marker {
  content:'';
}
/* Withheld: a quiet line of type on the photograph. It says the category is
 * real and the name is not settled, which is the whole of what is true. */
.ledger-row[data-brand=withheld] .ledger-brand-name {
  font-family:var(--font-ui);
  letter-spacing:.04em;
}
/* Named, and unused. When a name can be stood behind it goes in the same slot
 * on the same photograph, set in the display face over the one accent — so the
 * row carrying a name reads as an announcement and the rows beside it do not
 * have to change at all. */
.ledger-row[data-brand=named] .ledger-brand-name {
  display:inline-block;
  font-family:var(--font-display);
  font-size:1.45rem;
  line-height:1.05;
  letter-spacing:-.01em;
  padding-bottom:.3rem;
  border-bottom:2px solid var(--oak);
}
.ledger-row[data-brand=named] .category-note {
  color:var(--stone);
}
/* The withheld state is longer copy than these frames were drawn for — "In
 * development" became "In development — not yet named" — and on the two
 * photographs with a bright lower edge it stopped being legible. The scrim
 * that is already there is deepened at its last stop only: the caption gets a
 * ground, the rest of the frame is untouched, and no new colour is invented.
 * Why: docs/DECISIONS.md#ledger-cinematic */
.ledger-row .category-photo:after {
  background:linear-gradient(0deg,var(--hero-dark),var(--photo-shade) 13%,transparent 26%,transparent 75%,var(--photo-shade));
}
/* A row with no photograph, drawn now and unused now. Typographic by decision
 * rather than by omission: a flat holder would print a blank rectangle where a
 * picture is promised. It keeps the photograph's proportion, so a grid holding
 * both kinds of row still lines up. */
.ledger-plate {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:1.5rem;
  aspect-ratio:1.16;
  padding:1.4rem;
  background:var(--stock);
  border:1px solid var(--linen-deep);
}
.ledger-plate .photo-index {
  position:static;
  color:var(--stone-light);
}
.ledger-plate .category-status {
  position:static;
  color:var(--stone);
}
.ledger-plate-mark {
  font-family:var(--font-display);
  font-size:clamp(1.9rem,3.2vw,3rem);
  line-height:1.06;
  letter-spacing:-.02em;
  color:var(--ink-soft);
  max-width:16ch;
}
.film-section {
  padding-top:2rem;
  padding-bottom:2rem;
  color:var(--ink);
  background:var(--paper);
}
.film-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:3rem;
  padding:3rem 0 2.5rem;
}
.film-heading h2 {
  font-size:clamp(3.2rem,5.4vw,6rem);
}
.film-heading>p {
  max-width:24rem;
  font-family:var(--font-text);
  font-size:1rem;
  color:var(--stone);
  line-height:1.8;
}
.film-stage {
  position:relative;
  aspect-ratio:16/9;
  isolation:isolate;
  overflow:hidden;
  background:var(--linen);
}
.film-poster,.onshore-film {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.film-poster img,.onshore-film {
  width:100%;
  height:100%;
  object-fit:contain;
}
.onshore-film {
  opacity:0;
  transition:opacity 1.2s ease;
}
.film-section.has-started .onshore-film {
  opacity:1;
}
.film-controls {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem 1.5rem;
  padding:1rem 0;
  border-bottom:1px solid var(--linen-deep);
}
.film-control {
  background:transparent;
  color:var(--ink-soft);
  border:0;
  border-radius:0;
  padding:.65rem 0;
  display:flex;
  align-items:center;
  gap:.65rem;
  min-height:44px;
  font-family:var(--font-ui);
  font-size:.875rem;
  text-underline-offset:.3em;
}
.film-control:hover {
  text-decoration:underline;
}
.control-icon {
  font-size:.7rem;
  width:.8rem;
}
.film-credit {
  margin-left:auto;
  font-family:var(--font-ui);
  font-size:.8rem;
  color:var(--stone-light);
}
.provenance-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9%;
  padding-top:5rem;
  align-items:center;
}
.provenance-image {
  position:relative;
  transform-style:preserve-3d;
  transition:transform .6s;
}
.provenance-image img {
  aspect-ratio:.82;
  object-fit:cover;
}
.provenance-image>p {
  font-style:italic;
  font-size:.8rem;
  margin-top:1.1rem;
  color:var(--stone-light);
}
.provenance-copy>p {
  font-family:var(--font-ui);
  margin:2rem 0;
  max-width:27rem;
  line-height:1.8;
  font-size:1.04rem;
}
.principle {
  display:flex;
  gap:1.6rem;
  padding:1.5rem 0;
  border-top:1px solid var(--linen-deep);
}
.principle>span {
  font-family:var(--font-ui);
  font-size:.75rem;
  color:var(--stone-light);
  padding-top:.5rem;
}
.principle h3 {
  font-size:1.8rem;
}
.principle p {
  font-family:var(--font-ui);
  font-size:.93rem;
  line-height:1.7;
  margin-top:.5rem;
}
.invitation {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:var(--navy);
  color:var(--paper);
  text-align:center;
  padding-top:7rem;
  padding-bottom:7rem;
}
.invitation-backdrop {
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.17;
}
.invitation-backdrop img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.5);
}
.invitation:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--navy),transparent 55%,var(--navy));
  opacity:.7;
  z-index:-1;
}
.invitation-content {
  max-width:52rem;
  margin:auto;
}
.invitation .eyebrow {
  color:var(--navy-pale);
  margin-bottom:2rem;
}
.invitation h2 {
  font-size:clamp(3.8rem,6.2vw,7rem);
}
.invitation-description {
  font-family:var(--font-ui);
  color:var(--navy-pale);
  max-width:33rem;
  margin:2rem auto;
  font-size:1.04rem;
  line-height:1.8;
}
.join-wrap {
  max-width:35rem;
  margin:2.4rem auto 0;
  text-align:left;
}
#join {
  flex-direction:column;
  position:relative;
}
#join[hidden] {
  display:none;
}
.join-trap {
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.join-email-label {
  font-family:var(--font-ui);
  font-size:.8rem;
  margin-bottom:.6rem;
}
.join-row {
  display:flex;
  background:var(--paper);
  color:var(--navy);
  min-height:3.8rem;
}
.join-email {
  flex:1;
  min-width:0;
  width:100%;
  background:transparent;
  border:0;
  border-radius:0;
  color:var(--navy);
  padding:1rem;
  font-family:var(--font-ui);
  font-size:1rem;
}
.join-email::placeholder {
  color:var(--stone-light);
}
.join-email:focus-visible {
  outline-offset:-4px;
}
.join-submit {
  border:0;
  border-radius:0;
  background:var(--paper);
  color:var(--navy);
  padding:1rem 1.2rem;
  font-family:var(--font-ui);
  font-size:.84rem;
  display:flex;
  align-items:center;
  gap:1.4rem;
  white-space:nowrap;
}
.join-submit:hover {
  background:var(--linen);
}
.join-human {
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  margin-top:1rem;
  color:var(--navy-pale);
  font-family:var(--font-ui);
  font-size:.82rem;
  cursor:pointer;
}
.join-human input {
  width:1rem;
  height:1rem;
  margin:.15rem 0 0;
  flex-shrink:0;
  accent-color:var(--paper);
}
.join-terms {
  font-family:var(--font-ui);
  font-size:.76rem;
  color:var(--navy-pale);
  line-height:1.8;
  margin-top:.5rem;
}
.join-terms a {
  text-decoration:underline;
  text-underline-offset:3px;
}
#join-msg {
  min-height:1.4rem;
  font-family:var(--font-ui);
  font-size:.9rem;
  color:var(--paper);
  margin-top:.65rem;
}
#join-msg[data-state=error] {
  padding:.65rem;
  border-left:2px solid var(--paper);
  background:var(--film-button);
}
#join-msg[data-state=ok]:before {
  content:'✓ ';
  font-weight:700;
}
.correspondence-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10%;
  padding:4rem 0 3.5rem;
}
.correspondence-heading h2 {
  font-size:clamp(3.4rem,5.1vw,5.7rem);
}
.correspondence-heading p {
  max-width:23rem;
  font-family:var(--font-ui);
  font-size:1rem;
  line-height:1.8;
}
.contact-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-bottom:1px solid var(--linen-deep);
  border-top:1px solid var(--linen-deep);
}
.contact-grid>a {
  padding:2rem 1.5rem 2.2rem 0;
  transition:background .3s;
}
.contact-grid>a+a {
  padding-left:1.5rem;
  border-left:1px solid var(--linen-deep);
}
.contact-number {
  font-family:var(--font-ui);
  font-size:.74rem;
  color:var(--stone-light);
}
.contact-grid h3 {
  font-size:1.65rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  margin:1.3rem 0 .6rem;
}
.contact-grid h3 span {
  font-family:var(--font-ui);
  font-size:1rem;
  transition:transform .3s;
}
.contact-grid a:hover h3 span {
  transform:translate(3px,-3px);
}
.contact-grid p {
  font-family:var(--font-ui);
  font-size:.78rem;
  line-height:1.6;
}
.faq {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:8%;
  padding-top:5rem;
}
.faq>h3 {
  font-size:2rem;
}
.faq-items details {
  border-bottom:1px solid var(--linen-deep);
}
.faq-items summary {
  padding:1.1rem 0;
  display:flex;
  justify-content:space-between;
  gap:1.2rem;
  font-family:var(--font-ui);
  font-size:.95rem;
  cursor:pointer;
  list-style:none;
}
.faq-items summary::-webkit-details-marker {
  display:none;
}
.faq-items summary span {
  font-size:1.25rem;
  transition:transform .2s;
}
.faq-items details[open] summary span {
  transform:rotate(45deg);
}
.faq-items details p {
  font-family:var(--font-ui);
  padding:0 2rem 1.3rem 0;
  font-size:.9rem;
  line-height:1.8;
}
.faq-items a {
  text-decoration:underline;
}
/* ── the legal corner ─────────────────────────────────────────────────
 * Carried over from redesign/house. It keeps id="legal" and class
 * "legal-corner" because a production health check greps the served HTML for
 * three phrases inside it every six hours; the phrases are named in
 * docs/DECISIONS.md#legal-corner, which is not served, and never here.
 * Why: docs/DECISIONS.md#legal-corner-cinematic */
.legal-corner {
  padding:0 4.5% 3.5rem;
}
.legal-corner details {
  border-top:1px solid var(--linen-deep);
  padding-top:1.4rem;
}
.legal-corner summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  font-family:var(--font-ui);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--stone-light);
}
.legal-corner summary::-webkit-details-marker {
  display:none;
}
.legal-corner summary .legal-sum-mark {
  font-family:var(--font-display);
  font-size:.95rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink);
}
/* Keyed on the <details>, which is what carries [open] — .legal-corner[open]
 * never matches, and the label read "Open" while the panel stood open. */
.legal-corner details[open] summary .legal-sum-action:after {
  content:' · Close';
}
.legal-corner details:not([open]) summary .legal-sum-action:after {
  content:' · Open';
}
.legal-corner .legal-body {
  margin-top:1.2rem;
  max-width:52rem;
  padding:1.4rem 1.4rem .6rem;
  background:var(--panel);
  border:1px solid var(--linen-deep);
  font-family:var(--font-ui);
  font-size:.82rem;
  line-height:1.8;
  text-transform:none;
  letter-spacing:0;
  color:var(--stone);
}
.legal-corner .legal-body p {
  margin:0 0 .9rem;
}
.legal-corner .legal-body strong {
  font-weight:400;
  letter-spacing:.04em;
  color:var(--ink);
}
.legal-corner .legal-body a {
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}
.footer {
  padding:4rem 4.5% 2rem;
  background:var(--navy);
  color:var(--paper);
}
.footer-top {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:2rem;
  font-family:var(--font-ui);
  font-size:.82rem;
}
.footer-top p {
  color:var(--navy-pale);
  line-height:1.8;
}
.footer-top>a {
  padding-bottom:.5rem;
  border-bottom:1px solid var(--white-rule);
}
.footer-top a span {
  padding-left:1.5rem;
}
.footer-top .back-top {
  font-size:.75rem;
}
.footer-wordmark {
  font-family:var(--font-display);
  font-size:clamp(7rem,23.2vw,28rem);
  line-height:.9;
  letter-spacing:-.045em;
  text-align:center;
  padding:4.5rem 0 2.5rem;
  white-space:nowrap;
}
.footer-wordmark span {
  display:block;
  font-family:var(--font-ui);
  font-size:.8rem;
  letter-spacing:1em;
  padding-left:1em;
  margin-top:1.4rem;
}
.footer-bottom {
  border-top:1px solid var(--white-rule);
  padding-top:1.8rem;
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  font-family:var(--font-ui);
  font-size:.76rem;
  color:var(--navy-pale);
}
.footer-bottom nav {
  display:flex;
  gap:1.5rem;
  align-items:center;
}
.footer-bottom button {
  background:none;
  border:0;
  padding:0;
  font-family:inherit;
  font-size:inherit;
}
.footer-notice {
  font-family:var(--font-ui);
  font-size:.72rem;
  line-height:1.8;
  color:var(--navy-tint);
  max-width:60rem;
  margin-top:2rem;
}
.js-motion .reveal {
  opacity:0;
  transform:translateY(12px);
  transition:opacity .9s ease,transform 1.05s cubic-bezier(.2,.7,.2,1);
}
.js-motion .reveal.in-view {
  opacity:1;
  transform:translateY(0);
}
.motion-off * {
  scroll-behavior:auto!important;
  animation:none!important;
  transition:none!important;
}
.motion-off .reveal {
  opacity:1!important;
  transform:none!important;
}
.motion-off #depth-scene {
  display:none;
}
.motion-off .depth-card {
  transform:none!important;
}
@keyframes scrollHint {
  0% {
    transform:translateY(-120%);
  }
  65%,100% {
    transform:translateY(300%);
  }
}
@media(min-width:1800px) {
  .section-pad {
    padding-left:max(7%,calc((100vw - 1600px)/2));
    padding-right:max(7%,calc((100vw - 1600px)/2));
  }
}
@media(max-width:1100px) {
  #site-nav {
    gap:1.3rem;
  }
  .nav-invitation {
    margin-left:0;
  }
  .hero {
    min-height:49rem;
  }
  .hero-content {
    padding-top:12rem;
  }
  h1 {
    font-size:6.6vw;
  }
  .house-grid {
    gap:7%;
  }
  .house-paragraphs {
    gap:1.7rem;
  }
  .section-pad {
    padding:5rem 5%;
  }
  .contact-grid {
    grid-template-columns:1fr 1fr;
  }
  .contact-grid>a:nth-child(3) {
    padding-left:0;
    border-left:0;
    border-top:1px solid var(--linen-deep);
  }
  .contact-grid>a:nth-child(4) {
    border-top:1px solid var(--linen-deep);
  }
  .category-grid {
    gap:3.5rem 4.5%;
  }
  .category-card:nth-child(even) {
    margin-top:4rem;
  }
  .category-card:nth-child(odd) {
    margin-bottom:4rem;
  }
  .provenance-grid {
    gap:6%;
  }
  .provenance-copy h2 {
    font-size:5.5vw;
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:2rem;
  }
  .site-header {
    padding:1.6rem 5%;
    gap:1rem;
  }
  .wordmark {
    font-size:1.9rem;
  }
  .wordmark span {
    font-size:.55rem;
  }
  .menu-toggle {
    display:flex;
    gap:.8rem;
    align-items:center;
    border:0;
    background:transparent;
    padding:.5rem 0;
    font-family:var(--font-ui);
    font-size:.85rem;
    min-height:44px;
  }
  .menu-lines {
    display:block;
    width:24px;
    height:12px;
    position:relative;
    border-top:1px solid currentColor;
    border-bottom:1px solid currentColor;
    transition:transform .3s;
  }
  .site-header.menu-open {
    background:var(--navy);
    position:fixed;
  }
  .menu-open .menu-lines {
    transform:rotate(-45deg);
    height:0;
    border-bottom:0;
  }
  .menu-open .menu-lines:after {
    content:'';
    position:absolute;
    left:0;
    top:-1px;
    width:24px;
    height:1px;
    background:currentColor;
    transform:rotate(90deg);
  }
  #site-nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:var(--navy);
    padding:1rem 5% 2rem;
    flex-direction:column;
    align-items:stretch;
    gap:.3rem;
    font-size:1.1rem;
    border-top:1px solid var(--white-rule);
  }
  .menu-open #site-nav {
    display:flex;
  }
  #site-nav a {
    padding:.9rem 0;
  }
  .nav-invitation {
    border-top:1px solid var(--white-rule);
    margin-top:.5rem;
    display:flex;
    justify-content:space-between;
  }
  body.menu-is-open {
    overflow:hidden;
  }
  .hero {
    height:auto;
    min-height:52rem;
    min-height:max(48rem,100svh);
    max-height:none;
  }
  .hero-picture img {
    object-position:53% 50%;
  }
  .hero-shade {
    background:linear-gradient(90deg,var(--hero-dark),var(--hero-middle) 75%),linear-gradient(0deg,var(--hero-dark),transparent 65%,var(--hero-top));
  }
  .hero-content {
    padding:10.5rem 5% 12rem;
    max-width:100%;
  }
  .hero-eyebrow {
    font-size:.67rem;
    letter-spacing:.1em;
    gap:.6rem;
    margin-bottom:2.2rem;
  }
  h1 {
    font-size:clamp(2.65rem,10.3vw,5.2rem);
    line-height:.99;
  }
  .hero-description {
    font-size:.95rem;
    margin:1.8rem 0 2rem;
  }
  .button {
    font-size:.82rem;
    padding:.9rem 1rem;
    gap:1.5rem;
  }
  .hero-bottom {
    left:5%;
    right:5%;
    bottom:2rem;
  }
  .scroll-link {
    font-size:.7rem;
    gap:.6rem;
  }
  .film-teaser {
    font-size:.83rem;
    gap:.65rem;
  }
  .film-teaser small {
    font-size:.66rem;
    max-width:8rem;
  }
  .play-icon {
    width:2.7rem;
    height:2.7rem;
  }
  .section-pad {
    padding:3.5rem 5%;
  }
  .section-marker {
    font-size:.68rem;
  }
  .section-marker>span:last-child {
    text-align:right;
  }
  .house-grid {
    grid-template-columns:1fr;
    padding-top:2.8rem;
    gap:1.8rem;
  }
  .house-aside {
    display:flex;
    align-items:center;
    gap:2rem;
    padding:0;
  }
  .house-letter {
    font-size:4rem;
  }
  .house-aside p {
    margin:0;
    font-size:.72rem;
  }
  .house-copy h2 {
    font-size:clamp(3.25rem,10.5vw,5rem);
  }
  .house-paragraphs {
    grid-template-columns:1fr;
    gap:1rem;
    margin:1.7rem 0;
  }
  .house-paragraphs p {
    font-size:.98rem;
  }
  .collection {
    padding-top:2.5rem;
  }
  .collection-heading {
    display:block;
    padding:2.7rem 0 2.5rem;
  }
  .collection-heading h2 {
    font-size:clamp(3.15rem,10.5vw,5rem);
  }
  .collection-heading p {
    margin-top:1.6rem;
    max-width:100%;
    font-size:.98rem;
  }
  .category-grid {
    grid-template-columns:1fr;
    gap:3.2rem;
  }
  .category-card:nth-child(n) {
    margin:0;
  }
  .category-photo {
    aspect-ratio:1.13;
  }
  .ledger-plate {
    aspect-ratio:1.13;
    padding:1.2rem;
  }
  .category-heading {
    margin-top:1.2rem;
  }
  .category-heading h3 {
    font-size:2.2rem;
  }
  .category-card>p {
    font-size:.94rem;
  }
  .category-note {
    font-size:.8rem;
    margin-top:.65rem;
  }
  .collection-footnote {
    margin-top:2.5rem;
    font-size:.72rem;
  }
  .film-section {
    padding-top:1rem;
    padding-bottom:1.5rem;
  }
  .film-heading {
    display:block;
    padding:2.3rem 0 1.8rem;
  }
  .film-heading h2 {
    font-size:clamp(3rem,10vw,4.5rem);
  }
  .film-heading>p {
    max-width:28rem;
    margin-top:1.4rem;
  }
  .film-controls {
    column-gap:1.5rem;
    row-gap:0;
    padding:.65rem 0;
  }
  .film-credit {
    flex-basis:100%;
    margin:0;
    padding:.3rem 0 .5rem;
  }
  .provenance-grid {
    grid-template-columns:1fr;
    padding-top:3rem;
    gap:2.8rem;
  }
  .provenance-image img {
    aspect-ratio:1.05;
  }
  .provenance-copy h2 {
    font-size:clamp(3.25rem,10.5vw,5rem);
  }
  .provenance-copy>p {
    font-size:.98rem;
    margin:1.5rem 0;
  }
  .principle {
    gap:1.2rem;
    padding:1.35rem 0;
  }
  .principle h3 {
    font-size:1.7rem;
  }
  .principle p {
    font-size:.88rem;
  }
  .invitation {
    padding-top:4.5rem;
    padding-bottom:4.5rem;
  }
  .invitation .eyebrow {
    font-size:.7rem;
  }
  .invitation h2 {
    font-size:clamp(3.1rem,10.3vw,5rem);
  }
  .invitation-description {
    font-size:.96rem;
    margin:1.7rem auto;
  }
  .join-wrap {
    margin-top:2rem;
  }
  .join-row {
    flex-direction:column;
    background:none;
    gap:.65rem;
  }
  .join-email {
    background:var(--paper);
    min-height:3.5rem;
  }
  .join-submit {
    justify-content:space-between;
    min-height:3.5rem;
    width:100%;
    font-size:.9rem;
  }
  .join-human {
    font-size:.78rem;
  }
  .join-terms {
    font-size:.72rem;
  }
  .correspondence-heading {
    display:block;
    padding:2.8rem 0 2.2rem;
  }
  .correspondence-heading h2 {
    font-size:clamp(3rem,9.7vw,4.8rem);
  }
  .correspondence-heading p {
    max-width:100%;
    margin-top:1.5rem;
    font-size:.95rem;
  }
  .contact-grid h3 {
    font-size:1.5rem;
    gap:.5rem;
  }
  .contact-grid>a {
    padding:1.5rem 1rem 1.5rem 0;
  }
  .contact-grid>a+a {
    padding-left:1rem;
  }
  .contact-grid p {
    font-size:.73rem;
  }
  .faq {
    grid-template-columns:1fr;
    gap:1.4rem;
    padding-top:3.5rem;
  }
  .faq>h3 {
    font-size:2rem;
  }
  .faq-items summary {
    font-size:.89rem;
  }
  .faq-items details p {
    font-size:.85rem;
  }
  .legal-corner {
    padding:0 5% 2.5rem;
  }
  .legal-corner summary {
    flex-direction:column;
    align-items:flex-start;
    gap:.4rem;
  }
  .legal-corner .legal-body {
    padding:1.1rem 1rem .4rem;
  }
  .footer {
    padding:3rem 5% 2rem;
  }
  .footer-top {
    flex-wrap:wrap;
    gap:1.7rem;
    font-size:.78rem;
  }
  .footer-top .back-top {
    display:none;
  }
  .footer-wordmark {
    font-size:24vw;
    padding:3.5rem 0 2rem;
  }
  .footer-wordmark span {
    font-size:.64rem;
  }
  .footer-bottom {
    flex-wrap:wrap;
    gap:1rem;
    font-size:.7rem;
  }
  .footer-bottom>span:nth-child(2) {
    margin-left:auto;
  }
  .footer-bottom nav {
    width:100%;
    justify-content:flex-start;
    gap:1.5rem;
  }
  .footer-bottom nav>a,.footer-bottom nav>button {
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .footer-notice {
    font-size:.68rem;
    margin-top:1rem;
  }
  .js-motion .reveal {
    transform:translateY(8px);
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .js-motion .reveal {
    opacity:1;
    transform:none;
  }
  #depth-scene {
    display:none;
  }
  .depth-card {
    transform:none!important;
  }
}
@media(prefers-contrast:more) {
  .hero-shade {
    background:var(--hero-dark);
  }
  .hero-description,.hero-eyebrow,.film-heading>p:last-child {
    opacity:1;
  }
  .category-status {
    background:var(--navy);
    padding:.25rem .5rem;
  }
  .footer-notice {
    color:var(--paper);
  }
}
#join.join-ready {
  display:flex;
}
/* Main reading copy stays at the reader’s default size on smaller screens. */
@media(max-width:760px) {
  .hero-description,.house-paragraphs p,.collection-heading p,.category-card>p,.film-heading>p:last-child,.provenance-copy>p,.principle p,.invitation-description,.correspondence-heading p,.faq-items details p {
    font-size:1rem;
  }
}
.category-symbol {
  display:none;
}

/* ── forced colours ───────────────────────────────────────────────────────
 * Last in the file, after every rule it overrides. In this mode the browser
 * repaints type in the visitor's own two colours and leaves the photographs
 * where they are, so everything on this page whose legibility came from a
 * scrim needs a real ground, and everything whose edge came from a colour
 * needs a border. System colour keywords only — they are not literals and
 * scripts/check-site.py is right to allow them.
 * Why: docs/DECISIONS.md#forced-colors */
@media (forced-colors: active) {
  .hero-content,
  .invitation-content {
    background:Canvas;
    color:CanvasText;
  }
  .category-status,
  .photo-index,
  .film-credit {
    background:Canvas;
    color:CanvasText;
    padding:.1rem .35rem;
  }
  .category-photo:after,
  .invitation:after {
    display:none;
  }
  .button,
  .film-control,
  .join-submit,
  .join-email,
  .menu-toggle,
  .skip-link,
  #motion-toggle,
  .ledger-plate,
  .legal-corner .legal-body {
    border:1px solid CanvasText;
  }
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  summary:focus-visible {
    outline:2px solid Highlight;
    outline-offset:3px;
  }
}

/* The house principle, closing the provenance chapter. Set as the annotations
 * are: the card notes and this line share one voice. Why: docs/DECISIONS.md#principles-close */
.principles-close {
  margin-top:3rem;
  font-style:italic;
  font-size:1.15rem;
  letter-spacing:.01em;
  color:var(--ink);
}
/* 320px: the footer's bottom line overran the page by 29px — a wrapping nav
 * still carried tablet gaps, and the copyright span pushed against them with
 * margin-left:auto. Below 360 everything stacks and the gaps come down. */
@media (max-width:360px) {
  .footer-bottom { gap:.6rem; font-size:.66rem; }
  .footer-bottom>span:nth-child(2) { margin-left:0; }
  .footer-bottom nav { gap:.9rem 1.1rem; flex-wrap:wrap; }
}

/* ============ The arrival, second decision — 2026-09-08 evening ============
 * Ash chose the linen-at-dusk pantry still, and on a phone chose the
 * photograph over the words: the overlay fought the picture in a 9:19 crop.
 * Below 760 the hero is the image. The headline stays in the document for
 * assistive technology and for search — it is clipped, not display:none —
 * and the page starts speaking one scroll later, which is the point.
 * The shade drops to a floor gradient just deep enough for the two bottom
 * links; the photograph keeps its own dusk. Why: docs/DECISIONS.md#hero-linen */
.hero-picture img { object-position: var(--hero-focus, 50%) 50%; }
@media (max-width: 760px) {
  /* The phone now receives its own portrait plate (whole scene in frame), so
   * the focal trick for cropping the landscape is retired; centre is centre.
   * The scroll cue goes too, on Ash's word: the burger menu is orientation
   * enough and a visitor scrolls a photograph without being told. */
  .hero { --hero-focus: 50%; }
  .hero-eyebrow, .hero-description, .hero .scroll-link { display: none; }
  .hero-content h1 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .hero-shade {
    /* A floor for the two bottom links, and a breath at the top for the
     * wordmark — the dusk sky is pale and paper type sank into it. */
    background: linear-gradient(0deg, var(--hero-dark), transparent 30%),
                linear-gradient(180deg, var(--hero-top), transparent 20%);
  }
}