/* ============================================================
   BARNES DESIGN WORKS - components
   ============================================================ */

/* ---------- DRAWINGS ON PAPER ----------
   The sheets are exported from the PDF with a transparent background,
   so the linework sits straight on the paper with no white plate behind
   it and no blend mode to break inside a clipped or filtered parent.
   On the dark ground the same file is inverted: alpha survives, black
   ink becomes white ink.                                            */
.drawing { position: relative; }
.drawing img { width: 100%; }
.band--ink .drawing img { filter: invert(1); }

/* Reveal wipe used on every drawing plate.
   Gated on .js so that if the script never runs, every drawing is
   simply visible instead of clipped away. */
.js .wipe { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease-soft); }
.js .wipe.is-in { clip-path: inset(0 0 0 0); }

/* ---------- HERO ---------- */
.hero { padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) 0; position: relative; }
.hero__grid {
  display: grid;
  gap: clamp(2rem, 1rem + 5vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(2rem, 1rem + 3vw, 4rem); }
}
.hero__copy { padding-top: clamp(0.5rem, 2vw, 2.5rem); }
/* The kicker line above is the page's h1; the tagline is set as a paragraph
   so it keeps its size without competing as the main heading. */
.hero__title { font-size: var(--step-5); margin-block: 1.1rem 1.6rem; max-width: none; }
.hero__title .ln { display: block; }
.hero__lede { margin-bottom: 2.25rem; }

/* The drawing plate. Bleeds to the right edge on wide screens. */
.hero__plate { position: relative; }
@media (min-width: 64rem) {
  .hero__plate { margin-right: calc(var(--gutter) * -1); }
  /* Keep the plate from running so far past the fold that the caption
     under it is never seen. */
  .hero__plate .drawing img {
    max-height: min(76vh, 860px);
    width: auto;
    margin-inline: auto;
  }
}
.hero__tags {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--graphite);
  padding-top: 1rem; margin-top: 1rem;
  border-top: 1px solid var(--rule);
}
.hero__tags b { font-weight: 500; color: var(--ink); }

/* Data strip beneath the hero: the drawing sheet's dimension row */
.datastrip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
@media (min-width: 48rem) { .datastrip { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.datastrip__cell {
  padding: 1.4rem 1.25rem 1.4rem 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 48rem) {
  .datastrip__cell { border-bottom: 0; padding-block: 1.6rem; }
  .datastrip__cell:last-child { border-right: 0; }
}
.datastrip__cell:nth-child(2n) { border-right: 0; padding-left: 1.25rem; }
@media (min-width: 48rem) {
  .datastrip__cell:nth-child(2n) { border-right: 1px solid var(--rule); padding-left: 0; }
  .datastrip__cell + .datastrip__cell { padding-left: 1.5rem; }
}
.datastrip__k {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--graphite);
  display: block; margin-bottom: 0.45rem;
}
.datastrip__v { font-family: var(--display); font-size: var(--step-2); line-height: 1; }

/* ---------- THE COLLECTION (available plans) ---------- */
.collection { display: grid; gap: clamp(2.5rem, 1rem + 6vw, 5rem); }
@media (min-width: 60rem) {
  .collection { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 0.5rem + 2vw, 2.5rem); }
}

.plan-card { display: flex; flex-direction: column; height: 100%; }
.plan-card__fig {
  position: relative; overflow: hidden;
  background: var(--paper-2);
  aspect-ratio: 16 / 10;
  margin-bottom: 1.6rem;
}
.plan-card__fig img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease-soft), filter var(--t-mid) var(--ease);
}
.plan-card:hover .plan-card__fig img { transform: scale(1.035); }

/* Corner brackets tighten on hover: the signature, applied to cards */
.plan-card__fig::before, .plan-card__fig::after {
  content: ""; position: absolute; z-index: 2;
  width: 30px; height: 30px; border: 1px solid rgba(243,241,235,0.9);
  opacity: 0; transition: opacity var(--t-mid) var(--ease), inset var(--t-mid) var(--ease);
}
.plan-card__fig::before { top: 22px; left: 22px; border-right: 0; border-bottom: 0; }
.plan-card__fig::after  { bottom: 22px; right: 22px; border-left: 0; border-top: 0; }
.plan-card:hover .plan-card__fig::before,
.plan-card:hover .plan-card__fig::after,
.plan-card:focus-within .plan-card__fig::before,
.plan-card:focus-within .plan-card__fig::after { opacity: 1; }
.plan-card:hover .plan-card__fig::before { top: 14px; left: 14px; }
.plan-card:hover .plan-card__fig::after  { bottom: 14px; right: 14px; }

.plan-card__status {
  position: absolute; z-index: 3; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--paper); color: var(--ink);
  padding: 0.6em 1em;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.plan-card__status::before {
  content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}
/* A plan still being drawn gets the sage marker, so "for sale" and
   "not yet" never share a colour. */
.plan-card__status--soon { color: var(--sage); }
.plan-card__status--soon::before { background: none; border: 1px solid var(--sage); }
.plan-card__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.75rem 1.5rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
.plan-card__name { font-family: var(--display); font-size: var(--step-3); line-height: 1; }
.plan-card__name a { text-decoration: none; }
.plan-card__name a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.plan-card { position: relative; }
.plan-card__price { font-family: var(--mono); font-size: var(--step-0); letter-spacing: 0.06em; }

.specrow {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem;
  padding-block: 1.1rem;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite);
}
.specrow b { font-weight: 500; color: var(--ink); }
.plan-card__desc { color: var(--ink-2); margin-bottom: 1.5rem; }
.plan-card__foot { margin-top: auto; }

/* ---------- COMING SOON ---------- */
/* Each card draws its own right and bottom rule, so a short last row
   leaves an open space instead of a grey block when the count changes. */
.soon-grid { display: grid; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
@media (min-width: 42rem) { .soon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .soon-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.soon-card {
  background: var(--paper);
  box-shadow: inset -1px -1px 0 var(--rule);
  padding: clamp(1.5rem, 1rem + 2vw, 2.25rem);
  display: flex; flex-direction: column; gap: 1.5rem;
  transition: background var(--t-mid) var(--ease);
}
.soon-card:hover { background: var(--paper-2); }
.soon-card__fig {
  aspect-ratio: 4 / 3; display: grid; place-items: center;
  overflow: hidden;
}
.soon-card__fig svg { width: 100%; height: 100%; }
.soon-card__fig img { width: 100%; height: 100%; object-fit: contain; }
.soon-card__label {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--sage);
}
.soon-card__label::before {
  content: ""; width: 6px; height: 6px; border: 1px solid var(--sage); border-radius: 50%;
}
.soon-card__name { font-family: var(--display); font-size: var(--step-2); line-height: 1.05; margin-top: 0.5rem; }
.soon-card__note { font-size: var(--step--1); color: var(--graphite); margin-top: 0.6rem; }

.soon-foot {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: baseline;
  justify-content: space-between;
  margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--rule);
  font-size: var(--step--1); color: var(--graphite);
}

/* ---------- PHILOSOPHY ---------- */
.philo { display: grid; gap: clamp(2.5rem, 1rem + 6vw, 5rem); align-items: center; }
@media (min-width: 62rem) { .philo { grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); } }
.philo__points { margin-top: 2.5rem; display: grid; gap: 0; }
.philo__point {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 1.25rem;
  padding-block: 1.35rem; border-top: 1px solid var(--rule-ink);
  align-items: baseline;
}
.philo__point:last-child { border-bottom: 1px solid var(--rule-ink); }
.philo__point dt { font-family: var(--mono); font-size: var(--step--2); color: var(--accent-lift); letter-spacing: 0.14em; }
.philo__point dd { margin: 0; }
.philo__point strong { font-family: var(--display); font-size: var(--step-1); font-weight: 400; display: block; margin-bottom: 0.3rem; }
.philo__point p { font-size: var(--step--1); color: var(--paper-muted); max-width: 44ch; }

/* ---------- QUESTIONS (Plans page) ----------
   The philosophy list, redrawn for the paper ground. */
.faq { display: grid; gap: 0; max-width: 60rem; }
.faq__item { display: grid; gap: 0.35rem; padding-block: 1.35rem; border-top: 1px solid var(--rule); }
.faq__item:last-child { border-bottom: 1px solid var(--rule); }
.faq__item dt { font-family: var(--display); font-size: var(--step-1); font-weight: 400; }
.faq__item dd { margin: 0; color: var(--ink-2); max-width: 60ch; }
@media (min-width: 58rem) { .faq__item { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: baseline; } }

/* ---------- FULL BLEED DRAWING PLATE ---------- */
.plate-feature { overflow: hidden; }
.plate-feature__fig { position: relative; }
.plate-feature__cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite);
}
.plate-feature__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
@media (min-width: 62rem) { .plate-feature__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; } }

/* ---------- SERVICES / CUSTOMIZATION ---------- */
.split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 58rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.split--wide-left { }
@media (min-width: 58rem) { .split--wide-left { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }

/* ---------- PLAN DETAIL PAGE ---------- */
.pdp-hero { padding-block: clamp(2rem, 1rem + 4vw, 4rem) 0; }
.pdp-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 3.5rem); }
@media (min-width: 66rem) { .pdp-hero__grid { grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); align-items: start; } }
.pdp-hero__fig { position: relative; overflow: hidden; background: var(--paper-2); }
.pdp-hero__fig img { width: 100%; }

.pdp-buy { position: relative; }
@media (min-width: 66rem) { .pdp-buy { position: sticky; top: 6.5rem; } }
.pdp-buy__price {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--display); font-size: var(--step-3); line-height: 1;
  margin-block: 1.25rem 0.5rem;
}
.pdp-buy__price small { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }
.pdp-buy__note { font-size: var(--step--1); color: var(--graphite); margin-top: 1rem; }
.pdp-buy .btn { margin-top: 1.5rem; }

.buy-status {
  margin-top: 1rem; font-size: var(--step--1);
  padding: 0.9em 1.1em; border-left: 2px solid var(--accent);
  background: var(--accent-wash); color: var(--ink);
  display: none;
}
.buy-status[data-show="true"] { display: block; }

/* Spec table */
.spec { border-top: 1px solid var(--rule); }
.spec__row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem; align-items: baseline;
  padding-block: 0.95rem; border-bottom: 1px solid var(--rule);
}
.spec__k { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); }
.spec__v { font-family: var(--display); font-size: var(--step-1); line-height: 1; }

/* Big four-up key info */
.keyinfo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-ink); border: 1px solid var(--rule-ink); }
@media (min-width: 48rem) { .keyinfo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.keyinfo__cell { background: var(--ink); color: var(--paper); padding: clamp(1.4rem, 1rem + 2vw, 2.25rem); }
.keyinfo__k { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-muted); display: block; margin-bottom: 0.6rem; }
.keyinfo__v { font-family: var(--display); font-size: var(--step-3); line-height: 1; }
.keyinfo__v sub { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.12em; vertical-align: baseline; color: var(--paper-muted); margin-left: 0.35em; }

/* ---------- GALLERY ---------- */
.gallery { display: grid; gap: 1.5rem; }
@media (min-width: 46rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gallery__item { grid-column: span 1; }
.gallery__item--wide { grid-column: 1 / -1; }

.gfig {
  position: relative; display: block; width: 100%;
  background: var(--paper-2); border: 1px solid var(--rule);
  padding: 0; cursor: zoom-in; overflow: hidden;
  text-align: left;
}
/* Every tile shares one aspect so the grid reads as a contact sheet.
   Photographs fill it, drawings sit inside it whole. */
.gfig__img { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.gfig img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-soft); }
.gfig--line { background: var(--paper); }
/* Sheets are landscape 4:3, so give them their own box rather than
   letterboxing them inside the photographic one. */
.gfig--line .gfig__img { aspect-ratio: 4 / 3; padding: clamp(0.6rem, 1.4vw, 1.1rem); }
.gfig--line img { object-fit: contain; }
.gfig:hover img { transform: scale(1.02); }
.gfig--line:hover img { transform: scale(1.015); }
.gfig__cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 0.9rem 1.1rem; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite);
}
.gfig__cap b { font-weight: 500; color: var(--ink); }
.gfig__zoom { opacity: 0; transition: opacity var(--t-fast) var(--ease); }
.gfig:hover .gfig__zoom, .gfig:focus-visible .gfig__zoom { opacity: 1; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 21, 25, 0.94);
  display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(0.75rem, 2vw, 1.5rem);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.lightbox[data-open="true"] { opacity: 1; visibility: visible; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  color: var(--paper); font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding-bottom: 0.75rem;
}
/* A definite track lets max-height resolve, so tall drawings fit the
   screen the way the landscape renderings do instead of scrolling. */
.lightbox__stage {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center; overflow: auto; min-height: 0;
}
.lightbox__stage img {
  max-width: 100%; max-height: 100%; width: auto; object-fit: contain;
  background: #fff;
}
.lightbox__foot { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-top: 0.75rem; }
.lb-btn {
  background: none; border: 1px solid rgba(243,241,235,0.35); color: var(--paper);
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.lb-btn:hover { background: rgba(243,241,235,0.12); border-color: var(--paper); }
.lb-count { color: var(--paper-muted); font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.16em; min-width: 6ch; text-align: center; }

/* ---------- INCLUDED / LISTS ---------- */
.checklist { display: grid; gap: 0; margin-top: 1.5rem; }
.checklist li {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.85rem;
  padding-block: 0.9rem; border-top: 1px solid var(--rule); align-items: baseline;
}
.checklist li:last-child { border-bottom: 1px solid var(--rule); }
.checklist svg { width: 13px; height: 13px; color: var(--accent); align-self: center; }
.checklist b { font-weight: 500; }
.checklist span { color: var(--graphite); font-size: var(--step--1); display: block; margin-top: 0.15rem; }

.notlist li { color: var(--graphite); }
.notlist svg { color: var(--graphite-soft); }

/* ---------- FORMS ---------- */
.form { display: grid; gap: 1.5rem; }
.field { display: grid; gap: 0.55rem; }
.field label {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite);
}
.field label .opt { text-transform: none; letter-spacing: 0.04em; }
.field input, .field textarea, .field select {
  background: transparent;
  border: 1px solid var(--rule-strong);
  padding: 0.85em 1em;
  font-family: var(--body); font-size: var(--step-0);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  width: 100%;
}
.field textarea { min-height: 9.5rem; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ink-2); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); background: rgba(255,255,255,0.45);
  box-shadow: 0 0 0 3px rgba(168, 97, 28, 0.14);
}
.field input[type="file"] { padding: 0.6em 0.7em; font-family: var(--mono); font-size: var(--step--1); }
.field__hint { font-size: var(--step--1); color: var(--graphite); }
@media (min-width: 44rem) { .form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }

.form__note { font-size: var(--step--1); color: var(--graphite); }
.form-status { display: none; padding: 1em 1.2em; border-left: 2px solid var(--accent); background: var(--accent-wash); font-size: var(--step--1); }
.form-status[data-show="true"] { display: block; }

/* ---------- ABOUT ---------- */
.about-hero__grid { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .about-hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }

.cv { display: grid; gap: 0; }
.cv__entry {
  display: grid; gap: 0.4rem 2.5rem;
  padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-top: 1px solid var(--rule);
}
.cv__entry:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 52rem) { .cv__entry { grid-template-columns: 11rem minmax(0, 1fr); align-items: baseline; } }
.cv__when { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--graphite); }
.cv__what strong { font-family: var(--display); font-size: var(--step-2); font-weight: 400; line-height: 1.1; display: block; }
.cv__where { font-size: var(--step--1); color: var(--graphite); margin-top: 0.35rem; display: block; }
.cv__list { margin-top: 1rem; display: grid; gap: 0.5rem; }
.cv__list li { position: relative; padding-left: 1.35rem; color: var(--ink-2); font-size: var(--step--1); max-width: 62ch; }
.cv__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 1px; background: var(--accent);
}

.tagcloud { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.tag {
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--rule-strong); padding: 0.5em 0.85em; color: var(--ink-2);
}
.band--ink .tag { border-color: var(--rule-ink); color: var(--paper-muted); }

.award {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem;
  padding-block: 1.35rem; border-top: 1px solid var(--rule-ink); align-items: start;
}
.award:last-child { border-bottom: 1px solid var(--rule-ink); }
.award svg { width: 18px; height: 18px; color: var(--accent-lift); margin-top: 0.25rem; }
.award strong { font-weight: 500; display: block; }
.award span { color: var(--paper-muted); font-size: var(--step--1); }

/* ---------- LEGAL ---------- */
.legal { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); }
@media (min-width: 64rem) { .legal { grid-template-columns: 16rem minmax(0, 1fr); align-items: start; } }
.legal__toc { position: sticky; top: 6.5rem; }
.legal__toc ol { display: grid; gap: 0.1rem; counter-reset: toc; }
.legal__toc a {
  display: block; padding: 0.42em 0; font-size: var(--step--1);
  color: var(--graphite); text-decoration: none;
  border-left: 1px solid var(--rule); padding-left: 0.9rem;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.legal__toc a:hover, .legal__toc a.is-active { color: var(--ink); border-color: var(--accent); }
@media (max-width: 63.99rem) { .legal__toc { position: static; } }

.legal__body h2 {
  font-family: var(--display); font-size: var(--step-2); font-weight: 400;
  line-height: 1.15; margin-top: 3rem; margin-bottom: 0.9rem;
  padding-top: 1.5rem; border-top: 1px solid var(--rule);
  scroll-margin-top: 6.5rem;
}
.legal__body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal__body h3 { font-family: var(--body); font-size: var(--step-0); font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.45rem; }
.legal__body p { margin-bottom: 0.9rem; color: var(--ink-2); }
.legal__body ul { display: grid; gap: 0.5rem; margin-bottom: 1.1rem; }
.legal__body ul li { position: relative; padding-left: 1.35rem; color: var(--ink-2); max-width: 68ch; }
.legal__body ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 1px; background: var(--rule-strong); }

.callout {
  background: var(--accent-wash); border-left: 2px solid var(--accent);
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  margin-block: 1.5rem;
}
/* Direct child only. A <strong> inside a paragraph is emphasis in a
   sentence and must stay in the body face, not turn into a heading. */
.callout > strong { display: block; font-family: var(--display); font-size: var(--step-1); font-weight: 400; margin-bottom: 0.5rem; }
.callout p strong { font-weight: 600; }
.callout p { margin-bottom: 0; }
.callout--note { background: var(--paper-2); border-left-color: var(--rule-strong); }

.editme {
  display: inline-block; font-family: var(--mono); font-size: var(--step--2);
  background: var(--sage-wash); color: var(--sage);
  padding: 0.25em 0.55em; letter-spacing: 0.06em;
  border: 1px dashed var(--sage);
}

/* ---------- PAGE HEADER (interior pages) ---------- */
.phead { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) 0; }
.phead__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items: end; }
@media (min-width: 62rem) { .phead__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.crumbs { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.16em; text-transform: uppercase; color: var(--graphite); margin-bottom: 1.25rem; }
.crumbs a { text-decoration: none; border-bottom: 1px solid var(--rule-strong); }
.crumbs a:hover { color: var(--accent-text); border-color: var(--accent); }
.crumbs span { margin-inline: 0.55em; }

/* ---------- FOOTER ---------- */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) 2rem; }
.foot__top { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 4rem); }
/* Four columns need room for the email address, so they pair up two by two
   until the screen is wide enough to set them in one row. */
@media (min-width: 56rem) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .foot__top { grid-template-columns: minmax(0, 0.9fr) repeat(3, minmax(0, 1fr)); } }
.foot__logo img { width: 74px; }
.foot__blurb { color: var(--paper-muted); font-size: var(--step--1); margin-top: 1.5rem; max-width: 34ch; }
.foot h2 { font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper-muted); font-weight: 500; margin-bottom: 1.25rem; }
.foot__list { display: grid; gap: 0.7rem; }
.foot__list a { overflow-wrap: anywhere; text-decoration: none; font-size: var(--step-0); transition: color var(--t-fast) var(--ease); }
.foot__list a:hover { color: var(--accent-lift); }
.foot__bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; justify-content: space-between;
  margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule-ink);
  font-family: var(--mono); font-size: var(--step--2); letter-spacing: 0.12em; color: var(--paper-muted);
}
.foot__bar nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; }
.foot__bar a { text-decoration: none; }
.foot__bar a:hover { color: var(--accent-lift); }

/* ---------- ORDER / SUCCESS ---------- */
.order { min-height: 60vh; display: grid; align-content: center; }
.order__box { border: 1px solid var(--rule); background: var(--paper); padding: clamp(1.75rem, 1rem + 4vw, 3.5rem); }
.order__state { display: none; }
.order__state[data-show="true"] { display: block; }
.spinner {
  width: 26px; height: 26px; border: 1px solid var(--rule); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.dl-list { display: grid; gap: 1rem; margin-top: 1.75rem; }
.dl-item {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem; border: 1px solid var(--rule); background: var(--paper-2);
}
.dl-item strong { font-family: var(--display); font-size: var(--step-1); font-weight: 400; }

/* ---------- REVEALS ---------- */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js .rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: 90ms; }
.rv-d2 { transition-delay: 180ms; }
.rv-d3 { transition-delay: 270ms; }
.rv-d4 { transition-delay: 360ms; }

/* Linework that draws itself */
.js .draws path, .js .draws line, .js .draws rect,
.js .draws circle, .js .draws polyline, .js .draws polygon {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
  transition: stroke-dashoffset 1.6s var(--ease-soft);
}
.js .draws.is-in path, .js .draws.is-in line, .js .draws.is-in rect,
.js .draws.is-in circle, .js .draws.is-in polyline, .js .draws.is-in polygon { stroke-dashoffset: 0; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .environment { animation: none; }
  .js .rv, .rv { opacity: 1; transform: none; }
  .js .wipe, .wipe { clip-path: none; }
  .brk::before, .brk::after { opacity: 1; transform: none; }
  .js .draws path, .js .draws line, .js .draws rect,
  .js .draws circle, .js .draws polyline, .js .draws polygon {
    stroke-dasharray: none; stroke-dashoffset: 0;
  }
}

/* Decorations never crowd short screens */
@media (max-height: 30rem) {
  .environment { display: none; }
}

/* ---------- FEATURE PLAN (plans index) ----------
   A wider skeleton than the homepage grid so the two pages never read
   as the same template stamped twice. */
.feature { display: grid; gap: clamp(1.75rem, 1rem + 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) {
  .feature { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .feature--flip > *:first-child { order: 2; }
}
.feature + .feature { margin-top: clamp(3rem, 2rem + 5vw, 6rem); padding-top: clamp(3rem, 2rem + 5vw, 6rem); border-top: 1px solid var(--rule); }
.feature__fig { position: relative; overflow: hidden; background: var(--paper-2); }
.feature__fig img { width: 100%; transition: transform 1.4s var(--ease-soft); }
.feature:hover .feature__fig img { transform: scale(1.03); }
.feature__fig--line { background: transparent; display: grid; place-items: center; padding: clamp(1rem, 3vw, 3rem); }
.feature__fig--line img { transform: none !important; }
.feature__name { font-family: var(--display); font-size: var(--step-4); line-height: 1; margin-block: 0.75rem 1rem; }
.feature__name a { text-decoration: none; }
.feature__price { font-family: var(--mono); font-size: var(--step-1); letter-spacing: 0.04em; }
.feature__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.25rem; align-items: baseline; margin-bottom: 1.25rem; }
.feature__desc { color: var(--ink-2); margin-bottom: 1.75rem; }

.statuspill {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--mono); font-size: var(--step--2);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.statuspill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.statuspill--soon { color: var(--sage); }
.statuspill--soon::before { background: none; border: 1px solid var(--sage); }

/* Interior page headlines sit a step below the homepage hero, so the
   homepage keeps the biggest voice on the site. */
.phead h1.display { font-size: var(--step-4); }

/* A card showing a sketch rather than a rendering: the drawing sits on
   the paper whole, instead of being cropped to fill like a photograph. */
.plan-card__fig--sketch { background: var(--paper-2); }
.plan-card__fig--sketch img { object-fit: contain; padding: 6% 8%; }
.plan-card__fig--sketch::before, .plan-card__fig--sketch::after { border-color: var(--rule-strong); }

/* ---------- PLAN VIEW ----------
   The marketing floor plan is portrait, so it gets its own column and
   its own aspect rather than being letterboxed into a landscape tile. */
.planview { display: grid; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .planview { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr); } }

.gfig--plan { background: var(--paper); border-color: var(--rule); }
.gfig--plan .gfig__img { aspect-ratio: 3 / 4; padding: clamp(1rem, 2.5vw, 2.25rem); }
.gfig--plan img { object-fit: contain; }
.gfig--plan:hover img { transform: scale(1.015); }

/* ---------- SHEET INDEX ---------- */
.sheetlist { display: grid; gap: 0; }
.sheetlist li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem;
  padding-block: 0.78rem; border-top: 1px solid var(--rule);
  align-items: baseline;
}
.sheetlist li:last-child { border-bottom: 1px solid var(--rule); }
.sheetlist b {
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.12em; color: var(--accent);
}
.sheetlist span { font-size: var(--step--1); }
.band--ink .sheetlist li { border-color: var(--rule-ink); }
.band--ink .sheetlist b { color: var(--accent-lift); }
.band--ink .sheetlist span { color: var(--paper); }

/* The whole set as one image, beside the sheet index at half the shell.
   It keeps its own proportions rather than the gallery crop, and holds
   its place while the longer list beside it scrolls past. */
.gfig--set .gfig__img { aspect-ratio: auto; }
.gfig--set img { height: auto; }
.band--ink .gfig--set { border-color: var(--rule-ink); }
@media (min-width: 58rem) { .gfig--set { position: sticky; top: 7rem; } }

/* An interior page whose header runs straight into a dark band needs
   real air between the two, or the band reads as a cut. */
.phead--roomy { padding-bottom: var(--band); }

/* Sketches sit on the paper with margin around them, never edge to edge. */
.drawing img[src*="/graphics/"] { padding: 2% 3%; }

/* A split whose two halves are lists rather than a block and an image
   should start together at the top, not float to a shared centre. */
.split--top { align-items: start; }

/* Three renderings across on wide screens. The source images top out at
   about 1600px, so displaying them any larger goes soft on a retina
   screen. At a third of the shell they stay crisp. */
@media (min-width: 62rem) {
  .gallery--views { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- PLAN PAGE H1 ----------
   The plan number stays the large display line; the description under it
   is part of the same heading, set small in the kicker style. */
.h1-sub {
  display: block; margin-top: 0.7rem;
  font-family: var(--mono); font-size: var(--step--2); font-weight: 500;
  letter-spacing: 0.16em; line-height: 1.5; text-transform: uppercase;
  color: var(--graphite);
}