/* ==========================================================================
   CHANDANBARI - 7 Magnolia Road, the park, Kolkata.

   ONE COMMITTED LOOK. There is deliberately no prefers-color-scheme block in
   this file. The page is dark, always. That is the owner's instruction and it
   overrides the dual-mode default in the design-taste-frontend skill.

   WHAT CHANGED IN THIS VERSION, AND WHY
   The first build was rejected for two reasons, both fair: "does not look
   luxurious" and "feels same colorish". It was one near-black ground with a
   single accent, and the fabric was a thin strip under the headline. So:

     1. THE CLOTH IS NOW THE BACKGROUND. Their photograph is a lit 3D surface
        behind the whole page, not a band inside it. See cloth3d.js.
     2. THREE GROUNDS, NOT ONE. Ink-teal, aubergine and peacock. All dark, so
        the page-theme lock holds, but they are genuinely different hues, which
        is what "same colorish" was pointing at.
     3. GLASS. Panels sit on the fabric rather than replacing it. The
        ui-ux-pro-max glassmorphism entry is explicit that this only works over
        a vibrant background, which is exactly what the cloth now provides.

   EVERY COLOUR IS MEASURED OFF THEIR OWN PHOTOGRAPHS, 30 Aug 2026:
     carmine #AF1B2B  their logo seal        gold  #E8B54B  their sequins
     peacock #0E405E  their bridal lehengas  ink   #08131A  their dark silk
   The catalogue answer for "luxury" was black plus #A16207 brass. That is the
   exact palette design-taste-frontend section 4.2 bans by hex as the
   machine-made premium default, so it was rejected.

   CORNER RADIUS: zero, everywhere, on purpose, including the glass. Couture
   houses are sharp. It should read like a printed lookbook, not an app.
   ========================================================================== */

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-var.woff2") format("woff2-variations");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/eb-garamond-latin-italic-var.woff2") format("woff2-variations");
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-latin-var.woff2") format("woff2-variations");
  font-weight: 300 800; font-style: normal; font-display: swap;
}

/* Metric-matched fallbacks. These fix a measured defect: Lighthouse mobile
   scored CLS 0.21 because EB Garamond sets 16.3% narrower than Georgia, so
   the headline reflowed when the real face arrived. size-adjust is the
   measured width ratio; ascent and descent come from the real fonts' own hhea
   tables (EB Garamond 1000 upem, asc 1007, desc 298; Manrope 2000, 2132, 600)
   divided by that ratio. */
@font-face {
  font-family: "EB Garamond Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Noto Serif"), local("Droid Serif");
  size-adjust: 83.7%; ascent-override: 120.3%; descent-override: 35.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  src: local("Segoe UI"), local("Roboto"), local("Helvetica Neue"), local("Arial");
  size-adjust: 103.3%; ascent-override: 103.2%; descent-override: 29.0%; line-gap-override: 0%;
}

:root {
  /* the three grounds */
  --ink:        #08131A;   /* teal-black, off their dark silk */
  --ink-2:      #0B1A22;
  --plum:       #17091A;   /* aubergine */
  --plum-2:     #1F0D22;
  --peacock:    #072B39;   /* off their bridal lehengas */

  --text:       #F7EFE8;
  --muted:      #C3B0AA;
  --rule:       #2C2027;
  --rule-soft:  #1E161B;

  --carmine:      #E24257;
  --carmine-solid:#B01230;
  --carmine-lift: #C4162F;
  --on-carmine:   #FFF7F5;
  --gold:         #E8B54B;

  /* Glass, tinted DARK rather than white.
     A white-tinted panel over a moving photograph makes text contrast depend
     on whatever happens to be behind it that second, which is the known risk
     the ui-ux-pro-max glassmorphism entry flags as
     "risk:conditional | requires:contrast-text-4.5". Measured over a bright
     gold area it fell to about 4.8:1 and would have gone under. A dark tint
     puts a floor under it: the blur, the bright edge and the inner highlight
     still read as glass, but the type is legible whatever passes behind. */
  --glass:        rgba(7, 16, 22, 0.62);
  --glass-strong: rgba(7, 16, 22, 0.76);
  --glass-edge:   rgba(255, 255, 255, 0.22);
  --glass-blur:   20px;

  --serif: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", "Manrope Fallback", "Segoe UI", system-ui, -apple-system, sans-serif;

  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --pad:  clamp(1.25rem, 5vw, 3.5rem);
  --wrap: 1240px;
  --bar:  34px;      /* height of the concept bar, guardrail 1 */
}

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

/* --------------------------------------------------------------------------
   GUARDRAIL 1 of 6 - THE CONCEPT BAR.This is a concept website. The business shown is fictional. This build lives
   in personal/ for filing only; the "no guardrails here" rule for that folder
   does NOT apply to it, exactly as it does not apply to personal/another build/.

   Fixed to the top of the viewport, above the masthead, on every page. It is
   carmine because that is their own logo colour and because it has to be the
   first thing anybody sees. The wording follows the owner's established
   pattern from the another build build, em dash included: that wording is his, it
   is recorded twice in his own files as deliberate, and matching it across
   his sites matters more than this build's own no-em-dash rule.
   -------------------------------------------------------------------------- */
.conceptbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  min-height: var(--bar);
  display: flex; align-items: center; justify-content: center;
  background: var(--carmine-solid); color: var(--on-carmine);
  padding: 0.34rem 0.9rem;
}
.conceptbar p {
  margin: 0; max-width: none; text-align: center;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(0.66rem, 0.6rem + 0.34vw, 0.8rem);
  letter-spacing: 0.055em; text-transform: uppercase; line-height: 1.35;
}
.conceptbar strong { font-weight: 700; }
.foot__note {
  margin: 0 0 0.75rem; max-width: none;
  font-weight: 600; color: var(--carmine); letter-spacing: 0.03em;
}

html { -webkit-text-size-adjust: 100%; }
/* Lenis drives the scrolling, so native smooth-scroll is off. When Lenis is
   not running (reduced motion, or the script failed) the browser's own
   scrolling takes over untouched. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  padding-top: var(--bar);          /* the fixed concept bar sits here */
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  font-weight: 350;
  line-height: 1.68;
  letter-spacing: 0.004em;
  overflow-x: hidden;
}

img, svg, iframe, canvas { max-width: 100%; display: block; }
img { height: auto; background: var(--ink-2); }

/* --------------------------------------------------------------------------
   THE LIVING CLOTH. Fixed behind everything. cloth3d.js paints a lit,
   displaced 3D surface here from their own photograph; until it is ready, and
   forever on any device that cannot or should not run it, the photograph
   itself sits in the same box and does the same job.
   -------------------------------------------------------------------------- */
.cloth {
  position: fixed;
  inset: var(--bar) 0 0 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
  pointer-events: none;
}
.cloth img,
.cloth__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cloth__canvas { opacity: 0; transition: opacity 900ms var(--ease-out); }
.cloth-on .cloth__canvas { opacity: 1; }
/* the still photograph steps aside only once the canvas is actually painting */
.cloth-on .cloth img { opacity: 0; transition: opacity 900ms var(--ease-out); }

/* Everything above the cloth. */
.masthead, main, .foot, .cookienote { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Skip link and focus.
   -------------------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--carmine-solid); color: var(--on-carmine);
  padding: 1rem 1.25rem; font: 600 0.95rem/1 var(--sans);
}
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--carmine); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.wrap--narrow { max-width: 780px; }

section { padding-block: clamp(4.5rem, 11vw, 9rem); }

/* The three grounds. All dark, so the page never flips theme, but genuinely
   different hues rather than three shades of the same near-black. */
.band-ink    { background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%); }
.band-plum   { background: linear-gradient(180deg, var(--plum) 0%, var(--plum-2) 100%); }
.band-peacock{ background: linear-gradient(160deg, var(--peacock) 0%, #041D27 100%); }

/* A section that lets the cloth through. The scrim is what keeps the type
   legible over a moving photograph; it is measured, not eyeballed. */
.band-cloth {
  background:
    linear-gradient(180deg, rgba(8,19,26,0.97) 0%, rgba(8,19,26,0.72) 22%,
                            rgba(8,19,26,0.72) 78%, rgba(8,19,26,0.97) 100%);
}

/* --------------------------------------------------------------------------
   Glass. Only ever over the cloth or over a photograph; glass on a flat
   colour is just a grey box.
   -------------------------------------------------------------------------- */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 24px 70px rgba(0,0,0,0.45);
  padding: clamp(1.5rem, 3.4vw, 2.75rem);
}
.glass--strong { background: var(--glass-strong); }
/* Some readers ask their system to reduce transparency. Give them a solid
   panel rather than a blur they did not want. */
@media (prefers-reduced-transparency: reduce) {
  .glass {
    background: rgba(8, 19, 26, 0.93);
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   Type
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.016em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); line-height: 1.03; }
h2 { font-size: clamp(1.95rem, 4.4vw, 3.15rem); line-height: 1.12; }
h3 { font-size: clamp(1.2rem, 2.1vw, 1.5rem); line-height: 1.24; margin-bottom: 0.4em; }

/* Italic display type needs descender room: "lehengas" carries a g, and a
   leading of 1 clips it. */
.em {
  font-style: italic; font-weight: 500;
  line-height: 1.1; padding-bottom: 0.07em; display: inline-block;
}

p { margin: 0 0 1.15em; max-width: 62ch; }
.lede {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.34rem);
  line-height: 1.58; color: var(--text); max-width: 48ch;
}
.muted { color: var(--muted); }
.small { font-size: 0.9rem; line-height: 1.6; }

a { color: var(--carmine); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--text); }
/* On peacock the carmine only clears AA at large sizes, so links there are
   text-coloured with a rule under them instead. Measured, not assumed. */
.band-peacock a { color: var(--text); text-decoration-color: rgba(247,239,232,0.55); }
.band-peacock a:hover { text-decoration-color: var(--text); }

/* A hairline of real gold. Used as a rule, never as a fill: gold fills are
   the machine-made luxury default and two of the owner's other sites already
   lean on gold. */
.rule-gold {
  width: 62px; height: 2px; border: 0; margin: 0 0 1.75rem;
  background: linear-gradient(90deg, var(--gold), rgba(232,181,75,0.05));
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 48px; padding: 0.9rem 1.6rem;
  font: 600 1rem/1.2 var(--sans); letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
  transition: transform 160ms var(--ease-out), background-color 200ms ease,
              border-color 200ms ease, color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary { background: var(--carmine-solid); color: var(--on-carmine); }
.btn--ghost {
  background: rgba(255,255,255,0.04); color: var(--text);
  border-color: var(--glass-edge);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--carmine-lift); color: var(--on-carmine); }
  .btn--ghost:hover { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.09); }
}
.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* --------------------------------------------------------------------------
   Masthead. Glass, so the cloth reads through it.
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky; top: var(--bar); z-index: 20;
  border-bottom: 1px solid var(--rule-soft);
  background: rgba(8, 19, 26, 0.72);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 64px; padding-block: 0.6rem;
}
.brand {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  text-decoration: none; color: var(--text);
  font-family: var(--serif); font-size: 1.55rem; font-weight: 600;
  letter-spacing: 0.01em; padding-block: 0.3rem;
}
.brand span { color: var(--carmine); }
.nav { display: flex; align-items: center; gap: clamp(0.5rem, 1.8vw, 1.5rem); }
.nav a {
  color: var(--muted); text-decoration: none;
  font-size: 0.94rem; font-weight: 500;
  padding: 0.7rem 0.45rem; min-width: 44px; text-align: center;
  transition: color 180ms ease;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav__call { color: var(--text) !important; font-weight: 600; }
@media (max-width: 560px) {
  .masthead__in { flex-direction: column; align-items: flex-start; gap: 0.35rem; padding-block: 0.8rem; }
  .nav { flex-wrap: wrap; gap: 0.75rem; }
}

/* --------------------------------------------------------------------------
   HERO. Full viewport, cloth behind, one glass panel on it.
   -------------------------------------------------------------------------- */
.hero {
  display: flex; align-items: center;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: none;                    /* the cloth is the background */
}
/* Only the home page opens on a full screen of cloth. A privacy page that
   makes you scroll past a viewport of fabric to reach the first sentence is
   theatre, not design. */
.hero--tall { min-height: calc(100dvh - 64px - var(--bar)); }
.hero__panel { max-width: 44rem; }
/* The page-wide h1 scale is set for a headline sitting on open background.
   Inside the hero panel it has less room, so it steps down. Four lines
   overflowed the panel and pushed the call button off the first screen. */
.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.65rem); margin-bottom: 0.45em; }
.hero .lede { margin-bottom: 0; }
.hero__meta {
  margin-top: 2.25rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex; flex-wrap: wrap; gap: 0.4rem 2rem;
  font-size: 0.92rem; color: var(--muted);
}
.hero__meta p { margin: 0; max-width: none; }
.hero__meta strong { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   The counter: what they sell. Cards over the plum ground.
   -------------------------------------------------------------------------- */
.counter {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(1rem, 2.2vw, 1.6rem);
  margin-top: 3rem; padding: 0; list-style: none;
}
.counter li { margin: 0; }
.counter figure {
  margin: 0; overflow: hidden; height: 100%;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
}
.counter img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 700ms var(--ease-out), filter 700ms ease;
}
.counter figcaption {
  padding: 1.1rem 1.25rem 1.4rem;
  font-family: var(--serif); font-size: 1.3rem; line-height: 1.25;
}
.counter .note {
  display: block; font-family: var(--sans); font-size: 0.9rem;
  color: var(--muted); margin-top: 0.35rem; line-height: 1.55;
}
@media (min-width: 620px) { .counter { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .counter { grid-template-columns: repeat(3, 1fr); } }
@media (hover: hover) and (pointer: fine) {
  .counter figure:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.05); }
}

/* --------------------------------------------------------------------------
   Statement band
   -------------------------------------------------------------------------- */
.statement h2 { max-width: 24ch; }
.statement .lede { max-width: 54ch; }
.statement__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 3rem; padding-top: 2.5rem;
  border-top: 1px solid rgba(247,239,232,0.18);
}
.statement__grid h3 { font-size: 1.18rem; margin-bottom: 0.35rem; }
.statement__grid p { color: rgba(247,239,232,0.86); font-size: 0.97rem; margin: 0; }

/* --------------------------------------------------------------------------
   Split
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .split { grid-template-columns: 0.95fr 1.05fr; }
  .split--flip .split__media { order: 2; }
}
.split__media { position: relative; }
.split__media img { width: 100%; }

/* --------------------------------------------------------------------------
   Quote, set over the living cloth
   -------------------------------------------------------------------------- */
.quote { border: 0; margin: 0; padding: 0; }
.quote p {
  font-family: var(--serif);
  font-size: clamp(1.65rem, 3.8vw, 2.6rem);
  line-height: 1.3; font-style: italic; color: var(--text);
  max-width: 22ch; margin: 0 0 1.4rem; padding-bottom: 0.08em;
}
.quote footer { font-size: 0.92rem; color: var(--muted); font-style: normal; }

/* --------------------------------------------------------------------------
   Visit
   -------------------------------------------------------------------------- */
.shop { border-top: 2px solid var(--carmine-solid); padding-top: 1.4rem; }
.shop h3 { margin-bottom: 0.5rem; }
.shop address { font-style: normal; color: var(--muted); margin-bottom: 1rem; line-height: 1.7; }
.shop p a { display: inline-block; font-weight: 600; padding-block: 0.7rem; }
.mapframe {
  width: 100%; height: clamp(280px, 44vw, 460px);
  border: 1px solid var(--rule); filter: grayscale(0.2) contrast(1.05);
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   Gallery, with a real 3D tilt on hover
   -------------------------------------------------------------------------- */
.gallery {
  display: grid; grid-template-columns: 1fr;
  gap: clamp(0.75rem, 1.8vw, 1.25rem); margin-top: 3rem;
  perspective: 1200px;
}
@media (min-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery figure {
  margin: 0; overflow: hidden; transform-style: preserve-3d;
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out);
}
.gallery img {
  width: 100%; aspect-ratio: 3 / 4.6; object-fit: cover; object-position: center 32%;
  transition: transform 800ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .gallery figure:hover {
    transform: rotateX(3deg) rotateY(-4deg) translateZ(22px);
    box-shadow: 0 40px 90px rgba(0,0,0,0.6);
  }
  .gallery figure:hover img { transform: scale(1.06); }
}
.gallery figcaption { padding: 0.75rem 0.9rem 1rem; font-size: 0.87rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   Steps
   -------------------------------------------------------------------------- */
.steps {
  list-style: none; padding: 0; margin: 3rem 0 0;
  display: grid; gap: clamp(1.5rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.steps li { border-top: 1px solid var(--rule); padding-top: 1.2rem; }
.steps h3 { font-size: 1.15rem; }
.steps p { margin: 0; color: var(--muted); font-size: 0.97rem; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--serif); font-size: clamp(1.1rem, 2vw, 1.32rem);
  line-height: 1.35; color: var(--text); min-height: 48px;
  transition: color 180ms ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 0.35rem; top: 1.85rem;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--carmine); border-bottom: 1.5px solid var(--carmine);
  transform: rotate(45deg); transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--carmine); }
.faq .answer { padding: 0 0 1.4rem; }
.faq .answer p { margin: 0 0 0.8em; color: var(--muted); max-width: 68ch; }
.faq .answer p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.foot {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  background: linear-gradient(180deg, rgba(8,19,26,0.94), var(--ink));
}
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; margin-bottom: 2.5rem; }
@media (min-width: 760px) { .foot__grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.foot h2 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.foot h3 {
  font-size: 0.8rem; font-family: var(--sans); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
  margin-bottom: 0.9rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; }
/* Footer rows were 22px tall and one of them is a phone number. Padded to
   clear 44px while the visual rhythm stays where it was. */
.foot li { margin-bottom: 0; }
.foot li a { display: inline-block; padding-block: 0.62rem; min-width: 44px; }
/* Underlined, not just tinted: a link told apart from its neighbours by colour
   alone was a real defect found on another build on 30 Aug 2026. */
.foot a {
  color: var(--text); text-decoration: underline;
  text-decoration-color: rgba(247,239,232,0.35); text-underline-offset: 0.2em;
}
.foot a:hover { color: var(--carmine); text-decoration-color: var(--carmine); }
.foot address { font-style: normal; color: var(--muted); line-height: 1.7; font-size: 0.94rem; }
.foot .ft-h2 { margin-top: 1.5rem; }
.foot__base {
  border-top: 1px solid var(--rule-soft); padding-top: 1.75rem;
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-items: baseline;
  font-size: 0.86rem; color: var(--muted);
}
.foot__base p { margin: 0; max-width: none; }
.foot__base p a { display: inline-block; padding-block: 0.7rem; }

/* This site sets no cookie, so the notice says exactly that and offers nothing
   to accept or reject. A reject button for something never set would be a lie. */
.cookienote {
  background: rgba(8,19,26,0.96); border-top: 1px solid var(--rule-soft);
  padding-block: 0.9rem; font-size: 0.84rem; color: var(--muted);
}
.cookienote p { margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Prose and breadcrumb
   -------------------------------------------------------------------------- */
.prose h2 { margin-top: 2.5rem; font-size: clamp(1.4rem, 2.6vw, 1.85rem); }
.prose h2:first-of-type { margin-top: 1.5rem; }
.prose ul { padding-left: 1.2rem; max-width: 62ch; }
.prose li { margin-bottom: 0.5rem; }
.pt-0 { padding-top: 0; }

.crumbs { font-size: 0.86rem; color: var(--muted); margin-bottom: 1.5rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; color: var(--rule); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }

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

   NOTHING IS HIDDEN WAITING FOR JAVASCRIPT. The starting state applies only
   under html.js, and that class is set by two inline lines in the head, so
   with JavaScript off every section is visible from the first paint.
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.in:nth-child(2) { transition-delay: 70ms; }
.js .reveal.in:nth-child(3) { transition-delay: 140ms; }
.js .reveal.in:nth-child(4) { transition-delay: 210ms; }
.js .reveal.in:nth-child(5) { transition-delay: 280ms; }
.js .reveal.in:nth-child(6) { transition-delay: 350ms; }

/* --------------------------------------------------------------------------
   Reduced motion. Everything that moves stops, including the cloth, which
   never starts in the first place. Colour and opacity stay, because they aid
   comprehension rather than causing problems.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .counter figure:hover img,
  .gallery figure:hover,
  .gallery figure:hover img { transform: none; }
}

/* Print: the address and the phone number are the point. */
@media print {
  body { background: #fff; color: #000; }
  .masthead, .cloth, .mapframe, .cookienote, .actions { display: none; }
  .conceptbar { position: static; background: #fff; color: #000; border-bottom: 2px solid #000; }
  a { color: #000; }
}

/* Concept-site additions. */
.map-stub{padding:28px 24px;border:1px solid currentColor;opacity:.75;font-size:.95em}