/* ==========================================================================
   Antonio Nemtisor — a steel-framed glass partition wall.

   The rule that governs everything: matte-black glazing bars are the only line
   ink on this site. There are no borders, dividers, outlines or card edges.
   Every bar you see is a grid gap with the black wall showing through, which is
   why the bars never change thickness when the wall restacks.
   ========================================================================== */

/* --- Faces ---------------------------------------------------------------- */

@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../assets/fonts/overpass-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url('../assets/fonts/overpass-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/overpass-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../assets/fonts/overpass-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* The wall */
  --bar: 13px;           /* glazing bar — never changes thickness */
  --mullion: 20px;       /* heavier perimeter frame */
  --steel: #17181a;
  --steel-hi: #26282c;

  /* Glass */
  --seeded: #e9eae6;
  --clear: #dee1dd;
  --cobalt: #0e43c4;
  --amber: #c4840e;
  --oxblood: #7c1417;

  /* Ink — tinted from the glass, never gray */
  --ink: #14150f;
  --ink-2: #4a4f47;
  --on-cobalt: #ffffff;
  --on-cobalt-2: #c9d6f7;
  --on-oxblood: #ffffff;
  --on-oxblood-2: #eec9c6;
  --on-amber: #14150f;

  /* Type ramp. Ten steps, and every font-size in the system is one of them. */
  --t-2xs: .68rem;
  --t-xs: .74rem;
  --t-sm: .82rem;
  --t-md: .9rem;
  --t-base: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
  --t-lg: 1.15rem;
  --t-title: 1.45rem;
  --t-headline: clamp(1.7rem, 2.7vw, 2.5rem);
  --t-project: clamp(1.9rem, 3.2vw, 2.95rem);
  --t-display: clamp(2.5rem, 4.9vw, 4.6rem);
  --t-display-sm: clamp(2.1rem, 8.6vw, 2.9rem);

  /* The rebate. One hairline weight everywhere, so every edge is the same steel. */
  --rebate-line: rgba(0, 0, 0, .62);
  --rebate-shade: rgba(0, 0, 0, .2);
  --rebate-catch: rgba(255, 255, 255, .42);
  --rebate: inset 0 0 0 1px var(--rebate-line), inset 0 4px 7px var(--rebate-shade),
            inset 0 -2px 0 var(--rebate-catch);
  --rebate-thin: inset 0 0 0 1px var(--rebate-line), inset 0 -1px 0 rgba(255, 255, 255, .3);

  --pad: clamp(1.15rem, 2.1vw, 2.1rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- Reset ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--steel);
  background-image: linear-gradient(176deg, var(--steel-hi), var(--steel) 38%, #101113);
  color: var(--ink);
  font-family: 'Overpass', system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.55;
  font-synthesis-weight: none;
}

h1, h2, h3 { margin: 0; font-weight: 350; letter-spacing: -0.022em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; max-width: 68ch; text-wrap: pretty; }
img, video { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
dl, dd, dt { margin: 0; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--cobalt);
  outline-offset: calc(var(--bar) * -1);
  z-index: 5;
}
.pane--cobalt:focus-visible, .pane--oxblood:focus-visible { outline-color: #fff; }

.skip {
  position: fixed; top: 0; left: 0; z-index: 50;
  padding: .8rem 1.2rem;
  background: var(--cobalt); color: #fff;
  font: 600 var(--t-sm)/1 'Overpass', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transform: translateY(-120%);
}
.skip:focus { transform: none; }

/* --- The wall ------------------------------------------------------------- */

.wall {
  display: flex;
  flex-direction: column;
  gap: var(--bar);
  padding: var(--mullion);
  min-height: 100svh;
}

.bay {
  display: grid;
  gap: var(--bar);
  grid-template-columns: repeat(12, 1fr);
}

/* --- Panes ---------------------------------------------------------------- */

.pane {
  position: relative;
  overflow: hidden;
  background: var(--seeded);
  /* the glass sits back inside the frame: a dark rebate at the top, light
     catching the bottom edge, so the black gap reads as steel with depth */
  box-shadow: var(--rebate);
  min-width: 0;
}
.pane > * { position: relative; z-index: 1; }

/* every pane's glass texture rides on this layer */
.pane::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The glass itself. These are real rolled-glass tiles generated for this site
   (assets/glass/), laid over each pane's own colour with a blend mode — which is
   why one greyscale sheet serves clear, cobalt, amber and oxblood alike. CSS
   gradients were tried first and read as grey blur, not glass. */

/* Seeded white — the calm ground, bubbles caught in the sheet */
.pane--seeded::before {
  background-image: url('../assets/glass/seeded.webp');
  background-size: 480px 480px;
  mix-blend-mode: overlay;
  opacity: .95;
}

/* Clear glass — quieter, for reading */
.pane--clear { background: var(--clear); }
.pane--clear::before {
  background-image:
    linear-gradient(112deg, rgba(255,255,255,.55), transparent 46%, rgba(255,255,255,.3)),
    url('../assets/glass/seeded.webp');
  background-size: cover, 480px 480px;
  mix-blend-mode: overlay;
  opacity: .62;
}

/* Reeded / fluted glass — a row of half-cylinder lenses */
.pane--reeded { background: var(--clear); }
.pane--reeded::before {
  background-image: url('../assets/glass/reeded.webp');
  background-size: 420px 420px;
  mix-blend-mode: overlay;
  opacity: 1;
}

/* Hammered / cathedral glass */
.pane--hammered { background: var(--clear); }
.pane--hammered::before {
  background-image: url('../assets/glass/hammered.webp');
  background-size: 430px 430px;
  mix-blend-mode: overlay;
  opacity: 1;
}

/* Coloured glass — cobalt, amber, oxblood. Reserved, never decorative filler. */
.pane--cobalt   { background: var(--cobalt);  color: var(--on-cobalt); }
.pane--amber    { background: var(--amber);   color: var(--on-amber); }
.pane--oxblood  { background: var(--oxblood); color: var(--on-oxblood); }

.pane--cobalt::before, .pane--amber::before, .pane--oxblood::before {
  background-image:
    linear-gradient(158deg, rgba(255,255,255,.4), transparent 52%),
    radial-gradient(ellipse 70% 45% at 22% 8%, rgba(255,255,255,.3), transparent 70%),
    url('../assets/glass/hammered.webp');
  background-size: cover, cover, 430px 430px;
  mix-blend-mode: overlay;
  opacity: 1;
}

.pane--cobalt p, .pane--cobalt .order-alt { color: var(--on-cobalt-2); }
.pane--oxblood p { color: var(--on-oxblood-2); }

/* --- Typography inside panes ---------------------------------------------- */

.pane--seeded, .pane--clear { color: var(--ink); }
.pane--seeded p, .pane--clear p { color: var(--ink-2); }

/* Monospace earns its place only where the content is literally code or an
   address. Every other label is tracked grotesk small caps, as the world sets. */
.part-v, .link, .slot-label span {
  font-family: 'Overpass Mono', ui-monospace, monospace;
}
.part-k, .flag, .slot-label, .media-cap, dt, .rail-link, .foot-note, .foot-mark,
.btn, .submit, label, .mark-sub {
  font-family: 'Overpass', system-ui, sans-serif;
  font-weight: 500;
}

/* --- Top / bottom rails --------------------------------------------------- */

.bay--rail { grid-template-columns: 3.6fr 2fr 2fr 2fr 2.8fr; }

.wall > .bay--rail:first-of-type {
  position: sticky;
  top: var(--mullion);
  z-index: 20;
}
/* The rail's own bars must be opaque steel, or the page scrolls through the
   gaps between its panes. Extends to cover the mullion and the bar below. */
.wall > .bay--rail:first-of-type::before {
  content: '';
  position: absolute;
  inset: calc(var(--mullion) * -1) calc(var(--mullion) * -1) calc(var(--bar) * -1);
  z-index: -1;
  background: var(--steel);
  background-image: linear-gradient(176deg, var(--steel-hi), var(--steel));
}

.rail-mark {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding: .85rem var(--pad);
  text-decoration: none;
}
.mark { font-size: var(--t-base); letter-spacing: .02em; }
.mark-sub {
  font-size: var(--t-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
}

.rail-link {
  display: flex; align-items: center; justify-content: center;
  padding: .85rem .6rem;
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
  transition: background-color .35s var(--ease);
}
.rail-link:hover { background: #eef0ec; }
.rail-link--cta { white-space: nowrap; letter-spacing: .1em; }
.rail-link--cta:hover { background: #96181c; }
.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.rail-menu {
  display: none;
  align-items: center; justify-content: center;
  padding: .85rem 1.1rem;
  border: 0;
  color: var(--ink);
  cursor: pointer;
}
.rail-link.is-current { background: var(--cobalt); color: #fff; }
.rail-link.is-current::before { opacity: .5; }
/* the contact tab keeps its own glass — it is a destination, not a location */
.rail-link--cta.is-current { background: var(--oxblood); }

/* --- Bay 1 · the elevation ------------------------------------------------ */

.bay--hero {
  grid-template-areas:
    "main main main main main note media media media media media reed"
    "t1   t1   t2   t2   t3   note media media media media media reed"
    "band band band band band band band band band band band band";
  grid-template-rows: minmax(360px, 1fr) minmax(88px, .3fr) auto;
  min-height: calc(100svh - 88px - var(--mullion) * 2);
}

.hero-main {
  grid-area: main;
  display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
  padding: clamp(1.6rem, 3.4vw, 3.2rem);
}
.hero-main h1 { font-size: var(--t-display); }
.lede { font-size: var(--t-lg); max-width: 44ch; }

.hero-note  { grid-area: note; }
.hero-media { grid-area: media; }
.hero-reed  { grid-area: reed; }
.hero-t1 { grid-area: t1; } .hero-t2 { grid-area: t2; } .hero-t3 { grid-area: t3; }

.hero-band { grid-area: band; grid-template-columns: 1.15fr 1fr 1fr; }
.band-item { padding: var(--pad); display: flex; flex-direction: column; gap: .5rem; }
.band-item h2 { font-size: var(--t-lg); letter-spacing: -.01em; }
.band-item p { font-size: var(--t-md); }

/* --- Buttons -------------------------------------------------------------- */

.actions { display: flex; flex-wrap: wrap; gap: var(--bar); }

.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.5rem;
  font-size: var(--t-xs); letter-spacing: .15em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: var(--rebate-thin);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.btn--cobalt { background: var(--cobalt); color: #fff; }
.btn--cobalt:hover { background: #1550e6; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: #eef0ec; }

.ico { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.ico--sm { width: .92em; height: .92em; }

/* --- Media panes ---------------------------------------------------------- */

.pane--media { background: #0f1012; margin: 0; }

/* The capture is taken out of the flow, exactly as the empty slot was: a pane is
   sized by the wall around it, never by the aspect ratio of the footage inside. */
.pane--media video, .pane--media picture, .pane--media > img { position: absolute; inset: 0; }
.pane--media video, .pane--media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A console screen too wide for its opening is matted rather than cropped — losing
   the edge columns of a kitchen display costs more than two bands of dark glass. */
.pane--media.is-wide video, .pane--media.is-wide img { object-fit: contain; }

/* Site captures lead with the hero, so they crop from the bottom. */
.site-media video, .site-media img { object-position: 50% 0; }

/* An empty pane is unglazed glass, not a black hole. Keeping it light keeps the
   wall a light wall — a placeholder should not out-weigh the real content. */
.media-slot {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 1rem;
  background: var(--clear);
  background-image:
    linear-gradient(118deg, rgba(255,255,255,.5), transparent 50%, rgba(255,255,255,.3)),
    url('../assets/glass/hammered.webp');
  background-size: cover, 430px 430px;
  background-blend-mode: normal, overlay;
}
.slot-label {
  margin: 0; text-align: center;
  font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  display: flex; flex-direction: column; gap: .45rem;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.slot-label span { color: var(--ink-2); letter-spacing: .09em; font-size: var(--t-2xs); }

.pane--media:has(.media-slot) .media-cap {
  background: linear-gradient(transparent, color-mix(in srgb, var(--clear) 96%, transparent));
  color: var(--ink);
}
.media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  pointer-events: none;
  padding: .7rem .95rem;
  background: linear-gradient(transparent, rgba(10,11,12,.88));
  color: #e6e9e4;
  transition: color .3s var(--ease);
  font-size: var(--t-2xs); letter-spacing: .12em; text-transform: uppercase;
}

/* The signature: glass frosts the footage until you look at it. A real element
   rather than a pseudo — it can be inspected, and backdrop-filter behaves. */
.frost { display: none; }
.js .frost {
  display: block;
  position: absolute; inset: 0; z-index: 3;
  /* glass you can see through and reach through: a recording that falls back to
     controls must still be clickable underneath */
  pointer-events: none;
  background: rgba(226, 229, 224, .62);
  backdrop-filter: blur(11px) saturate(.7);
  -webkit-backdrop-filter: blur(11px) saturate(.7);
  transition: opacity 1.1s var(--ease);
}
.js .pane--media.is-lit .frost { opacity: 0; }

/* --- Project bays --------------------------------------------------------- */

.bay--head { grid-template-columns: 9fr 3fr; }
.head-pane { padding: var(--pad); display: flex; flex-direction: column; gap: .55rem; }
.head-pane h2 { font-size: var(--t-headline); }

.bay--project {
  grid-template-rows: auto 1fr auto;
  align-items: stretch;
}
.project--a {
  grid-template-areas:
    "nm nm nm nm nm md md md note ph  ph  ph"
    "pt pt pt pt pt md md md note ph  ph  ph"
    "sp sp sp sp sp md md md note tex tex tex";
}
.project--b {
  grid-template-areas:
    "ph  ph  ph note md md md nm nm nm nm nm"
    "ph  ph  ph note md md md pt pt pt pt pt"
    "tex tex tex note md md md sp sp sp sp sp";
}

.pj-name { grid-area: nm; padding: var(--pad); display: flex; flex-direction: column; gap: .7rem; }
.pj-name h3 { font-size: var(--t-project); }
.pj-media  { grid-area: md; min-height: 420px; }
.pj-note   { grid-area: note; }
.pj-media2 { grid-area: ph; min-height: 200px; }
.pj-tex    { grid-area: tex; }
.pj-spec   { grid-area: sp; }

.parts {
  grid-area: pt;
  display: grid;
  gap: var(--bar);
  grid-template-columns: 3fr 2fr;
}
.parts > li:nth-child(3) { grid-column: 1; }
.part {
  padding: .95rem var(--pad);
  display: flex; flex-direction: column; gap: .3rem; justify-content: center;
}
.part-k { font-size: var(--t-xs); letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.part-v { font-size: var(--t-xs); letter-spacing: .02em; color: var(--ink-2); line-height: 1.4; }

.pj-spec { padding: var(--pad); display: grid; gap: .6rem; align-content: center; }
.pj-spec > div { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.pj-spec dt {
  flex: 0 0 6.2rem;
  font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-2);
}
/* the value wraps inside its own column rather than dropping below the key */
.pj-spec dd { font-size: var(--t-md); color: var(--ink); flex: 1 1 0; min-width: 0; }

.flag {
  display: inline-block;
  padding: .18rem .55rem;
  background: #cdd1cb; color: var(--ink);
  font-size: var(--t-2xs); letter-spacing: .13em; text-transform: uppercase;
  box-shadow: inset 0 0 0 1px var(--rebate-line);
}
.flag--cobalt { background: var(--cobalt); color: #fff; }
.flag--amber  { background: var(--amber);  color: var(--on-amber); }

/* --- Client sites --------------------------------------------------------- */

.bay--sites { grid-template-columns: 5fr 4fr 3fr; }
.site { display: grid; gap: var(--bar); min-width: 0; }
.site { grid-template-rows: auto 1fr; }
/* a fixed shallow crop: the pane never zooms so far into a capture that the
   headline is lost, and columns still differ in height because they differ in width */
.site-media { aspect-ratio: 16 / 10; min-height: 0; }
.site-body { padding: var(--pad); display: flex; flex-direction: column; gap: .6rem; }
.site-body h3 { font-size: var(--t-title); }
.site-body p { font-size: var(--t-md); }

.link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  font-family: 'Overpass Mono', monospace;
  font-size: var(--t-xs); letter-spacing: .05em;
  text-decoration: none; color: var(--ink);
}
.link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Approach ------------------------------------------------------------- */

.bay--approach {
  grid-template-areas:
    "lead lead lead lead one one one one one two two two"
    "tex  note note note one one one one one two two two";
  grid-template-rows: auto 1fr;
}
.ap-lead { grid-area: lead; padding: var(--pad); display: flex; align-items: center; }
.ap-lead h2 { font-size: var(--t-headline); }
.ap-one { grid-area: one; }
.ap-two { grid-area: two; }
.ap-tex { grid-area: tex; }
.ap-note { grid-area: note; padding: var(--pad); display: flex; align-items: center; }
.ap-note p { font-size: var(--t-sm); letter-spacing: .04em; }
.ap-one, .ap-two { padding: var(--pad); display: flex; flex-direction: column; gap: .7rem; }
.ap-one h3, .ap-two h3 { font-size: var(--t-title); }

/* --- About ---------------------------------------------------------------- */

.bay--about { grid-template-columns: 7fr 1fr 4fr; }
.about-body { padding: clamp(1.5rem, 3vw, 2.8rem); display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.about-body h2 { font-size: var(--t-headline); margin-bottom: .3rem; }
.about-meta { padding: var(--pad); display: flex; align-items: center; }
.about-meta dl { display: grid; gap: .75rem; width: 100%; }
.about-meta dt { font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.about-meta dd { font-size: var(--t-md); }

/* --- The order bay -------------------------------------------------------- */

.bay--order { grid-template-columns: 5fr 7fr; align-items: stretch; }

.order-lead {
  padding: clamp(1.6rem, 3.2vw, 3rem);
  display: flex; flex-direction: column; gap: 1rem; justify-content: center;
}
.order-lead h2 { font-size: var(--t-project); }
.order-alt { font-size: var(--t-sm); margin-top: .6rem; }
.order-alt a { text-underline-offset: 4px; }

.order-form {
  display: grid;
  gap: var(--bar);
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
}
.field { padding: .85rem var(--pad) 1rem; display: flex; flex-direction: column; gap: .45rem; }
.field--half { grid-column: span 1; }
.field--full { grid-column: span 2; }

label { font-size: var(--t-2xs); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }

/* No underline: the glazing bar is the only line ink, so the control is the
   pane, and selection floods its frame — the world's own focus behaviour. */
input[type=text], input[type=email], textarea, select {
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: .15rem 0;
  width: 100%;
  border-radius: 0;
}
textarea { resize: vertical; min-height: 6.5rem; }
select {
  appearance: none;
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a4f47' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1rem center;
  background-size: 1.05rem;
  cursor: pointer;
}
input:focus, textarea:focus, select:focus { outline: none; }
.field { transition: box-shadow .25s var(--ease), background-color .25s var(--ease); }
.field:focus-within {
  background: #eef0ec;
  box-shadow:
    inset 0 0 0 2px var(--cobalt),
    inset 0 4px 7px var(--rebate-shade),
    inset 0 -2px 0 var(--rebate-catch);
}
.field.is-bad { box-shadow: inset 0 0 0 2px #9a1116, inset 0 4px 7px var(--rebate-shade); }

.err { font-size: var(--t-xs); color: #9a1116; letter-spacing: .01em; }


.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.submit {
  grid-column: span 1;
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  padding: 1.15rem 1.5rem;
  border: 0;
  font-size: var(--t-sm); letter-spacing: .16em; text-transform: uppercase;
  color: #fff;
  cursor: pointer;
  transition: background-color .35s var(--ease);
}
.submit:hover:not(:disabled) { background: #1550e6; }
.submit:disabled { cursor: progress; opacity: .75; }

.form-status {
  grid-column: span 2;
  margin: 0;
  padding: 0 .2rem;
  font-size: var(--t-xs); letter-spacing: .06em;
  color: var(--on-oxblood-2);
  min-height: 1.2rem;
}
.form-status.is-bad { color: #ffc9c4; }

/* the pane floods when the message lands */
.order-sent {
  grid-column: 1 / -1;
  padding: clamp(1.6rem, 3.2vw, 3rem);
  display: flex; flex-direction: column; gap: .7rem; justify-content: center;
}
.order-sent h3 { font-size: var(--t-title); color: #fff; }
.order-sent p { color: var(--on-cobalt-2); }

/* --- Footer --------------------------------------------------------------- */

.bay--foot .foot-mark, .bay--foot .foot-note {
  display: flex; align-items: center;
  padding: .85rem var(--pad);
  font-size: var(--t-xs); letter-spacing: .1em;
}

.foot-note { color: var(--ink-2); text-transform: uppercase; }

/* ==========================================================================
   Restack. Bays become bays of a narrower wall; bar thickness never changes.
   ========================================================================== */

@media (max-width: 1180px) {
  .bay--hero {
    grid-template-areas:
      "main main main main main main main note media media media media"
      "t1   t1   t2   t2   t3   t3   reed reed media media media media"
      "band band band band band band band band band band band band";
  }
  .pj-media { min-height: 340px; }
}

@media (max-width: 900px) {
  /* The glazing bar holds its thickness; only the perimeter frame narrows,
     because a 20px surround eats a phone. */
  :root { --pad: 1.15rem; --mullion: 13px; }

  .bay, .bay--rail, .bay--head, .bay--sites, .bay--about, .bay--order,
  .bay--approach, .bay--project, .hero-band, .order-form, .parts {
    grid-template-columns: 1fr;
    grid-template-areas: none;
    grid-template-rows: none;
  }
  .bay > *, .site, .parts > li { grid-column: 1 / -1 !important; grid-area: auto !important; }

  .bay--hero { min-height: 0; }

  /* the wall keeps two texture panes; the rest would be noise on a phone */
  .hero-t1, .hero-t3, .pj-tex, .ap-tex, .about-tex { display: none; }
  .hero-note, .pj-note { min-height: 54px; }
  .hero-reed, .hero-t2 { min-height: 54px; }

  .hero-media, .pj-media { min-height: 62vh; }
  .site-media { min-height: 210px; }

  /* Stacked, the second capture is no longer a strip beside the main pane but a
     pane of its own, so it takes the shape of what it holds: a phone screen
     stays a phone screen, a kitchen display stays a kitchen display, and neither
     is cropped to a letterbox or matted into one. */
  .pj-media2 { min-height: 0; }
  .project--a .pj-media2 { aspect-ratio: 900 / 1624; }
  .project--b .pj-media2 { aspect-ratio: 720 / 746; }

  /* The rail keeps the mark and the one action always reachable; the sections
     fold behind a menu pane rather than vanishing. */
  .bay--rail { grid-template-columns: 1fr auto auto; }
  .bay--rail > * { grid-column: auto !important; }
  .wall > .bay--rail:first-of-type .rail-menu { display: flex; }
  .wall > .bay--rail:first-of-type .rail-link:not(.rail-link--cta) { display: none; }
  /* the mark, the menu and the one action hold row one; the sections fold below */
  .wall > .bay--rail:first-of-type .rail-mark { grid-area: 1 / 1 !important; }
  .wall > .bay--rail:first-of-type .rail-menu { grid-area: 1 / 2 !important; }
  .wall > .bay--rail:first-of-type .rail-link--cta { grid-area: 1 / 3 !important; }
  .wall > .bay--rail:first-of-type.is-open .rail-link:not(.rail-link--cta) {
    display: flex;
    grid-column: 1 / -1 !important;
  }
  .rail-link--cta { padding: .85rem 1.1rem; }
  .bay--foot { grid-template-columns: 1fr; }
  .bay--foot > * { grid-column: 1 / -1 !important; }

  .field--half, .field--full, .submit, .form-status { grid-column: 1 / -1 !important; }

  .bay--foot { gap: var(--bar); }
  .foot-note { display: none; }
}

@media (max-width: 480px) {
  .hero-main h1 { font-size: var(--t-display-sm); }
  .mark-sub { display: none; }
}

/* ==========================================================================
   Motion. One idea: glass brightens. Nothing slides, ever.
   ========================================================================== */

/* Decorative panes start as unlit glass, so the brightening has somewhere to
   come from. Without JS this rule never applies and the wall is simply lit. */
.js [data-glass] { opacity: .28; will-change: opacity; }

@media (prefers-reduced-motion: reduce) {
  .js .frost { opacity: 0 !important; transition: none; }
  .js [data-glass] { opacity: 1 !important; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}