/* Baldosa site styles. Tokens live in tokens.css (copied from site/brand/). */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 62% 100%;
  font-style: normal;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 0.07em; }
:target { scroll-margin-top: 1.5rem; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
p { max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: 0.9em; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; background: var(--surface); padding: 0.1em 0.35em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -10000px; top: 0.5rem; z-index: 10; background: var(--ink); color: var(--bg); padding: 0.6rem 1rem; font-weight: 600; text-decoration: none; }
.skip:focus { left: var(--margin); }
.wrap { padding-inline: var(--margin); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- type roles ---------- */
.display, .head {
  font-stretch: 62%;
  font-variation-settings: "wdth" var(--display-wdth);
  font-weight: var(--display-wght);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.86;
  text-wrap: balance;
  hyphens: none;
}
.head { font-size: var(--step-head); }
.lead { font-size: var(--step-lead); line-height: 1.3; max-width: 40ch; }
.small { font-size: var(--step-small); line-height: 1.45; }
.muted { color: var(--muted); }

/* ---------- header ---------- */
.site-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.5rem) var(--margin);
  position: relative;
  z-index: 2;
}
.site-head__brand { display: block; color: var(--ink); text-decoration: none; }
.site-head__brand svg { height: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem); width: auto; }
.site-head__nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); font-size: var(--step-body); }
.site-head__nav a { text-decoration-color: transparent; transition: text-decoration-color var(--t-hover) ease; }
.site-head__nav a[aria-current="page"] { text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .site-head__nav a:hover { text-decoration-color: currentColor; } }
@media (max-width: 30em) { .site-head__nav .only-wide { display: none; } }

/* ---------- buttons and forms ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.5rem;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
/* The ring sits outside the button, so it takes the ground's ink (carbon on
   light, cal on dark): currentColor would match the ground and vanish. */
.button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.button[disabled], .button[aria-busy="true"] { cursor: progress; opacity: 0.75; }
@media (hover: hover) and (pointer: fine) { .button:hover { background: var(--almagre); color: var(--cal); } }

.field {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  color: var(--ink);
  border: 0;
  border-bottom: 2px solid var(--muted);
  border-radius: var(--radius);
  font-size: max(1rem, var(--step-body));
}
.field::placeholder { color: var(--muted); opacity: 1; }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-bottom-color: var(--ink); }
.field[aria-invalid="true"] { border-bottom-color: var(--almagre); }
.label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.label .muted { font-weight: 400; }

.check { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; font-size: var(--step-small); line-height: 1.45; max-width: 46ch; }
.check input { width: 1.375rem; height: 1.375rem; margin: 0; accent-color: var(--ink); cursor: pointer; }
.check span { padding-top: 0.05rem; }
.hp { position: absolute; left: -10000px; top: auto; overflow: hidden; }
.form-status { min-height: 1.5em; font-size: var(--step-small); font-weight: 600; }
.form-status:empty { min-height: 0; }
.form-status[data-tone="error"] { color: var(--almagre); }
@media (prefers-color-scheme: dark) { .form-status[data-tone="error"] { color: #e8a29c; } }

/* ---------- hero: a sentence with a row of tiles in it ----------
   The hero is as tall as what it holds: the headline under the header, then
   the lede and the form a fixed step below it, so no stretch of empty ground
   opens between them at any viewport height (a 100svh hero left a band of
   about 420px at 1440 by 900). The strip is the cenefa drawing (brand/logo),
   seven tiles of 13 by 20, so it is 4.55 times as wide as it is tall. At cap
   height (0.72em) that is 3.276em; with "HOMES WITH OLD" and two gaps the
   line is 9.62em, and 9.94vw fills the width at 1440px between the margins. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
}
.hero__line {
  margin: clamp(2.5rem, 10vh, 6.5rem) 0 0;
  display: flex;
  align-items: baseline;
  gap: 0.18em;
  padding-inline: var(--margin);
  font-size: clamp(3.5rem, 9.94vw, 11rem);
  white-space: nowrap;
  min-width: 0;
}
.hero__words { flex: none; }
/* The strip may shrink if the text runs a few pixels wide; the drawing then
   scales down to the space, keeping its tiles square, rather than cropping. */
.hero__strip {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 3.276em;
  height: 0.72em;
  overflow: hidden;
  align-self: baseline;
}
.hero__strip img { width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
.hero__act { padding-inline: var(--margin); display: grid; justify-items: center; margin-top: 2rem; }
.hero__act .signup { width: min(100%, 38rem); display: grid; gap: 0.9rem; }
.hero__lede { padding-inline: var(--margin); text-align: center; margin: clamp(2rem, 6vh, 3.5rem) auto 0; max-width: 44ch; font-size: var(--step-lead); line-height: 1.3; }
/* Wide screens: the supporting line and the form share one top edge under the
   headline, at opposite ends, instead of a centred stack. */
@media (min-width: 64em) {
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-inline: var(--margin); }
  .hero > .site-head { grid-column: 1 / -1; padding-inline: 0; }
  .hero__line { grid-column: 1 / -1; padding-inline: 0; }
  .hero__lede { grid-column: 1 / 6; grid-row: 3; text-align: left; margin: clamp(2.5rem, 7vh, 4.5rem) 0 0; padding: 0; max-width: 30ch; }
  .hero__act { grid-column: 7 / 13; grid-row: 3; justify-items: stretch; margin: clamp(2.5rem, 7vh, 4.5rem) 0 0; padding: 0; }
  .hero__act .signup, .hero__act .signup-row { width: 100%; }
}

.signup-row { display: flex; width: min(100%, 38rem); }
.signup-row .field { flex: 1 1 auto; min-width: 0; }
.signup-row .button { flex: none; }
.hero__act .check { justify-self: start; }

@media (max-width: 47.99em) {
  .hero { gap: 1.75rem; padding-top: 0.5rem; }
  .hero__line { margin: 0; flex-wrap: wrap; white-space: normal; font-size: 18.6vw; gap: 0 0.16em; row-gap: 0.04em; }
  .hero__words--1 { white-space: nowrap; }
  .hero__words--1 { flex-basis: 100%; }
  .hero__strip { height: 0.72em; }
  .hero__act { justify-items: stretch; margin-top: 0; }
  .hero__lede { text-align: left; margin: 0; }
  .signup-row { flex-direction: column; gap: 0.5rem; width: 100%; }
  .signup-row .button { width: 100%; }
  .hero__act .check { justify-self: start; }
}

/* ---------- hero concepts (HERO in pages.mjs, all of them at /hero-preview/) ----------
   The art is inline SVG from brand/tools/heroes.py. Sizes and breakpoints are
   container queries on .hv, so a concept shown at phone width inside a wide
   window gets the layout a phone gets; 48em and 64em are the site's own
   breakpoints. Where art meets the page it carries a rim in --muted, the grout
   colour that holds 5.7:1 on cal and 6.6:1 on carbon, so no tile edge melts
   into the ground in either mode. */
.hv { container: hv / inline-size; }
.hv__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; padding: 0.5rem var(--margin) clamp(1.5rem, 4vh, 3rem); }
.hv__title { margin: 0; font-size: 18.6cqi; }
.hv__words { display: block; white-space: nowrap; }
.hv__lede { font-size: var(--step-lead); line-height: 1.3; max-width: 30ch; }
.hv__act .signup { display: grid; gap: 0.9rem; }
.hv__act .signup-row { width: 100%; }
.hv__art svg, .hv__strip svg { width: 100%; height: 100%; }
@container hv (max-width: 47.99em) {
  .hv .only-wide { display: none; }
  .hv .signup-row { flex-direction: column; gap: 0.5rem; }
  .hv .signup-row .button { width: 100%; }
}
@container hv (min-width: 48em) {
  .hv__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; padding-top: 0; }
  .hv__title { grid-column: 1 / -1; margin-top: clamp(2.5rem, 10vh, 6.5rem); font-size: 11.4cqi; }
  .hv__words { display: inline; }
  .hv__lede { grid-column: 1 / 6; grid-row: 2; margin-top: clamp(2.5rem, 7vh, 4.5rem); }
  .hv__act { grid-column: 7 / 13; grid-row: 2; margin-top: clamp(2.5rem, 7vh, 4.5rem); }
  .hv__art { grid-column: 1 / -1; grid-row: 3; }
}

/* strip: the art stands in the headline where the word "tiles" would be, as
   the cenefa does, and runs on past the right edge of the screen. */
.hv--strip .hv__title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.16em; row-gap: 0.04em; }
.hv--strip .hv__words--1 { flex-basis: 100%; }
.hv__strip { flex: 1 1 0; min-width: 2em; height: 0.72em; margin-right: calc(-1 * var(--margin)); border: 1px solid var(--muted); border-right: 0; }
@container hv (min-width: 48em) {
  .hv--strip .hv__title { flex-wrap: nowrap; column-gap: 0.18em; font-size: clamp(3.5rem, 9.94cqi, 11rem); }
  .hv--strip .hv__words--1 { flex-basis: auto; }
}

/* band: the art lies under the form, the full width of the screen. */
.hv--band .hv__art { margin-inline: calc(-1 * var(--margin)); }
.hv--c .hv__art { height: clamp(13.75rem, 24cqi, 22rem); }
@container hv (min-width: 48em) { .hv--band .hv__art { margin-top: clamp(2.5rem, 6vh, 4rem); } }

/* the sampler: six specimens with their captions, three to a row on phones. */
.hv--d .hv__art { margin-inline: 0; }
.hv-sampler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
.hv-spec svg { aspect-ratio: 1; height: auto; border: 1px solid var(--muted); }
.hv-spec__cap { margin-top: 0.45rem; font-size: var(--step-small); line-height: 1.3; color: var(--muted); }
.hv-spec__cap b { display: block; font-weight: 600; color: var(--ink); }
@container hv (min-width: 48em) { .hv-sampler { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gutter); } }

/* split: the art stands beside the headline and the form on wide screens. */
.hv--b .hv__art { aspect-ratio: 1; margin-inline: calc(-1 * var(--margin)); border-block: 1px solid var(--muted); }
.hv--e .hv__art { aspect-ratio: 4 / 3; }
@container hv (min-width: 48em) {
  .hv--split .hv__title { font-size: 9.6cqi; }
  .hv--split .hv__words { display: block; }
  .hv--b .hv__art { margin-inline: 0; border: 1px solid var(--muted); }
  .hv--split .hv__art { margin-top: clamp(2.5rem, 6vh, 4rem); }
}
@container hv (min-width: 64em) {
  .hv--split .hv__title { grid-column: 1 / 8; grid-row: 1; font-size: 9.6cqi; }
  .hv--split .hv__lede { grid-column: 1 / 7; grid-row: 2; }
  .hv--split .hv__act { grid-column: 1 / 8; grid-row: 3; margin-top: 2rem; }
  .hv--e .hv__title, .hv--e .hv__act { grid-column: 1 / 7; }
  .hv--split .hv__art { grid-row: 1 / 4; margin-top: clamp(2.5rem, 10vh, 6.5rem); }
  /* The hallway takes the height of the text beside it and never sets it. */
  .hv--b .hv__art { grid-column: 8 / 13; aspect-ratio: auto; height: 0; min-height: 100%; }
  .hv--e .hv__art { grid-column: 7 / 13; align-self: center; }
}

/* the hallway at night: the walls go dark and a lamp burns beyond the door. */
@media (prefers-color-scheme: dark) {
  .hv-b-night { fill-opacity: 0.62; }
  .hv-b-spill { fill-opacity: 0; }
  .hv-b-lamp { fill-opacity: 0.88; }
  .hv-b-glow { fill-opacity: 0.3; }
  .hv-b-plant path { fill: #14110f; }
}
.hv-chalk { opacity: 0; }

/* ---------- picks: slips standing on a photograph ---------- */
.picks { position: relative; min-height: min(96svh, 66rem); overflow: hidden; color: var(--cal); background: var(--carbon); display: grid; }
.picks[hidden] { display: none; }
.picks__photo { position: absolute; inset: 0; }
.picks__photo img { width: 100%; height: 100%; object-fit: cover; }
.picks__intro {
  position: relative;
  margin: clamp(4rem, 12vh, 8rem) 0 0 18%;
  max-width: 34rem;
  padding: 1.5rem 1.75rem;
  background: rgb(29 26 23 / 0.55);
  align-self: start;
}
.picks__intro h2 { color: var(--cal); }
.picks__intro p { font-size: var(--step-lead); line-height: 1.3; margin-top: 1rem; }
.slips {
  position: relative;
  align-self: end;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: 12px;
  padding: 0 var(--margin);
  margin-top: 3rem;
  margin-bottom: -3.5rem; /* crops only empty paper: slips pad 7rem below their text */
}
.slip {
  background: var(--paper);
  color: var(--paper-ink);
  padding: 0 0 7rem;
  align-self: end;
  font-size: var(--step-small);
  line-height: 1.45;
}
.slip:nth-child(2) { transform: rotate(-1.2deg) translateY(1.5rem); }
.slip:nth-child(4) { transform: rotate(1.4deg) translateY(-1rem); }
.slip:nth-child(3) { transform: translateY(2.5rem); }
.slip__photo { aspect-ratio: 4 / 3; background: url("/brand/tile-cal.svg") 0 0 / 50% auto repeat, var(--surface); overflow: hidden; }
.slip__photo img { width: 100%; height: 100%; object-fit: cover; }
.slip__body { padding: 1rem 1.1rem 0; display: grid; gap: 0.35rem; }
.slip__price { font-weight: 700; font-variant-numeric: tabular-nums; }
.slip__title { font-weight: 700; font-size: var(--step-body); line-height: 1.25; }
.slip__place { color: var(--muted); }
.slip__blurb { margin-top: 0.35rem; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.slip__link { margin-top: 0.5rem; font-weight: 600; }
.slip__map { width: 5.5rem; height: auto; float: right; margin: 0 0 0.5rem 0.75rem; background: var(--surface); }
@media (prefers-color-scheme: dark) { .slip__place { color: #5a544c; } }
@media (max-width: 47.99em) {
  .picks { min-height: min(100svh, 56rem); }
  .picks__intro { margin: 3rem var(--margin) 0; }

  .slips { grid-auto-columns: 78vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); margin-bottom: -3.5rem; overscroll-behavior-x: contain; }
  .slip { scroll-snap-align: start; }
  .slip:nth-child(n) { transform: none; }
}

/* ---------- intro: one statement, one picture ----------
   The photograph and the statement share a top edge, side by side, with the
   caption under the statement at the photograph's foot. The photograph keeps
   its own proportions, so the floor is shown whole. */
.intro { padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gutter); }
/* Straight after the hero (no picks this week) the intro takes a shorter step,
   so the first screen runs on into it instead of opening a band of ground. */
.picks[hidden] + .intro { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.intro__text { grid-column: 7 / 13; grid-row: 1; font-size: var(--step-lead); line-height: 1.3; max-width: 34ch; }
.intro__figure { grid-column: 1 / 6; grid-row: 1 / 3; }
.intro__figure img { width: 100%; aspect-ratio: 1200 / 901; object-fit: cover; }
.intro__figure, .how figure { overflow: hidden; }
.intro__note { grid-column: 7 / 10; grid-row: 2; align-self: end; margin: 0; font-size: var(--step-small); color: var(--muted); max-width: 26ch; }
@media (max-width: 47.99em) {
  .intro { grid-template-columns: 30% 1fr; grid-template-rows: none; column-gap: 1rem; row-gap: 1.5rem; }
  .intro__text { grid-column: 1 / -1; grid-row: 1; }
  .intro__figure { grid-column: 2; grid-row: 2; }
  .intro__note { grid-column: 1; grid-row: 2; align-self: end; }
}

/* ---------- how it works: photographs down a diagonal ---------- */
.how { padding: 0 var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.how__head { grid-column: 7 / 13; grid-row: 1; align-self: start; }
.how__stage { display: contents; }
.how__stage figure img { width: 100%; object-fit: cover; }
.how__stage p { max-width: 36ch; font-size: var(--step-body); }
.how__stage strong { font-weight: 700; }
.how__s1 figure { grid-column: 1 / 5; grid-row: 1 / 3; }
.how__s1 figure img { aspect-ratio: 3 / 4; }
.how__s1 p { grid-column: 5 / 8; grid-row: 2; align-self: start; padding-top: 1rem; }
.how__s2 figure { grid-column: 6 / 9; grid-row: 3; margin-top: 3rem; }
.how__s2 figure img { aspect-ratio: 1; }
.how__s2 p { grid-column: 9 / 12; grid-row: 3; margin-top: 3rem; align-self: start; }
.how__s3 figure { grid-column: 8 / 13; grid-row: 4; margin-top: 9rem; }
.how__s3 figure img { aspect-ratio: 16 / 10; }
.how__s3 p { grid-column: 4 / 8; grid-row: 4; margin-top: 9rem; align-self: start; padding-right: 1rem; }
.how__head { padding-top: 2rem; }
.how figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 0.5rem; }
@media (max-width: 47.99em) {
  .how { display: flex; flex-direction: column; gap: 1rem; }
  .how__head { order: -1; margin-bottom: 1.5rem; padding-top: 0; }
  .how__stage { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 3.5rem; }
  .how__s1 figure { width: 100%; }
  .how__s2 figure { width: 62%; align-self: flex-end; margin-top: 0; }
  .how__s2 p { margin-top: 0; align-self: flex-end; width: 62%; }
  .how__s3 figure { width: 78%; margin-top: 0; }
  .how__s3 p { margin-top: 0; }
}

/* ---------- words from the listings: a floor you can turn ---------- */
.words { background: var(--invert); color: var(--invert-ink); padding: var(--section) 0; }
.words__head { padding-inline: var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem); }
.words__head h2 { grid-column: 1 / 7; }
.words__head p { grid-column: 8 / 13; color: var(--invert-muted); }
.floor { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.tile { position: relative; aspect-ratio: 1; perspective: 900px; }
.tile__turn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; text-align: center; color: inherit; transform-style: preserve-3d; transition: transform 640ms var(--ease-in-out); }
.tile__face { position: absolute; inset: 0; display: grid; place-items: center; padding: 14%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tile__front { background-size: 100% 100%; }
.t-cal { background-image: url("/brand/tile-cal.svg"); }
.t-almagre { background-image: url("/brand/tile-almagre.svg"); }
.t-carbon { background-image: url("/brand/tile-carbon.svg"); }
.t-ocre { background-image: url("/brand/tile-ocre.svg"); }
.t-verde { background-image: url("/brand/tile-verde.svg"); }
.tile__front .tile__word {
  background: var(--cal);
  color: var(--carbon);
  padding: 0.55em 0.7em;
  font-weight: 700;
  font-size: var(--step-body);
  line-height: 1.15;
  max-width: 100%;
}
.tile__back { background: var(--cemento); color: var(--carbon); transform: rotateY(180deg); font-size: var(--step-small); line-height: 1.4; text-align: left; place-items: center start; }
.tile__back b { display: block; font-weight: 700; margin-bottom: 0.25rem; }
.tile.is-turned .tile__turn { transform: rotateY(180deg); }
/* Carbon ring with a cal ring inside it, so focus reads on every pigment. The
   faces sit in a 3D context that paints over the button's own outline, so the
   rings are drawn on the faces; the outline covers the flat no-script layout. */
.tile__turn:focus-visible { outline: 3px solid var(--carbon); outline-offset: -3px; }
.tile__turn:focus-visible .tile__face { box-shadow: inset 0 0 0 3px var(--carbon), inset 0 0 0 7px var(--cal); } /* taste-skill-ignore: a focus ring, shown only on keyboard focus */
.floor-note { padding: 1.5rem var(--margin) 0; font-size: var(--step-small); color: var(--invert-muted); max-width: none; }
/* Without script every tile shows its word and its meaning, one under the other. */
html:not(.js) .tile { aspect-ratio: auto; perspective: none; }
html:not(.js) .tile__turn { position: static; transform: none; }
html:not(.js) .tile__face { position: static; backface-visibility: visible; }
html:not(.js) .tile__back { transform: none; }
@media (max-width: 63.99em) { .floor { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 47.99em) {
  .floor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .words__head { display: block; }
  .words__head p { margin-top: 1rem; }
  .tile__face { padding: 10%; }
}
@media (prefers-reduced-motion: reduce) {
  .tile__turn { transition: none; }
}

/* ---------- what's in an issue: a printed sheet on a tiled floor ---------- */
.sheet-band { position: relative; padding: var(--section) var(--margin); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); overflow: hidden; }
.sheet-band__photo { position: absolute; inset: 0; }
.sheet-band__photo img { width: 100%; height: 100%; object-fit: cover; }
.sheet {
  position: relative;
  grid-column: 7 / 13;
  max-width: 40rem;
  background: var(--paper);
  color: var(--paper-ink);
  padding: 4rem clamp(1.75rem, 4vw, 4rem);
  text-align: center;
  /* Scalloped top and bottom edges, cut with a mask: nothing visible is a gradient. */
  -webkit-mask: radial-gradient(10px at 50% 0, #0000 98%, #000) 50% 0 / 20px 51% repeat-x, radial-gradient(10px at 50% 100%, #0000 98%, #000) 50% 100% / 20px 51% repeat-x; /* taste-skill-ignore */
  mask: radial-gradient(10px at 50% 0, #0000 98%, #000) 50% 0 / 20px 51% repeat-x, radial-gradient(10px at 50% 100%, #0000 98%, #000) 50% 100% / 20px 51% repeat-x; /* taste-skill-ignore */
}
.sheet h2 { font-size: var(--step-head); }
.sheet__note { margin: 0.75rem auto 0; font-size: var(--step-small); color: #5a544c; max-width: 36ch; }
.sheet__group { margin-top: 3.5rem; }
.sheet__group h3 { font-size: var(--step-body); font-weight: 700; margin-bottom: 1.25rem; }
.sheet__items { display: grid; gap: 1rem; text-align: left; max-width: 26.25rem; margin: 0 auto; }
.sheet__item { display: grid; grid-template-columns: 1fr auto; column-gap: 1.25rem; }
.sheet__item b { font-weight: 600; }
.sheet__item .who { font-weight: 600; text-align: right; }
.sheet__item small { grid-column: 1 / -1; font-size: var(--step-small); color: #5a544c; }
.sheet__end { margin: 3.5rem auto 0; font-size: var(--step-small); max-width: 32ch; }
.sheet__end a { font-weight: 600; }
.photo-credit { position: absolute; right: var(--margin); bottom: 0.75rem; font-size: var(--step-small); color: var(--cal); background: rgb(29 26 23 / 0.6); padding: 0.15rem 0.5rem; max-width: none; }
.photo-credit a { color: inherit; }
@media (max-width: 47.99em) {
  .sheet-band { display: block; padding: 4rem 10px; }
  .sheet { padding: 3rem 1.75rem; max-width: none; }
  .photo-credit { position: relative; right: auto; bottom: auto; display: inline-block; margin-top: 1rem; }
}

/* ---------- the reply card ---------- */
.reply { background: var(--field); color: var(--field-ink); min-height: min(80svh, 56rem); padding: var(--section) var(--margin) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); overflow: hidden; }
.reply__aside { grid-column: 1 / 5; align-self: end; padding-bottom: 4rem; font-size: var(--step-lead); line-height: 1.3; }
.reply__aside p + p { margin-top: 1rem; }
.card {
  grid-column: 6 / 13;
  justify-self: end;
  width: min(100%, 44vw);
  min-width: 0;
  align-self: end;
  background: var(--paper);
  color: var(--paper-ink);
  padding: clamp(2rem, 4vw, 3rem);
  margin-bottom: -60px;
  padding-bottom: calc(clamp(2rem, 4vw, 3rem) + 60px);
  transform: rotate(-2deg);
  transform-origin: 70% 100%;
  text-align: center;
}
.card h2 { font-size: var(--step-head); }
.card__lines { margin: 1rem auto 0; max-width: 36ch; }
.card form { margin-top: 2rem; display: grid; gap: 1.1rem; text-align: left; }
.card .field { background: #d9d4ca; color: var(--carbon); border-bottom-color: #5a544c; }
.card .field::placeholder { color: #5a544c; }
.card .field:focus-visible { outline-color: var(--carbon); border-bottom-color: var(--carbon); }
.card .button:focus-visible { outline-color: var(--carbon); }
.card .check input { accent-color: var(--carbon); }
.card .muted { color: #5a544c; }
.card .button { width: 100%; min-height: 3.5rem; background: var(--carbon); color: var(--cal); }
.card a { color: inherit; }
.card .form-status[data-tone="error"] { color: var(--almagre); }
@media (hover: hover) and (pointer: fine) { .card .button:hover { background: var(--almagre); } }
@media (max-width: 47.99em) {
  .reply { display: block; padding-top: 4rem; }
  .reply__aside { padding-bottom: 2.5rem; }
  .card { width: 92%; margin-inline: auto; transform: rotate(-1deg); padding: 2rem 1.25rem calc(2rem + 52px); margin-bottom: -52px; }
  .card .button { min-height: 3.25rem; }
}

/* ---------- questions beside a tall photograph ---------- */
.faq { padding: 0 var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.faq__text { grid-column: 1 / 6; padding-top: var(--section); }
.faq__facts { margin: 1.5rem 0 2.5rem; display: grid; gap: 0.35rem; font-size: var(--step-body); }
.faq__list { display: grid; gap: 1.75rem; }
.faq details summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; font-size: var(--step-body); font-weight: 600; line-height: 1.3; min-height: 2.75rem; }
.faq details summary::-webkit-details-marker { display: none; }
.faq details summary::after { content: ""; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--t-hover) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details p { margin-top: 0.75rem; color: var(--muted); font-size: var(--step-body); }
.faq details p a { color: var(--ink); }
.faq__photos { grid-column: 7 / 13; position: relative; padding-bottom: 80px; }
.faq__tall { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.faq__square { position: absolute; left: -40px; bottom: 40px; width: 33%; aspect-ratio: 1; object-fit: cover; }
.faq__cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.faq figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 0.5rem; padding-left: calc(33% - 32px); }
@media (max-width: 47.99em) {
  .faq { display: flex; flex-direction: column; }
  .faq__photos { order: -1; padding-bottom: 0; margin-bottom: 1rem; }
  .faq__tall { aspect-ratio: 4 / 5; }
  .faq__square { left: auto; right: 0; bottom: 2.5rem; width: 38%; }
  .faq figcaption { padding-left: 0; padding-right: 40%; }
  .faq__text { padding-top: 2rem; }
  .faq__cta .button { width: 100%; }
}

/* ---------- footer: the address is the headline ---------- */
.site-foot { background: var(--invert); color: var(--invert-ink); min-height: min(90svh, 62rem); padding: 2.5rem var(--margin) 1.5rem; display: grid; grid-template-rows: auto 1fr auto auto; }
.site-foot--short { min-height: min(60svh, 40rem); }
.site-foot__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); font-size: var(--step-small); }
.site-foot__notes { grid-column: 1 / 8; display: grid; gap: 0.35rem; }
.site-foot__notes p { max-width: 52ch; }
.site-foot__notes svg { height: 1.25rem; width: auto; margin-bottom: 0.75rem; color: var(--invert-ink); }
.site-foot__top .to-top { grid-column: 12 / 13; justify-self: end; align-self: start; white-space: nowrap; }
.site-foot__mail {
  align-self: end;
  display: block;
  font-size: clamp(3.5rem, 9.2vw, 11rem);
  margin: 3rem 0 2rem -0.04em;
  color: var(--invert-ink);
  text-decoration: none;
  text-transform: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.site-foot__mail span { display: inline-block; transition: transform var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .site-foot__mail:hover span { transform: translateX(0.04em); } .site-foot__mail:hover { text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.08em; } }
.site-foot__meta { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem 2rem; font-size: var(--step-small); color: var(--invert-muted); align-items: end; }
.site-foot__meta a { color: var(--invert-ink); }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.site-foot__credits { max-width: 60ch; text-align: center; }
.site-foot__legal { text-align: right; }
.site-foot__credit-list { grid-column: 1 / -1; font-size: var(--step-small); color: var(--invert-muted); margin-top: 1.25rem; max-width: none; }
.site-foot__credit-list a { color: var(--invert-muted); }
@media (max-width: 47.99em) {
  .site-foot { min-height: min(80svh, 44rem); }
  .site-foot__top { display: flex; flex-direction: column; gap: 1rem; }
  .site-foot__mail { font-size: 12.4vw; white-space: normal; }
  .site-foot__mail .at { display: block; }
  .site-foot__meta { grid-template-columns: 1fr; }
  .site-foot__credits, .site-foot__legal { text-align: left; }
}

/* ---------- inner pages: a short headline, a column of text ---------- */
.page { padding: clamp(3rem, 10vh, 7rem) var(--margin) var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.page__head { grid-column: 1 / 13; margin-bottom: clamp(2rem, 5vw, 4rem); }
.page__head .head { font-size: clamp(3.5rem, 1.5rem + 8vw, 9rem); }
.page__aside { grid-column: 1 / 5; }
.page__body { grid-column: 6 / 12; }
.page__body > * + * { margin-top: 1.1rem; }
.page__body h2 { font-size: var(--step-lead); font-weight: 700; line-height: 1.25; margin-top: 3rem; }
.page__body h2:first-child { margin-top: 0; }
.page__body ul { padding-left: 1.2rem; display: grid; gap: 0.5rem; max-width: 62ch; }
.page__body dl { display: grid; gap: 1rem; max-width: 62ch; }
.page__body dt { font-weight: 700; }
.page__body dd { color: var(--muted); }
.page__body .lead { max-width: 34ch; }
.page__tile { width: min(100%, 22rem); aspect-ratio: 1; }
.page__tile svg, .page__tile img { width: 100%; height: 100%; }
.page__figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.page__figure figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 0.5rem; }
/* The tile-making video on /about/: a poster that links to YouTube until a
   click, when site.js puts the player in its place at the same size. */
.video { margin-block: 2.25rem; }
.video__screen { position: relative; aspect-ratio: 16 / 9; background: var(--carbon); }
.video__poster, .video__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.video__poster { display: block; text-decoration: none; }
.video__poster img { width: 100%; height: 100%; object-fit: cover; }
.video__poster:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.video__play { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 0.7rem; min-height: 3.25rem; padding: 0 1.25rem; background: var(--accent); color: var(--accent-ink); font-weight: 600; transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.video__play svg { width: 0.75em; height: 0.875em; }
.video__play small { font-size: var(--step-small); font-weight: 400; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .video__poster:hover .video__play { background: var(--almagre); color: var(--cal); } }
.video__frame { border: 0; }
.video figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 0.5rem; }
.state { display: grid; gap: 1.5rem; max-width: 40rem; }
.state .button { justify-self: start; }
.state form { display: grid; gap: 1rem; margin-top: 0.5rem; }
.empty { padding: 2rem; background: var(--surface); }
.issue-list { display: grid; gap: 0; }
.issue-list li { padding: 1.25rem 0; }
.issue-list li + li { border-top: 0; }
.issue-list a { font-size: var(--step-lead); font-weight: 600; }
.issue-list small { display: block; color: var(--muted); }
@media (max-width: 47.99em) {
  .page { display: block; }
  .page__aside { margin-bottom: 2rem; }
  .page__tile { width: 9rem; }
}

/* ---------- operator page (hold) ---------- */
.hold { min-height: min(70svh, 48rem); }
.hold .state p { font-size: var(--step-lead); line-height: 1.35; }

/* ---------- motion ----------
   The hero plays once on load. Below it, parts of each section rise or open
   once as they enter the viewport: site.js adds .is-in, and the class stays,
   so a page read from the top or captured whole shows everything once seen.
   Without script (no .js class) nothing is ever hidden. */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px); animation: rise var(--t-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .hero__act[data-rise] { animation-delay: 300ms; }
  .js .hero__lede[data-rise] { animation-delay: 200ms; }
  /* The tiles are laid left to right. */
  .js .hero__strip[data-shutter], .js .hv__strip[data-shutter] { clip-path: inset(0 100% 0 0); animation: shutter 1100ms var(--ease-in-out) 260ms forwards; }
  /* Concept E: each tile is set on the bed in turn, from the chalked centre
     cross outward; the chalk fades once the floor covers it. CSS only, so
     nothing waits on site.js. */
  .hv-lay { transform-box: fill-box; transform-origin: center; animation: hv-lay 460ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 52ms + 350ms); }
  .hv-chalk { animation: hv-chalk 3.6s linear both; }

  /* Hidden states wait for site.js. If it never runs, reveal-fallback shows
     everything after 3.5 s; site.js adds .reveals to <html> to take over. */
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); animation: reveal-fallback 1ms linear 3.5s forwards; }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Pictures fade and settle; nothing clips them while hidden, because a
     picture clipped to nothing never counts as visible and lazy loading would
     never fetch it. */
  .js [data-reveal-img] img { opacity: 0; transform: scale(1.04); transition: opacity 900ms var(--ease-out), transform 1400ms var(--ease-out); animation: reveal-fallback 1ms linear 3.5s forwards; }
  .js [data-reveal-img] img + img { transition-delay: 180ms; }
  .js [data-reveal-img].is-in img { opacity: 1; transform: none; }
  .js .floor[data-reveal] { opacity: 1; transform: none; animation: none; }
  .js .floor[data-reveal] .tile { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); animation: reveal-fallback 1ms linear 3.5s forwards; }
  .js.reveals [data-reveal], .js.reveals [data-reveal-img] img, .js.reveals .floor[data-reveal] .tile { animation: none; }
  .js .floor[data-reveal].is-in .tile { opacity: 1; transform: none; }
  .js .floor[data-reveal] .tile:nth-child(2) { transition-delay: 45ms; }
  .js .floor[data-reveal] .tile:nth-child(3) { transition-delay: 90ms; }
  .js .floor[data-reveal] .tile:nth-child(4) { transition-delay: 135ms; }
  .js .floor[data-reveal] .tile:nth-child(5) { transition-delay: 180ms; }
  .js .floor[data-reveal] .tile:nth-child(6) { transition-delay: 225ms; }
  .js .floor[data-reveal] .tile:nth-child(7) { transition-delay: 270ms; }
  .js .floor[data-reveal] .tile:nth-child(8) { transition-delay: 315ms; }
  .js .floor[data-reveal] .tile:nth-child(9) { transition-delay: 360ms; }
  .js .floor[data-reveal] .tile:nth-child(10) { transition-delay: 405ms; }
  .js .floor[data-reveal] .tile:nth-child(11) { transition-delay: 450ms; }
  .js .floor[data-reveal] .tile:nth-child(12) { transition-delay: 495ms; }
  @supports (animation-timeline: view()) {
    .drift img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes reveal-fallback { to { opacity: 1; transform: none; } }
@keyframes shutter { to { clip-path: inset(0); } }
@keyframes hv-lay { from { opacity: 0; transform: translateY(-7%) scale(1.06); } }
@keyframes hv-chalk { 0%, 78% { opacity: 0.85; } 100% { opacity: 0; } }
@keyframes drift { from { transform: translateY(-4%) scale(1.08); } to { transform: translateY(4%) scale(1.08); } }

@media print {
  [data-reveal], [data-reveal] .tile, [data-reveal-img] img, [data-rise], .hero__strip, .hero__strip img, .hv__strip, .hv-lay { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
  .hv-chalk { animation: none !important; opacity: 0 !important; }
  .site-head__nav, .hero__act, .hv__act, .reply, .site-foot__mail, .words { display: none; }
  body { background: #fff; color: #000; }
}