/* ---------------------------------------------------------------------------
   SELF-HOSTED TYPE, added 30 Aug 2026.
   Until now these two faces were fetched from fonts.googleapis.com and
   fonts.gstatic.com on every single visit, which meant every reader of a
   neighbourhood pharmacy's website was announced to Google before they had
   read a word. Three variable files, 143 KB, now sit in this folder and the
   page contacts nobody.

   Three files and not eight: Google serves ONE variable font per family and
   style and simply points every requested weight at it. The eight downloaded
   files were three distinct files repeated, verified by SHA-256. The weight
   RANGES below are what let one file cover 400, 500 and 700.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:'Karla';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/karla-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/newsreader-latin-var.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';
  font-style:italic;
  font-weight:200 800;
  font-display:swap;
  src:url('fonts/newsreader-latin-italic-var.woff2') format('woff2');
}

/* ==================================================================
   LARKSPUR CHEMISTS & DRUGGISTS
   3 Mulberry Street, Kolkata. Established 1972.

   PALETTE, taken from the shop itself.
   The ultramarine is the signboard's own blue. The brick red is the
   paint on the front steps and the cross mounted beside the door.
   The greens of the building are deliberately left out: another build in
   this same folder is built on green and gold, and two neighbourhood
   pharmacies in one palette would read as one template used twice.

   Deliberately unlike every other build here. another build is warm cream,
   green and marigold. another build is oxblood and gold. an earlier build is
   near-white with a cool teal. This one is deep blue and structural.

   SHAPE RULE, applied everywhere with no exceptions:
     one radius, 4px, on everything. an earlier build next door is built
     entirely on pills, which is the clearest way to keep the two apart
     at a glance.

   TYPE
   Newsreader for display and Karla for body. A serif is a deliberate
   choice here rather than a default: the shop has traded under a
   painted serif signboard since 1972 and the page is arguing that
   longevity. System stacks behind both so the page still reads if the
   font request fails.

   Every theme-dependent colour is declared in the two token blocks and
   nowhere else. The only literals below are inside fixed dark scrims
   over photographs, which do not change between themes by design, and
   those are tokenised as --on-photo / --on-photo-dim.
   ================================================================== */

:root{
  --paper:      #0A0F1C;
  --paper-2:    #101728;
  --card:       #0F1626;

  --ink:        #E8EDF8;
  --ink-2:      #C7D2E6;
  --body:       #A6B2C9;
  --muted:      #8B99B4;

  --blue:       #7C9CE8;
  --blue-deep:  #9DB5EF;
  --blue-wash:  #16203A;

  --accent:     #E58063;
  --accent-deep:#F0997F;
  --accent-wash:#2A1712;
  --on-accent:  #2A0D05;

  --band:       #17305E;
  --on-band:    #EDF2FC;
  --on-band-dim:#B4C3E0;
  --band-line:  rgba(255,255,255,.12);

  --line:       #1F2A42;
  --line-soft:  #182134;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 14px 34px -20px rgba(0,0,0,.7);
  --shadow-lg: 0 34px 70px -34px rgba(0,0,0,.8);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --ease:     cubic-bezier(.22,1,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  --nav-h: 68px;
  --shell: 1200px;
  --gut:   30px;
  /* One radius, 4px, everywhere. There used to be a second token at 3px
     for buttons, which is a distinction nobody can see and therefore not
     a system, just extra rope. an earlier build next door is all pills; this
     one is all 4px. That is the difference that reads. */
  --r:     4px;

  /* ---- VERTICAL SCALE, viewport-HEIGHT aware -----------------------
     This page used to respond to viewport width only. Windows laptops
     default to 125-150%% display scaling, which leaves a real working
     area of roughly 1280x610 CSS pixels, not the 1536x864 this was
     designed at. Measured there, four sections ran between 707px and
     1263px tall, so a whole section could never be seen at once and
     the page read as permanently zoomed in.

     Every vertical value below is therefore driven by the SMALLER of a
     width-based and a height-based measure, so a short viewport tightens
     the rhythm instead of ignoring it. The plain vh line before each
     svh line is the fallback for engines that do not parse svh; svh is
     preferred because mobile browser chrome must not change the layout
     mid-scroll.
     ------------------------------------------------------------------ */
  --section-y: clamp(44px, 7vw, 96px);
  --section-y: min(clamp(44px, 7vw, 96px), 12svh);

  /* No single photograph may be taller than this, so one is always
     visible whole alongside the text that explains it. */
  --media-max:  min(58vh, 520px);
  --media-max:  min(58svh, 520px);
  --media-wide: min(50vh, 440px);
  --media-wide: min(50svh, 440px);

  /* Motion. Custom curves: the built-in CSS easings are too weak to
     read as intentional. Never ease-in on UI - it delays the first
     moment the eye is watching and feels sluggish at any duration. */
  --dur-press: 150ms;
  --dur-ui:    220ms;
  --dur-enter: 460ms;

  /* Used on photographic panels where text sits on a fixed dark scrim,
     so these hold the same value in both themes on purpose. */
  --on-photo:     #FFFFFF;
  --on-photo-dim: #DCE5F7;
  color-scheme: dark;
}



*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* scroll-behavior is NOT smooth: Lenis owns the scrolling now, and two
   smooth implementations fight each other. Under reduced motion Lenis
   never starts and the browser's own instant jump is the correct result. */
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* height:auto is load-bearing. The width/height attributes on each
   <img> are presentational hints that otherwise pin the box to the
   file's own pixel height and silently override every aspect-ratio
   rule in this file. */
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--section-y) 0}

h1,h2,h3{color:var(--ink);font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.015em}
h2{font-size:clamp(30px,4.1vw,45px);margin-bottom:16px}
h3{font-size:21px;line-height:1.28}
p{max-width:66ch}
.lede{font-size:18.5px;color:var(--body);max-width:58ch}

/* The hidden state is scoped under .js, set inline in <head>. If a
   script fails, nothing is hidden and the page still reads. */
/* Opacity resolves fast, position settles slowly. Two reasons.
   It reads better: content arrives, then eases into place, instead of
   the whole block ghosting in. And it keeps text out of the long
   half-faded state that genuinely fails a contrast check, which an
   accessibility audit caught on this page when both properties shared
   a 700ms curve. The stagger now lives on the movement only. */
/* NO OPACITY IN THE REVEAL. The reveal is a slide and nothing else.

   Text part-way through a fade genuinely fails a contrast check, and an
   audit samples whenever it likes: on this page a lede was caught at
   3.21:1 and a figcaption at 2.63:1 against a required 4.5, purely
   because they were mid-transition. Shortening the fade only narrows the
   window it can be caught in; it does not close it.

   visibility is binary and has no intermediate state to sample, and
   movement changes no colour, so it cannot fail. Same fix as the sibling
   builds, applied here 28 Aug 2026. */
.js .rise{visibility:hidden;transform:translateY(15px)}
.js .rise.in{
  visibility:visible;transform:none;
  transition:transform .7s var(--ease-out);
}
.js .rise.in.d1{transition-delay:0s,.07s}
.js .rise.in.d2{transition-delay:0s,.14s}
.js .rise.in.d3{transition-delay:0s,.21s}
/* Already on screen when the page first painted: show it, do not
   animate it. Set by main.js. */
.js .rise.instant{transition:none;transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{visibility:visible;transform:none;transition:none}
}

/* ---------- nav ----------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(1px)){ .nav{background:var(--paper)} }
.nav .shell{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap}
.brand svg{width:30px;height:30px;flex:none}
.brand b{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink);letter-spacing:-.01em;display:block;line-height:1.1}
.brand i{font-style:normal;font-size:11px;letter-spacing:.11em;color:var(--muted);text-transform:uppercase}
.nav-links{display:flex;gap:26px;font-size:15px;font-weight:500}
.nav-links a{text-decoration:none;color:var(--body);transition:color .18s var(--ease)}
@media (max-width:1000px){ .nav-links{display:none} }
/* On a narrow phone the brand plus a full-width call button do not both
   fit, and the button was pushing the page 16px into horizontal scroll.
   The label collapses to the icon; the accessible name lives on the
   anchor's aria-label so nothing is lost to a screen reader. */
@media (max-width:460px){
  .nav-call .lbl{display:none}
  .nav-call{padding:11px 13px;min-width:44px;min-height:44px}
  .brand i{display:none}
}

/* ---------- buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:var(--r);border:1px solid transparent;
  font-family:var(--sans);font-size:15.5px;font-weight:700;
  padding:13px 24px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform var(--dur-press) var(--ease-out),background var(--dur-ui) var(--ease),border-color var(--dur-ui) var(--ease);
}
.btn svg{width:17px;height:17px;flex:none}
.btn:active{transform:scale(.975)}
.btn-solid{background:var(--accent);color:var(--on-accent)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-onBand{background:var(--on-band);color:var(--band)}
.btn-onBandLine{background:transparent;color:var(--on-band);border-color:rgba(255,255,255,.34)}
.btn-sm{padding:10px 17px;font-size:14.5px}

/* ---------- hero: full-bleed photograph ------------------------------ */
.hero{position:relative;min-height:min(680px,88vh);display:flex;align-items:flex-end;
  padding:0 0 68px;overflow:hidden;background:var(--band)}
.hero-bg{position:absolute;inset:0;z-index:0}
/* 26% keeps the whole signboard in frame on a wide viewport. The source
   is a portrait photograph in a landscape box, so the crop is severe:
   at 42% the "LARKSPUR" wordmark was being cut off the top, which is
   the one thing on the shopfront worth showing. */
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
/* A single vertical scrim is enough now that the hero photograph is the
   dispensary wall rather than the signboard. The earlier version needed
   a second horizontal gradient to stop the headline colliding with the
   shop's own painted lettering; the sign now appears once, at full size,
   further down the page, where nothing is written over it. */
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(9,18,44,.62) 0%,rgba(9,18,44,.72) 45%,rgba(7,15,38,.93) 100%);
}
.hero .shell{position:relative;z-index:1;width:100%}
.hero h1{
  font-family:var(--serif);color:#FFFFFF;font-weight:500;
  font-size:clamp(38px,5.6vw,64px);line-height:1.06;letter-spacing:-.022em;
  max-width:15ch;margin-bottom:20px;
}
.hero h1 em{font-style:italic;line-height:1.1;padding-bottom:2px;display:inline-block}
.hero p{color:var(--on-photo-dim);font-size:19px;max-width:52ch;margin-bottom:32px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.estd{
  display:inline-block;margin-bottom:22px;padding:6px 14px;
  border:1px solid rgba(255,255,255,.38);border-radius:var(--r);
  font-size:12.5px;font-weight:700;letter-spacing:.13em;color:#FFFFFF;
}
@media (max-width:720px){ .hero{min-height:0;padding:120px 0 52px} }

/* ---------- since 1972: editorial two-column ------------------------- */
.story .grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
/* The year carries the accent. Brick red was appearing in the nav button
   and then vanishing for four straight sections before returning near the
   footer, which reads as a stranded colour rather than a system. This is
   the page's single most important number, so it is the right place for
   the accent to live. */
.story .year{
  font-family:var(--serif);font-size:clamp(64px,9vw,116px);line-height:.86;
  font-weight:500;color:var(--accent);letter-spacing:-.04em;
}
.story .year span{display:block;font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:.12em;color:var(--muted);margin-top:16px;text-transform:uppercase}
.story p + p{margin-top:18px}
.story .pull{
  margin-top:28px;padding-left:22px;border-left:3px solid var(--accent);
  font-family:var(--serif);font-size:21px;font-style:italic;color:var(--ink);line-height:1.45;
}
@media (max-width:860px){ .story .grid{grid-template-columns:1fr;gap:32px} }

/* ---------- offer: bento, five cells --------------------------------- */
/* ---------- what the shop keeps -------------------------------------
   Rebuilt 25 Aug. The previous version was a four-cell bento with the
   heading and body text laid OVER a photograph of the stock shelving.
   Two things were wrong with it and neither was the layout:

   1. The shelving photograph showed rust, peeling paint and a dirty
      floor. Under a heading reading "Prescription medicines" that is
      the worst possible signal a pharmacy can send, so it is off the
      site entirely.
   2. Type over a busy photograph needs a heavy scrim to stay legible,
      and a heavy scrim always reads as a fix rather than a decision.
      Captions now sit beneath their photographs instead.

   One photograph, chosen because it is the only frame that actually
   evidences the claim being made: five decades of stock, floor to
   ceiling. Everything else is type.
   -------------------------------------------------------------------- */
.keeps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:clamp(28px,4vh,44px)}

.keeps-shot{grid-column:span 2;margin:0;display:flex;flex-direction:column}
.keeps-shot img{width:100%;border-radius:var(--r);border:1px solid var(--line);
  aspect-ratio:21/9;max-height:var(--media-max);object-fit:cover;object-position:center 46%}
.keeps-shot figcaption{padding-top:12px;font-size:14.5px;color:var(--muted);
  letter-spacing:.005em}

/* The grid is three columns: the photograph spans two on the top row with
   the first-aid slab beside it, and the three text cells fill the row
   below exactly. Nothing is left over, so there is no gap to design
   around. Removing the second photograph on 26 Aug is what took this from
   four columns to three. */


.keeps-slab{background:var(--band);border-radius:var(--r);padding:clamp(24px,3.4vh,32px);
  display:flex;flex-direction:column;justify-content:flex-end}
.keeps-slab h3{color:#FFFFFF;margin-bottom:8px}
.keeps-slab p{color:var(--on-band-dim);font-size:15.5px}

.keeps-cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vh,30px);display:flex;flex-direction:column;justify-content:flex-end}
.keeps-cell h3{margin-bottom:8px}
.keeps-cell p{font-size:15.5px;color:var(--body)}

@media (max-width:980px){
  .keeps{grid-template-columns:repeat(2,1fr)}
  .keeps-shot{grid-column:span 2}
}
@media (max-width:560px){
  .keeps{grid-template-columns:1fr}
  .keeps-shot{grid-column:span 1}
  .keeps-shot img{aspect-ratio:16/10}
}

/* ---------- doctor: split -------------------------------------------- */
.doc-sec{background:var(--paper-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.doc-sec .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.doc-card{background:var(--band);border-radius:var(--r);padding:40px;color:var(--on-band)}
.doc-card h3{font-size:29px;color:#FFFFFF;margin-bottom:6px}
.doc-card .qual{font-size:15px;color:var(--on-band-dim);margin-bottom:26px}
.doc-card dl{border-top:1px solid var(--band-line)}
.doc-card dl div{display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--band-line)}
.doc-card dt{color:var(--on-band-dim);font-size:15px}
.doc-card dd{color:#FFFFFF;font-weight:700;font-size:15.5px;text-align:right}
@media (max-width:860px){ .doc-sec .grid{grid-template-columns:1fr;gap:34px} }

/* ---------- order band ------------------------------------------------ */
.order{background:var(--band);color:var(--on-band)}
.order h2{color:#FFFFFF}
.order .lede{color:var(--on-band-dim)}
.order .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
/* Belt and braces against the same min-content trap anywhere in this
   grid, not just the textarea. */
.order .grid > *{min-width:0}
.order ol{list-style:none;counter-reset:s;margin-top:30px}
.order ol li{counter-increment:s;position:relative;padding:0 0 22px 46px;color:var(--on-band-dim);font-size:16px}
.order ol li::before{
  content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border:1px solid var(--band-line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:15px;color:#FFFFFF;
}
.order ol li b{color:#FFFFFF;font-weight:700;display:block;margin-bottom:2px;font-size:16.5px}
.form{background:rgba(255,255,255,.06);border:1px solid var(--band-line);border-radius:var(--r);padding:28px}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--on-band);margin-bottom:7px}
/* min-width:0 is load-bearing on a phone. A textarea carries an
   intrinsic min-content width from its default column count, and a grid
   item's automatic minimum size is min-content, so without this the
   whole order column refused to shrink below about 390px and pushed the
   page into horizontal scroll at 375px. */
.field textarea,.field input{
  width:100%;min-width:0;max-width:100%;
  font-family:var(--sans);font-size:15.5px;color:#FFFFFF;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r);padding:12px 14px;
}
.field textarea{min-height:96px;resize:vertical}
.field textarea::placeholder,.field input::placeholder{color:#9FB1D4}
.field textarea:focus,.field input:focus{outline:2px solid #FFFFFF;outline-offset:-1px;background:rgba(255,255,255,.13)}
.field .hint{font-size:13px;color:var(--on-band-dim);margin-top:7px}
.attach{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.attach-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px dashed rgba(255,255,255,.36);border-radius:var(--r);
  background:transparent;color:var(--on-band);font-family:var(--sans);
  font-size:14px;font-weight:600;padding:11px 15px}
.attach-btn svg{width:16px;height:16px}
/* The real <input type="file"> is visually hidden but still focusable,
   and a <label> cannot take focus itself. Without this, a keyboard user
   tabbing through the form loses the focus ring completely between the
   textarea and the name field. WCAG 2.4.7. */
.attach:focus-within .attach-btn{
  outline:3px solid var(--on-photo);outline-offset:3px;border-color:var(--on-photo);
}
.thumb{display:none;align-items:center;gap:10px}
.thumb.on{display:flex}
.thumb img{width:50px;height:50px;object-fit:cover;border-radius:var(--r);border:1px solid var(--band-line)}
.thumb button{background:none;border:none;color:var(--on-band-dim);font-family:var(--sans);
  font-size:13px;text-decoration:underline;cursor:pointer;padding:4px}
.form .note{font-size:13px;color:var(--on-band-dim);margin-top:14px;line-height:1.55}
@media (max-width:860px){ .order .grid{grid-template-columns:1fr;gap:36px} }

/* ---------- inside the shop ------------------------------------------ */
.wide{border-radius:var(--r);overflow:hidden;margin-top:clamp(26px,4vh,40px);
  background:var(--paper-2);border:1px solid var(--line)}
.wide img{width:100%;aspect-ratio:2200/1000;object-fit:cover}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.pair figure{margin:0;display:flex;flex-direction:column}
.pair img{width:100%;aspect-ratio:16/10;max-height:var(--media-wide);object-fit:cover;
  border-radius:var(--r);border:1px solid var(--line)}
.pair figcaption{padding-top:12px;font-size:14.5px;color:var(--muted)}

/* The pair used to be two photographs. One of them was a dark frame of
   a back doorway with a cabinet door across it, which read as a storage
   cupboard rather than a shop, so it is off the site. Replacing it with
   type rather than another photograph is the better answer anyway: a
   section called "Finding the blue board" should tell someone what to
   look for, and there were only ever four good frames to spend. */
.landmarks{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(24px,3.4vh,32px);display:flex;flex-direction:column;justify-content:center}
.landmarks h3{margin-bottom:16px}
.landmarks ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.landmarks li{position:relative;padding-left:22px;font-size:15.5px;color:var(--body);line-height:1.55}
.landmarks li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  background:var(--accent);border-radius:1px}
@media (max-width:720px){ .landmarks{padding:26px} }
@media (max-width:720px){
  .pair{grid-template-columns:1fr}
  .wide img{aspect-ratio:16/10}
}

/* ---------- FAQ -------------------------------------------------------- */
.faq{max-width:840px;margin-top:36px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
  font-family:var(--serif);font-size:19.5px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
/* A plus that becomes a minus, drawn from two rules. an earlier build uses a
   rotating chevron; using the same indicator on both would be one more
   thing making the pair look like one template. */
.faq summary::before,.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:15px;height:2.2px;
  background:var(--accent);transition:transform .3s var(--ease);
}
.faq summary::after{transform:rotate(90deg)}
.faq details[open] summary::after{transform:rotate(0deg)}
.faq .ans{padding:0 0 23px;color:var(--body);font-size:16.5px}
.faq .ans p + p{margin-top:11px}

/* ---------- visit ------------------------------------------------------ */
.visit{background:var(--paper-2);border-top:1px solid var(--line-soft)}
.visit .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.vlist{border-top:1px solid var(--line)}
.vlist div{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--line)}
.vlist dt{color:var(--muted);font-size:15.5px}
.vlist dd{color:var(--ink);font-weight:700;text-align:right;font-size:16px}
.vlist a{color:var(--accent);text-decoration:none;border-bottom:1px solid currentColor}
@media (max-width:860px){ .visit .grid{grid-template-columns:1fr;gap:32px} }

/* ---------- footer ------------------------------------------------------ */
footer{background:var(--band);color:var(--on-band-dim);padding:60px 0 38px}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
/* h3 rather than h4: the preceding section heading is an h2, and
   jumping to h4 skips a level, which a screen reader reports as a
   broken outline. Lighthouse flagged exactly this. */
.foot h3{font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-band-dim);margin-bottom:14px;font-family:var(--sans);line-height:1.4}
.foot .fbrand{font-family:var(--serif);font-size:23px;font-weight:600;color:#FFFFFF;margin-bottom:4px}
.foot .fsub{font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--on-band-dim);margin-bottom:14px}
.foot p,.foot a,.foot li{font-size:15.5px;color:var(--on-band-dim);text-decoration:none;line-height:1.75}
.foot ul{list-style:none}
.foot-end{margin-top:44px;padding-top:22px;border-top:1px solid var(--band-line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:14px}
.foot-end a{text-decoration:underline;text-underline-offset:3px}

/* Site credit, added 29 Aug 2026 at his request. Its own line under the
   footer rule rather than a third item in .foot-end, because that row is
   space-between and a third span would push the copyright off the left
   edge on a narrow screen. Small, muted and centred: a maker's mark, not
   a message competing with the shop's own information. */
.byline{margin:18px auto 0;text-align:center;font-size:13px;
  color:var(--on-band-dim);opacity:.78;letter-spacing:.01em;
  /* max-width:none overrides the global p{max-width:66ch} on line 188,
     which was silently shrinking this to 509px inside a 1140px footer and
     parking the credit left of centre. Caught by measuring the rendered
     box, not by reading the rule. */
  max-width:none}
@media (max-width:820px){ .foot{grid-template-columns:1fr;gap:28px} }

/* ---------- legal page -------------------------------------------------- */
.doc{max-width:780px;padding:52px 0 92px}
.doc h1{font-size:clamp(32px,4.4vw,46px);margin-bottom:12px}
.doc h2{font-size:23px;margin:42px 0 12px}
.doc p,.doc li{font-size:16.5px;color:var(--body)}
.doc ul{margin:12px 0 0 20px}
.doc li{margin-bottom:8px}
.doc .back{display:inline-flex;gap:8px;margin-bottom:28px;font-size:15px;
  font-weight:700;color:var(--accent);text-decoration:none}
.doc .updated{font-size:14.5px;color:var(--muted)}

/* ---------- hover, gated ---------------------------------------------
   Every hover rule on this page is behind this query on purpose. A
   phone fires :hover on tap and leaves it applied, so an ungated hover
   colour looks like a stuck selection to the person using it. Fine
   pointers only. */
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover{color:var(--accent)}
  .btn-solid:hover{background:var(--accent-deep)}
  .btn-line:hover{border-color:var(--accent);color:var(--accent)}
  .btn-onBand:hover{background:#fff}
  .btn-onBandLine:hover{border-color:var(--on-band)}
  .attach-btn:hover{border-color:var(--on-photo)}
  .foot a:hover{color:#FFFFFF}
  .doc .back:hover{text-decoration:underline}
}

/* ================= TAP TARGETS =================
   SECURITY-AND-LEGAL.md section 4 sets the bar at 44x44 px with adequate
   spacing. That is stricter than WCAG 2.1 AA, which has no target-size
   criterion, and stricter than WCAG 2.2's 24x24 -- which is why
   Lighthouse's target-size audit passed while the footer links were
   still 16-18.4 px tall. Measured at 360 px wide, not assumed.

   Text position and layout rhythm are unchanged; only the hit area
   grows. Matches the identical block on the another build build so the two
   pharmacy pages do not drift apart again. */
.foot li{margin-bottom:0}
.foot li a{display:inline-flex;align-items:center;min-height:44px}
.foot li + li{margin-top:2px}

/* "Privacy and terms" sits in .foot-end, not a list. */
.foot-end a{display:inline-flex;align-items:center;min-height:44px}

/* Header brand lockup was 30 px tall. */
.brand{min-height:44px}


/* ---------- the map -------------------------------------------------
   Matches the sibling builds. aspect-ratio rather than a fixed height so
   it cannot end up letterboxed on a short laptop screen, and the frame
   carries the page's own corner radius rather than Google's square edge. */
.map{margin-top:clamp(26px,4vh,48px);border-radius:var(--r-card,14px);
  overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.map iframe{display:block;width:100%;aspect-ratio:16/7;border:0}
@media (max-width:720px){ .map iframe{aspect-ratio:4/3} }

/* ===========================================================================
   COOKIE NOTICE, added 30 Aug 2026.
   Built by main.js so its wording cannot drift between index.html and
   legal.html. A notice, not a gate: this site sets nothing of its own, so
   there is nothing to refuse and no fake "reject" button. It says what is
   true, points at the detail, and closes.
   Uses this site's own tokens - it is not a transplant from another build.
   =========================================================================== */
.cookiebar{
  position:fixed; z-index:60;
  left:clamp(.5rem,2vw,1.25rem); right:clamp(.5rem,2vw,1.25rem);
  bottom:clamp(.5rem,2vw,1.25rem);
  max-width:46rem; margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.85rem 1.15rem;
  padding:1rem 1.15rem;
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:10px;
  box-shadow:var(--shadow-lg);
  transform:translateY(130%); opacity:0;
  transition:transform .42s var(--ease-out), opacity .42s var(--ease-out);
}
.cookiebar--in{transform:none; opacity:1}
.cookiebar--out{transform:translateY(130%); opacity:0}
.cookiebar__text{
  flex:1 1 20rem; margin:0;
  font-family:var(--sans); font-size:.88rem; line-height:1.55; color:var(--body);
}
.cookiebar__text strong{color:var(--ink); font-weight:700}
.cookiebar__text a{color:var(--accent); font-weight:500}
.cookiebar__btn{
  flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; min-width:44px; padding:.6rem 1.4rem;
  border:0; border-radius:999px; cursor:pointer;
  background:var(--accent); color:var(--on-accent);
  font-family:var(--sans); font-size:.82rem; font-weight:700; letter-spacing:.02em;
  transition:transform .16s var(--ease-out), background-color .2s var(--ease-out);
}
.cookiebar__btn:hover{background:var(--accent-deep)}
.cookiebar__btn:active{transform:scale(.97)}
.cookiebar__btn:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cookiebar{transition:none; transform:none; opacity:1}
  .cookiebar--out{display:none}
}

/* ---------------------------------------------------------------------------
   SINGLE MODE, committed 30 Aug 2026.
   This site used to carry a full light palette AND a dark override, while its
   hero stayed dark in both. In light mode a reader scrolled from a dark,
   art-directed hero straight into a near-white page - two sites stapled
   together. His words: "in light mode it's completely garbage".
   The dark palette is now the only palette, the way another build has always been.
   Do not reintroduce a prefers-color-scheme block here.
   --------------------------------------------------------------------------- */

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