/* ── Reset + Base ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --cream:    #F2EDE3;    /* warm paper white */
  --pink:     #D4A8B4;    /* dusty rose */
  --pink-d:   #B87888;    /* deeper rose */
  --green:    #4A6741;
  --sage:     #8B9E7A;
  --olive:    #7A8E28;    /* Whimsy Feast script olive */
  --brown:    #5C3D2E;
  --brown2:   #8B6355;
  --gold:     #C8A84B;

  --parch:    #F7F0E4;    /* cream paper - inner card */
  --mauve:    #D0BEC8;    /* dusty mauve - Whimsy Feast outer bg */
  --mauve-d:  #C0AABC;    /* deeper mauve for dark sections tint */
  --dark:     #1A1008;
  --card-bg:  #FDFAF7;
}

html { overscroll-behavior: none; scroll-behavior: auto; overflow-x: clip; }
body { overscroll-behavior: none; font-family: 'Inter', sans-serif; font-weight: 300; background: var(--cream); color: var(--brown); line-height: 1.6; overflow-x: clip; cursor: none; }
*, *::before, *::after { cursor: none !important; }
img { display: block; width: 100%; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--mauve-d); border-radius: 2px; }

/* ── Preloader ────────────────────────────────────────── */
#preloader {
  position: fixed; inset: 0; background: var(--dark); z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 0.05em;
}
.pre-letter {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(3.5rem, 10vw, 7rem); color: var(--cream);
  letter-spacing: 0.3em; opacity: 0; transform: translateY(30px);
}

/* ── Nav ──────────────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  padding: 1.2rem 2.4rem; display: flex; align-items: center;
  justify-content: space-between; transition: background 0.4s, box-shadow 0.4s;
}
#nav.scrolled {
  background: rgba(237,232,220,0.93); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(92,61,46,0.12);
}
.nav-logo {
  display: inline-flex; align-items: center;
  color: var(--brown); text-decoration: none;
}
/* Her whole lockup, hình lẫn chữ. One weight of one ink, so it is carried as a MASK and painted
   with currentColor: it takes --brown here and --ink on the blog from the same file, with nothing
   to recolour when a palette moves. 64px is the floor the design system measured - below it the
   drawn "MyNga" closes up. The name is inside the picture now, so .nav-logo-sr says it in words. */
.nav-logo-mark { width: calc(64px * 890 / 651); height: 64px; flex: none; }
/* The drawing is INLINE, not a mask. A mask is a still image, so the breeze inside it would
   never have run; inline it still takes its ink from currentColor, which is what kept one file
   serving --brown here and --ink on the blog. The svg carries its own prefers-reduced-motion
   block. Generated by designer/prototypes/logo-motion/produce.mjs; do not hand-edit. */
.nav-logo-mark svg { display: block; width: 100%; height: 100%; }
.nav-logo-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a {
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown);
  text-decoration: none; transition: color 0.2s;
}
.nav-links a:hover { color: var(--pink-d); }
.hamburger {
  display: none; flex-direction: column; gap: 5px; cursor: pointer;
  padding: 4px; min-width: 32px; min-height: 24px; background: none; border: none;
}
.hamburger span { width: 24px; height: 1.5px; background: var(--brown); transition: transform 0.3s, opacity 0.3s; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mobile-menu {
  position: fixed; inset: 0; background: rgba(237,232,220,0.97);
  z-index: 999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
  opacity: 0; visibility: hidden; transform: translateY(-14px);
  transition: opacity 0.38s ease, visibility 0.38s, transform 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
}
.mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-menu a {
  font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-weight: 300;
  color: var(--brown); text-decoration: none; letter-spacing: 0.1em;
}

/* ── Hero ─────────────────────────────────────────────── */
#hero {
  position: relative; min-height: 100svh; display: flex;
  align-items: center; background: var(--cream); overflow: hidden;
}
#hero-canvas {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 900px;
  padding: 9rem 5vw 5rem; margin: 0 auto; display: block; text-align: center;
}
.hero-text {
  max-width: 640px; margin: 0 auto;
}
.hero-eyebrow {
  font-family: 'Dancing Script', cursive; font-size: 1.1rem;
  color: var(--pink-d); margin-bottom: 0.8rem; letter-spacing: 0.06em;
}
.hero-name {
  font-family: 'Dancing Script', cursive; font-weight: 700;
  font-size: clamp(4.6rem, 11vw, 8.5rem); line-height: 0.95;
  color: #9E2F37; letter-spacing: 0; margin-bottom: 1.2rem;
}
.hero-name em { font-style: normal; color: var(--pink-d); }
/* One whole painted frame, flush to every edge with none of the green border cropped and the
   nav strip clear (96px, the nav's own height). A silent <video> played as a boomerang, since
   blooming is one-way and CSS has no boomerang loop. object-fit: fill, because contain leaves
   the border short of the edge whenever the hero's aspect ratio differs from the 1344x768 frame. */
.hero-frame-wrap {
  position: absolute; top: 96px; left: 0; right: 0; bottom: 0;
  z-index: 1; pointer-events: none;
}
.hero-frame-bg {
  width: 100%; height: 100%; object-fit: fill; display: block;
}
.hero-tagline {
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.85rem;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--brown2); margin-bottom: 2.4rem;
}
.hero-tagline span { display: inline-block; width: 2rem; height: 1px; background: var(--sage); vertical-align: middle; margin: 0 0.6rem; }
.hero-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.6rem; border-radius: 100px;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s; cursor: pointer; border: none;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(92,61,46,0.2); }
/* PRESSED, WHICH IS THE STATE HALF THE READERS HAVE. Every control here had :hover and nothing
   else, and no finger has ever hovered: on a phone the button lifted on tap and stayed lifted with
   nothing to say it had fired. It settles back to the page and darkens instead. */
.btn-pill:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(92,61,46,0.18); filter: brightness(0.94); }
.tab-btn:active, .bpage-btn:active, .hamburger:active, .bpage-close:active { filter: brightness(0.9); }
.chapter-row:active, .seo-name-item:active, .tete-card:active, .ps-piece:active { filter: brightness(0.97); }

/* A KEYBOARD READER COULD NOT SEE WHERE THEY WERE. The page declared no :focus rule of any kind, so
   focus was whatever the browser happened to draw over four different grounds. The ring is the
   page's own ink, offset clear of the control so it survives a rounded pill, and it flips to cream
   inside the two dark chapters - a brown ring on #1A1008 is not a ring. */
:focus-visible { outline: 2px solid var(--brown); outline-offset: 3px; border-radius: 2px; }
#tete :focus-visible, #contact :focus-visible, .book-face :focus-visible { outline-color: var(--cream); }
.btn-green { background: var(--olive); color: #fff; letter-spacing: 0.05em; }
.btn-outline { background: rgba(247,240,228,0.92); color: var(--brown); border: 1.5px solid var(--mauve-d); }
.btn-sm { padding: 0.55rem 1.35rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.06em; }
.scroll-hint {
  margin-top: 3rem; display: flex; align-items: center; gap: 0.8rem;
  font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--brown2); opacity: 0.6;
}
.scroll-line { width: 40px; height: 1px; background: var(--sage); animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse { 0%,100%{transform:scaleX(1);opacity:1;} 50%{transform:scaleX(1.4);opacity:0.5;} }

/* ── Ticker ───────────────────────────────────────────── */
#ticker {
  background: var(--green); overflow: hidden; padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08);
}
.ticker-track { display: flex; width: max-content; animation: tickerScroll 28s linear infinite; }
.ticker-item {
  white-space: nowrap; font-family: 'Inter', sans-serif; font-weight: 300;
  font-size: 0.72rem; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--cream); padding: 0 2.5rem;
}
.ticker-dot { color: var(--sage); padding: 0; }
@keyframes tickerScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ── Section Commons ──────────────────────────────────── */
section { width: 100%; }
.section-inner { max-width: 1200px; margin: 0 auto; padding: 2rem 2.4rem; }
.section-label {
  font-family: 'Caveat', cursive; font-size: 1.05rem; color: var(--olive);
  letter-spacing: 0.04em; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.section-label::before { content:''; display:inline-block; width:24px; height:1px; background:var(--olive); opacity:0.6; }
.section-heading {
  font-family: 'Cormorant Garamond', serif; font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.1; color: var(--brown); margin-bottom: 0.7rem;
}
.section-heading em { font-style: italic; color: var(--pink-d); }
.section-sub {
  font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.88rem;
  color: var(--brown2); max-width: 560px; line-height: 1.7; margin-bottom: 1.8rem;
}
.divider { display: flex; align-items: center; gap: 1rem; padding: 0 2.4rem; max-width: 1200px; margin: 0 auto; }
.divider-line { flex: 1; height: 1px; background: var(--sage); opacity: 0.35; }
.divider-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); opacity: 0.45; }

/* ── Whimsy card frame (Whimsy Feast style) ──────────── */
.whimsy-frame {
  background: var(--parch);
  border-radius: 6px;
  box-shadow:
    0 0 0 6px rgba(255,255,255,0.55),
    0 0 0 10px rgba(208,190,200,0.3),
    0 4px 28px rgba(140,100,120,0.14);
  padding: 1.8rem 2rem !important;
  position: relative;
}
.whimsy-frame::before, .whimsy-frame::after {
  content: '✿'; font-family: 'Caveat', cursive;
  position: absolute; color: var(--olive); opacity: 0.35;
  font-size: 1.1rem; line-height: 1;
}
.whimsy-frame::before { top: 10px; left: 14px; }
.whimsy-frame::after  { bottom: 10px; right: 14px; transform: rotate(180deg); }

/* ── Stats + Quote ────────────────────────────────────── */
#stats { background: var(--mauve); }
.stats-layout { display: flex; align-items: center; gap: 4rem; }
.quote-block { flex: 1 1 320px; text-align: left; max-width: 480px; padding-top: 0; }
.quote-mark { font-family: 'Cormorant Garamond', serif; font-size: 5rem; line-height: 0.5; color: var(--olive); opacity: 0.4; margin-bottom: 1rem; display: block; }
.quote-text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(1.3rem,2.5vw,1.9rem); color: var(--brown); line-height: 1.5; margin-bottom: 1.2rem; }
.quote-attr { font-family: 'Caveat', cursive; font-size: 1.05rem; color: var(--olive); opacity: 0.75; }
.stats-row { flex: 1 1 280px; display: flex; justify-content: flex-end; gap: 3rem; flex-wrap: wrap; }
.stat-item { text-align: center; }
.stat-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(2.8rem,5vw,4rem); color: var(--olive); line-height: 1; margin-bottom: 0.4rem; }
.stat-num sup { font-size: 0.5em; vertical-align: super; color: var(--gold); }
.stat-label { font-family: 'Inter', sans-serif; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brown2); }

/* ── Tete Vintage ─────────────────────────────────────── */
#tete { background: var(--dark); }
#tete .section-label { color: var(--sage); }
#tete .section-label::before { background: var(--sage); }
#tete .section-heading { color: var(--cream); }
#tete .section-sub { color: var(--sage); }
.tete-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-bottom: 3rem; }
.tete-card { position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 3/4; cursor: pointer; }
.tete-card img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.05) saturate(1.1); transition: transform 0.5s ease; }
.tete-card:hover img { transform: scale(1.04); }
.tete-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,16,8,0.55) 0%, transparent 50%); opacity: 0; transition: opacity 0.3s; }
.tete-card:hover .tete-overlay { opacity: 1; }
.stats-bar { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.stats-bar-item { font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; color: var(--gold); font-weight: 400; }
.stats-bar-item span { display: block; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: var(--sage); margin-top: 0.2rem; }
.platform-row { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 2rem; }
.platform-pill { padding: 0.45rem 1.1rem; border-radius: 100px; font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.pill-terra { background: var(--pink-d); color: var(--cream); }
.pill-brown { background: var(--brown2); color: var(--cream); }
/* THE PARAGRAPH GETS THE TYPE, NOT A RAIL. This had a 2px --brown2 strip down its left edge and
   1.2rem of indent, which made it look considered without deciding anything about it - and it was
   set at 62% opacity, a caption's weight, under the thing it is actually the point of. It is the
   only sentence in the chapter that says how the growth happened, so it is sized and lit like one
   and stands on its own margin. */
.growth-desc { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.95rem; color: rgba(237,232,220,0.82); max-width: 600px; line-height: 1.75; }

/* ── CeraVe ───────────────────────────────────────────── */
#cerave { background: var(--parch); }
.cerave-tabs { display: flex; gap: 0; margin-bottom: 1.6rem; border-bottom: 1px solid rgba(92,61,46,0.15); overflow-x: auto; scrollbar-width: none; }
.cerave-tabs::-webkit-scrollbar { display: none; }
.tab-btn { padding: 0.7rem 1.4rem; background: none; border: none; border-bottom: 2px solid transparent; font-family: 'Inter', sans-serif; font-weight: 300; font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--brown2); cursor: pointer; white-space: nowrap; transition: color 0.2s, border-color 0.2s; margin-bottom: -1px; }
.tab-btn.active { color: var(--brown); border-bottom-color: var(--pink-d); font-weight: 400; }
.tab-btn:hover { color: var(--brown); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.cerave-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }
.phone-card { background: var(--card-bg); border: 1px solid rgba(139,99,85,0.15); border-radius: 12px; overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; box-shadow: 0 2px 12px rgba(92,61,46,0.07); }
.phone-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(92,61,46,0.15); }
.phone-card img { width: 100%; aspect-ratio: 9/16; object-fit: cover; filter: none; }
.phone-card-label { padding: 0.8rem 1rem; font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brown2); font-weight: 400; }