/* ==========================================================================
   BOTTLE BUILDERS - Blueprint UI
   Sheet system, drafting linework, cyanotype plates.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Cyanotype sheet */
  --sheet:        #b9d4ea;
  --sheet-deep:   #9cc0de;
  --sheet-pale:   #d3e5f4;

  /* Drafting ink + reproduction line */
  --ink:          #0d2e4c;
  --ink-soft:     #21456c;
  --ink-faint:    rgba(13, 46, 76, 0.58);
  --chalk:        #ffffff;
  --chalk-soft:   rgba(255, 255, 255, 0.62);
  --chalk-faint:  rgba(255, 255, 255, 0.24);

  /* Action */
  --hardhat:      #f5b417;
  --hardhat-deep: #c98d05;

  /* Lifecycle semantics only */
  --rust:         #a63d23;
  --growth:       #1f7a4c;

  /* Grid */
  --unit:         24px;
  --major:        120px;

  /* Type */
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body:    "Archivo", "Helvetica Neue", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Frame */
  --margin:  clamp(14px, 2.2vw, 34px);
  --hair:    1px;
  --nav-h:   62px;
  /* Binding edge down the left of the sheet. It holds the scroll scale and
     nothing else, so the bar and its readout never sit over the copy.
     Zero on small screens, where the scale is not shown at all. */
  --gutter:  0px;

  /* Crumpled paper, generated with an SVG turbulence filter so there is no
     image to download. Sits under the grid, so the drafting lines read as
     printed on a sheet that has been folded and opened out again. */
  --crumple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.009' numOctaves='5' seed='11' stitchTiles='stitch' result='n'/%3E%3CfeDiffuseLighting in='n' lighting-color='%23ffffff' surfaceScale='3.2'%3E%3CfeDistantLight azimuth='55' elevation='58'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23c)'/%3E%3C/svg%3E");
  --crumple-size: 700px 700px;

  --ease:    cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: var(--body);
  font-size: clamp(15.5px, 1.06vw, 17.5px);
  line-height: 1.68;
  color: var(--ink);
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--chalk-faint) var(--hair), transparent var(--hair)),
    linear-gradient(90deg, var(--chalk-faint) var(--hair), transparent var(--hair)),
    linear-gradient(rgba(255,255,255,0.10) var(--hair), transparent var(--hair)),
    linear-gradient(90deg, rgba(255,255,255,0.10) var(--hair), transparent var(--hair)),
    var(--crumple);
  background-size:
    var(--major) var(--major),
    var(--major) var(--major),
    var(--unit) var(--unit),
    var(--unit) var(--unit),
    var(--crumple-size);
  background-blend-mode: normal, normal, normal, normal, multiply;
  background-attachment: fixed;
  overflow-x: hidden;
}

/* Paper tooth. Keeps the flat blue from reading as a plain CSS background. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,0.30), transparent 58%),
    radial-gradient(ellipse at 84% 88%, rgba(13,46,76,0.20), transparent 62%);
}

img, video { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--hardhat); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* --- 2. Type ------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.012em;
  margin: 0;
  text-transform: uppercase;
}

h1 { font-size: clamp(3.1rem, 8.4vw, 8.2rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 4.4rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.9rem); line-height: 0.95; }
h4 { font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.05; }

p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

/* Drafting annotation: every label, tag and number on the sheet. */
.anno {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
}

.anno-lg { font-size: 0.78rem; letter-spacing: 0.16em; }
.anno-ink   { color: var(--ink); }
.anno-chalk { color: var(--chalk); }
.anno-faint { color: var(--ink-faint); }

.lede {
  font-size: clamp(1.08rem, 1.45vw, 1.34rem);
  line-height: 1.58;
  color: var(--ink-soft);
  max-width: 46ch;
}

/* --- 3. Sheet frame ------------------------------------------------------ */

.sheet {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: calc(var(--nav-h) + var(--margin) + 26px) var(--margin)
           calc(var(--margin) + 104px) calc(var(--margin) + var(--gutter));
  display: flex;
  flex-direction: column;
}

/* The drawn border of the sheet. It starts below the fixed navigation, so the
   sheet reads as beginning where the header ends. */
.sheet::before {
  content: "";
  position: fixed;
  top: calc(var(--nav-h) + var(--margin));
  left: calc(var(--margin) + var(--gutter));
  right: var(--margin);
  bottom: var(--margin);
  border: var(--hair) solid var(--chalk-soft);
  pointer-events: none;
  z-index: 2;
}

/* Registration marks at the sheet corners. */
.regmarks {
  position: fixed;
  top: calc(var(--nav-h) + var(--margin));
  left: calc(var(--margin) + var(--gutter));
  right: var(--margin);
  bottom: var(--margin);
  pointer-events: none;
  z-index: 3;
}
.regmarks span {
  position: absolute;
  width: 15px; height: 15px;
  border: var(--hair) solid var(--chalk);
}
.regmarks span:nth-child(1) { top: -1px;    left: -1px;    border-right: 0; border-bottom: 0; }
.regmarks span:nth-child(2) { top: -1px;    right: -1px;   border-left: 0;  border-bottom: 0; }
.regmarks span:nth-child(3) { bottom: -1px; left: -1px;    border-right: 0; border-top: 0; }
.regmarks span:nth-child(4) { bottom: -1px; right: -1px;   border-left: 0;  border-top: 0; }

/* --- 4. Navigation (drawing index, top margin of the sheet) -------------- */

/* Pinned to the very top of the viewport and fully opaque, so no page content
   ever passes above or behind it. The grid is repainted here with the same
   fixed attachment as the body, which keeps the paper continuous. */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--margin) 0 calc(var(--margin) + var(--gutter));
  background-color: var(--sheet);
  background-image:
    linear-gradient(var(--chalk-faint) var(--hair), transparent var(--hair)),
    linear-gradient(90deg, var(--chalk-faint) var(--hair), transparent var(--hair)),
    linear-gradient(rgba(255,255,255,0.10) var(--hair), transparent var(--hair)),
    linear-gradient(90deg, rgba(255,255,255,0.10) var(--hair), transparent var(--hair)),
    var(--crumple);
  background-size:
    var(--major) var(--major),
    var(--major) var(--major),
    var(--unit) var(--unit),
    var(--unit) var(--unit),
    var(--crumple-size);
  background-blend-mode: normal, normal, normal, normal, multiply;
  background-attachment: fixed;
  border-bottom: var(--hair) solid var(--ink-faint);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  min-width: 0;
}
.brand img {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: var(--hair) solid var(--chalk);
  flex: none;
}
.brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.16rem;
  line-height: 0.86;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand-sub { font-size: 0.56rem; letter-spacing: 0.2em; color: var(--ink-faint); }

.nav-links { display: flex; align-items: center; gap: 4px; }

.nav-links a {
  position: relative;
  padding: 9px 13px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.2s var(--ease);
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 13px; right: 13px; bottom: 3px;
  height: var(--hair);
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Current sheet: bracketed, the way a drawing index marks the active sheet. */
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  background: var(--ink);
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 17px;
  margin-left: 6px;
  background: var(--hardhat);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: var(--hair) solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.nav-cta:hover { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.nav-cta:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.nav-cta::after { display: none; }

.nav-toggle {
  display: none;
  width: 42px; height: 38px;
  padding: 0;
  background: transparent;
  border: var(--hair) solid var(--ink-faint);
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 11px; right: 11px;
  height: var(--hair);
  background: var(--ink);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 18px; }
.nav-toggle span:nth-child(3) { top: 23px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- 5. Title block (docked bottom right, like a real drawing) ----------- */

.titleblock {
  position: fixed;
  right: var(--margin);
  bottom: var(--margin);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, auto));
  /* Never wider than the sheet. Fixed to the corner, so overflow here leaves
     the viewport instead of pushing anything. */
  max-width: calc(100vw - (var(--margin) * 2));
  /* Fully opaque. A translucent panel lets copy show through it, which reads
     as two pieces of text sitting on top of each other. */
  background: var(--sheet);
  border: var(--hair) solid var(--chalk-soft);
  box-shadow: 0 4px 18px rgba(13, 46, 76, 0.12);
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
/* The label steps off the sheet while you scroll, so nothing reads underneath it. */
.titleblock.away { transform: translateY(calc(100% + var(--margin))); opacity: 0; }
.titleblock div {
  padding: 9px 14px;
  border-right: var(--hair) solid var(--chalk-faint);
}
.titleblock div:last-child { border-right: 0; }
.titleblock dt { margin: 0 0 3px; font-size: 0.53rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.titleblock dd { margin: 0; font-family: var(--mono); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.05em; overflow-wrap: anywhere; }

/* --- 6. Drafting primitives --------------------------------------------- */

/* Dimension line: extension ticks, arrowheads, and a label that measures a
   real quantity instead of a length. This is the site's signature device. */
.dim {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 0 0;
  margin: 0 0 22px;
  max-width: 560px;
}
.dim::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 9px;
  border-left: var(--hair) solid var(--ink);
  border-right: var(--hair) solid var(--ink);
}
.dim-line {
  position: relative;
  flex: 1;
  height: var(--hair);
  background: var(--ink);
}
.dim-line::before,
.dim-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0; height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  margin-top: -4px;
}
.dim-line::before { left: 0;  border-right: 8px solid var(--ink); }
.dim-line::after  { right: 0; border-left:  8px solid var(--ink); }
/* The label may shrink and wrap. It used to be flex: none, which told it never
   to give ground, so a long label pushed straight past the edge of the sheet
   and off the viewport. That is invisible at the sizes we set, and obvious the
   moment a visitor raises the browser's minimum font size, which clamps
   computed type without changing the viewport. min-width:0 is the part that
   actually does the work: a flex item defaults to min-width:auto and will not
   shrink below its content no matter what flex-shrink says. */
.dim-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Leader line with a circled callout, used to point at things. */
.callout {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.callout-mark {
  flex: none;
  width: 27px; height: 27px;
  display: grid;
  place-items: center;
  border: var(--hair) solid var(--ink);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
}

/* Approval / revision stamp. Rotated, overprinted. */
.stamp {
  display: inline-block;
  padding: 7px 13px;
  border: 2px solid currentColor;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: rotate(-5deg);
  opacity: 0.82;
}
.stamp-rust   { color: var(--rust); }
.stamp-growth { color: var(--growth); }

/* Section heading with an eyebrow that carries the sheet reference. */
.head { margin: 0 0 30px; }
.head .anno { display: block; margin-bottom: 12px; color: var(--ink-faint); }

/* Hairline rule that reads as a fold line on the sheet. */
.foldline {
  height: var(--hair);
  background: repeating-linear-gradient(
    90deg, var(--ink-faint) 0 9px, transparent 9px 17px
  );
  border: 0;
  margin: 0;
}

/* --- 7. Cyanotype plates (photography) ---------------------------------- */

/* Photos print as blueprint plates and return to full colour on hover, so
   the page moves from drawn to built when you touch it. */
.plate {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border: var(--hair) solid var(--chalk-soft);
}
.plate img,
.plate video {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(1.04);
  mix-blend-mode: screen;
  transition: filter 0.6s var(--ease), opacity 0.6s var(--ease);
}
.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sheet);
  mix-blend-mode: multiply;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.plate:hover img,
.plate:hover video,
.plate.is-built img,
.plate.is-built video {
  filter: none;
  mix-blend-mode: normal;
}
.plate:hover::after,
.plate.is-built::after { opacity: 0; }

.plate-cap {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  padding: 6px 11px;
  background: var(--ink);
  color: var(--chalk);
}

/* Ambient background plate: photography set into the sheet behind content. */
.bg-plate {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  border: var(--hair) solid var(--chalk-faint);
}
.bg-plate img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.2);
  mix-blend-mode: luminosity;
  opacity: 0.2;
}

/* --- 8. Buttons ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 15px 24px;
  text-decoration: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: var(--hair) solid var(--ink);
  background: var(--hardhat);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  /* The label and its arrow are flex items, so without this they stay on one
     line at any size and set a floor the column cannot shrink below. Never
     triggers at the sizes we set; it only matters once the type floor is
     raised past what a phone can fit. */
  flex-wrap: wrap;
  transition: transform 0.16s var(--ease), box-shadow 0.16s var(--ease);
  cursor: pointer;
}
.btn:hover  { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }

.btn-ghost { background: transparent; box-shadow: 4px 4px 0 var(--chalk-soft); }
.btn-ghost:hover { background: var(--chalk); box-shadow: 2px 2px 0 var(--chalk-soft); }

.btn-arrow { font-size: 1.05em; line-height: 1; }

/* --- 9. Stat rack (traction) -------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  border-top: var(--hair) solid var(--ink-faint);
  border-left: var(--hair) solid var(--ink-faint);
}
.stat {
  padding: 18px 18px 16px;
  border-right: var(--hair) solid var(--ink-faint);
  border-bottom: var(--hair) solid var(--ink-faint);
  background: rgba(255,255,255,0.14);
}
.stat-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 3.5vw, 3.1rem);
  line-height: 0.84;
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 9px;
}
.stat-num sup { font-size: 0.42em; vertical-align: super; margin-left: 2px; }
.stat-label { display: block; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; }
.stat-tag { display: block; margin-top: 8px; color: var(--ink-faint); }

/* --- 10. Cards ----------------------------------------------------------- */

.card {
  position: relative;
  padding: 22px;
  background: rgba(255,255,255,0.17);
  border: var(--hair) solid var(--chalk-soft);
}
.card h3 { margin-bottom: 10px; }
.card .anno { color: var(--ink-faint); margin-bottom: 11px; display: block; }
.card p { font-size: 0.97rem; line-height: 1.6; color: var(--ink-soft); }

.grid-3 { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }

/* --- 11. Mascot ---------------------------------------------------------- */

.mascot { display: block; height: auto; filter: drop-shadow(0 6px 14px rgba(13,46,76,0.22)); }

/* SVG builder crew: hairline figures that live on the linework. */
.crew { stroke: var(--ink); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.crew .hat { fill: var(--hardhat); stroke: var(--ink); }
.crew .body-fill { fill: rgba(255,255,255,0.5); }

/* --- 12. Loading sheet --------------------------------------------------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--sheet);
  background-image:
    linear-gradient(var(--chalk-faint) var(--hair), transparent var(--hair)),
    linear-gradient(90deg, var(--chalk-faint) var(--hair), transparent var(--hair));
  background-size: var(--unit) var(--unit);
  transition: opacity 0.55s var(--ease), visibility 0.55s var(--ease);
}
#loader.done { opacity: 0; visibility: hidden; }

.loader-inner { text-align: center; width: min(300px, 74vw); }

.loader-draw { width: 132px; margin: 0 auto 22px; position: relative; }
.loader-draw svg { width: 100%; height: auto; overflow: visible; }
.loader-draw .ink-path {
  stroke: var(--ink);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: var(--len, 600);
  animation: draw 1.5s var(--ease) forwards;
}
.loader-draw .hat-fill {
  fill: var(--hardhat);
  opacity: 0;
  animation: fadein 0.5s var(--ease) 1.1s forwards;
}
.loader-mascot {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  animation: fadein 0.6s var(--ease) 1.55s forwards;
}
.loader-mascot img { width: 78%; }

@keyframes draw   { to { stroke-dashoffset: 0; } }
@keyframes fadein { to { opacity: 1; } }

.loader-bar {
  height: 3px;
  background: var(--chalk-faint);
  border: var(--hair) solid var(--ink-faint);
  overflow: hidden;
  margin-bottom: 11px;
}
.loader-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
  animation: fill 2s var(--ease) forwards;
}
@keyframes fill { to { width: 100%; } }

/* --- 12b. Scrolling sheet: sections, bands, progress --------------------- */

/* Each sheet scrolls through its own sub-sections. Sections are spaced by a
   multiple of the drafting grid so the rhythm matches the paper. */
.section { padding: clamp(48px, 7vw, 104px) 0; position: relative; }
.section:first-of-type { padding-top: 0; }
.section-tight { padding: clamp(30px, 4vw, 56px) 0; }

/* Opening section of a sheet holds the fold. */
.section-open {
  /* Viewport minus the fixed nav, the sheet padding and the bottom furniture. */
  min-height: calc(100svh - var(--nav-h) - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 0;
}

/* Detail bubble: numbers a section the way a drawing numbers a detail. */
.section-mark {
  position: absolute;
  top: clamp(26px, 4vw, 58px);
  right: 0;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border: var(--hair) solid var(--ink-faint);
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

/* Photographic band spanning the full width of the sheet. It stops at the
   drawn border rather than running past it, so the frame stays unbroken. */
.band {
  position: relative;
  height: clamp(240px, 42vh, 440px);
  overflow: hidden;
  border-top: var(--hair) solid var(--chalk-soft);
  border-bottom: var(--hair) solid var(--chalk-soft);
}
.band img { width: 100%; height: 100%; object-fit: cover; }
.band-cap {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  padding: 8px 13px;
  background: var(--ink);
  color: var(--chalk);
}

/* Closing call to action band. */
.cta-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 22px 34px;
  padding: clamp(24px, 3.4vw, 40px);
  border: var(--hair) solid var(--ink);
  background: rgba(255,255,255,0.2);
  box-shadow: 6px 6px 0 rgba(13,46,76,0.13);
}
.cta-band h3 { max-width: 20ch; }
.cta-band p { color: var(--ink-soft); font-size: 0.95rem; max-width: 46ch; margin-top: 10px; }

/* Scroll scale, drawn in the binding gutter outside the sheet border. Hidden
   entirely below 901px, where there is no gutter to put it in. */
.progress { display: none; }

@media (min-width: 901px) {
  :root { --gutter: 52px; }

  /* A drafting rule stood on its end: white body, inked outline, graduations
     up the face, and a bead that rides down it as the sheet is read. Drawn
     chunky on purpose, with the same hard offset shadow the buttons carry, so
     it reads as an object sitting on the paper rather than a browser chrome
     progress bar. */
  .progress {
    display: block;
    position: fixed;
    /* Sits in the gutter, clear of the frame line to its right. The width
       below plus its border and shadow has to stay inside --gutter. */
    left: calc(var(--margin) + var(--gutter) - 34px);
    top: calc(var(--nav-h) + var(--margin));
    bottom: var(--margin);
    width: 15px;
    z-index: 35;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.42);
    border: 2px solid var(--ink);
    /* Slightly uneven radii: the rule looks drawn by hand rather than set. */
    border-radius: 10px 9px 10px 9px / 12px 11px 12px 11px;
    box-shadow: 3px 3px 0 var(--ink);
  }

  /* Fills solid white as the sheet is read, so a finished sheet reads as a
     complete reproduction line rather than a bar of ink. */
  .progress i {
    display: block;
    position: relative;
    width: 100%;
    height: 0;
    background: var(--chalk);
    border-radius: 8px 7px 8px 7px / 10px 9px 10px 9px;
    transition: height 0.1s linear;
  }

  /* The bead. It rides the boundary between read and unread. */
  .progress i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 17px;
    height: 17px;
    margin-left: -8.5px;
    box-sizing: border-box;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--hardhat);
    box-shadow: 2px 2px 0 var(--ink);
  }

  /* Graduations, laid over the fill so they stay legible on both halves. */
  .progress::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: repeating-linear-gradient(
      to bottom,
      transparent 0 22px,
      rgba(13, 46, 76, 0.42) 22px 24px
    );
  }

  .progress span {
    position: absolute;
    right: 26px;
    bottom: 0;
    font-family: var(--mono);
    font-size: 0.55rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    writing-mode: vertical-rl;
    white-space: nowrap;
  }
}

@media (max-width: 700px) {
  .section-mark { display: none; }
  .section-open { min-height: 0; padding-bottom: clamp(40px, 8vw, 60px); }
}

/* --- 13. Scroll reveal --------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* --- 14. Footer ---------------------------------------------------------- */

.foot {
  margin-top: auto;
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  align-items: baseline;
  justify-content: space-between;
  color: var(--ink-faint);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; min-width: 0; }
/* office@bottlebuilders.com is a single token with nowhere to break. At the
   sizes we set it fits; raise the browser's minimum font size and it walks off
   the page unless it is allowed to break mid-word. */
.foot a { overflow-wrap: anywhere; }

/* --- 15. Responsive ------------------------------------------------------ */

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    background: var(--sheet);
    border: var(--hair) solid var(--chalk-soft);
    border-top: 0;
    box-shadow: 0 18px 34px rgba(13,46,76,0.18);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a { padding: 14px 12px; border-bottom: var(--hair) solid var(--chalk-faint); }
  .nav-links a::after { display: none; }
  .nav-links a:last-of-type { border-bottom: 0; }
  .nav-cta { margin: 8px 0 0; justify-content: center; }

  /* On a phone a floating title block just covers the copy. It goes back into
     the page, where a real drawing puts it. */
  .titleblock {
    position: static;
    /* minmax(0, 1fr), not 1fr. A grid track defaults to a minimum of its
       content, so plain 1fr refuses to shrink and the block walks off the
       screen once the type grows. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0 var(--margin) var(--margin);
    border: var(--hair) solid var(--chalk-soft);
    background: rgba(255,255,255,0.2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .titleblock.away { transform: none; opacity: 1; }
  .titleblock div { padding: 8px 10px; }
  .titleblock dd { font-size: 0.7rem; }
  /* Only the progress bar stays pinned, so the sheet clears just that. */
  .sheet { padding-bottom: calc(var(--margin) + 86px); }
}

@media (max-width: 560px) {
  :root { --margin: 10px; }
  .brand-sub { display: none; }
  .titleblock div { padding: 7px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .titleblock, #loader, .regmarks { display: none; }
  body { background: #fff; }
}