/* ==========================================================================
   Yang's Bar: yangsbar.com

   The idea: a fabrication business whose own flier says "engineered around the
   bartender's workflow", so the page is set like a drawing sheet. Flush top bar,
   copper hairlines, numbered sheets, the five steps drawn as a dimension line,
   contact set as a title block. Structural rather than decorative.

   Only the palette and the wordmark come from the flier. Everything else here
   is built for the screen.

   Touch floors are asked of the pointer, and that block sits at the bottom of
   this file so nothing of equal specificity can override it.
   ========================================================================== */

@font-face { font-family: 'YB Sans'; src: url('assets/fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'YB Sans'; src: url('assets/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'YB Sans'; src: url('assets/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  /* ==========================================================================
     THREE SIZES. THE WHOLE SITE.
     Display for anything that leads, body for anything that is read, small for
     anything that labels. Nothing else exists.

     Hierarchy is carried by WEIGHT, COLOUR and SPACE rather than by size. That
     is the discipline that makes a page look composed rather than assembled: an
     h1 and an h2 are the same size here on purpose, and what separates them is
     that one sits alone at the top of a screen and the other has a rule above.
     ========================================================================== */
  --t-display: clamp(1.8rem, 4.8vw, 3rem);
  --t-body:    1rem;
  --t-small:   0.72rem;

  /* Not a neutral black. A bar at night is lit, and a flat #000 panel reads as a
     spreadsheet. The base carries a trace of warmth so copper sits IN it rather than
     on top of it, and every surface above is glass rather than paint. */
  /* LIGHT, 28 Sep. Warm rather than white: a paper that has been near a bar,
     not an office wall. Copper has to sit on this without shouting, so the
     ground carries a trace of the same warmth. */
  --ink:      #f7f4ef;
  --panel:    #fffdfa;
  --panel-2:  #f1ece4;
  --text:     #1a1620;
  --text-2:   #4a434f;

  /* GLASS. Three parts make a pane read as glass rather than as grey:
       1. a gradient fill, lighter at the top edge, so it has a direction
       2. a blur of whatever is behind it, which is what `backdrop-filter` buys
       3. a 1px specular line on the top edge, which is the actual "gloss"
     Take away the third and it looks like fog. */
  /* Quietened 28 Sep. These carried a gradient, an inner highlight, an inner
     shadow and a drop shadow at once, which read as plastic rather than as
     paper. A surface now differs from the page by one thing: it is white. */
  /* THE EIRENE RECIPE. A surface here is not a white box on a background, it is
     frosted glass over a ground that shines: a translucent warm white, a wide
     blur, one hairline in the accent at low alpha, and a shadow that is large
     and soft rather than tight and dark. That is what makes a panel sit IN the
     page instead of on top of it. */
  --surface:    255, 253, 248;
  --glass:      rgba(var(--surface), 0.70);
  --glass-lit:  rgba(var(--surface), 0.92);
  --glass-edge: rgba(176, 112, 44, 0.20);
  --gloss:      none;
  --soft:       0 18px 60px rgba(54, 38, 26, 0.08);
  --radius:     20px;
  --lift:       none;
  --blur:       blur(20px);

  --hair:     rgba(150, 94, 34, 0.30);   /* copper hairline */
  --hair-dim: rgba(26, 22, 32, 0.12);
  --copper:   #b0702c;   /* darkened for contrast on a light ground */
  --copper-l: #d08a3e;
  --white:    #1a1620;   /* the reading colour, now dark */
  --muted:    #5c5560;
  --gut:      clamp(20px, 5vw, 64px);
  --sans: 'YB Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; color: var(--white);
  font: 400 var(--t-body)/1.65 var(--sans); overflow-x: hidden;
  /* Fixed, so the light does not scroll with the content: the page moves past it the way
     a room stays lit while you walk through it. */
  /* Two shines and a fall, the way Eirene's ground works: a warm glow high on
     the left, a cool one high on the right, over a vertical drift from near
     white to a warmer cream at the foot of the page. */
  background:
    radial-gradient(circle at 10% 8%,  rgba(224, 165, 101, 0.40), transparent 30rem),
    radial-gradient(circle at 90% 4%,  rgba(118, 150, 210, 0.16), transparent 34rem),
    linear-gradient(180deg, #fffdfa 0%, #f7f4ef 50%, #f0e9df 100%);
  background-attachment: fixed;
}

/* ==========================================================================
   THE LIQUID LAYER
   Three very large, very soft pools of light drifting behind everything. They are
   what the glass panels above actually refract - a pane with nothing behind it is
   just translucent grey, which was the whole fault with the first dark version.

   Cheap on purpose: three elements, transform only, no repaint. It is decoration and
   it behaves like decoration - it stops dead under prefers-reduced-motion.
   ========================================================================== */
.liquid { position: fixed; inset: -20vmax; z-index: -10; pointer-events: none; overflow: hidden; }
.liquid i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(66px); opacity: .55; will-change: transform;
}
.liquid i:nth-child(1) { width: 54vmax; height: 54vmax; left: -6vmax; top: 2vmax;
  background: radial-gradient(circle, rgba(222,148,72,.90), transparent 64%); animation: drift1 34s ease-in-out infinite; }
.liquid i:nth-child(2) { width: 46vmax; height: 46vmax; right: -4vmax; top: 18vmax;
  background: radial-gradient(circle, rgba(118,152,226,.62), transparent 64%); animation: drift2 44s ease-in-out infinite; }
.liquid i:nth-child(3) { width: 46vmax; height: 46vmax; left: 30vmax; bottom: -8vmax;
  background: radial-gradient(circle, rgba(240,184,120,.62), transparent 66%); animation: drift3 52s ease-in-out infinite; }
.liquid i:nth-child(4) { width: 50vmax; height: 50vmax; right: 6vmax; bottom: 4vmax;
  background: radial-gradient(circle, rgba(150,120,200,.38), transparent 66%); animation: drift2 38s ease-in-out infinite reverse; }

@keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(7vmax,5vmax,0) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1.06); } 50% { transform: translate3d(-8vmax,7vmax,0) scale(.94); } }
@keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(5vmax,-6vmax,0) scale(1.1); } }

/* The reusable pane. Anything that was a flat fill becomes one of these. */
.pane, .titleblock, .units li, .caps li, .family-list li, .block > div, .dim-tick {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.skip { position: absolute; left: -9999px; background: var(--copper); color: #16100a; padding: 12px 18px; font-weight: 600; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
:where(a, button):focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* ==========================================================================
   Top bar: flush to the edges, a copper rule beneath it. Not floating.
   ========================================================================== */
.bar {
  position: sticky; top: 0; z-index: 40;
  /* REAL GLASS NEEDS FIVE THINGS, and the old bar had two of them. It was 92%
     opaque, which is paint with a blur behind it.
        1. you can see through it        - the fill sits at .64-.78
        2. what is behind is blurred     - 26px, and saturated so colour survives
        3. light catches the near edge   - the specular line below
        4. it has thickness              - an inner shadow on the far edge
        5. it refracts what is behind    - the faint copper tint in the fill
     Together those read as a pane of glass lying on the page rather than a
     lighter strip of the page.

     THE FILL IS AS LOW AS IT CAN SAFELY GO, and that limit was measured, not
     chosen. This bar is sticky, so its contrast depends on whatever is passing
     underneath. At .44 the links measured 2.12:1 with the dark hero photograph
     behind them, which is unreadable. At .64 they measure 8.31:1 at that same
     worst point and 17:1 everywhere else. Anything glassier fails the moment a
     dark photograph scrolls under it. */
  background:
    linear-gradient(180deg, rgba(255,253,250,.78) 0%, rgba(255,252,247,.64) 55%, rgba(244,238,230,.74) 100%),
    radial-gradient(120% 180% at 12% 0%, rgba(214,145,76,.10), transparent 60%);
  -webkit-backdrop-filter: blur(26px) saturate(190%);
  backdrop-filter: blur(26px) saturate(190%);
  border-bottom: 1px solid rgba(176,112,44,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),            /* the lit near edge */
    inset 0 -14px 22px -18px rgba(60,42,20,.30),    /* thickness, from underneath */
    0 14px 40px -28px rgba(60,42,20,.38);           /* what it casts on the page */
}
/* The specular: a hairline of light running the width, brightest in the middle,
   which is what an edge of glass does under a room light. */
.bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95) 22%, rgba(255,255,255,.95) 78%, transparent);
  pointer-events: none;
}
.bar { position: sticky; }
.bar-in { position: relative; display: flex; align-items: center; gap: 18px; padding: 13px var(--gut); }
.bar-mark img { width: 118px; }
.bar-nav { display: none; margin-left: auto; gap: 26px; }
.bar-nav a {
  text-decoration: none; color: var(--text);
  font: 600 var(--t-small)/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  /* Real padding, so the link is a comfortable target with a mouse too, not only
     once the touch floor at the bottom of this file applies. */
  padding: 14px 2px; display: inline-flex; align-items: center;
}
.bar-nav a:hover { color: var(--copper); }
.bar-call {
  margin-left: auto; min-height: 40px; display: inline-flex; align-items: center; text-decoration: none;
  border: 1px solid rgba(176,112,44,.28); border-radius: 999px;
  padding: 10px 18px; color: var(--white);
  font: 600 var(--t-small)/1 var(--sans); letter-spacing: .04em;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.42));
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 22px -16px rgba(60,42,20,.45);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.bar-call:hover {
  border-color: var(--copper); color: var(--copper);
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,250,243,.62));
}
.bar-call-full { display: none; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.cta { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 22px; border-radius: 2px; text-decoration: none;
  font: 600 var(--t-body)/1 var(--sans); letter-spacing: .02em;
  border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
/* The copper button is lit from inside rather than filled: a gradient plus a bright
   top edge and a dark bottom one is what separates "a glossy control" from "a swatch". */
/* One flat fill, one hairline. A button does not need a gradient, an inner
   highlight and a coloured glow to be pressable. */
/* A DEEPER COPPER FOR THE FILL, and only for the fill. The brand copper against
   near-white lettering measures 3.89:1, which is under the bar for text this
   size, and it is the button people are meant to press. #8f5a22 is the same hue
   two steps down and measures 5.53:1. The lighter copper stays everywhere it is
   used as ink on the page, where it is already clear. */
.btn-solid { background: #8f5a22; color: #fffaf3; border-color: #8f5a22; }
.btn-solid:hover { background: var(--text); border-color: var(--text); }
.btn-outline {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--soft);
}
.btn-outline:hover { border-color: var(--text); background: rgba(26,22,32,.04); }
/* The opening screen is the one dark surface on a light site, so the outline
   button has to invert there. Making every outline button transparent put dark
   text straight onto the photograph. */
/* The opening is light now, so its buttons are the page's own buttons. The dark
   inversion that used to live here is gone with the dark band it existed for. */
.btn-outline { border-color: rgba(26,22,32,.22); color: var(--text); }
.btn-outline:hover { border-color: var(--copper); color: var(--copper); }

/* ==========================================================================
   The stage: a full screen opening. Photograph, ember field, type on top.
   ========================================================================== */
.stage {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 92svh; display: flex; align-items: flex-end;
  padding: 0 var(--gut) clamp(46px, 9vh, 96px);
}

/* The photograph, held slightly oversize so the parallax has somewhere to go. */
.stage-img { position: absolute; inset: -6% 0 -6% 0; z-index: -3; will-change: transform; }
.stage-img img { width: 100%; height: 100%; object-fit: cover; }

/* Two washes: one to seat the type, one to pull the copper through the image. */
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  /* A VEIL, NOT A CURTAIN. This was a 96% wash across the whole text column,
     which made the photograph disappear behind fog: legible, and pointless,
     because you could no longer see the bar we are selling. The copy now sits
     on a frosted pane of its own, so the wash only has to do two small jobs:
     take the glare off the left edge, and fade the foot into the page. */
  background:
    linear-gradient(100deg, rgba(252,250,246,.55) 0%, rgba(252,250,246,.26) 30%, transparent 58%),
    linear-gradient(180deg, rgba(255,253,250,.35) 0%, transparent 22%, transparent 74%, var(--ink) 100%);
}
#ember { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .45; mix-blend-mode: multiply; }

.stage-copy {
  position: relative; max-width: 22rem; color: var(--text);
  /* The same frosted pane as the cards below, so the opening belongs to the
     same page. It gives the words a surface of their own and lets the
     photograph stay visible right up to its edge. */
  padding: clamp(22px, 3.4vw, 34px);
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  background: rgba(var(--surface), 0.82);
  -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 26px 70px -34px rgba(60,42,20,.45);
}
.stage h1 { color: var(--text); }
.stage h1 em { color: var(--copper); }
/* A DARKER COPPER, for the hero only. The page's copper is tuned against a flat
   warm ground; over a photograph, even under a 96% veil, it measured 3.7:1 and
   this line is small type. Deepening it keeps the accent and clears the bar. */
/* The deeper copper stays. Even on the pane this line measured 2.96:1 with the
   brand copper: it is small, tracked-out type over a surface that is still 18%
   photograph. #7d4d1c is the same hue, two steps down, and clears the bar. */
.stage .tag { color: #7d4d1c; }

.tag {
  margin: 0 0 20px; color: var(--copper);
  font: 600 var(--t-small)/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.tag::before { content: ""; display: block; width: 34px; height: 2px; background: var(--copper); margin-bottom: 14px; }

h1 {
  margin: 0 0 22px;
  font: 700 var(--t-display)/1.02 var(--sans);
  letter-spacing: -0.04em;
  text-shadow: 0 2px 40px rgba(0,0,0,.55);
}
h1 em { font-style: normal; color: var(--copper); }

.hero-sub { margin: 0 0 30px; max-width: 44ch; color: var(--muted); font-size: var(--t-body); }

/* A quiet scroll cue, because the opening fills the screen. */
.cue {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  width: 28px; min-height: 46px; border: 1px solid rgba(255,255,255,.3); border-radius: 15px;
  display: flex; justify-content: center; padding-top: 9px;
}
.cue span { width: 3px; height: 8px; border-radius: 2px; background: var(--copper); animation: cue 1.9s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 70% { opacity: 0; transform: translateY(12px); } }

/* ---------- Title block: plain facts in ruled cells ---------- */
.titleblock { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); box-shadow: var(--gloss); }
.titleblock dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; }
.titleblock div { padding: 16px var(--gut); border-bottom: 1px solid var(--hair-dim); }
.titleblock div:nth-child(odd) { border-right: 1px solid var(--hair-dim); }
.titleblock dt { color: var(--copper); font: 600 var(--t-small)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 7px; }
.titleblock dd { margin: 0; font-size: var(--t-body); }

/* ==========================================================================
   Sheets: each section headed by a ruled strip with a number
   ========================================================================== */
.sheet { border-bottom: 1px solid var(--hair-dim); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
/* The alternating band is a sheet of smoked glass rather than a darker rectangle. */
.sheet-dark {
  background: linear-gradient(180deg, rgba(241,236,228,.9), rgba(247,244,239,.6));
  -webkit-backdrop-filter: blur(10px) saturate(120%); backdrop-filter: blur(10px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(26,22,32,.07);
}

.sheet-rule {
  display: flex; align-items: center; gap: 16px;
  padding: 14px var(--gut); border-bottom: 1px solid var(--hair);
}
.sheet-n { color: var(--copper); font: 700 var(--t-body)/1 var(--sans); letter-spacing: .06em; }
.sheet-label { color: var(--muted); font: 600 var(--t-small)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.sheet-label::before { content: ""; display: inline-block; width: 26px; height: 1px; background: var(--hair); vertical-align: middle; margin-right: 16px; }

.sheet-body { padding: 40px var(--gut) 56px; }
.sheet-body h2 {
  margin: 0 0 16px; max-width: 20ch;
  font: 700 var(--t-display)/1.14 var(--sans);
  letter-spacing: -0.022em;
}
.lede { margin: 0 0 34px; max-width: 62ch; color: var(--muted); }

/* ---------- Units ---------- */
/* Space between the cards instead of a 1px grid of borders. The hairline
   table read as a spreadsheet; white cards on a warm ground read as cards. */
.units { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.units li {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 96px 1fr; gap: 18px; padding: 20px; align-items: center;
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--soft);
  transition: border-color .3s ease;
}
.units li:hover, .units li:focus-within { border-color: var(--copper); }
/* The sheen: a diagonal band of light lying across the pane, which sweeps when a
   finger or a cursor arrives. This is the "liquid" part of liquid glass - the
   highlight moves, the panel does not. */


.units figure { margin: 0; }
.units figure.duo {
  position: relative; overflow: hidden; border: 1px solid var(--hair-dim);
  background: var(--copper);
}
.units img {
  width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
  /* A copper duotone: the photographs were shot in four different rooms, and
     grading them to one colour makes the set read as one product family. The
     original comes back on hover, for anyone who wants to see the real thing. */
  filter: grayscale(1) contrast(1.16) brightness(.82);
  mix-blend-mode: luminosity;
  transition: filter .5s ease, mix-blend-mode .5s ease, transform .7s ease;
}
.units li:hover img, .units li:focus-within img {
  filter: none; mix-blend-mode: normal; transform: scale(1.04);
}
.unit-n { margin: 0 0 4px; color: var(--copper); font: 600 var(--t-small)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.units h3 { margin: 0 0 5px; font-size: var(--t-body); font-weight: 600; }
.units p { margin: 0; color: var(--muted); font-size: var(--t-body); }

/* ---------- Dimension line: the five steps ---------- */
.dim { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 26px; }
.dim::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--hair); }
.dim li { position: relative; padding-left: 34px; }
.dim-tick { position: absolute; left: 0; top: 7px; width: 15px; height: 15px; border: 1px solid var(--copper); box-shadow: var(--gloss), 0 0 12px -2px rgba(200,129,62,.55); }
.dim-n { display: block; margin-bottom: 4px; color: var(--copper); font: 700 var(--t-small)/1 var(--sans); letter-spacing: .16em; }
.dim h3 { margin: 0 0 5px; font-size: var(--t-body); font-weight: 600; }
.dim p { margin: 0; color: var(--muted); font-size: var(--t-body); max-width: 52ch; }

/* ---------- Capability ---------- */
.caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.caps li { position: relative; padding: 26px 24px; border: 1px solid var(--glass-edge); border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--soft); transition: border-color .3s ease; }
.caps li:hover { border-color: var(--copper); }
.cap-ico { width: 34px; height: 34px; fill: none; stroke: var(--copper); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 16px; }
.caps h3 { margin: 0 0 7px; font-size: var(--t-body); font-weight: 600; }
.caps p { margin: 0; color: var(--muted); font-size: var(--t-body); }

/* ==========================================================================
   Statement
   ========================================================================== */
.statement {
  position: relative; overflow: hidden;
  padding: 74px var(--gut); border-block: 1px solid var(--glass-edge);
  background: linear-gradient(165deg, #241f2c, #17131d 55%, #100d16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 24px 50px -30px rgba(26,22,32,.6);
  color: #ffffff;
}
/* A slow specular sweep across the slab, the way light crosses a polished counter. */
.statement::before {
  content: ""; position: absolute; inset: -50% -30%; pointer-events: none;
  background: linear-gradient(74deg, transparent 40%, rgba(255,255,255,.09) 49%, transparent 58%);
  animation: sweep 9s ease-in-out infinite;
}
@keyframes sweep { 0%,100% { transform: translate3d(-26%,0,0); } 50% { transform: translate3d(26%,0,0); } }
.statement p {
  margin: 0; text-align: center;
  font: 700 var(--t-display)/1.16 var(--sans);
  letter-spacing: -0.028em;
}
.statement em { font-style: normal; color: #f0b878; }

/* ==========================================================================
   Family
   ========================================================================== */
.family { display: grid; gap: 34px; }
.family-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.family-list li { padding: 18px 20px; border: 1px solid var(--glass-edge); border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--soft); }
.family-list li[aria-current] { border-left: 3px solid var(--copper); }
.family-list a { text-decoration: none; display: block; }
.family-list a:hover strong { color: var(--copper); }
.family-list strong { display: block; font-size: var(--t-body); font-weight: 600; }
.family-list span { display: block; color: var(--muted); font-size: var(--t-small); margin-top: 2px; }

/* ==========================================================================
   Contact: set like the title block of a drawing
   ========================================================================== */
.contact {
  border-top: 1px solid var(--hair);
  background: linear-gradient(180deg, rgba(241,236,228,.92), rgba(247,244,239,.7));
  -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.contact-in { display: grid; gap: 36px; padding: 52px var(--gut) 58px; }
.contact h2 { margin: 0 0 14px; max-width: 18ch; font: 700 var(--t-display)/1.14 var(--sans); letter-spacing: -0.022em; }
.block { margin: 0; display: grid; gap: 10px; }
.block > div { padding: 16px 18px; border: 1px solid var(--glass-edge); border-radius: var(--radius);
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--soft); }
.block dt { color: var(--copper); font: 600 var(--t-small)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 7px; }
.block dd { margin: 0; font-size: var(--t-body); }
.block a { text-decoration: none; border-bottom: 1px solid var(--hair-dim); }
.block a:hover { border-color: var(--copper); color: var(--copper); }

/* ==========================================================================
   Footer
   ========================================================================== */
.foot { border-top: 1px solid var(--hair-dim); }
.foot-in { padding: 26px var(--gut) 36px; display: grid; gap: 7px; }
.foot-brand { margin: 0; font-weight: 600; font-size: var(--t-body); }
.foot-parent, .foot-copy { margin: 0; color: var(--muted); font-size: var(--t-small); }
/* Policy links in the footer. The site had none until the enquiry form made a
   privacy notice necessary. */
.foot-links { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-links a { color: var(--muted); font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; }
.foot-links a:hover { color: var(--copper); }
.foot-parent a { text-decoration: underline; text-underline-offset: 3px; }
.foot-parent a:hover { color: var(--copper); }

/* ==========================================================================
   Wider screens
   ========================================================================== */
@media (min-width: 700px) {
  .stage-copy { max-width: 34rem; }
  .titleblock dl { grid-template-columns: repeat(4, 1fr); }
  .titleblock div { border-bottom: 0; border-right: 1px solid var(--hair-dim); }
  .titleblock div:last-child { border-right: 0; }
  .units { grid-template-columns: repeat(2, 1fr); }
  .caps { grid-template-columns: repeat(2, 1fr); }
  .family-list { grid-template-columns: repeat(3, 1fr); }
  .block { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1000px) {
  .stage-copy { max-width: 52rem; }
  .stage { min-height: 96svh; }
  .bar-nav { display: flex; }
  .bar-call { margin-left: 0; }
  .bar-call-full { display: inline; }
  .bar-call-short { display: none; }

  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
  .hero-text { padding: 78px 40px 78px var(--gut); }
  .hero-img img { max-height: none; height: 100%; min-height: 560px; }

  .sheet-body { padding: 54px var(--gut) 76px; }
  .units { grid-template-columns: repeat(4, 1fr); }
  .units li { grid-template-columns: 1fr; gap: 14px; padding: 20px; align-items: start; }
  .caps { grid-template-columns: repeat(4, 1fr); }

  /* The dimension line turns horizontal, which is how it is actually drawn. */
  .dim { grid-template-columns: repeat(5, 1fr); gap: 0; }
  .dim::before { left: 7px; right: 7px; top: 7px; bottom: auto; width: auto; height: 1px; }
  .dim li { padding: 34px 20px 0 0; }
  .dim-tick { top: 0; }

  .family { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .family-list { grid-template-columns: 1fr; }

  .contact-in { grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: start; padding: 76px var(--gut) 84px; }
  .block { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr auto; align-items: center; }
  .foot-copy { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
}

/* ==========================================================================
   TOUCH FLOORS: asked of the pointer, last in the file on purpose.
   ========================================================================== */
@media (pointer: coarse) {
  .btn, .bar-call { min-height: 44px; }
  .bar-mark, .bar-nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .block a, .foot-parent a, .family-list a { min-height: 44px; display: inline-flex; align-items: center; }
  .family-list a { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  /* The pools stop where they are. They still give the glass something to refract,
     which is the job; only the movement goes. */
  .liquid i { animation: none !important; }
  .units li::after { transition: none !important; }
  .statement::before { animation: none !important; }

  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   THE CONFIGURABLE COUNTER
   The viewer is the heaviest thing on this site by a wide margin, so it is not
   here until somebody taps for it. Everything below describes the panel it
   lives in; the counter itself is arithmetic, not a downloaded model.
   ========================================================================== */
.rig { display: grid; gap: 20px; }

.rig-stage {
  position: relative; aspect-ratio: 4 / 3;
  border: 1px solid var(--glass-edge); border-radius: var(--radius); overflow: hidden;
  /* A lit bench rather than a dark box: the counter is stainless, and stainless
     reads better against a warm light ground than against a grey one. */
  background:
    radial-gradient(90% 70% at 50% 6%, rgba(176,112,44,.14), transparent 64%),
    linear-gradient(180deg, #fffdfa, #ece6dc);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  box-shadow: var(--gloss), var(--lift);
}
#rig-canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
#rig-canvas.on { opacity: 1; }
#rig-canvas:focus-visible { outline: 2px solid var(--copper); outline-offset: -4px; }

/* the tap-to-load plate */
.rig-start {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 0; color: var(--text); font: inherit;
  transition: background .3s ease, opacity .4s ease;
}
.rig-start:hover { background: rgba(176,112,44,.07); }
.rig-start[hidden] { display: none; }
.rig-start-ico svg { width: 46px; height: 46px; fill: none; stroke: var(--copper); stroke-width: 1.2; stroke-linejoin: round; }
.rig-start-t { font: 700 var(--t-body)/1.2 var(--sans); letter-spacing: -0.01em; margin-top: 8px; }
.rig-start-s { color: var(--muted); font: 400 var(--t-small)/1 var(--sans); letter-spacing: .06em; }
.rig-start.loading .rig-start-t { color: var(--copper); }

.rig-hint {
  position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; z-index: 1;
  text-align: center; color: var(--muted);
  font: 400 var(--t-small)/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none;
}

/* ---------- the controls ---------- */
.rig-controls { display: grid; gap: 20px; align-content: start; }
.rig-controls[hidden] { display: none; }
.rig-field { border: 0; padding: 0; margin: 0; display: grid; gap: 9px; }
.rig-field > label, .rig-field legend {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0;
  color: var(--muted); font: 600 var(--t-small)/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
}
.rig-field output { color: var(--copper); font-weight: 700; letter-spacing: .04em; }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 3px; background: linear-gradient(90deg, var(--copper), rgba(255,255,255,.18));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; margin-top: -10px; border-radius: 50%;
  background: linear-gradient(180deg, var(--copper-l), var(--copper));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 12px -4px rgba(213,143,71,.9);
}
input[type="range"]::-moz-range-track { height: 3px; background: rgba(255,255,255,.2); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--copper); }
input[type="range"]:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }

.rig-toggles { gap: 4px; }
.rig-toggles label, .rig-finishes label {
  display: flex; align-items: center; gap: 11px; min-height: 40px;
  color: var(--white); font: 400 var(--t-body)/1.3 var(--sans); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.rig-finishes { display: grid; gap: 4px; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--copper); cursor: pointer; }

/* the running specification, set like the title block it belongs beside */
.rig-spec { margin: 0; display: grid; gap: 10px; }
.rig-spec > div { padding: 12px 16px; display: flex; gap: 14px; align-items: baseline; border: 1px solid var(--glass-edge); border-radius: var(--radius); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: var(--soft); }
.rig-spec dt { flex: 0 0 76px; color: var(--copper); font: 600 var(--t-small)/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.rig-spec dd { margin: 0; font-size: var(--t-body); }

.rig-send { justify-self: start; }
.rig-note { margin: 0; color: var(--muted); font-size: var(--t-small); }

@media (min-width: 900px) {
  .rig { grid-template-columns: 1.45fr .85fr; gap: 34px; align-items: start; }
  .rig-stage { aspect-ratio: 16 / 11; }
}


/* A line under the contact buttons, saying what the form gives you that a phone
   call does not. Sits with the buttons, not with the prose. */
.ask-note { margin: 12px 0 0; font-size: var(--t-small); color: var(--muted); line-height: 1.55; max-width: 44ch; }

/* Shown only while the form has no database behind it. index.php injects it and
   stops injecting it the moment the config file exists, so this style becomes
   dead weight rather than something that must be removed. */
.enq-down {
  background: rgba(176, 112, 44, 0.08); border: 1px solid rgba(176, 112, 44, 0.30);
  border-radius: var(--radius); padding: 18px 18px 20px; margin: 0 0 20px;
}
.enq-down-h { margin: 0 0 8px; font-weight: 600; font-size: 1.05rem; }
.enq-down p { margin: 0 0 10px; line-height: 1.6; }
.enq-down-act { margin: 14px 0 0; }
/* The colour is forced because `.doc a` (0,1,1) paints every link in this article
   copper and underlines it, which on a solid dark button is copper-on-ink at
   4.41:1 -- measured, and under the 4.5 minimum. `.enq-down-act .btn` is (0,2,0)
   and wins. The panel colour on this button is 17.5:1. */
.enq-down-act .btn {
  width: 100%; min-height: 52px;
  color: var(--panel); text-decoration: none;
}
.enq-down-act .btn:hover { color: var(--panel); }
/* The form stays visible but reads as closed rather than broken. */
.enq.is-down .enq-grid, .enq.is-down .field, .enq.is-down .shots-field { opacity: .5; }
.enq.is-down input, .enq.is-down textarea, .enq.is-down .shots-drop { pointer-events: none; }

/* ==========================================================================
   SECONDARY PAGES  (/enquiry/, /privacy/)
   --------------------------------------------------------------------------
   The site was one page until now, so there was no container for a page that is
   mostly reading. This is that container: the same warm paper, the same copper
   hairlines and the same title-block habit as the drawing sheet, at a measure
   that can actually be read.

   Mobile first. Every rule here is the phone; the one width query only widens.
   ========================================================================== */

.doc { max-width: 720px; margin: 0 auto; padding: 30px var(--gut) 64px; }
.doc-head { margin: 0 0 26px; padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.doc h1 { margin: 0 0 10px; font-size: var(--t-display); line-height: 1.1; letter-spacing: -0.01em; }
.doc-meta {
  margin: 0 0 12px; color: var(--copper);
  font: 600 var(--t-small)/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase;
}
.doc-lede { margin: 0; font-size: 1.05rem; line-height: 1.65; color: var(--text-2); }
.doc h2 { font-size: 1.1rem; margin: 30px 0 10px; }
.doc p { line-height: 1.7; margin: 0 0 14px; }
.doc a { color: var(--copper); text-decoration: underline; text-underline-offset: 3px; }
.doc ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.doc ul li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.65; }
.doc ul li::before { content: ""; position: absolute; left: 2px; top: .78em; width: 8px; height: 1px; background: var(--copper); }
.doc dl.colophon { margin: 0; display: grid; gap: 16px; }
.doc dl.colophon dt { color: var(--muted); font: 600 var(--t-small)/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 5px; }
/* min-width: 0 and a break opportunity. A long unbreakable address sets the floor
   for the whole grid, and every row inflates with it. */
.doc dl.colophon dd { margin: 0; min-width: 0; overflow-wrap: anywhere; line-height: 1.6; }

/* The outline button. submit.php's no-JavaScript reply page and the portal both
   use .btn.btn-line, and without this it renders as unstyled text on this site
   while looking correct on the other one. */
.btn-line { background: transparent; color: var(--text); border-color: var(--hair); }
.btn-line:hover { border-color: var(--copper); color: var(--copper); }

/* ==========================================================================
   THE ENQUIRY FORM
   The ember field runs behind the whole page and the panel floats on it. Glass
   over flat paper is a white box with extra rendering cost; it needs something
   moving underneath to be worth the blur.
   ========================================================================== */

/* #ember.enq-bg AND NOT .enq-bg. The opening screen already styles #ember, and an
   id beats a class wherever it sits in the file. The id is repeated to win that,
   not to select anything new. position: fixed so the field does not scroll away
   from the panel halfway down the form. */
#ember.enq-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; background: var(--ink);
}
.enq-page { position: relative; z-index: 1; }

.enq {
  background: var(--glass);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); border-radius: var(--radius);
  box-shadow: var(--soft);
  padding: 22px 18px; margin: 0 0 28px;
}
/* Without backdrop-filter the panel must stop being translucent, or the text lands
   on whatever the embers are doing and the contrast is anyone's guess. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .enq { background: var(--panel); }
}

.enq-grid { display: grid; grid-template-columns: 1fr; gap: 0; }

.field { margin: 0 0 18px; }
.field label {
  display: block; margin: 0 0 7px; color: var(--muted);
  font: 600 var(--t-small)/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase;
}
.req { color: var(--copper); margin-left: 2px; }

/* font-size must not fall under 16px: a phone that finds a smaller input zooms the
   whole page in on focus and never zooms back out. --t-body is 1rem. */
.field input, .field textarea {
  width: 100%; font: 400 var(--t-body)/1.45 var(--sans);
  color: var(--text); background: var(--glass-lit);
  border: 1px solid var(--hair-dim); border-radius: 12px;
  padding: 13px 14px; min-height: 50px;
  -webkit-appearance: none; appearance: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 128px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #9a9199; }
.field input:hover, .field textarea:hover { border-color: var(--hair); }
.field input:focus-visible, .field textarea:focus-visible {
  outline: none; border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(176, 112, 44, 0.18);
}
/* :user-invalid and not :invalid. :invalid matches an empty required field from the
   moment the page loads, so every required field would sit outlined red before
   anybody had typed a character. */
.field input:user-invalid, .field textarea:user-invalid {
  border-color: #a8271f; box-shadow: 0 0 0 3px rgba(168, 39, 31, 0.13);
}
.field-note { display: block; margin: 7px 0 0; font-size: var(--t-small); color: var(--muted); line-height: 1.5; }

/* ---------------------------------------------------------------- photos */
.shots-field { margin: 0 0 18px; }
/* Moved off screen rather than display: none, which would take it out of the tab
   order and out of reach of a screen reader. The label is what is seen; the input
   is still the thing that is focused and activated. */
.shots-in {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.shots-drop {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; min-height: 56px; cursor: pointer;
  border: 1px dashed var(--hair); border-radius: 14px;
  background: rgba(var(--surface), 0.55);
  transition: border-color .16s ease, background .16s ease;
}
.shots-drop:hover { border-color: var(--copper); background: var(--glass-lit); }
.shots-in:focus-visible + .shots-drop {
  border-color: var(--copper); border-style: solid;
  box-shadow: 0 0 0 3px rgba(176, 112, 44, 0.18);
}
.shots-icon { flex: 0 0 auto; width: 26px; height: 26px; color: var(--copper); }
.shots-words { display: block; font-size: var(--t-body); line-height: 1.35; }
.shots-words b { display: block; font-weight: 600; }
.shots-words span { display: block; font-size: var(--t-small); color: var(--muted); margin-top: 3px; }

.shots-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.shots-list li { position: relative; margin: 0; }
/* The page's shell is <article class="doc">, whose prose lists carry a copper dash
   and a 20px indent. These are thumbnails, not prose. .doc is repeated because
   `.doc ul li::before` is (0,1,3) and `.shots-list li::before` only (0,1,2) --
   being later in the file does not win a specificity argument. */
.doc .shots-list li { padding-left: 0; margin-bottom: 0; }
.doc .shots-list li::before { content: none; }
.shots-list img { display: block; width: 100%; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--hair-dim); background: var(--panel-2); }
.shots-list figcaption { font-size: 0.66rem; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- the rest */
/* A honeypot. NOT display: none -- some bots skip anything that is display: none,
   and the whole point is that they fill it in. Off screen, out of the tab order. */
.enq-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.enq-actions { display: flex; flex-direction: column; gap: 14px; margin: 4px 0 0; }
.enq-actions .btn { width: 100%; min-height: 52px; }
.enq-privacy { margin: 0; font-size: var(--t-small); color: var(--muted); line-height: 1.55; }

.enq-msg { margin: 16px 0 0; font-size: var(--t-body); line-height: 1.55; }
.enq-msg:empty { display: none; }
.enq-msg.is-good, .enq-msg.is-bad { padding: 13px 15px; border-radius: 12px; }
.enq-msg.is-good { background: rgba(176, 112, 44, 0.10); border: 1px solid rgba(176, 112, 44, 0.26); }
.enq-msg.is-bad  { background: rgba(168, 39, 31, 0.08); border: 1px solid rgba(168, 39, 31, 0.26); }
/* Set to be read back over a phone, so it does not wrap mid-reference. */
.enq-ref { font-weight: 700; letter-spacing: .04em; white-space: nowrap; }

.enq-other { margin: 0 0 8px; }
.enq-other h2 { font-size: var(--t-body); font-weight: 600; margin: 0 0 14px; }
.enq-other h2 b { font-size: var(--t-small); letter-spacing: .2em; color: var(--muted); font-weight: 600; margin-right: 8px; }

/* A quiet way in for the two people who read the enquiries. Deliberately not in the
   nav: it is not for visitors, and a nav link invites the whole internet to try it. */
.enq-staff { margin: 22px 0 0; font-size: var(--t-small); color: var(--muted); }
.enq-staff a { color: var(--muted); }

@media (min-width: 640px) {
  .enq { padding: 30px 28px; }
  .enq-grid { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .enq-actions { flex-direction: row; align-items: center; gap: 20px; }
  .enq-actions .btn { width: auto; flex: 0 0 auto; }
  .enq-privacy { flex: 1 1 auto; }
  .doc dl.colophon { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}

@media (pointer: coarse) {
  .rig-toggles label, .rig-finishes label { min-height: 46px; }
  .rig-start { min-height: 44px; }
  /* The enquiry form and the secondary pages. A tablet is 820px wide and sails past
     every max-width rule above, so these are asked of the POINTER. This block stays
     LAST in the file: put it above the width queries and an equal-specificity rule
     below it wins. */
  .field input { min-height: 52px; }
  .field textarea { min-height: 132px; }
  .shots-drop { min-height: 62px; }
  .enq-actions .btn { min-height: 52px; }
  .enq-staff a, .doc a { display: inline-block; min-height: 44px; }
  .foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
  .doc p a, .doc li a, .enq-privacy a { min-height: 0; display: inline; }
}