/* ============================================================================
   Lizzy B African Hair Braiding - preview build by NH Media Web

   A braider's page, so the page is built out of a braid. The house ornament is
   the PLAIT: two strands crossing over and under, drawn in brass and hibiscus,
   used as the rule under every section label, as the texture on every dark
   ground, and as the ground of every style plate. The mark beside the name is
   the same plait at emblem scale.

   Colour: plum-black grounds deep enough to sit under warm metal, shea cream
   for the light ones, brass for the proof and the call to action, hibiscus for
   warmth. Not salon pink: a braiding studio's own register.

   No photograph ships on this page. A braider's finished style is the product
   itself, and somebody else's braids on this page would read as hers.
   ========================================================================== */

@font-face {
  font-family: "Bricolage";
  src: url("fonts/bricolage-latin-var.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Instrument";
  src: url("fonts/instrumentsans-latin-var.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  /* dark grounds */
  --onyx:   #1A1016;
  --onyx-2: #241722;
  --onyx-3: #120A10;
  --wine:   #3A1D2C;

  /* light grounds */
  --shea:   #FBF4EC;
  --shea-2: #F4E7D7;
  --shea-3: #EBD9C4;
  --white:  #FFFFFF;

  /* ink on light */
  --ink:   #2B1620;
  --ink-2: #5A3846;
  --ink-3: #6E5060;

  /* cream on dark */
  --cream:   #FCF3E9;
  --cream-2: #E0CBBF;
  --cream-3: #B69C93;

  /* brass: the proof and the call to action */
  --brass:    #D19B3C;
  --brass-lt: #F0C169;
  --brass-dk: #77500B;

  /* hibiscus: the warmth */
  --hib:    #C24B6B;
  --hib-lt: #F79BB2;
  --hib-dk: #98284A;

  --ff-d: "Bricolage", "Segoe UI", system-ui, sans-serif;
  --ff-b: "Instrument", "Segoe UI", system-ui, sans-serif;

  --shell: 1180px;
  --pad: clamp(20px, 5vw, 46px);

  /* the plait: two strands crossing, the house ornament */
  --plait:
    repeating-linear-gradient(60deg, var(--brass) 0 5px, transparent 5px 16px),
    repeating-linear-gradient(-60deg, var(--hib) 0 5px, transparent 5px 16px);

  /* the plait again, woven tighter, for the short rules that need more
     crossings in less width to read as a braid rather than as a pattern */
  --plait-fine:
    repeating-linear-gradient(60deg, var(--brass) 0 3px, transparent 3px 9px),
    repeating-linear-gradient(-60deg, var(--hib) 0 3px, transparent 3px 9px);

  /* the same weave, whispered, for dark grounds */
  --weave:
    repeating-linear-gradient(58deg, rgba(252, 243, 233, .038) 0 2px, transparent 2px 15px),
    repeating-linear-gradient(-58deg, rgba(252, 243, 233, .038) 0 2px, transparent 2px 15px);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--onyx);
}

body {
  margin: 0;
  background: var(--shea);
  color: var(--ink);
  font-family: var(--ff-b);
  font-size: 17.5px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 18px; } }

img { max-width: 100%; display: block; }
a { color: inherit; }

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 80;
  background: var(--brass); color: var(--onyx);
  padding: 12px 20px; font-weight: 700; text-decoration: none;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 3px solid var(--hib-dk); outline-offset: 3px; border-radius: 2px; }
.pbar :focus-visible, .mast :focus-visible, .hero :focus-visible, .work :focus-visible,
.words :focus-visible, .book :focus-visible, .foot :focus-visible, .band :focus-visible {
  outline-color: var(--brass-lt);
}

/* ------------------------------------------------------------- type system */

.h2 {
  font-family: var(--ff-d);
  font-variation-settings: "opsz" 84;
  font-weight: 700;
  font-size: clamp(2.05rem, 4.7vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -.025em;
  margin: 0 0 .34em;
  color: var(--ink);
  text-wrap: balance;
}
.h2-d { color: var(--cream); }

.h3 {
  font-family: var(--ff-d);
  font-variation-settings: "opsz" 40;
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.12;
  letter-spacing: -.018em;
  margin: 0 0 .4em;
  color: var(--ink);
}
.h3-d { color: var(--cream); }

.label {
  display: inline-flex; align-items: center; gap: 13px;
  font-family: var(--ff-b);
  font-weight: 700; font-size: .78rem;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--brass-dk);
  margin: 0 0 18px;
}
.label::before {
  content: ""; width: 58px; height: 11px; border-radius: 1px;
  background: var(--plait-fine); background-color: transparent; flex: none;
}
.label-d { color: var(--brass-lt); }

.lede { font-size: 1.12rem; color: var(--ink-2); margin: 0 0 1.1em; max-width: 50ch; }
.lede-d { color: var(--cream-2); }

.fine { font-size: .88rem; color: var(--ink-3); }
.fine-d { color: var(--cream-3); }

.stars {
  margin: 0 0 12px; font-size: .95rem; letter-spacing: .22em;
  color: var(--brass-dk);
  font-family: "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
}
.stars-d { color: var(--brass-lt); }

.q-src { display: block; font-size: .8rem; color: var(--ink-3); font-weight: 500; }
.q-src-d { color: var(--cream-3); }

/* ------------------------------------------------------------------ chips */

.chip {
  display: inline-block;
  font-family: var(--ff-b);
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  padding: 3px 10px; border-radius: 999px;
  border: 1.5px dashed var(--brass);
  background: rgba(209, 155, 60, .13);
  color: var(--brass-dk);
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}
.chip-d { color: var(--brass-lt); }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ff-d);
  font-variation-settings: "opsz" 30;
  font-weight: 700; font-size: 1rem; letter-spacing: -.006em;
  text-decoration: none; text-align: center;
  padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  transition: transform .16s ease, background-color .16s ease, color .16s ease;
}
.btn-lg { padding: 16px 32px; font-size: 1.14rem; }
.btn:hover { transform: translateY(-2px); }

.btn-brass { background: var(--brass); color: var(--onyx); }
.btn-brass:hover { background: #E9B458; }
.btn-hib { background: var(--hib-dk); color: var(--cream); }
.btn-hib:hover { background: #7F1D3C; }
.btn-ghost { border-color: var(--cream-3); color: var(--cream); }
.btn-ghost:hover { background: var(--cream); color: var(--onyx); }
.btn-line { border-color: var(--brass-dk); color: var(--brass-dk); }
.btn-line:hover { background: var(--brass-dk); color: var(--shea); }

.ext { font-size: .82em; }

/* -------------------------------------------------------------- decoration */

.rule { height: 10px; background: var(--plait); }

/* ================================================================== BANNER */

.pbar { background: var(--wine); color: var(--cream); }
.pbar-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding-block: 13px;
}
.pbar-txt { margin: 0; font-size: .88rem; line-height: 1.5; flex: 1 1 340px; color: var(--cream-2); }
.pbar-acts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pbar-btn {
  background: var(--brass); color: var(--onyx);
  font-weight: 700; font-size: .84rem; text-decoration: none;
  padding: 8px 17px; border-radius: 999px; white-space: nowrap;
}
.pbar-btn:hover { background: #E9B458; }
.pbar-mail { color: var(--brass-lt); font-size: .84rem; font-weight: 600; }

/* ================================================================ MASTHEAD */

.mast {
  position: sticky; top: 0; z-index: 50;
  background: var(--onyx);
  border-bottom: 1px solid rgba(252, 243, 233, .12);
}
.mast-in {
  display: flex; align-items: center; gap: 18px;
  padding-block: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 44px; height: 44px; flex: none; border-radius: 10px; }
.brand-txt { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name {
  font-family: var(--ff-d); font-variation-settings: "opsz" 30;
  font-weight: 700; font-size: 1.18rem; letter-spacing: -.02em;
  color: var(--cream);
}
.brand-sub {
  font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-lt); margin-top: 3px;
}

.nav { display: flex; gap: 22px; }
.nav a {
  color: var(--cream-2); text-decoration: none;
  font-size: .93rem; font-weight: 600;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--cream); border-bottom-color: var(--brass); }

.mast-cta { padding: 9px 19px; font-size: .93rem; }

.burger {
  display: none;
  width: 44px; height: 40px; padding: 9px 8px;
  background: none; border: 1px solid rgba(252, 243, 233, .28); border-radius: 8px;
  cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--cream); margin: 4px 0; border-radius: 2px; }

@media (max-width: 980px) {
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--onyx-2); border-bottom: 1px solid rgba(252, 243, 233, .14);
    padding: 8px var(--pad) 18px;
  }
  .nav.is-open { display: flex; }
  .burger { display: block; }
  .mast-cta { display: none; }
  .brand-name { font-size: 1.04rem; }
}

/* ==================================================================== HERO */

.hero {
  background: var(--onyx);
  background-image: var(--weave);
  color: var(--cream);
  padding-block: clamp(48px, 8vw, 92px) clamp(44px, 7vw, 78px);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 10px;
  background: var(--plait);
}

/* a length of the house plait, woven down the right of the hero at wall scale */
.hero-art { display: none; }
@media (min-width: 1080px) {
  .hero-art {
    display: block;
    position: absolute; top: -8%; bottom: -8%; right: 0; width: 42%;
    background:
      repeating-linear-gradient(73deg, rgba(240, 193, 105, .38) 0 10px, transparent 10px 32px),
      repeating-linear-gradient(-73deg, rgba(247, 155, 178, .26) 0 10px, transparent 10px 32px);
    -webkit-mask-image: linear-gradient(100deg, transparent 0%, #000 62%, #000 100%);
    mask-image: linear-gradient(100deg, transparent 0%, #000 62%, #000 100%);
    opacity: .72;
  }
}

.hero-eyebrow {
  position: relative;
  margin: 0 0 20px;
  font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass-lt);
}
.hero-h {
  position: relative;
  font-family: var(--ff-d);
  font-variation-settings: "opsz" 96;
  font-weight: 700;
  font-size: clamp(2.6rem, 6.6vw, 4.5rem);
  line-height: .99;
  letter-spacing: -.035em;
  margin: 0 0 .3em;
  max-width: 15ch;
  color: var(--cream);
  text-wrap: balance;
}
.hero-h em { font-style: normal; color: var(--brass-lt); }
.hero-lede {
  position: relative;
  margin: 0 0 30px; max-width: 48ch;
  font-size: 1.15rem; color: var(--cream-2);
}

.dbl {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0 0 32px; padding: 0; list-style: none;
}
.dbl li {
  display: flex; align-items: center; gap: 13px;
  background: rgba(252, 243, 233, .055);
  border: 1px solid rgba(240, 193, 105, .34);
  border-radius: 14px;
  padding: 12px 20px 12px 16px;
}
.dbl-n {
  font-family: var(--ff-d); font-variation-settings: "opsz" 60;
  font-weight: 700; font-size: 2.5rem; line-height: 1;
  letter-spacing: -.04em;
  color: var(--brass-lt);
}
.dbl-t { display: flex; flex-direction: column; line-height: 1.3; }
.dbl-k { font-weight: 700; font-size: .96rem; color: var(--cream); }
.dbl-s { font-size: .82rem; color: var(--cream-3); }

.hero-cta { position: relative; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 13px; }
.hero-where { position: relative; margin: 0; font-size: .95rem; color: var(--cream-2); }
.hero-where strong { color: var(--cream); }

/* =============================================================== THE BAND */

.band {
  background: var(--wine);
  color: var(--cream);
  padding-block: 26px;
}
.band-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px;
  margin: 0; padding: 0; list-style: none;
}
.band-in li {
  font-family: var(--ff-d); font-variation-settings: "opsz" 30;
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px;
}
.band-in li::before {
  content: ""; width: 34px; height: 10px; border-radius: 1px; flex: none;
  background: var(--plait-fine); background-color: transparent;
}

/* =============================================================== THE WORK */

.work {
  background: var(--onyx-2);
  background-image: var(--weave);
  color: var(--cream);
  padding-block: clamp(56px, 8vw, 96px);
}
.work-head { max-width: 62ch; margin-bottom: 40px; }

.grp { margin: 0 0 16px; }
.grp-k {
  font-family: var(--ff-b);
  font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--hib-lt);
  margin: 40px 0 16px;
}
.grp-k:first-of-type { margin-top: 0; }

.plates {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0; padding: 0; list-style: none;
}

.plate {
  position: relative; overflow: hidden;
  flex: 1 1 138px;
  border-radius: 16px;
  border: 1px solid rgba(252, 243, 233, .16);
  background: var(--onyx);
  min-height: 124px;
  display: flex; align-items: flex-end;
  padding: 16px 16px 14px;
}
@media (min-width: 620px) {
  .plate { flex-basis: 178px; min-height: 152px; padding: 18px 18px 16px; }
}
/* the woven swatch: the house plait, drawn at plate scale */
.plate::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(58deg, rgba(240, 193, 105, .46) 0 4px, transparent 4px 15px),
    repeating-linear-gradient(-58deg, rgba(252, 243, 233, .30) 0 4px, transparent 4px 15px);
}
.plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(178deg,
    rgba(26, 16, 22, .10) 0%, rgba(26, 16, 22, .58) 46%, rgba(26, 16, 22, .95) 100%);
}
.plate-n {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--ff-d); font-variation-settings: "opsz" 34;
  font-weight: 700; font-size: clamp(1.02rem, 3.4vw, 1.22rem);
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--cream);
  text-wrap: balance;
}

/* four woven colourways, so the wall of plates has rhythm */
.pl-b::before {
  background:
    repeating-linear-gradient(70deg, rgba(240, 193, 105, .56) 0 5px, transparent 5px 19px),
    repeating-linear-gradient(-70deg, rgba(247, 155, 178, .46) 0 5px, transparent 5px 19px);
}
.pl-c::before {
  background:
    repeating-linear-gradient(44deg, rgba(252, 243, 233, .40) 0 3px, transparent 3px 10px),
    repeating-linear-gradient(-44deg, rgba(240, 193, 105, .40) 0 3px, transparent 3px 10px);
}
.pl-d::before {
  background:
    repeating-linear-gradient(64deg, rgba(247, 155, 178, .48) 0 6px, transparent 6px 22px),
    repeating-linear-gradient(-64deg, rgba(252, 243, 233, .30) 0 6px, transparent 6px 22px);
}
.pl-wide { flex-grow: 2.2; }
@media (min-width: 620px) { .pl-wide { flex-basis: 300px; } }

.work-more { margin: 34px 0 0; font-size: 1.02rem; color: var(--cream-2); max-width: 56ch; }

/* =============================================================== HER WORDS */

.why { background: var(--shea); padding-block: clamp(56px, 8vw, 96px); }
.why-in { display: grid; gap: 40px; margin-bottom: 44px; }
@media (min-width: 940px) { .why-in { grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; } }

.why-say {
  font-family: var(--ff-d); font-variation-settings: "opsz" 48;
  font-weight: 500; font-size: clamp(1.3rem, 2.5vw, 1.62rem);
  line-height: 1.3; letter-spacing: -.018em;
  color: var(--ink); margin: 0 0 1em;
}
.traits { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
@media (min-width: 700px) { .traits { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .traits { grid-template-columns: repeat(4, 1fr); } }
.trait {
  position: relative; overflow: hidden;
  background: var(--white);
  border: 1px solid var(--shea-3);
  border-radius: 16px;
  padding: 20px 22px 20px 28px;
}
.trait::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 13px;
  background: var(--plait-fine); background-color: transparent;
}
.trait-k {
  margin: 0 0 4px;
  font-family: var(--ff-d); font-variation-settings: "opsz" 30;
  font-weight: 700; font-size: 1.1rem; letter-spacing: -.015em;
  color: var(--ink);
}
.trait p { margin: 0; font-size: .98rem; color: var(--ink-2); }

.bigq {
  background: var(--onyx);
  background-image: var(--weave);
  border-radius: 22px;
  padding: 34px 32px 28px;
  color: var(--cream);
  align-self: start;
}
.bigq blockquote { margin: 0 0 18px; }
.bigq blockquote p {
  margin: 0;
  font-family: var(--ff-d); font-variation-settings: "opsz" 60;
  font-weight: 600; font-size: clamp(1.28rem, 2.5vw, 1.62rem);
  line-height: 1.28; letter-spacing: -.02em;
  color: var(--cream);
}
.bigq figcaption { font-size: .92rem; font-weight: 700; color: var(--brass-lt); }

/* ================================================================= REVIEWS */

.words {
  background: var(--onyx);
  background-image: var(--weave);
  color: var(--cream);
  padding-block: clamp(56px, 8vw, 96px);
}
.words-head { max-width: 60ch; margin-bottom: 34px; }

.score {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin: 0 0 40px; padding: 0; list-style: none;
}
.score li {
  flex: 1 1 260px;
  display: flex; align-items: center; gap: 20px;
  background: rgba(252, 243, 233, .055);
  border: 1px solid rgba(240, 193, 105, .34);
  border-radius: 18px;
  padding: 20px 26px;
}
.score-n {
  margin: 0; flex: none;
  font-family: var(--ff-d); font-variation-settings: "opsz" 96;
  font-weight: 700; font-size: clamp(3rem, 6vw, 4rem); line-height: .84;
  letter-spacing: -.05em;
  color: var(--brass-lt);
}
.score-k { margin: 0 0 2px; font-weight: 700; font-size: 1.08rem; color: var(--cream); }
.score-s { margin: 0; font-size: .92rem; color: var(--cream-3); }

.pullq { margin: 0 0 44px; }
.pullq blockquote { margin: 0 0 14px; }
.pullq blockquote p {
  margin: 0;
  font-family: var(--ff-d); font-variation-settings: "opsz" 96;
  font-weight: 600; font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  line-height: 1.16; letter-spacing: -.03em;
  color: var(--cream);
  text-wrap: balance;
}
.pullq figcaption { font-weight: 700; color: var(--brass-lt); font-size: 1rem; }

.quotes { display: grid; gap: 16px; }
@media (min-width: 700px) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  margin: 0;
  background: rgba(252, 243, 233, .055);
  border: 1px solid rgba(252, 243, 233, .14);
  border-radius: 18px;
  padding: 24px 24px 20px;
}
.quote blockquote { margin: 0 0 16px; }
.quote blockquote p { margin: 0; font-size: 1rem; line-height: 1.62; color: var(--cream-2); }
.quote figcaption { font-weight: 700; font-size: .96rem; color: var(--cream); }

.keys { margin-top: 0; }
.keys-h {
  margin: 0 0 14px;
  font-family: var(--ff-d); font-variation-settings: "opsz" 34;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.018em; color: var(--cream);
}
.key-l { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 14px; padding: 0; list-style: none; }
.key-l li {
  background: rgba(252, 243, 233, .07);
  border: 1px solid rgba(252, 243, 233, .14);
  border-radius: 999px;
  padding: 6px 15px;
  font-size: .92rem;
  color: var(--cream-2);
}
.key-n { font-weight: 700; color: var(--brass-lt); margin-left: 7px; }
.src { margin: 0; font-size: .84rem; color: var(--cream-3); }

/* =================================================================== VISIT */

.visit { background: var(--shea-2); padding-block: clamp(56px, 8vw, 96px); }
.visit-in { display: grid; gap: 44px; }
@media (min-width: 940px) { .visit-in { grid-template-columns: 1fr 1fr; gap: 58px; } }

.addr {
  margin: 0 0 6px;
  font-family: var(--ff-d); font-variation-settings: "opsz" 72;
  font-weight: 700; font-size: clamp(1.8rem, 3.6vw, 2.5rem);
  line-height: 1.05; letter-spacing: -.032em; color: var(--ink);
}
.addr-2 { margin: 0 0 20px; font-size: 1.12rem; color: var(--ink-2); }
.visit-cta { margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 12px; }

.facts { margin: 0; padding: 0; list-style: none; }
.facts li {
  display: grid; gap: 2px;
  padding: 13px 0;
  border-top: 1px solid var(--shea-3);
}
.facts li:last-child { border-bottom: 1px solid var(--shea-3); }
@media (min-width: 560px) { .facts li { grid-template-columns: 132px 1fr; gap: 16px; } }
.facts-k {
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); padding-top: 5px;
}
.facts-v { color: var(--ink); }
.facts-v a { color: var(--brass-dk); font-weight: 600; }

.hours { background: var(--white); border: 1px solid var(--shea-3); border-radius: 20px; padding: 26px 26px 22px; }
.hours-h {
  margin: 0 0 4px;
  font-family: var(--ff-d); font-variation-settings: "opsz" 34;
  font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; color: var(--ink);
}
.week { margin: 16px 0 0; padding: 0; list-style: none; }
.week li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 9px 12px; border-radius: 8px;
  font-size: .99rem;
}
.week li:nth-child(odd) { background: rgba(43, 22, 32, .035); }
.week-k { font-weight: 700; color: var(--ink); }
.week-v { color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ==================================================================== BOOK */

.book {
  background: var(--onyx-3);
  background-image: var(--weave);
  color: var(--cream);
  padding-block: clamp(56px, 8vw, 96px);
}
.book-in { display: grid; gap: 40px; }
@media (min-width: 940px) { .book-in { grid-template-columns: 1.1fr .9fr; gap: 58px; align-items: start; } }
.book-h {
  font-family: var(--ff-d); font-variation-settings: "opsz" 96;
  font-weight: 700; font-size: clamp(2.2rem, 5.2vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.035em; margin: 0 0 .35em;
  color: var(--cream); text-wrap: balance;
}
.book-cta { margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 13px; }
.book-side {
  background: rgba(252, 243, 233, .055);
  border: 1px solid rgba(240, 193, 105, .34);
  border-radius: 20px;
  padding: 26px 26px 22px;
}
.book-side p { margin: 0 0 .9em; color: var(--cream-2); font-size: 1rem; }
.book-side p:last-child { margin-bottom: 0; }
.book-reach { margin: 20px 0 0; padding: 0; list-style: none; }
.book-reach li { padding: 9px 0; border-top: 1px solid rgba(252, 243, 233, .14); }
.book-reach a { color: var(--brass-lt); font-weight: 600; }

/* ================================================== HONESTY SLOTS (furniture) */

.slot {
  border: 2px dashed var(--brass);
  background: rgba(209, 155, 60, .10);
  border-radius: 18px;
  padding: 24px 26px 20px;
}
.slot-d { background: rgba(209, 155, 60, .085); }
.slot-k {
  margin: 0 0 10px;
  font-family: var(--ff-b);
  font-weight: 700; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass-dk);
}
.slot-d .slot-k { color: var(--brass-lt); }
.slot p { margin: 0 0 .85em; font-size: .99rem; color: var(--ink-2); }
.slot-d p { color: var(--cream-2); }
.slot p:last-child { margin-bottom: 0; }
.work-slot { margin-top: 34px; }
.hours-note { margin: 16px 0 0; font-size: .92rem; color: var(--ink-2); }

/* ======================================================= ABOUT THIS PREVIEW */

.preview { background: var(--shea-3); padding-block: clamp(40px, 6vw, 66px); }
.about-preview { max-width: 74ch; }
.ap-h {
  margin: 0 0 .5em;
  font-family: var(--ff-d); font-variation-settings: "opsz" 48;
  font-weight: 700; font-size: 1.7rem; letter-spacing: -.025em; color: var(--ink);
}
.about-preview p { margin: 0 0 1em; font-size: 1rem; color: var(--ink-2); }
.about-preview p:last-child { margin-bottom: 0; }
.about-preview strong { color: var(--ink); }

/* ================================================================== FOOTER */

.foot { background: var(--onyx); color: var(--cream-2); }
.foot-in {
  display: grid; gap: 34px;
  padding-block: clamp(40px, 6vw, 62px) 34px;
}
@media (min-width: 760px) { .foot-in { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.foot-brand .brand-mark { width: 52px; height: 52px; margin-bottom: 14px; border-radius: 12px; }
.foot-name {
  margin: 0 0 6px;
  font-family: var(--ff-d); font-variation-settings: "opsz" 34;
  font-weight: 700; font-size: 1.2rem; letter-spacing: -.02em; color: var(--cream);
}
.foot-sub { margin: 0; font-size: .92rem; color: var(--cream-3); }
.foot-k {
  margin: 0 0 12px;
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brass-lt);
}
.foot-col a, .foot-col p { display: block; margin: 0 0 9px; font-size: .95rem; text-decoration: none; }
.foot-col a:hover { color: var(--cream); text-decoration: underline; }
.foot-bar {
  border-top: 1px solid rgba(252, 243, 233, .14);
  padding-block: 18px 24px;
}
.foot-bar p { margin: 0; font-size: .85rem; color: var(--cream-3); }

/* ===================================================================== 404 */

.nf { background: var(--onyx); background-image: var(--weave); color: var(--cream); padding-block: clamp(64px, 12vw, 130px); }
.nf-code {
  margin: 0 0 4px;
  font-family: var(--ff-d); font-variation-settings: "opsz" 96;
  font-weight: 700; font-size: clamp(4rem, 14vw, 8rem); line-height: .86;
  letter-spacing: -.05em; color: var(--brass-lt);
}
.nf-cta { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 13px; }

/* ================================================================= REVEALS */

.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.in-view {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s ease;
}
.js .reveal-2.in-view { transition-delay: .07s; }
.js .reveal-3.in-view { transition-delay: .14s; }
.js .reveal-4.in-view { transition-delay: .21s; }
.js .reveal-5.in-view { transition-delay: .28s; }
.js .reveal-6.in-view { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal.in-view {
    opacity: 1; transform: none; transition: none;
  }
  .btn:hover { transform: none; }
}

/* ================= licensed stock photographs (Nathan's call, 2026-08-14) ==
   The zero-photo principle was overridden at his review: licensed stock of
   the craft, clearly captioned, until Lizzy's own photographs replace it.
   Provenance and screening in PHOTOS.md. */
.hero-copy { position: relative; }
.hero-fig { position: relative; margin: 36px auto 0; max-width: 430px; }
.hero-fig .ph,
.stock-row .ph {
  border: 1px solid rgba(240, 193, 105, .5);
  border-radius: 16px;
  padding: 10px;
  background: rgba(18, 10, 16, .5);
}
.hero-fig img,
.stock-row img { display: block; width: 100%; height: auto; border-radius: 9px; }
.hero-fig figcaption,
.stock-row figcaption {
  margin-top: 9px;
  font-size: .78rem; line-height: 1.55;
  color: var(--cream-3);
}
.hero-fig figcaption .furniture { color: var(--cream-2); }
@media (min-width: 1080px) {
  .hero .shell {
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 56px;
    align-items: center;
  }
  .hero-fig { margin: 0; max-width: none; width: min(100%, 440px); justify-self: end; }
}
.stock-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0 0 46px;
}
.stock-row figure { margin: 0; }
@media (max-width: 820px) {
  .stock-row { grid-template-columns: 1fr; max-width: 430px; }
}
.hero-policy {
  position: relative;
  margin: 7px 0 0;
  font-size: .92rem; font-weight: 600;
  color: var(--brass-lt);
}