/* ============================================================================
   OROVELL / SITE CHROME
   The single source for the nav, its drawer and veil, the button family, the
   label rank, the grain and the footer. Every page loads this sheet AFTER its
   own page sheet, the home (index.html + css/vc.css) included, so every page
   renders the same chrome from the same rules (client ruling 6). No other
   sheet carries a copy of these blocks. Because it loads last, the tokens
   below are the site's tokens: a page sheet must not define competing values
   under these names.
   ========================================================================= */

/* ------------------------------------------------------------------ tokens */
:root{
  --obsidian:#050505;
  --gold:#E0B87E;
  --wine:#4B1928;
  --linen:#F5F5F4;

  /* linen at graded alphas: the only "greys" on the dark */
  --l90:rgba(245,245,244,.90);
  --l72:rgba(245,245,244,.72);
  --l55:rgba(245,245,244,.55);
  --l45:rgba(245,245,244,.45);
  --l30:rgba(245,245,244,.30);
  --l20:rgba(245,245,244,.20);
  --l12:rgba(245,245,244,.12);
  --l06:rgba(245,245,244,.06);

  /* obsidian at graded alphas: the same job on the linen bands */
  --o72:rgba(5,5,5,.72);
  --o55:rgba(5,5,5,.55);
  --o45:rgba(5,5,5,.45);
  --o20:rgba(5,5,5,.20);
  --o12:rgba(5,5,5,.12);

  /* contract rule 7: ONE hairline alpha governs every rule on the page.
     Dashed versus solid is the only distinction a border is allowed to carry. */
  --hair:rgba(245,245,244,.16);
  --hair-d:rgba(5,5,5,.16);

  /* deviation 1: one house radius, everywhere */
  --r:5px;

  --shell:1500px;
  --rail:1240px;
  --gut:clamp(20px,4.2vw,56px);
  --pad:clamp(76px,9.4vw,148px);
  /* Daylight's section breath, 140 to 180: the pass-2 chapters open on it */
  --pad-xl:clamp(120px,12.5vw,180px);
  /* the craft run's outer column, Daylight's span-w-6 (335 of 1440) */
  --run-col:clamp(260px,23.3vw,360px);

  --ease:cubic-bezier(.19,1,.22,1);
  --circ:cubic-bezier(.075,.82,.165,1);
  --odo:cubic-bezier(.649,.328,.257,.662);
  /* the dissolve curve: a symmetric ease in and out, the CSS equivalent of
     GSAP's power2.inOut. Nothing else on the page uses it, because nothing else
     hands one full-bleed layer over to another. */
  --diss:cubic-bezier(.45,.05,.55,.95);
}

/* ------------------------------------------------- scoped base for the chrome
   The inner sheets carry their own resets; these are the few base rules the
   chrome depends on, scoped to its own elements so nothing else is touched. */
body.menu-open{ overflow:hidden; }
.nav,.drawer,.veil,.foot{ font-family:Figtree, system-ui, sans-serif; font-weight:300; font-size:15px; line-height:1.75; }
.nav img,.drawer img,.foot img,.foot video{ display:block; max-width:100%; height:auto; }
.nav a,.drawer a,.foot a{ color:inherit; text-decoration:none; }
.nav button,.drawer button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.foot ul{ margin:0; padding:0; list-style:none; }
.foot :where(h2,h3,p),.drawer :where(p){ margin:0; }
.nav :focus-visible,.drawer :focus-visible,.foot :focus-visible{ outline:1px solid var(--gold); outline-offset:3px; }
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut); }

/* ------------------------------------------------------------ label rank */
/* register 2: tiny Figtree plate caps. The ONLY positively tracked text. */
.lbl{
  font-family:Figtree, system-ui, sans-serif;
  font-size:11px; font-weight:400; line-height:1.6;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--l45);
}
.on-linen .lbl,.linen .lbl{ color:var(--o45); }

/* ------------------------------------------------------------------- grain
   The home's grain, verbatim from css/vc.css (ruling 6: one texture for the
   site): z-index 60, under the nav at 70, the drawer at 79 and the lightbox
   at 90; a 140px tile at .045 stepping over 7s. The inner sheet no longer
   carries a grain of its own. */
.grain{
  position:fixed; inset:-6%; z-index:60; pointer-events:none; opacity:.045;
  will-change:transform;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.55'/></svg>");
  animation:grainshift 7s steps(6) infinite;
}
@keyframes grainshift{
  0%{transform:translate(0,0)} 20%{transform:translate(-2%,1%)}
  40%{transform:translate(1%,-2%)} 60%{transform:translate(-1%,-1%)}
  80%{transform:translate(2%,1%)} 100%{transform:translate(0,0)}
}

/* ==== CHROME:BUTTONS ==== */
/* Rectangles at the house radius. Motion C: an overflow-hidden wipe layer that
   grows from the cursor's side while the label rolls up.
   Client ruling 2026-09-16: the primary is a WINE plate with GOLD type,
   everywhere; its hover wipe is gold with obsidian type. On a wine surface
   (.band-wine, .ask, .cta-wine, .close, .promise, .on-wine) the primary is a
   gold plate with obsidian type, hover linen. .btn-wine is the same primary
   under its old name. The secondary is the hairline outline: linen on the
   dark, obsidian on linen. No other button colours exist. */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; isolation:isolate;
  font-family:Figtree, system-ui, sans-serif;
  font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase;
  padding:15px 32px; border-radius:var(--r); border:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.btn-sm{ padding:11px 22px; }
.btn .wipe{
  position:absolute; inset:0; z-index:-1; border-radius:var(--r);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease);
}
.btn[data-side="right"] .wipe{ transform-origin:right center; }
.btn:hover .wipe,.btn:focus-visible .wipe{ transform:scaleX(1); }

/* the primary: wine plate, gold type; the wipe brings gold under obsidian type */
.btn-gold,.btn-wine{ background:var(--wine); color:var(--gold); }
.btn-gold .wipe,.btn-wine .wipe{ background:var(--gold); }
.btn-gold:hover,.btn-gold:focus-visible,
.btn-wine:hover,.btn-wine:focus-visible{ color:var(--obsidian); }
/* the primary on a wine surface: gold plate, obsidian type; the wipe is linen.
   Surface-scoped, never per instance. */
.band-wine .btn-gold,.ask .btn-gold,.cta-wine .btn-gold,.close .btn-gold,.promise .btn-gold,.on-wine .btn-gold,
.band-wine .btn-wine,.ask .btn-wine,.cta-wine .btn-wine,.close .btn-wine,.promise .btn-wine,.on-wine .btn-wine{
  background:var(--gold); color:var(--obsidian);
}
.band-wine .btn-gold .wipe,.ask .btn-gold .wipe,.cta-wine .btn-gold .wipe,.close .btn-gold .wipe,.promise .btn-gold .wipe,.on-wine .btn-gold .wipe,
.band-wine .btn-wine .wipe,.ask .btn-wine .wipe,.cta-wine .btn-wine .wipe,.close .btn-wine .wipe,.promise .btn-wine .wipe,.on-wine .btn-wine .wipe{
  background:var(--linen);
}
/* the secondary: a hairline, linen type on the dark, obsidian on linen; the
   wipe is gold under obsidian type */
.btn-line{ border-color:var(--l30); color:var(--linen); }
.btn-line .wipe{ background:var(--gold); }
.btn-line:hover,.btn-line:focus-visible{ color:var(--obsidian); border-color:var(--gold); }
.on-linen .btn-line,.linen .btn-line,.band-linen .btn-line{ border-color:var(--o20); color:var(--obsidian); }

/* label roll-up: a duplicate glyph arrives from below.
   The <i> holds TWO lines, the label and its duplicate, so one line of travel
   is translateY(-50%). -100% would fling both lines clear of the window and
   leave the button empty. */
.roll{ display:block; overflow:hidden; height:1.2em; line-height:1.2; }
.roll > i{ display:block; font-style:normal; line-height:1.2;
  transition:transform .6s var(--ease); }        /* matched to the wipe */
.roll > i::after{ content:attr(data-t); display:block; }
a:hover .roll > i, button:hover .roll > i,
a:focus-visible .roll > i, button:focus-visible .roll > i{ transform:translateY(-50%); }
/* ==== /CHROME:BUTTONS ==== */

/* ==== CHROME:NAV ==== */
/* Client ruling 2026-09-16: a floating translucent bar, inset from the
   viewport edges, the house radius, a hairline, obsidian at .55 under a
   24px backdrop blur (the ONE blur the site allows, here and nowhere else).
   Logo left, links centred on the bar's true centre (a three-column grid,
   not space-between, so the logo and the button widths never push the links
   off centre), the Enquire button right. On scroll the fill only densens a
   little: there is no second style. */
/* the rebrand banner (client, 2026-09-16): one fixed line at the very top of
   every page, wine plate, plate caps; the nav sits below it by --bar-h */
:root{ --bar-h:34px; }
.brand-bar{
  position:fixed; top:0; left:0; right:0; z-index:71; height:var(--bar-h);
  display:flex; align-items:center; justify-content:center;
  background:var(--wine); color:var(--l72);
  font-family:Figtree, system-ui, sans-serif; font-size:10.5px; font-weight:400;
  letter-spacing:.12em; text-transform:uppercase; line-height:1; text-align:center; padding:0 56px;
}
.brand-bar a{ color:inherit; text-decoration:none; white-space:nowrap; }
.brand-bar b{ font-weight:500; color:var(--gold); }
.brand-bar a:hover b,.brand-bar a:focus-visible b{ color:var(--linen); }
@media (max-width:620px){ .brand-bar{ font-size:9.5px; padding:0 16px; } }
.nav{
  --nav-x:clamp(16px,4vw,56px);
  position:fixed; top:calc(var(--bar-h) + 14px); left:var(--nav-x); right:var(--nav-x); z-index:70;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
  gap:clamp(14px,2vw,32px);
  padding:11px 12px 11px 20px;
  border:1px solid var(--hair); border-radius:var(--r);
  background:rgba(5,5,5,.55);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  transition:background-color .3s ease;
}
.nav.scrolled{ background:rgba(5,5,5,.86); }
/* the drawer (79) and its veil (78) both outrank the nav, and below 900px the
   burger IS the close control. Lift the bar over them while the menu is open,
   but only the burger takes pointer events so the veil keeps its dismiss area. */
body.menu-open .nav{ z-index:80; pointer-events:none; }
body.menu-open .nav .burger{ pointer-events:auto; }
.nav-logo{ display:block; justify-self:start; }
.nav-logo img{ height:20px; width:auto; }
.nav-links{ display:flex; align-items:center; justify-content:center; gap:clamp(16px,2.2vw,34px); white-space:nowrap; }
.nav-links a{ position:relative; color:var(--l72); transition:color .2s ease; }
.nav-links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
.nav-links a:hover,.nav-links a.active{ color:var(--linen); }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }
.nav-end{ display:flex; align-items:center; justify-content:flex-end; gap:14px; }

.burger{ display:none; width:34px; height:22px; position:relative; }
.burger i{ position:absolute; left:3px; right:3px; height:1px; background:var(--linen); transition:transform .3s var(--ease), opacity .2s ease; }
.burger i:nth-child(1){ top:7px; }
.burger i:nth-child(2){ bottom:7px; }
.burger.open i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.open i:nth-child(2){ transform:translateY(-7px) rotate(-45deg); }

/* mobile drawer: sharp, right side, on an obsidian overlay that scales up
   from its own bottom edge. The nav's blur is the only blur on the site; the
   veil and the drawer are opaque paint. */
.veil{
  position:fixed; inset:0; z-index:78; opacity:0; pointer-events:none;
  background:rgba(5,5,5,.82);
  transform:scaleY(0); transform-origin:50% 100%;
  transition:transform .6s var(--ease), opacity .35s ease;
}
body.menu-open .veil{ opacity:1; pointer-events:auto; transform:scaleY(1); }
.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:79;
  width:min(360px,86vw); padding:calc(104px + var(--bar-h)) var(--gut) 40px;
  background:linear-gradient(rgba(75,25,40,.14), rgba(75,25,40,.03)) var(--obsidian);
  border-left:1px solid var(--hair);
  display:flex; flex-direction:column; gap:5px;
  transform:translateX(101%);
  transition:transform .55s var(--ease);
}
body.menu-open .drawer{ transform:none; }
.drawer a:not(.btn){
  font-family:Aboreto, Georgia, serif; text-transform:uppercase;
  font-size:20px; letter-spacing:0; padding:10px 0;
  border-bottom:1px solid var(--hair); color:var(--l90);
}
.drawer a[aria-current="page"]{ color:var(--gold); }
.drawer .btn{ margin-top:22px; align-self:flex-start; }
.d-reach{ margin-top:auto; }
@media (max-width:900px){
  .nav{ grid-template-columns:auto minmax(0,1fr); }
  .nav-links{ display:none; }
  .burger{ display:block; }
}
/* ==== /CHROME:NAV ==== */


/* ==== CHROME:FOOTER ==== */
/* Client ruling 2026-09-16, the Dasos-style footer: one grid cell, the
   ambient film in layer 1 under an obsidian scrim at .86 to .93 so the ground
   reads obsidian, and the content in layer 2 straight on that ground (the
   linen card is gone). Row 1: the brand column and six link columns. Row 2:
   the localities line. Row 3: the legal line (no footnote: client ruling).
   Type at --l72 and up on the film-tinted ground for the AA margin; labels
   at --l45. The badge is plain text, no marker. */
.foot{
  position:relative; isolation:isolate; overflow:clip;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  color:var(--l72); background:var(--obsidian);
}
/* the footer still (client 2026-09-16, after the film and the frosted glass
   were both dropped): one dark frame under a wine tint and a black grade that
   runs from the top left, so the columns sit on near-black and the room
   surfaces at the bottom right. Obsidian and wine alphas only. */
.foot-still{ grid-area:1 / 1; z-index:0; position:relative; overflow:clip; }
.foot-still img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 40%; }
.foot-scrim{
  grid-area:1 / 1; z-index:1; pointer-events:none;
  background:
    linear-gradient(135deg, rgba(5,5,5,.97) 0%, rgba(5,5,5,.9) 38%, rgba(5,5,5,.72) 70%, rgba(5,5,5,.58) 100%),
    linear-gradient(rgba(75,25,40,.42), rgba(75,25,40,.42));
}
/* the footer's top hairline: the one rule that stays above a heading row */
.foot-body{
  grid-area:1 / 1; z-index:2; position:relative;
  border-top:1px solid var(--hair);
  padding-top:clamp(56px,6.5vw,96px);
}
.foot .shell{ position:relative; z-index:1; }
.foot-grid{
  display:grid; grid-template-columns:minmax(220px,300px) minmax(0,1fr);
  gap:clamp(36px,5vw,80px); align-items:start;
}
/* rule 15: logo with a width-matched tagline (fitTaglines in vc.js and
   chrome.js) and the badge as plain text. Never a pill, no marker. */
.foot-brand img{ width:clamp(150px,12vw,180px); height:auto; }
.foot-brand .logo-tag{
  display:inline-block; margin-top:9px; white-space:nowrap;
  font-family:Figtree, system-ui, sans-serif;
  font-size:10px; font-weight:400; line-height:1.6;
  letter-spacing:.12em; text-transform:uppercase; color:var(--l45);
}
.foot-tag{ margin-top:20px; max-width:30ch; color:var(--l72); font-size:14.5px; line-height:1.7; }
.foot-badge{
  display:block; margin-top:18px; color:var(--l90);
  font-family:Figtree, system-ui, sans-serif;
  font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; line-height:1.6;
}
.foot-cols{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(30px,3.4vw,48px) clamp(20px,2.4vw,36px);
}
.foot-cols h3{ color:var(--l45); font-family:Figtree, system-ui, sans-serif;
  font-size:11px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; line-height:1.6; }
/* the Services heading is the site's one link to /interiors (SEO Phase 1A, 2026-09-22):
   it keeps the heading's caps and colour, the gold rule on hover is the column's own */
.foot-cols h3 a{ color:inherit; font-size:inherit; line-height:inherit; }
.foot-cols ul{ margin-top:14px; display:grid; gap:8px; }
/* the hover signal is a 1px gold rule, not a colour change: gold is a signal,
   never running link text */
.foot-cols a{ color:var(--l90); font-size:14px; line-height:1.5; position:relative; display:inline-block; }
.foot-cols a::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease); }
.foot-cols a:hover::after,.foot-cols a:focus-visible::after{ transform:scaleX(1); }
.foot-cols li span{ display:block; color:var(--l45); font-size:12.5px; line-height:1.6; margin-top:3px; }
/* the Kokapet status as a tag (client, 2026-09-16, site-wide 2026-09-22): wine plate,
   gold caps, the house corner; inline so it sits on its own line under the address.
   .soon is the same pill anywhere on the site (contact cards, about, standard). */
.soon,.foot-cols li .foot-soon{
  display:inline-block; margin-top:8px; padding:4px 9px 3px; border-radius:var(--r);
  background:var(--wine); color:var(--gold);
  font-size:10px; font-weight:500; line-height:1.4; letter-spacing:.12em; text-transform:uppercase;
}
.foot-visit ul{ gap:14px; }
/* the social links: a small line glyph and the network's name, linen at .6,
   no brand colour anywhere in the column */
.foot-social a{ display:inline-flex; align-items:center; gap:9px; color:rgba(245,245,244,.6); }
.foot-social a:hover,.foot-social a:focus-visible{ color:var(--l90); }
.foot-social svg{ width:14px; height:14px; flex:none; display:block; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
/* row 2: the localities, one small line */
.foot-serve{ margin-top:clamp(64px,7vw,96px);
   padding-top:18px; border-top:1px solid var(--hair);
  color:var(--l45);
}
/* row 3: the legal line only, the company on the left and the domain on the
   right. No footnote lives here (client ruling). */
.foot-end{ margin-top:clamp(24px,2.6vw,36px); padding-top:18px; border-top:1px solid var(--hair); }
.foot-base{
  margin-top:18px; padding-bottom:clamp(26px,3vw,40px);
  display:flex; justify-content:space-between; align-items:baseline; gap:10px 24px; flex-wrap:wrap;
  color:var(--l55); font-size:11px; line-height:1.6;
}
.foot-base a{ color:var(--l72); }
.foot-base a:hover{ color:var(--linen); }
@media (max-width:1023px){
  .foot{ min-height:auto; }
  .foot-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(36px,6vw,56px); }
}
@media (max-width:700px){
  .foot-cols{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:460px){
  .foot-cols{ grid-template-columns:minmax(0,1fr); gap:26px; }
}
/* ==== /CHROME:FOOTER ==== */


/* ========================================================= GALLERY LIGHTBOX
   The project pages' one overlay (chrome.js module 8): the photograph at
   full size on obsidian, three square hairline controls and a label
   counter. The house radius, no circles, no blur, no shadow. */
body.lb-open{ overflow:hidden; }
.glb{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center;
  padding:76px var(--gut);
  background:rgba(5,5,5,.94);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.glb.open{ opacity:1; pointer-events:auto; }
.glb figure{ margin:0; max-width:100%; max-height:100%; display:grid; place-items:center; }
.glb img{
  display:block; width:auto; height:auto; max-width:100%; max-height:calc(100svh - 152px);
  object-fit:contain; border-radius:var(--r);
  outline:1px solid var(--hair); outline-offset:-1px;
}
.glb button{
  position:absolute; z-index:1; width:44px; height:44px;
  display:grid; place-items:center;
  border:1px solid var(--l30); border-radius:var(--r);
  background:rgba(5,5,5,.6); color:var(--linen);
  font:inherit; font-size:18px; line-height:1; cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.glb button:hover,.glb button:focus-visible{ border-color:var(--gold); color:var(--gold); outline:none; }
.glb-x{ top:16px; right:var(--gut); }
.glb-prev{ left:var(--gut); top:50%; transform:translateY(-50%); }
.glb-next{ right:var(--gut); top:50%; transform:translateY(-50%); }
.glb-n{ position:absolute; left:var(--gut); bottom:22px; color:var(--l55); }
@media (max-width:620px){
  .glb{ padding:68px 12px 72px; }
  .glb img{ max-height:calc(100svh - 140px); }
  .glb-x{ right:12px; }
  .glb-prev{ left:12px; top:auto; bottom:14px; transform:none; }
  .glb-next{ right:12px; top:auto; bottom:14px; transform:none; }
  .glb-n{ left:50%; bottom:26px; transform:translateX(-50%); }
}

/* ============================================================== RESPONSIVE */
@media (max-width:620px){
  .lbl{ font-size:10px; }
}

/* -------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  .nav,.nav *,.drawer,.drawer *,.veil,.btn *,.foot *,.glb,.glb *{ transition-duration:.001ms !important; }
}


/* ============================================================ THE RAIL
   Site-wide (client, 2026-09-16: "add these call and whatsapp buttons on
   all pages"). Markup from tools/chrome_parts.py, pasted before <main>. */
/* ==== RAIL ==== */
/* The sticky call + WhatsApp tabs from vmmodular.com (client: "we had this
   on vm site"), in the site's grammar: two stacked 56px square tabs on the
   right edge, wine plate and gold glyph, 5px outer corners, hover inverts to
   a gold plate with a wine glyph. Fixed and vertically centred at z 75:
   above the nav (70) and the grain (60), under the open menu's veil (78) and
   the lightbox (90) so an overlay still covers it. Under 768px it becomes a
   bottom bar of three equal actions (Call, WhatsApp, Get my estimate) with
   safe-area padding, and the page gets the bar's height as bottom padding
   so the footer stays reachable. Needs only css/chrome.css tokens. */
.rail{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:75;
  display:flex; flex-direction:column;
  border-radius:var(--r) 0 0 var(--r); overflow:hidden;
  font-family:Figtree, system-ui, sans-serif;
}
.rail-tab{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:56px; height:56px; min-width:44px; min-height:44px;
  background:var(--wine); color:var(--gold); text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}
.rail-tab + .rail-tab{ border-top:1px solid var(--hair); }
.rail-tab svg{ width:22px; height:22px; flex:none; display:block; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.rail-tab span{ display:none; }
.rail-tab:hover,.rail-tab:focus-visible{ background:var(--gold); color:var(--wine); outline:none; }
.rail-tab:focus-visible{ outline:1px solid var(--wine); outline-offset:-4px; }
.rail-est{ display:none; }
@media (max-width:767px){
  .rail{
    top:auto; bottom:0; left:0; right:0; transform:none;
    flex-direction:row; border-radius:0;
    background:var(--wine); padding-bottom:env(safe-area-inset-bottom,0px);
    border-top:1px solid var(--hair);
  }
  .rail-tab{
    flex:1 1 0; width:auto; height:56px;
    font-size:10.5px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; line-height:1.2;
  }
  .rail-tab + .rail-tab{ border-top:0; border-left:1px solid var(--hair); }
  .rail-tab svg{ width:18px; height:18px; }
  .rail-tab span{ display:inline; }
  .rail-est{ display:flex; flex-grow:1.3; }   /* the longest label gets a little more room */
  /* every page carries the rail, so the page itself takes the bar's height */
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom,0px)); }
}
@media (prefers-reduced-motion:reduce){
  .rail-tab{ transition-duration:.001ms !important; }
}
/* ==== /RAIL ==== */