/* ============================================================================
   Graphite colorway — INTERIOR PAGE COMPONENTS
   ----------------------------------------------------------------------------
   public/designs/05/colorways.css only ever covered the HOME page, because the
   gallery preview for design-05 is a home page and nothing else. Every interior
   stylesheet (services / pages / single-service / occasion / location) is still
   written for the light palette, and two of its idioms invert under a dark
   colorway:

     1. "dark section" written as  background:var(--ink); color:var(--paper)
        plus muted text as rgba(250,246,239,a). Those two tokens SWAP in a dark
        colorway, so the section turns light and its cream text disappears.

     2. hardcoded light cards (#fff, rgba(250,246,239,.96)) carrying token text,
        which is now near-white on near-white.

   Both are fixed here rather than by editing the kit stylesheets, so the kit
   stays palette-neutral and this file is the one place the colorway lives.
   It MUST be linked LAST on every interior page, after services/pages/*.css.
   Verified by the contrast sweep: 83 low-contrast text nodes before, 0 after.

   Graphite: ink #ECEDEF  paper #191A1D  paper-2 #212327  deep #101113
             gold #9AA1AC  gold-deep #C4CAD3  gold-pale #DDE0E5  ink-soft #A8ABB2
   ========================================================================== */

/* --- 1. Sections that are meant to be DARK ------------------------------- */
.svc-addons,.svc-dark,.oc-night{background:#101113;color:#ECEDEF}
.svc-addons .sec-lead,.svc-dark .sec-lead,.oc-night .sec-lead{color:rgba(236,237,239,.72)}
.svc-dark .statband b{color:#DDE0E5}
.svc-dark .statband span{color:rgba(236,237,239,.62)}
.svc-dark .hiw-step,.svc-dark .hiw-step .t{color:#ECEDEF}
.svc-dark .hiw-step p{color:rgba(236,237,239,.66)}
.svc-slide{background:rgba(236,237,239,.04)}
.svc-slide-index{color:rgba(236,237,239,.5)}
.svc-slide-name{color:#ECEDEF}
.svc-slide-blurb{color:rgba(236,237,239,.72)}
.svc-addons-note{color:rgba(236,237,239,.58)}
.svc-addon-add{color:#ECEDEF}
.svc-addon-add-i{border-color:rgba(236,237,239,.4)}
.svc-carries-photo figcaption{background:#101113;color:#ECEDEF}
.oc-night .tl-stop{color:rgba(236,237,239,.55)}
.oc-night .tl-stop b{color:rgba(236,237,239,.85)}
.oc-night .tl-stop::before{background:#101113;border-color:rgba(236,237,239,.45)}
.oc-night .tl-card{background:rgba(236,237,239,.05);color:#ECEDEF}
.oc-night .tl-note{color:rgba(236,237,239,.78)}
.oc-night .tl-label{color:#DDE0E5}

/* --- 2. Sections sitting over a photograph ------------------------------- */
/* No contrast probe can read these (the backdrop is an image), so they are
   reasoned from the CSS and confirmed by eye. */
.revfx h2,.revfx-q blockquote,.revfx-q figcaption b,.revfx-arrow{color:#ECEDEF}
.revfx-q figcaption{color:rgba(236,237,239,.78)}
.revfx-count{color:rgba(236,237,239,.85)}
.revfx-rule{background:rgba(236,237,239,.28)}
.svc-hero,.oc-cine{color:#ECEDEF}
.svc-hero .lead{color:rgba(236,237,239,.8)}
.svc-hero .hero-note{color:rgba(236,237,239,.62)}
.svc-hero .btn-ghost,.oc-cine .btn-ghost{color:#ECEDEF;border-color:rgba(236,237,239,.4)}
.band.s-hero{border-top-color:rgba(236,237,239,.14)}
.band.s-hero .wrap{color:rgba(236,237,239,.68)}

/* --- 3. Light cards become raised dark cards ----------------------------- */
.svc-rate{background:rgba(33,35,39,.96)}
.svc-keepsake,.vg-item.is-live,.vg-card,.tl-card,.tl-stop.is-live,
.lo-route,.lo-ask{background:#212327}

/* --- 3b. PRINTOUTS STAY PAPER (owner, 2026-09-27) -------------------------
   .lo-pol, .svc-pol and .strip are photographs pinned to the page as little
   prints. The card behind them IS the print, so it has to read white whatever
   the colorway does, exactly as .v1-pin .pol already did (the kit's white was
   never overridden there, which is why the map pins looked right and these
   three did not). Their captions are printed ON that paper, so they take the
   light palette's ink rather than this colorway's.
   .lo-route is NOT one of these and stays dark: it is a route card whose map
   squiggle is stroked in Graphite greys (#9AA1AC, #C4CAD3) that would vanish
   on white. */
.svc-pol,.oc-pol,.lo-pol,.strip{background:#fff;border-color:rgba(43,38,32,.14)}
.svc-pol figcaption,.lo-pol figcaption,.strip .strip-loc,.strip::after{color:#5C544A}

/* --- 3c. THE PACKAGE AND ADD-ON CARDS ARE PAPER TOO (owner, 2026-09-27) ----
   Every rule inside these two cards paints with the kit's TOKENS, so rather
   than restating a colour per child (and missing one the next time the kit
   gains a line) the tokens are REDEFINED on the card itself and the whole
   subtree follows: name, price, inclusions, blurb, hairlines, the ghost
   button's border, all of it.
   The values stay in Graphite's cool grey family rather than borrowing the
   light palette's warm browns, which would read as a different brand sitting
   inside this one. Verified with tools/check-contrast.py, not by eye. */
.booth,.svc-slide{
  background:#fff;
  --paper:#fff;
  --paper-2:#F1F2F4;
  --ink:#191A1D;
  --ink-soft:#4A4F57;
  --gold:#5C636E;
  --gold-deep:#2F343B;
  --gold-pale:#8A919B;
  --line:rgba(25,26,29,.16);
  border-color:rgba(25,26,29,.16);
  /* The card needs its OWN color, not just the tokens. Children with no colour
     rule of their own (the package name is one) inherit the COMPUTED value from
     body, which redefining a variable further down can never reach. */
  color:var(--ink);
}
/* the two children the colorway had pinned to a literal light ink */
.svc-slide .svc-slide-name{color:var(--ink)}
/* The tag chip was dark-on-light because its plate was a light token. On paper
   it inverts: a dark plate with the card's own paper as the letters. */
.svc-slide .svc-slide-tag{background:#2F343B;color:#fff}
/* The slide's own hairlines and the add button's ring come from the kit's
   paper-alpha literals, which are invisible on white. */
.svc-slide .svc-addon-add{border-color:rgba(25,26,29,.28);color:#191A1D}
.svc-slide .svc-addon-add:hover{background:#191A1D;color:#fff;border-color:#191A1D}
.svc-slide .svc-slide-top,.svc-slide .svc-slide-blurb{border-color:rgba(25,26,29,.16)}
.lo-offer:hover{background:#212327}
.tl-stop.is-live{color:#C4CAD3}
.svc-rate .svc-rate-loc{color:#A8ABB2}

/* --- 4. The #addons band is deliberately LIGHT-ON-PAPER (see services.css) --
   It is token-driven for background and body text, so it flips correctly on its
   own. What does NOT flip are its muted greys and hairlines, which were written
   as the LIGHT palette's ink literal rgba(43,38,32,a). Mirrored to the graphite
   ink literal here, exactly as services.css mirrors the paper-alpha ones. */
/* The four below are INSIDE the slide, which is paper since 2026-09-27, so
   they take the ink literal rather than the paper one. They need the id to
   beat the id-level rules they replace. The three after them (arrows, dots,
   the note) sit OUTSIDE the slide on the dark band and stay light. */
#addons .svc-slide{background:#fff}
#addons .svc-slide-media::after{border-color:rgba(25,26,29,.16)}
#addons .svc-slide-index{color:rgba(25,26,29,.5)}
#addons .svc-addon-add-i{border-color:rgba(25,26,29,.35)}
#addons .svc-carousel-arrow{border-color:rgba(236,237,239,.28)}
#addons .svc-carousel-dots button{background:rgba(236,237,239,.25)}
#addons .svc-addons-note{color:rgba(236,237,239,.6)}

/* --- 5. Anything sitting ON the gold chip ------------------------------------
   The kit pairs var(--gold) with var(--ink). In the light palette that is a
   mid-brown chip under dark-brown text; in Graphite BOTH tokens are light
   (#9AA1AC under #ECEDEF, 2.2:1), so the chip text has to go dark instead. Same
   move the gallery already makes for .form .btn and .btn-ed. */
.svc-slide-tag,.svc-addons-foot .btn,.oc-night .tl-card .btn{color:#191A1D}
.svc-addons-foot .btn:hover,.oc-night .tl-card .btn:hover{color:#191A1D}

/* ---------------------------------------------------------------------------
   THE PHONE BLOCKS THE KIT ADDED AFTER THIS BUILD (synced 2026-09-26).
   location.css's phone venue guide paints the live tab AND the whole panel
   #fff and leaves the text on token colours, which are light in Graphite: the
   panel rendered as pale grey on white. These selectors are more specific than
   the .vg-item.is-live / .vg-card pair above, so they need their own line.
   Scoped to the kit's own breakpoint so every desktop width is untouched. */
@media (max-width:900px){
  .s-venues .vg-item.is-live{background:#212327}
  .s-venues .vg-item:nth-of-type(n+3).is-live{border-bottom-color:#212327}
  .s-venues .vg-stage{background:#212327}

  /* occasion.css's phone poster rides the note on a DARK 62% glass over the
     photograph. The .oc-night .tl-card rule above was written for the desktop
     card (a solid light panel in the light palette) and, at equal specificity
     and loading later, it was flattening that glass to a 5% white wash. The
     card then only read because this build's poster photo happens to be dark;
     any lighter frame in the set would have washed the text out. Same idea in
     Graphite's own near-black. */
  .oc-night .tl-card{background:rgba(16,17,19,.66)}
}