/* ═══════════════════════════════════════════════════════════════════
   GASTRO-LX · RECIPE CODEX™ · v4.1
   Dark shell · Copper + Silver · Editorial serif · Data-dense
   Reference: brand board (charcoal/copper/silver on jet) + CODEX mockup
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Cinzel:wght@400;500;600&family=Jost:wght@300;400;500;600&family=JetBrains+Mono:wght@300;400;500&display=swap');

:root{
  /* ── Brand palette (locked to brand board) ────────────────── */
  --jet:        #000000;      /* deepest canvas */
  --charcoal:   #0d0d0f;      /* primary surface */
  --charcoal-2: #16161a;      /* raised card */
  --charcoal-3: #1e1e23;      /* hover / active */
  --smoke:      #26262c;      /* borders on dark */
  --smoke-2:    #3a3a42;
  --ash:        #8a8a94;      /* muted text — v4.2: bumped +2.5 contrast for KPI subtext legibility */
  --ash-soft:   #6b6b74;      /* v4.2: retained for decorative use only */
  --pearl:      #b8b8c0;      /* body text — v4.2: brighter +1 */
  --bone:       #e8e4dc;      /* headline text on dark */
  --white:      #ffffff;

  --copper:     #b87333;      /* brand accent (locked) */
  --copper-hi:  #d69574;
  --copper-lo:  #8a5322;
  --copper-gh:  rgba(184, 115, 51, 0.15);

  --silver:     #c0c0c0;      /* PRO tier ensō */
  --platinum:   #d8d5cf;
  --champagne:  #d4c4a8;

  --sage:       #6b8e6b;      /* positive metrics · FINAL pill */
  --sage-bg:    rgba(107, 142, 107, 0.15);
  --burgundy:   #a04848;      /* alerts */
  --burgundy-bg:rgba(160, 72, 72, 0.12);
  --amber:      #c99a3d;      /* warnings */

  /* ── Typography ───────────────────────────────────────────── */
  --serif:  'Cormorant Garamond', Georgia, serif;
  --trajan: 'Cinzel', 'Trajan Pro', 'Cormorant Garamond', serif;
  --sans:   'Jost', -apple-system, sans-serif;
  --mono:   'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── Rhythm ───────────────────────────────────────────────── */
  --rule:        1px solid var(--smoke);
  --rule-copper: 1px solid var(--copper);
  --rule-thin:   0.5px solid var(--smoke);
  --glow:        0 2px 40px rgba(184, 115, 51, 0.08);

  --ease:  cubic-bezier(.22, .61, .36, 1);
  --slow:  600ms var(--ease);
  --med:   400ms var(--ease);
  --fast:  200ms var(--ease);
}

/* ── RESET ──────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ font-size:16px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  margin:0;
  background:var(--charcoal);
  color:var(--pearl);
  font-family:var(--sans);
  font-weight:400;
  font-size:14.5px;
  line-height:1.7;
  letter-spacing:0.005em;
  /* ╔═ ELEVATION 2 · DAMASCUS BASE TEXTURE ═╗                            */
  /* Fractured-obsidian with copper veins, fixed, 7% opacity via overlay. */
  /* Adds depth without ever hurting legibility.                          */
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.94), rgba(13,13,15,0.96)),
    url('/pro/assets/brand/textures/obsidian-copper-veins.jpg');
  background-size: auto, cover;
  background-position: top, center;
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* ── TYPE UTILITIES ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--ash);
}
.eyebrow-copper{ color:var(--copper); }

.h-editorial{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(48px, 6vw, 84px);
  line-height:1.02;
  letter-spacing:-0.015em;
  color:var(--bone);
  margin:0;
}
.h-editorial em{ font-style:italic; color:var(--copper); font-weight:300; }

.subtitle{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:clamp(17px, 1.6vw, 21px);
  line-height:1.45;
  color:var(--pearl);
}

.ip-code{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:0.08em;
  color:var(--copper);
  text-transform:uppercase;
}

.copper-rule{
  height:1px;
  background:linear-gradient(90deg, transparent, var(--copper) 20%, var(--copper) 80%, transparent);
  opacity:0.5;
  margin:2rem 0;
}
.hairline{ height:1px; background:var(--smoke); margin:1.5rem 0; }

/* ── APP SHELL ──────────────────────────────────────────────────── */
.app{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:100vh;
  background:var(--charcoal);
}

/* ── SIDEBAR ────────────────────────────────────────────────────── */
.side{
  background:var(--jet);
  color:var(--pearl);
  padding:2.5rem 0 2rem;
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  overflow-y:auto;
  border-right:0.5px solid rgba(184, 115, 51, 0.15);
  /* ╔═ ELEVATION 2 · REAL COPPER TOPOGRAPHIC SIDEBAR ═╗                */
  /* Warm copper contour texture at 10% — sidebar becomes a material.    */
  background-image:
    linear-gradient(180deg, rgba(184,115,51,0.05), rgba(0,0,0,0.9) 300px),
    url('/pro/assets/brand/textures/copper-topographic.jpg');
  background-size:auto, cover;
  background-position:top, center;
  background-repeat:no-repeat;
}
.side::-webkit-scrollbar{ width:2px; }
.side::-webkit-scrollbar-thumb{ background:rgba(184,115,51,0.2); }

/* ── BRAND BLOCK — silver ensō with PRO ATELIER label ──────────── */
.brand{
  display:flex; flex-direction:column; align-items:center;
  padding:0 2rem 2rem;
  border-bottom:0.5px solid rgba(184, 115, 51, 0.15);
  gap:1rem;
}
/* ╔═ ELEVATION 1 · LIVING ENSŌ IN SIDEBAR ═╗                          */
/* Static platinum mark at rest; on hover the spinning master fades in.   */
.brand .enso{
  width:104px; height:104px;
  position:relative;
  background:url('/pro/assets/brand/logo-mark-platinum-128.png') center/contain no-repeat;
  filter:drop-shadow(0 0 20px rgba(216, 213, 207, 0.1));
  transition:filter 0.4s ease;
}
.brand .enso video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;
  opacity:0;
  transition:opacity 0.5s ease;
  pointer-events:none;
}
.brand .enso:hover video{ opacity:1; }
.brand .enso:hover{ filter:drop-shadow(0 0 28px rgba(216, 213, 207, 0.35)); }
.brand-wordmark{ text-align:center; }
.brand-wordmark .wm{
  font-family:var(--trajan);
  font-weight:500;
  font-size:20px;
  letter-spacing:0.32em;
  color:var(--bone);
  text-transform:uppercase;
  display:block;
  margin-bottom:0.35rem;
}
.brand-wordmark .sub{
  font-family:var(--serif);
  font-style:italic;
  font-weight:300;
  font-size:13.5px;
  color:var(--silver);
  letter-spacing:0.02em;
  display:block;
  margin-bottom:0.5rem;
}
.brand-wordmark .endorse{
  font-family:var(--sans);
  font-size:8.5px;
  font-weight:500;
  letter-spacing:0.35em;
  color:var(--copper);
  text-transform:uppercase;
  display:block;
}

/* ── NAV — CORE sub-nav + 5-pillar CODEX taxonomy ──────────────── */
.nav{ padding:1.5rem 0; flex:1; }
.nav-section{ margin-bottom:1.75rem; }
.nav-section-label{
  padding:0 2rem 0.6rem;
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.4em;
  color:rgba(216, 213, 207, 0.45);
  text-transform:uppercase;
  display:flex; align-items:center; gap:0.75rem;
}
.nav-section-label::after{
  content:''; flex:1; height:0.5px; background:rgba(184,115,51,0.15);
}

.nav-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:0.65rem 2rem;
  color:rgba(232, 228, 220, 0.72);
  font-family:var(--sans);
  font-size:11.5px;
  font-weight:400;
  letter-spacing:0.24em;
  text-transform:uppercase;
  text-decoration:none;
  border-left:2px solid transparent;
  transition:all var(--med);
  cursor:pointer;
  position:relative;
}
.nav-item:hover{
  color:var(--bone);
  background:rgba(184, 115, 51, 0.06);
  border-left-color:rgba(184, 115, 51, 0.4);
}
.nav-item.active{
  color:var(--copper-hi);
  border-left-color:var(--copper);
  background:linear-gradient(90deg, rgba(184, 115, 51, 0.14), transparent 60%);
}
.nav-item .icon{
  margin-right:0.75rem;
  font-family:var(--mono);
  color:var(--copper);
  opacity:0.7;
  font-size:14px;
  width:14px; display:inline-block;
}
.nav-item .badge{
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.05em;
  color:var(--copper);
  padding:0;
}

/* PILLAR items — larger, more editorial */
.nav-pillar{
  display:block;
  padding:0.9rem 2rem 0.6rem;
  color:rgba(232, 228, 220, 0.9);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:all var(--med);
}
.nav-pillar:hover{ border-left-color:var(--copper); background:rgba(184,115,51,0.05); }
.nav-pillar.active{ border-left-color:var(--copper); background:linear-gradient(90deg, rgba(184,115,51,0.12), transparent 70%); }
.nav-pillar .pn{
  font-family:var(--trajan);
  font-weight:500;
  font-size:14px;
  letter-spacing:0.28em;
  color:var(--bone);
  display:block;
  text-transform:uppercase;
}
.nav-pillar.active .pn{ color:var(--copper-hi); }
.nav-pillar .pv{
  font-family:var(--sans);
  font-size:8.5px;
  font-weight:500;
  letter-spacing:0.4em;
  color:var(--ash);
  text-transform:uppercase;
  display:block;
  margin-top:0.25rem;
}

.side-footer{
  padding:1.25rem 2rem;
  border-top:0.5px solid rgba(184, 115, 51, 0.12);
  font-family:var(--sans);
  font-size:8.5px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(216, 213, 207, 0.4);
  text-align:center;
  line-height:1.9;
}
.side-footer .n{ color:var(--copper); font-family:var(--mono); letter-spacing:0.1em; }

/* ── MAIN ───────────────────────────────────────────────────────── */
.main{
  padding:2.5rem 3.5rem 4rem;
  min-height:100vh;
  position:relative;
  max-width:1500px;
}

/* ── TOPBAR ─────────────────────────────────────────────────────── */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.75rem;
  margin-bottom:2.5rem;
  border-bottom:var(--rule);
}
.crumb{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.35em;
  color:var(--ash);
  text-transform:uppercase;
}
.crumb .sep{ margin:0 0.7rem; color:var(--copper); opacity:.6; }
.crumb .now{ color:var(--bone); }
.tb-right{ display:flex; align-items:center; gap:1.5rem; }
.tb-search{
  padding:0.55rem 1rem;
  background:transparent;
  border:none;
  border-bottom:0.5px solid var(--smoke);
  font-family:var(--sans); font-size:12px;
  color:var(--bone); width:240px;
  transition:border-color var(--med);
}
.tb-search:focus{ outline:none; border-bottom-color:var(--copper); }
.tb-search::placeholder{ color:var(--ash); letter-spacing:0.15em; text-transform:uppercase; font-size:10px; }
.tb-lang{
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:0.3em; color:var(--ash); text-transform:uppercase;
  display:flex; gap:0.6rem;
}
.tb-lang span{ cursor:pointer; transition:color var(--fast); }
.tb-lang span.active{ color:var(--copper); }
.tb-lang span:hover{ color:var(--bone); }
.tb-avatar{
  width:36px; height:36px; border-radius:50%;
  background:var(--charcoal-3); color:var(--copper);
  border:0.5px solid var(--copper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:13px; font-weight:500;
  letter-spacing:0.05em;
}

/* ═══════════════════════════════════════════════════════════════ */
/* ══ DASHBOARD — CODEX™ HOME                                     ══ */
/* ═══════════════════════════════════════════════════════════════ */

.dash-hero{
  padding:1rem 0 2.5rem;
  border-bottom:var(--rule);
  margin-bottom:2.5rem;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3rem;
  align-items:flex-end;
}
.dash-hero-left h1{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(48px, 5.5vw, 72px);
  line-height:1.02;
  letter-spacing:-0.015em;
  color:var(--bone);
  margin:0 0 0.75rem;
}
.dash-hero-left h1 em{ font-style:italic; color:var(--copper); font-weight:300; }
.dash-hero-tagline{
  font-family:var(--serif);
  font-style:italic;
  font-size:17px;
  color:var(--pearl);
  margin:0;
  max-width:60ch;
}
.dash-hero-tagline strong{
  font-style:normal; font-family:var(--sans); font-size:10.5px;
  letter-spacing:0.32em; color:var(--copper); text-transform:uppercase;
  font-weight:500; margin-right:0.5rem;
}
.dash-hero-right{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--ash);
  text-transform:uppercase;
  text-align:right;
  line-height:1.9;
}
.dash-hero-right .n{ color:var(--copper); }

/* ── KPI ROW ─────────────────────────────────────────────────── */
.kpi-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  margin-bottom:3rem;
  border-top:var(--rule);
  border-bottom:var(--rule);
}
.kpi{
  padding:2rem 1.75rem;
  border-right:var(--rule);
  position:relative;
  transition:background var(--med);
}
.kpi:last-child{ border-right:none; }
.kpi:hover{ background:var(--charcoal-2); }
.kpi .k{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--ash);
  margin-bottom:1rem;
  display:block;
}
.kpi .v{
  font-family:var(--serif);
  font-weight:300;
  font-size:42px;
  line-height:1;
  color:var(--bone);
  letter-spacing:-0.015em;
  display:block;
}
.kpi .v em{
  font-style:italic; color:var(--copper); font-size:26px;
  margin-left:3px; font-weight:300;
}
.kpi .v .sym{ font-size:24px; color:var(--copper); margin-right:3px; }
.kpi .sub{
  font-family:var(--sans);
  font-size:11px;
  color:var(--ash);
  margin-top:0.75rem;
  letter-spacing:0.05em;
  display:block;
}
.kpi .sub em{ color:var(--sage); font-style:normal; }
.kpi .sub .down{ color:var(--copper); }

/* ── DASHBOARD GRID ──────────────────────────────────────────── */
.dash-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:3rem;
  margin-bottom:3rem;
}

.dash-block{
  padding-bottom:1rem;
}
.dash-block-head{
  display:flex; align-items:baseline; justify-content:space-between;
  padding-bottom:1rem;
  margin-bottom:1.5rem;
  border-bottom:0.5px solid var(--copper);
}
.dash-block-head h2{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0;
}
.dash-block-head .action{
  font-family:var(--sans);
  font-size:9.5px;
  letter-spacing:0.3em;
  color:var(--ash);
  text-transform:uppercase;
  text-decoration:none;
  transition:color var(--fast);
}
.dash-block-head .action:hover{ color:var(--copper); }

/* ── RECENTLY COMPILED CARD ─────────────────────────────────── */
.recent-card{
  background:var(--charcoal-2);
  border:0.5px solid var(--smoke);
  padding:2.5rem;
  position:relative;
  transition:all var(--med);
}
.recent-card:hover{
  border-color:var(--copper);
  background:linear-gradient(180deg, var(--charcoal-2), rgba(184,115,51,0.03));
}
.recent-card .doc-id{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:0.08em;
  color:var(--copper);
  text-transform:uppercase;
  margin-bottom:1rem;
  display:flex; justify-content:space-between; align-items:center;
}
.recent-card .doc-id .status{
  padding:0.25rem 0.7rem;
  background:var(--sage-bg);
  color:var(--sage);
  border:0.5px solid var(--sage);
  border-radius:2px;
  font-size:9px;
  letter-spacing:0.28em;
}
.recent-card h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:34px;
  line-height:1.1;
  color:var(--bone);
  margin:0 0 0.5rem;
  letter-spacing:-0.01em;
}
.recent-card h3 em{ font-style:italic; color:var(--copper); font-weight:300; }
.recent-card .desc{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--pearl);
  margin:0 0 1.75rem;
}
.recent-card .meta-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  padding-top:1.5rem;
  border-top:var(--rule);
}
.recent-card .m{
  border-right:var(--rule);
  padding:0 1rem;
}
.recent-card .m:first-child{ padding-left:0; }
.recent-card .m:last-child{ border-right:none; padding-right:0; }
.recent-card .m .k{
  font-size:8.5px; letter-spacing:0.35em;
  color:var(--ash); text-transform:uppercase; font-weight:500;
  display:block; margin-bottom:0.4rem;
}
.recent-card .m .v{
  font-family:var(--serif); font-weight:400;
  font-size:18px; color:var(--bone); letter-spacing:-0.005em;
}
.recent-card .m .v em{ font-style:italic; color:var(--copper); }

/* ── CATEGORY BREAKDOWN TABLE ────────────────────────────────── */
.cat-table{
  width:100%;
  border-collapse:collapse;
}
.cat-table thead th{
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--copper);
  text-align:left;
  padding:0 0 1rem;
  border-bottom:0.5px solid var(--copper);
  opacity:0.85;
}
.cat-table th.num, .cat-table td.num{ text-align:right; font-family:var(--mono); }
.cat-table td{
  /* v4.2: softer editorial dividers — hairline dotted feel, less SaaS grid */
  padding:1.1rem 0;
  border-bottom:0.5px dotted rgba(58,58,66,0.55);
  color:var(--pearl);
  font-size:13.5px;
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:0.005em;
  transition:color var(--fast);
}
.cat-table td:first-child{
  color:var(--bone);
  font-family:var(--serif);
  font-weight:400;
  font-style:italic;
  font-size:15px;
}
.cat-table td.code{
  font-family:var(--mono); font-size:10.5px;
  color:var(--copper); letter-spacing:0.15em;
  padding:0 0.5rem;
  font-weight:400;
  opacity:0.75;
}
.cat-table td.num{
  color:var(--bone);
  font-family:var(--serif);
  font-weight:300;
  font-size:19px;
  letter-spacing:-0.005em;
}
.cat-table td.zero{ color:var(--ash-soft); opacity:0.5; }
.cat-table tr:last-child td{ border-bottom:none; }
.cat-table tr:hover td{ color:var(--bone); }
.cat-table tr:hover td.code{ opacity:1; }

/* ── PILLAR OVERVIEW BAND ────────────────────────────────────── */
.pillars-band{
  margin:3rem 0;
  padding:2.5rem 0;
  border-top:var(--rule);
  border-bottom:var(--rule);
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:0;
}
.pillar-cell{
  padding:0 1.75rem;
  border-right:var(--rule);
  transition:background var(--med);
  cursor:pointer;
}
.pillar-cell:last-child{ border-right:none; }
.pillar-cell:hover{ background:var(--charcoal-2); }
.pillar-cell .pn{
  font-family:var(--trajan);
  font-weight:500;
  font-size:16px;
  letter-spacing:0.32em;
  color:var(--bone);
  text-transform:uppercase;
  margin-bottom:0.5rem;
  display:block;
}
.pillar-cell .pv{
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.4em;
  color:var(--copper);
  text-transform:uppercase;
  display:block;
  margin-bottom:1rem;
}
.pillar-cell .pd{
  font-family:var(--serif);
  font-style:italic;
  font-size:13.5px;
  line-height:1.5;
  color:var(--pearl);
  display:block;
  margin-bottom:1rem;
}
.pillar-cell .pc{
  font-family:var(--mono);
  font-size:22px;
  color:var(--copper);
  font-weight:400;
  letter-spacing:0.05em;
}
.pillar-cell .pc .u{ font-size:10px; color:var(--ash); margin-left:4px; letter-spacing:0.2em; }

/* ═══════════════════════════════════════════════════════════════ */
/* ══ RECIPE PAGE                                                 ══ */
/* ═══════════════════════════════════════════════════════════════ */
.recipe-page{
  padding-bottom:6rem;
  animation:fadeIn 400ms var(--ease);
}
@keyframes fadeIn{
  from{ opacity:0; transform:translateY(4px); }
  to{ opacity:1; transform:translateY(0); }
}

.rp-masthead{
  padding:1rem 0 2.5rem;
  border-bottom:0.5px solid var(--copper);
  margin-bottom:2.5rem;
}
.rp-masthead .meta-row{
  display:flex; justify-content:space-between; align-items:flex-start;
  margin-bottom:1.75rem;
}
.rp-masthead .meta-row .r{ text-align:right; }
.rp-masthead .meta-row .r .status-pill{
  display:inline-block;
  padding:0.25rem 0.75rem;
  background:var(--sage-bg);
  color:var(--sage);
  border:0.5px solid var(--sage);
  border-radius:2px;
  font-family:var(--sans);
  font-size:9px;
  letter-spacing:0.35em;
  text-transform:uppercase;
  font-weight:500;
}
.rp-title{
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(46px, 5.5vw, 76px);
  line-height:1.02;
  letter-spacing:-0.02em;
  color:var(--bone);
  margin:0 0 1rem;
}
.rp-title em{ font-style:italic; color:var(--copper); font-weight:300; }
.rp-subtitle{
  font-family:var(--serif);
  font-style:italic; font-weight:300;
  font-size:clamp(17px, 1.5vw, 20px);
  line-height:1.5;
  color:var(--pearl);
  margin:0 0 2rem;
  max-width:64ch;
}
.rp-authored{
  font-family:var(--sans);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.32em;
  color:var(--ash);
  text-transform:uppercase;
}
.rp-authored strong{ color:var(--bone); font-weight:500; }

.rp-stats{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
  margin:2.5rem 0 3rem;
  padding:2rem 0;
  border-top:var(--rule);
  border-bottom:var(--rule);
}
.rp-stat{
  padding:0 1.5rem;
  border-right:var(--rule);
}
.rp-stat:last-child{ border-right:none; }
.rp-stat .k{
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.4em;
  color:var(--ash);
  text-transform:uppercase;
  display:block;
  margin-bottom:0.75rem;
}
.rp-stat .v{
  font-family:var(--serif);
  font-weight:300;
  font-size:26px;
  line-height:1.1;
  color:var(--bone);
  letter-spacing:-0.01em;
}
.rp-stat .v em{ font-style:italic; color:var(--copper); font-size:16px; margin-left:2px; }
.rp-stat .v .u{ font-family:var(--sans); font-size:11px; color:var(--ash); margin-left:3px; }
.rp-stat .v .sym{ font-size:16px; color:var(--copper); margin-right:2px; }

.rp-body{
  display:grid;
  grid-template-columns:1fr 340px;
  gap:4rem;
  align-items:start;
}

.rp-section{
  margin-bottom:3rem;
  padding-bottom:2rem;
  border-bottom:var(--rule);
}
.rp-section:last-child{ border-bottom:none; }
.rp-section-head{
  display:flex; align-items:baseline; gap:1.25rem;
  margin-bottom:1.75rem;
}
.rp-section-head .sec-num{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  color:var(--copper);
  letter-spacing:0.05em;
}
.rp-section-head .sec-title{
  font-family:var(--sans);
  font-weight:500;
  font-size:12px;
  line-height:1;
  color:var(--bone);
  letter-spacing:0.35em;
  text-transform:uppercase;
}

.class-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.5rem 3rem;
}
.class-item .k{
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.4em;
  color:var(--ash);
  text-transform:uppercase;
  display:block;
  margin-bottom:0.35rem;
}
.class-item .v{
  font-family:var(--serif);
  font-weight:400;
  font-size:18px;
  color:var(--bone);
  line-height:1.4;
}

.ing-block{ margin-bottom:2rem; }
.ing-block-title{
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--copper);
  padding-bottom:0.75rem;
  margin-bottom:1rem;
  border-bottom:0.5px solid var(--copper);
}
.ing-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--sans);
  font-size:13.5px;
}
.ing-table th{
  font-family:var(--sans);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--ash);
  text-align:left;
  padding:0.6rem 0;
  border-bottom:0.5px solid var(--smoke);
}
.ing-table th.num, .ing-table td.num{ text-align:right; font-family:var(--mono); font-size:12.5px; }
.ing-table td{
  padding:0.85rem 0;
  border-bottom:0.5px solid var(--smoke);
  color:var(--bone);
  vertical-align:baseline;
}
.ing-table td.unit{ color:var(--ash); font-size:11.5px; letter-spacing:0.05em; }
.ing-table tr:last-child td{ border-bottom:none; }

.method-list{
  list-style:none;
  padding:0; margin:0;
  counter-reset:mstep;
}
.method-list li{
  position:relative;
  padding:1.25rem 0 1.25rem 4rem;
  border-bottom:var(--rule);
  counter-increment:mstep;
}
.method-list li:last-child{ border-bottom:none; }
.method-list li::before{
  content:counter(mstep, decimal-leading-zero);
  position:absolute;
  left:0; top:1.3rem;
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  color:var(--copper);
  letter-spacing:0.08em;
}
.method-list .step-title{
  font-family:var(--serif);
  font-weight:500;
  font-size:17px;
  color:var(--bone);
  display:block;
  margin-bottom:0.35rem;
}
.method-list .step-body{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.7;
  color:var(--pearl);
}
.method-list .ccp{
  /* v4.2: reskinned in copper palette — safety visibility preserved via copper accent + underline dot */
  display:inline-flex; align-items:center; gap:0.4rem;
  margin-left:0.6rem;
  font-family:var(--mono);
  font-size:9px;
  font-weight:500;
  letter-spacing:0.22em;
  color:var(--copper-hi);
  padding:2px 8px 2px 7px;
  border:0.5px solid var(--copper);
  background:rgba(184, 115, 51, 0.10);
  border-radius:1px;
  vertical-align:middle;
  text-transform:uppercase;
}
.method-list .ccp::before{
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--copper); flex-shrink:0;
  box-shadow:0 0 6px rgba(184,115,51,0.6);
}

.plating-panel{
  position:sticky; top:2rem;
  padding:0;
}
.plating-head{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:0.4em;
  text-transform:uppercase;
  color:var(--copper);
  padding-bottom:0.75rem;
  border-bottom:0.5px solid var(--copper);
  margin-bottom:1.25rem;
}
.plating-shot{
  /* v4.2: normalized backdrop — photos land on uniform charcoal, subtle vignette overlay unifies mixed source lighting */
  aspect-ratio:4/3;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.35) 100%),
    linear-gradient(135deg, var(--charcoal-2), var(--charcoal-3));
  border:0.5px solid var(--smoke);
  overflow:hidden;
  margin-bottom:1rem;
  position:relative;
  isolation:isolate;
}
.plating-shot img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  mix-blend-mode:luminosity;
  filter:contrast(1.05) saturate(0.85);
  transition:filter var(--slow), mix-blend-mode var(--slow);
}
.plating-shot::after{
  /* subtle copper corner tick for editorial cohesion */
  content:'';
  position:absolute; top:0; right:0;
  width:24px; height:24px;
  border-top:0.5px solid var(--copper);
  border-right:0.5px solid var(--copper);
  opacity:0.5;
  z-index:2;
  pointer-events:none;
}
.plating-shot:hover img{
  mix-blend-mode:normal;
  filter:contrast(1) saturate(1);
}
.plating-caption{
  font-family:var(--serif);
  font-style:italic;
  font-size:13px;
  color:var(--ash);
  margin-bottom:1.5rem;
  line-height:1.4;
}
.plating-north{
  /* v4.2b: legibility bump — richer surface, brighter body */
  margin-top:1.5rem;
  padding:1.5rem 1.25rem 1.5rem 1.5rem;
  background:linear-gradient(180deg, var(--charcoal-3), var(--charcoal-2));
  border-left:2px solid var(--copper);
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  line-height:1.65;
  color:var(--bone);
  letter-spacing:0.003em;
}
.plating-north .k{
  font-family:var(--sans);
  font-style:normal;
  font-size:9.5px; font-weight:600; letter-spacing:0.4em;
  text-transform:uppercase; color:var(--copper); display:block;
  margin-bottom:0.75rem;
}

.allergens{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.allergen{
  font-family:var(--sans);
  font-size:9.5px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  padding:0.4rem 0.8rem;
  border:0.5px solid var(--burgundy);
  color:var(--burgundy);
  background:var(--burgundy-bg);
}

.cost-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
  border-top:0.5px solid var(--copper);
  border-bottom:0.5px solid var(--copper);
}
.cost-item{
  padding:1.5rem 1.25rem;
  border-right:var(--rule);
}
.cost-item:last-child{ border-right:none; }
.cost-item .k{
  font-family:var(--sans); font-size:9px; font-weight:500;
  letter-spacing:0.35em; text-transform:uppercase;
  color:var(--ash); margin-bottom:0.7rem; display:block;
}
.cost-item .v{
  font-family:var(--serif); font-weight:300;
  font-size:30px; color:var(--bone);
  letter-spacing:-0.01em; line-height:1;
}
.cost-item .v .sym{ font-size:16px; color:var(--copper); margin-right:2px; }
.cost-item.highlight{ background:rgba(184,115,51,0.06); }
.cost-item.highlight .v{ color:var(--copper); }

.nutrition{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:0;
  margin-top:1rem;
}
.nut-item{
  padding:1rem 0.5rem;
  text-align:center;
  border-right:var(--rule);
}
.nut-item:last-child{ border-right:none; }
.nut-item .v{
  font-family:var(--serif); font-weight:400;
  font-size:22px; color:var(--bone); display:block;
}
.nut-item .k{
  font-family:var(--sans); font-size:8.5px; font-weight:500;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--ash); margin-top:0.4rem; display:block;
}

.timeline{ margin-top:0.5rem; }
.tl-row{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:1.5rem;
  padding:0.85rem 0;
  border-bottom:var(--rule);
}
.tl-row:last-child{ border-bottom:none; }
.tl-time{
  font-family:var(--mono);
  font-size:12px;
  color:var(--copper);
  letter-spacing:0.08em;
}
.tl-what{
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--bone);
  line-height:1.5;
}

.rp-footer{
  margin-top:5rem;
  padding-top:2rem;
  border-top:0.5px solid var(--copper);
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--sans); font-size:9.5px; font-weight:500;
  letter-spacing:0.35em; text-transform:uppercase;
  color:var(--ash);
}
.rp-footer .n{ font-family:var(--mono); color:var(--copper); letter-spacing:0.1em; }

/* ── TIER SWITCHER ────────────────────────────────────────────── */
.tier-switch{
  display:flex; gap:0;
  border:0.5px solid var(--smoke);
  align-self:flex-start;
  margin-bottom:2rem;
}
.tier-switch a{
  padding:0.6rem 1.25rem;
  font-family:var(--sans); font-size:9.5px; font-weight:500;
  letter-spacing:0.32em; text-transform:uppercase;
  color:var(--ash); text-decoration:none;
  border-right:0.5px solid var(--smoke);
  transition:all var(--fast);
  background:transparent;
}
.tier-switch a:last-child{ border-right:none; }
.tier-switch a:hover{ color:var(--bone); background:var(--charcoal-2); }
.tier-switch a.active{ color:var(--bone); background:var(--copper); }

/* ── TIER 1 · BASIC ─────────────────────────────────────────── */
.tier-basic .rp-stats{ display:none; }
.tier-basic .rp-body{ grid-template-columns:1fr; gap:2.5rem; }
.tier-basic .plating-panel{ display:none; }

/* ── TIER 2 · COSTED ────────────────────────────────────────── */
.tier-costed .rp-stats{ grid-template-columns:repeat(4, 1fr); }

/* ── WATERMARK ──────────────────────────────────────────────── */
.watermark{
  position:fixed;
  bottom:1.25rem; right:1.5rem;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:0.28em;
  color:var(--copper);
  opacity:0.5;
  z-index:100;
  pointer-events:none;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1200px){
  .rp-body{ grid-template-columns:1fr; }
  .plating-panel{ position:static; margin-top:2rem; }
  .rp-stats{ grid-template-columns:repeat(3, 1fr); }
  .rp-stat:nth-child(3n){ border-right:none; }
  .dash-grid{ grid-template-columns:1fr; }
  .pillars-band{ grid-template-columns:repeat(2, 1fr); }
  .pillar-cell{ border-bottom:var(--rule); padding:1rem; }
  .pillar-cell:nth-child(2n){ border-right:none; }
}
@media (max-width: 900px){
  .app{ grid-template-columns:1fr; }
  .side{ position:static; height:auto; }
  .main{ padding:1.5rem; }
  .rp-stats, .kpi-row{ grid-template-columns:repeat(2, 1fr); padding:1rem 0; }
  .rp-stat, .kpi{ border-right:none; padding:1rem 0; border-bottom:var(--rule); }
  .rp-stat:last-child, .kpi:last-child{ border-bottom:none; }
  .class-grid{ grid-template-columns:1fr; gap:1rem; }
  .cost-grid{ grid-template-columns:repeat(2, 1fr); }
  .cost-item:nth-child(2n){ border-right:none; }
  .nutrition{ grid-template-columns:repeat(3, 1fr); }
  .nut-item:nth-child(3n){ border-right:none; }
  .tb-lang, .tb-search{ display:none; }
  .rp-title{ font-size:36px; }
  .dash-hero{ grid-template-columns:1fr; gap:1rem; }
  .dash-hero-right{ text-align:left; }
  .recent-card .meta-grid{ grid-template-columns:repeat(2, 1fr); gap:1rem; }
  .recent-card .m{ border-right:none; padding:0; }
}


/* ═══════════════════════════════════════════════════════════════════
   v5.0 · PHOTOGRAPHY & ICONOGRAPHY SYSTEM
   Photo frames with copper corner ticks + micro-colophon strips
   Technique icons from /pro/assets/brand/icons.svg
   ═══════════════════════════════════════════════════════════════════ */

/* ── PHOTO FRAME · the canonical treatment ─────────────────────── */
.photo{
  position:relative;
  display:block;
  background:var(--charcoal);
  border:0.5px solid var(--smoke);
  overflow:hidden;
  transition:border-color 300ms var(--ease);
}
.photo:hover{ border-color:var(--copper); }

.photo img,
.photo picture,
.photo picture img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:brightness(0.98) contrast(1.02);
  transition:transform 600ms var(--ease), filter 300ms var(--ease);
}
.photo:hover img{ transform:scale(1.015); filter:brightness(1.02) contrast(1.04); }

/* Copper corner ticks — the brand signature */
.photo::before,
.photo::after,
.photo > .tick-tl,
.photo > .tick-br{
  content:'';
  position:absolute;
  width:14px; height:14px;
  border:1px solid var(--copper);
  opacity:0.9;
  pointer-events:none;
  z-index:2;
}
.photo::before{ top:8px; left:8px; border-right:none; border-bottom:none; }
.photo::after{ bottom:8px; right:8px; border-left:none; border-top:none; }
.photo > .tick-tl{ top:8px; right:8px; border-left:none; border-bottom:none; }
.photo > .tick-br{ bottom:8px; left:8px; border-right:none; border-top:none; }

/* Colophon strip — bottom overlay with code + tag */
.photo-cap{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:0.7rem 1rem;
  background:linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.85) 100%);
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--pearl);
  z-index:3;
}
.photo-cap .code{ color:var(--copper); }
.photo-cap .step{
  font-family:var(--serif);
  font-style:italic;
  font-size:12px;
  letter-spacing:0.01em;
  text-transform:none;
  color:var(--bone);
}

/* Photo variants */
.photo.hero{ aspect-ratio:16/10; }
.photo.plate{ aspect-ratio:4/3; }
.photo.portrait{ aspect-ratio:3/4; }
.photo.square{ aspect-ratio:1/1; }
.photo.thumb{
  aspect-ratio:1/1;
  width:56px; height:56px;
  flex-shrink:0;
}
.photo.thumb::before,
.photo.thumb::after{ width:6px; height:6px; top:3px; left:3px; }
.photo.thumb::after{ top:auto; left:auto; bottom:3px; right:3px; }

/* Ensō watermark (optional, use on hero shots) */
.photo.ensō::before,
.photo.enso::before{
  content:'';
  position:absolute;
  bottom:20px; right:20px;
  width:44px; height:44px;
  background:url('/pro/assets/brand/logo-mark-copper-64.png') center/contain no-repeat;
  border:none;
  opacity:0.45;
  z-index:2;
  filter:drop-shadow(0 0 8px rgba(0,0,0,0.6));
}
.photo.ensō::after,
.photo.enso::after{
  bottom:8px; right:8px;
}

/* ── TECHNIQUE ICONS ────────────────────────────────────────────── */
.tech-icon{
  width:16px;
  height:16px;
  color:var(--copper);
  flex-shrink:0;
  vertical-align:middle;
}
.tech-icon.lg{ width:22px; height:22px; }
.tech-icon.xl{ width:32px; height:32px; }
.tech-icon.bone{ color:var(--bone); }
.tech-icon.ash{ color:var(--ash); }

/* Technique tag chips */
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  align-items:center;
}
.tech-tag{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.4rem 0.85rem 0.4rem 0.65rem;
  background:var(--charcoal-2);
  border:0.5px solid var(--smoke);
  font-family:var(--sans);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--pearl);
  transition:all 200ms var(--ease);
  cursor:default;
}
.tech-tag:hover{
  border-color:var(--copper);
  color:var(--copper);
  background:rgba(184,115,51,0.06);
}
.tech-tag .tech-icon{ width:12px; height:12px; }

/* ── GALLERY GRIDS ──────────────────────────────────────────────── */
.gallery{
  display:grid;
  gap:1rem;
}
.gallery.mise-4{ grid-template-columns:repeat(4, 1fr); }
.gallery.mise-3{ grid-template-columns:repeat(3, 1fr); }
.gallery.method{ grid-template-columns:repeat(4, 1fr); }
.gallery.plating{ grid-template-columns:repeat(3, 1fr); }

@media (max-width:900px){
  .gallery.mise-4, .gallery.method{ grid-template-columns:repeat(2, 1fr); }
  .gallery.plating{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .gallery.mise-4, .gallery.method, .gallery.plating{ grid-template-columns:1fr; }
}

/* Photo section headers */
.photo-section{ margin-top:2.5rem; }
.photo-section h3{
  font-family:var(--serif);
  font-weight:300;
  font-size:24px;
  color:var(--bone);
  margin:0 0 0.4rem;
  letter-spacing:-0.005em;
  display:flex;
  align-items:baseline;
  gap:0.8rem;
}
.photo-section h3 em{ font-style:italic; color:var(--copper); }
.photo-section h3 .n{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--copper);
  font-style:normal;
}
.photo-section .lede{
  font-family:var(--serif);
  font-style:italic;
  font-size:14px;
  color:var(--pearl);
  margin:0 0 1.5rem;
  font-weight:300;
}

/* Numbered method photos — bind step number to image */
.photo .step-num{
  position:absolute;
  top:14px; left:14px;
  z-index:3;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  background:var(--charcoal);
  border:0.5px solid var(--copper);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.08em;
  color:var(--copper);
}

/* ─────────────────────────────────────────────────────────
   BRAND · CODEX PLATFORM MARK (Olive)
   Subtle olive-brushstroke watermark on Codex-native pages.
   Applied only where the class .codex-watermark is set on <body>.
───────────────────────────────────────────────────────── */
body.codex-watermark::before{
  content:"";
  position:fixed;
  right:3rem; bottom:3rem;
  width:180px; height:180px;
  background:url('/pro/assets/brand/logo-mark-olive-256.png') center/contain no-repeat;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}

/* Recipe pages: put the Codex mark inline as a section marker */
.codex-mark-inline{
  display:inline-block;
  width:32px; height:32px;
  background:url('/pro/assets/brand/logo-mark-olive-64.png') center/contain no-repeat;
  vertical-align:middle;
  opacity:0.85;
}

/* Brand appendix strip — swatch board */
.brand-appendix{
  margin-top:4rem;
  padding:3rem 2rem;
  background:rgba(20,20,22,0.6);
  border-top:0.5px solid rgba(184, 115, 51, 0.15);
  border-bottom:0.5px solid rgba(184, 115, 51, 0.15);
  text-align:center;
}
.brand-appendix .eyebrow{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.28em;
  color:var(--copper);
  margin-bottom:1rem;
  text-transform:uppercase;
}
.brand-appendix .title{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:300;
  color:var(--bone);
  margin-bottom:2rem;
}
.brand-appendix .title em{
  font-style:italic;
  color:var(--copper);
}
.brand-appendix img.swatch-board{
  max-width:900px;
  width:100%;
  height:auto;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,0.4));
}
.brand-appendix .caption{
  margin-top:1.5rem;
  font-family:var(--mono);
  font-size:0.7rem;
  letter-spacing:0.18em;
  color:var(--ash);
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════
   v7 · ELEVATION 3 · CINEMATIC MOOD HEROES
   Full-bleed cinematic photo strip that sits above the
   page head. Text sits on the darker side of the mood.
═══════════════════════════════════════════════════════ */
.mood-strip{
  position:relative;
  width:calc(100% + 4rem);
  margin:-2rem -2rem 2rem;
  height:280px;
  overflow:hidden;
  border-bottom:0.5px solid rgba(184,115,51,0.25);
  isolation:isolate;
}
.mood-strip::before{
  content:'';
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  z-index:0;
  transform:scale(1.02);
  transition:transform 6s ease-out;
}
.mood-strip:hover::before{ transform:scale(1.08); }
.mood-strip::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,
    rgba(13,13,15,0.92) 0%,
    rgba(13,13,15,0.60) 45%,
    rgba(13,13,15,0.25) 100%);
  z-index:1;
}
.mood-strip.chef-at-pass::before{ background-image:url('/pro/assets/brand/moods/chef-at-pass.jpg'); }
.mood-strip.drafting-desk::before{ background-image:url('/pro/assets/brand/moods/drafting-desk.jpg'); }
.mood-strip.obsidian-corridor::before{ background-image:url('/pro/assets/brand/moods/obsidian-corridor.jpg'); }

.mood-strip .mood-inner{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:2rem;
  max-width:600px;
}
.mood-strip .mood-eyebrow{
  font-family:var(--mono);
  font-size:0.65rem;
  letter-spacing:0.32em;
  color:var(--copper);
  text-transform:uppercase;
  margin-bottom:0.6rem;
}
.mood-strip .mood-title{
  font-family:var(--serif);
  font-size:2.4rem;
  font-weight:300;
  color:var(--bone);
  line-height:1.05;
  letter-spacing:-0.01em;
}
.mood-strip .mood-title em{
  font-style:italic;
  color:var(--copper);
}
.mood-strip .mood-sub{
  margin-top:0.9rem;
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  color:var(--pearl);
  max-width:420px;
}
.mood-strip .mood-corner{
  position:absolute;
  top:1.2rem; right:1.2rem;
  z-index:2;
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.28em;
  color:var(--ash);
  text-transform:uppercase;
}

@media (max-width: 900px){
  .mood-strip{ height:220px; }
  .mood-strip .mood-title{ font-size:1.6rem; }
}

/* ═══════════════════════════════════════════════════════
   v7 · ELEVATION 4 · COSMOS SPIROGRAPH DIVIDER (codex.css)
═══════════════════════════════════════════════════════ */
.codex-divider{
  position:relative;
  margin:4rem 0;
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.codex-divider::before{
  content:'';
  position:absolute; inset:0;
  background:url('/pro/assets/brand/cosmos/cosmos-olive.png') center/contain no-repeat;
  opacity:0.09;
  filter:brightness(1.3);
}
.codex-divider.copper::before{
  background-image:url('/pro/assets/brand/cosmos/cosmos-copper.png');
  opacity:0.11;
}
.codex-divider .cd-mark{
  position:relative;
  z-index:1;
  font-family:var(--mono);
  font-size:0.62rem;
  letter-spacing:0.34em;
  color:var(--copper);
  text-transform:uppercase;
  padding:0.7rem 1.6rem;
  background:rgba(13,13,15,0.72);
  border:0.5px solid rgba(184,115,51,0.25);
  border-radius:1px;
  backdrop-filter:blur(2px);
}
.codex-divider .cd-mark::before,
.codex-divider .cd-mark::after{
  content:'·';
  color:var(--copper);
  opacity:0.6;
  margin:0 0.4rem;
}

/* ═══════════════════════════════════════════════════════
   v7 · COCKTAIL SURFACE · Single-texture elevation
   Applied only on the Rum Old-Fashioned recipe page via
   <body class="bar-surface">.
   Reads as lacquered bar counter / molten obsidian.
═══════════════════════════════════════════════════════ */
body.bar-surface{
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.90), rgba(13,13,15,0.94)),
    url('/pro/assets/brand/textures/obsidian-flow.jpg') !important;
  background-size: auto, cover !important;
  background-position: top, center !important;
  background-attachment: scroll, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* ═══════════════════════════════════════════════════════
   v7 · COURSE SURFACES · one signature texture per course
   Applied via <body class="course-<name>">
   All at ~10% opacity under a heavy dark overlay so text
   legibility stays perfect but each course has its own
   material identity.
═══════════════════════════════════════════════════════ */
body.course-amuse{
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.92), rgba(13,13,15,0.95)),
    url('/pro/assets/brand/textures/charcoal-fluid.jpg') !important;
  background-size: auto, cover !important;
  background-position: top, center !important;
  background-attachment: scroll, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
}
body.course-starter{
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.92), rgba(13,13,15,0.94)),
    url('/pro/assets/brand/textures/copper-topographic.jpg') !important;
  background-size: auto, cover !important;
  background-position: top, center !important;
  background-attachment: scroll, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
}
body.course-main{
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.90), rgba(13,13,15,0.94)),
    url('/pro/assets/brand/textures/obsidian-copper-veins.jpg') !important;
  background-size: auto, cover !important;
  background-position: top, center !important;
  background-attachment: scroll, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
}
body.course-dessert{
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.93), rgba(13,13,15,0.95)),
    url('/pro/assets/brand/textures/graphite-radial.png') !important;
  background-size: auto, cover !important;
  background-position: top, center !important;
  background-attachment: scroll, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
}
body.course-cocktail{
  background-image:
    linear-gradient(180deg, rgba(13,13,15,0.90), rgba(13,13,15,0.94)),
    url('/pro/assets/brand/textures/liquid-copper.jpg') !important;
  background-size: auto, cover !important;
  background-position: top, center !important;
  background-attachment: scroll, fixed !important;
  background-repeat: no-repeat, no-repeat !important;
}

/* Course badge — small text chip that identifies the course
   Consistent across all 5 pages for cross-page flow */
.course-badge{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.3rem 0.8rem;
  border:0.5px solid rgba(184,115,51,0.35);
  border-radius:1px;
  background:rgba(13,13,15,0.6);
  font-family:var(--mono);
  font-size:0.6rem;
  letter-spacing:0.32em;
  color:var(--copper);
  text-transform:uppercase;
  margin-bottom:0.8rem;
}
.course-badge::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--copper);
  box-shadow:0 0 8px rgba(184,115,51,0.6);
}

/* ═══════════════════════════════════════════════════════════════
   v7.3 · DEEP CONTENT COMPONENTS
   Chef-book prose depth, not label:value chips.
═══════════════════════════════════════════════════════════════ */

/* Section intro — one paragraph that frames the whole section */
.rp-section .sec-intro{
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--pearl);
  max-width: 720px;
  margin: 0 0 2rem;
  padding-left: 1.2rem;
  border-left: 0.5px solid rgba(184,115,51,0.35);
}

/* Prose block — long-form paragraphs inside a section */
.prose-block{
  margin: 2rem 0;
  max-width: 780px;
}
.prose-block h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  color: var(--bone);
  margin: 0 0 1rem;
  letter-spacing: -0.005em;
  border-bottom: 0.5px solid rgba(184,115,51,0.2);
  padding-bottom: 0.6rem;
}
.prose-block h3 em{
  font-style: italic;
  color: var(--copper);
}
.prose-block h3 .k{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--copper);
  vertical-align: middle;
  margin-right: 0.75rem;
  padding: 0.25rem 0.6rem;
  border: 0.5px solid rgba(184,115,51,0.3);
  border-radius: 1px;
  font-weight: 400;
}
.prose-block p{
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.75;
  color: var(--pearl);
  margin: 0 0 1.1rem;
}
.prose-block p strong{
  color: var(--bone);
  font-weight: 500;
}
.prose-block p em{
  font-style: italic;
  color: var(--copper);
}
.prose-block .num{
  font-family: var(--mono);
  color: var(--copper);
  font-weight: 500;
  font-style: normal;
  font-size: 0.95em;
}
.prose-block .pullquote{
  margin: 1.5rem 0;
  padding: 1.2rem 1.5rem;
  border-left: 2px solid var(--copper);
  background: rgba(184,115,51,0.05);
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--bone);
}
.prose-block .rule{
  margin: 1.2rem 0;
  padding: 1rem 1.2rem;
  background: rgba(20,20,22,0.6);
  border: 0.5px solid rgba(184,115,51,0.2);
  border-left: 3px solid var(--copper);
}
.prose-block .rule .lbl{
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  color: var(--copper);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
  display: block;
}
.prose-block .rule .rule-body{
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bone);
}

/* Numbered method steps at depth */
.deep-method{
  counter-reset: dm;
  margin: 1.5rem 0;
}
.deep-method .dm-step{
  counter-increment: dm;
  position: relative;
  padding: 1.5rem 0 1.5rem 4rem;
  border-bottom: 0.5px solid rgba(184,115,51,0.15);
  max-width: 780px;
}
.deep-method .dm-step:last-child{ border-bottom: none; }
.deep-method .dm-step::before{
  content: counter(dm, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.5rem;
  font-family: var(--mono);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--copper);
  letter-spacing: 0.02em;
}
.deep-method .dm-step h4{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--bone);
  margin: 0 0 0.8rem;
}
.deep-method .dm-step h4 em{
  font-style: italic;
  color: var(--copper);
  font-weight: 400;
}
.deep-method .dm-step p{
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--pearl);
  margin: 0 0 0.7rem;
}
.deep-method .dm-step .signal{
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--copper);
  text-transform: uppercase;
}
.deep-method .dm-step .signal::before{
  content: "◆ ";
  color: var(--copper);
  margin-right: 0.3rem;
}

/* Failure list — chef-book "what goes wrong" */
.failure-list{
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
  max-width: 780px;
}
.failure-list li{
  padding: 1.2rem 0 1.2rem 3rem;
  border-bottom: 0.5px solid rgba(184,115,51,0.12);
  position: relative;
}
.failure-list li:last-child{ border-bottom: none; }
.failure-list li::before{
  content: "×";
  position: absolute;
  left: 0.5rem;
  top: 1rem;
  font-family: var(--serif);
  font-size: 1.8rem;
  color: var(--copper);
  font-weight: 300;
  line-height: 1;
}
.failure-list .fail-title{
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--bone);
  margin-bottom: 0.4rem;
}
.failure-list .fail-title em{
  font-style: italic;
  color: var(--copper);
  font-weight: 400;
  margin-left: 0.5rem;
  font-size: 0.75em;
  letter-spacing: 0.05em;
}
.failure-list p{
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--pearl);
  margin: 0 0 0.5rem;
}
.failure-list .rescue{
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pearl);
  margin-top: 0.5rem;
  padding-left: 0.9rem;
  border-left: 2px solid rgba(184,115,51,0.4);
}
.failure-list .rescue::before{
  content: "Rescue — ";
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  color: var(--copper);
  text-transform: uppercase;
  font-weight: 500;
}