/* ════════════════════════════════════════════════════════════════
   DAY ONE — DASHBOARD STYLES
   Matched to the existing dashboard palette: #0a0a00 ground, #C9A84C
   gold, #F0D060 highlight, #F5EFE6 cream, Cormorant + Josefin.
   Prefixed d1- so nothing collides with the ds- classes already there.
   ════════════════════════════════════════════════════════════════ */

.d1-eyebrow{
  font-family:'Josefin Sans',sans-serif; font-size:0.6rem; letter-spacing:0.32em;
  text-transform:uppercase; color:#C9A84C; margin-bottom:0.75rem;
}
.d1-h{
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:1.5rem; line-height:1.3; color:#F5EFE6; margin:0 0 0.6rem;
}
.d1-sub{
  font-family:'Cormorant Garamond',serif; font-size:1.05rem; font-style:italic;
  line-height:1.7; color:rgba(245,239,230,0.82); margin:0 0 1.3rem;
}
.d1-small{
  font-family:'Josefin Sans',sans-serif; font-size:0.64rem; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(245,239,230,0.5);
}

/* ── 1. THE SUMMONS ─────────────────────────────────────────── */
/* Full width, above My Timing Map. Rendered only when due. */
.d1-summons{
  border:1px solid #C9A84C; border-radius:12px;
  background:linear-gradient(160deg,#1a1200,#0a0a00);
  padding:1.6rem 1.5rem; margin-bottom:1rem;
}
.d1-summons-h{
  font-family:'Cormorant Garamond',serif; font-size:1.45rem; font-style:italic;
  color:#F0D060; line-height:1.3; margin-bottom:0.6rem;
}
.d1-summons-p{
  font-family:'Cormorant Garamond',serif; font-size:1.04rem; line-height:1.7;
  color:rgba(245,239,230,0.85); margin:0 0 1.2rem;
}
.d1-more{
  font-family:'Josefin Sans',sans-serif; font-size:0.6rem; letter-spacing:0.2em;
  text-transform:uppercase; color:rgba(245,239,230,0.45); margin-top:0.9rem;
}

/* ── 2. THE ADD HOOK ────────────────────────────────────────── */
.d1-offer{
  border:1px solid rgba(201,168,76,0.4); border-left:2px solid #C9A84C;
  border-radius:10px; background:#12100a; padding:1.2rem 1.3rem; margin:1rem 0;
}
.d1-offer-t{
  font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-style:italic;
  color:#F0D060; margin-bottom:0.4rem;
}
.d1-offer-p{
  font-family:'Cormorant Garamond',serif; font-size:1rem; line-height:1.65;
  color:rgba(245,239,230,0.8); margin:0 0 1rem;
}
.d1-offer-row{display:flex; gap:0.6rem; align-items:center; margin-top:1.2rem;}

/* ── 3. THE SHELF ───────────────────────────────────────────── */
.d1-shelf{
  border:1px solid #2a2a2a; border-radius:12px; background:#0d0d05;
  padding:1.4rem 1.4rem 1.1rem; margin:1.4rem 0;
}
.d1-shelf-h{
  font-family:'Josefin Sans',sans-serif; font-size:0.62rem; letter-spacing:0.3em;
  text-transform:uppercase; color:#C9A84C; margin-bottom:1rem;
  padding-bottom:0.5rem; border-bottom:1px solid rgba(201,168,76,0.15);
}
.d1-row{
  padding:0.9rem 0; border-bottom:1px solid #1c1c1c;
  display:flex; flex-wrap:wrap; align-items:center; gap:0.6rem;
}
.d1-row:last-child{border-bottom:none;}
.d1-row-n{
  font-family:'Cormorant Garamond',serif; font-size:1.16rem; color:#F5EFE6; flex:1 1 auto;
}
.d1-row.due .d1-row-n{color:#F0D060;}
.d1-row-m{
  font-family:'Josefin Sans',sans-serif; font-size:0.62rem; letter-spacing:0.12em;
  color:rgba(245,239,230,0.45); flex:1 1 100%;
}
.d1-row.due .d1-row-m{color:rgba(201,168,76,0.85);}

.d1-empty-p{
  font-family:'Cormorant Garamond',serif; font-size:1.03rem; line-height:1.7;
  color:rgba(245,239,230,0.8); margin:0 0 0.9rem;
}
.d1-empty-p.d1-quiet{color:rgba(245,239,230,0.5); font-size:0.96rem;}
.d1-shapes{
  list-style:none; padding:0; margin:0 0 1.1rem;
}
.d1-shapes li{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.02rem;
  color:rgba(245,239,230,0.72); line-height:1.6; padding:0.4rem 0 0.4rem 0.9rem;
  border-left:1px solid rgba(201,168,76,0.3); margin-bottom:0.35rem;
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.d1-btn{
  background:#C9A84C; color:#080808; border:none; padding:12px 28px;
  font-family:'Josefin Sans',sans-serif; font-size:0.68rem; font-weight:600;
  letter-spacing:0.24em; text-transform:uppercase; border-radius:8px;
  cursor:pointer; transition:.2s;
}
.d1-btn:hover{background:#F0D060;}
.d1-btn:disabled{opacity:0.3; cursor:not-allowed;}
.d1-btn.ghost{background:none; color:rgba(245,239,230,0.6); border:1px solid #2a2a2a;}
.d1-btn.ghost:hover{color:#F5EFE6; border-color:#C9A84C;}
.d1-btn.small{padding:8px 18px; font-size:0.6rem;}
.d1-btn.wide{display:block; width:100%; margin-top:1.2rem;}

.d1-opt{
  display:block; width:100%; text-align:left; background:#111;
  border:1px solid #2a2a2a; border-radius:10px; padding:1rem 1.15rem;
  margin-bottom:0.6rem; cursor:pointer; color:#F5EFE6;
  font-family:'Cormorant Garamond',serif; font-size:1.12rem; line-height:1.5;
  transition:.18s;
}
.d1-opt:hover{border-color:#C9A84C; background:#161200;}
.d1-opt.sel{border-color:#C9A84C; background:#1a1200; color:#F0D060;}
.d1-opt.quiet{font-size:0.98rem; font-style:italic; color:rgba(245,239,230,0.55);}

/* ── MODAL ──────────────────────────────────────────────────── */
.d1-modal{
  display:none; position:fixed; inset:0; z-index:9000;
  background:rgba(4,4,0,0.88); overflow-y:auto; padding:2rem 1rem 4rem;
}
.d1-modal.on{display:block;}
.d1-sheet{
  max-width:560px; margin:0 auto; background:#0a0a00;
  border:1px solid rgba(201,168,76,0.35); border-radius:14px; padding:2rem 1.6rem;
}
.d1-modal textarea{
  width:100%; background:#111; border:1px solid #2a2a2a; border-radius:10px;
  padding:1rem 1.1rem; color:#F5EFE6; font-family:'Cormorant Garamond',serif;
  font-size:1.12rem; line-height:1.65; min-height:112px; resize:vertical; outline:none;
}
.d1-modal textarea:focus{border-color:#C9A84C;}
.d1-modal textarea::placeholder{color:rgba(245,239,230,0.3); font-style:italic;}
.d1-help{
  font-family:'Josefin Sans',sans-serif; font-size:0.72rem; line-height:1.7;
  color:rgba(245,239,230,0.5); margin-top:0.7rem;
}
.d1-help b{color:#C9A84C; font-weight:400;}

.d1-q{
  font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-style:italic;
  color:#F0D060; margin-bottom:0.9rem; line-height:1.4;
}
.d1-echo{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.1rem;
  color:#F5EFE6; background:#0d0d05; border:1px solid #2a2a2a; border-radius:8px;
  padding:1rem 1.1rem; margin:0 0 1.1rem; line-height:1.65;
}
.d1-tn-l{
  font-family:'Josefin Sans',sans-serif; font-size:0.6rem; letter-spacing:0.26em;
  text-transform:uppercase; color:rgba(201,168,76,0.8); margin-bottom:0.5rem;
}
.d1-tn{margin-bottom:1.2rem;}

.d1-confirm{text-align:center;}
.d1-confirm .d1-echo{text-align:left;}
.d1-date{
  font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-style:italic;
  color:#F0D060; margin:0.5rem 0 0.9rem; line-height:1.25;
}
.d1-tier{
  font-family:'Josefin Sans',sans-serif; font-size:0.58rem; letter-spacing:0.22em;
  text-transform:uppercase; margin-top:0.8rem;
}
.d1-tier-published{color:rgba(201,168,76,0.85);}
.d1-tier-inferred{color:rgba(245,239,230,0.55);}
.d1-tier-unknown{color:rgba(245,239,230,0.42);}

@media(max-width:600px){
  .d1-sheet{padding:1.6rem 1.2rem;}
  .d1-summons{padding:1.3rem 1.2rem;}
  .d1-offer-row{flex-direction:column; align-items:stretch;}
  .d1-offer-row .d1-btn{width:100%;}
}

/* ── OPENER ─────────────────────────────────────────────────── */
/* The invitation line. Larger and gold — it's the first thing read
   and it has to sound like an offer, not a definition. */
.d1-empty-p.d1-lede{
  font-size:1.32rem; font-style:italic; color:#F0D060;
  margin-bottom:1.1rem; line-height:1.45;
}

/* The mid-stack case. Set apart so someone four months in finds
   themselves without reading the whole panel first. */
.d1-already{
  border-left:2px solid rgba(201,168,76,0.45);
  background:rgba(201,168,76,0.045);
  border-radius:0 8px 8px 0;
  padding:1.05rem 1.2rem 0.3rem;
  margin:1.5rem 0;
}
.d1-already .d1-empty-p:last-child{margin-bottom:0.9rem;}

/* ── PICKER ─────────────────────────────────────────────────── */
#d1-q{
  width:100%; background:#111; border:1px solid #2a2a2a; border-radius:10px;
  padding:1rem 1.15rem; color:#F5EFE6; margin-bottom:0.9rem;
  font-family:'Cormorant Garamond',serif; font-size:1.12rem; outline:none;
}
#d1-q:focus{border-color:#C9A84C;}
#d1-q::placeholder{color:rgba(245,239,230,0.3); font-style:italic;}
#d1-results:empty{display:none;}

.d1-sect{
  font-family:'Josefin Sans',sans-serif; font-size:0.58rem; letter-spacing:0.3em;
  text-transform:uppercase; color:rgba(201,168,76,0.7);
  margin:1.4rem 0 0.6rem; padding-bottom:0.4rem;
  border-bottom:1px solid rgba(201,168,76,0.14);
}
.d1-tag{
  display:block; font-family:'Josefin Sans',sans-serif; font-size:0.58rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:rgba(245,239,230,0.45); margin-top:0.35rem;
}
.d1-opt.d1-new{
  background:#12100a; border-color:#C9A84C; color:#F0D060;
}

/* ── THE FRAME LINE ─────────────────────────────────────────── */
.d1-empty-p.d1-frame{
  font-size:1.12rem; color:#F5EFE6; font-style:italic;
  margin-bottom:1.3rem;
}

/* ── THE PROOF CARDS ────────────────────────────────────────── */
/* Miniatures of the real Then & Now reveal. Two of them — one kept,
   one killed — because a single happy example reads as advertising
   and the pair is what proves the verdict isn't rigged. */
.d1-proof{margin:1.8rem 0;}
.d1-proof-h{
  font-family:'Josefin Sans',sans-serif; font-size:0.58rem; letter-spacing:0.3em;
  text-transform:uppercase; color:rgba(201,168,76,0.7); margin-bottom:0.9rem;
}
.d1-card{
  border:1px solid #2a2a2a; border-radius:10px; background:#0a0a00;
  padding:1.1rem 1.2rem 0; margin-bottom:0.8rem;
}
.d1-card-t{
  font-family:'Cormorant Garamond',serif; font-size:1.14rem; color:#F0D060;
  margin-bottom:0.9rem;
}
.d1-card-t span{
  font-family:'Josefin Sans',sans-serif; font-size:0.6rem; letter-spacing:0.18em;
  text-transform:uppercase; color:rgba(245,239,230,0.4);
}
.d1-card-l{
  font-family:'Josefin Sans',sans-serif; font-size:0.55rem; letter-spacing:0.26em;
  text-transform:uppercase; color:rgba(201,168,76,0.75); margin-bottom:0.35rem;
}
.d1-card-q{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.02rem;
  color:rgba(245,239,230,0.9); line-height:1.55;
  padding:0 0 0 0.85rem; margin-bottom:0.9rem;
  border-left:1px solid rgba(201,168,76,0.25);
}
.d1-card-v{
  font-family:'Josefin Sans',sans-serif; font-size:0.63rem; letter-spacing:0.16em;
  text-transform:uppercase; padding:0.75rem 0; margin-top:0.2rem;
  border-top:1px solid #1c1c1c;
}
.d1-card-v.keep{color:#C9A84C;}
.d1-card-v.kill{color:rgba(245,239,230,0.55);}

/* ── THE CALLBACK ───────────────────────────────────────────── */
.d1-after{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.02rem;
  color:rgba(245,239,230,0.5); text-align:center; margin:0.9rem 0 0;
}


/* ════════════════════════════════════════════════════════════════
   THE PANEL — EDITORIAL PASS
   The words were fine; the typography was flat. Everything sat within
   half a rem of everything else, so nothing told the eye where to
   enter, and the panel read like a page of notes rather than a
   designed object. Five changes: a real type scale, a panel with
   presence, section markers, the proof as a band instead of a float,
   and the examples given room.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. THE PANEL ITSELF ─────────────────────────────────────────
   Was a grey hairline on near-black — an outline around text rather
   than an object on a page. Warm the border to gold, lift the ground
   with a slow gradient, and it becomes a thing you've arrived at. */
.d1-shelf{
  border:1px solid rgba(201,168,76,0.22);
  border-radius:14px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(201,168,76,0.05), transparent 60%),
    linear-gradient(172deg, #100e07 0%, #0a0a03 45%, #080802 100%);
  padding:2rem 1.5rem 1.6rem;
  box-shadow:0 24px 60px rgba(0,0,0,0.45);
}
.d1-shelf-h{
  color:#C9A84C; letter-spacing:0.34em;
  border-bottom:1px solid rgba(201,168,76,0.18);
  padding-bottom:0.7rem; margin-bottom:1.6rem;
}

/* ── 2. THE TYPE SCALE ───────────────────────────────────────────
   The lede was 1.5rem against 1.03rem body — not a hierarchy, a
   rounding error. Editorial setting runs 3:1 or wider, and that gap
   alone is most of what separates "designed" from "typed."
   Body copy goes UP, not down: Cormorant is a thin face fighting a
   dark ground, and it needs size, line-height and opacity to stay
   comfortable. Measure held near 62 characters so lines don't sprawl. */
.d1-empty-p{
  font-size:1.16rem; line-height:1.9;
  color:rgba(245,239,230,0.86);
  max-width:46rem; margin:0 0 1.15rem;
}
.d1-empty-p.d1-lede{
  font-size:clamp(2.1rem, 3.3vw, 3.1rem);
  line-height:1.12; color:#F0D060;
  margin:0 0 1.1rem; max-width:none;
}
.d1-empty-p.d1-frame{
  font-size:1.4rem; line-height:1.55; color:#F5EFE6;
  max-width:40rem; margin-bottom:2rem;
}
.d1-empty-p.d1-quiet{
  font-size:1.02rem; line-height:1.8; color:rgba(245,239,230,0.52);
}

/* ── 3. SECTION MARKERS ──────────────────────────────────────────
   The site's own device — letter-spaced gold Josefin over a hairline.
   Three of them turn one continuous essay into three movements. */
.d1-mark{
  font-family:'Josefin Sans',sans-serif; font-size:0.6rem;
  letter-spacing:0.32em; text-transform:uppercase;
  color:rgba(201,168,76,0.9);
  padding-bottom:0.55rem; margin:2.6rem 0 1.3rem;
  border-bottom:1px solid rgba(201,168,76,0.16);
}
.d1-band .d1-mark{ margin-top:0; }

/* ── 4. THE PROOF BAND ───────────────────────────────────────────
   Own ground, slightly lifted off the panel, so the evidence reads as
   a held exhibit rather than an interruption in the prose. */
.d1-band{
  background:rgba(201,168,76,0.04);
  border:1px solid rgba(201,168,76,0.14);
  border-radius:12px;
  padding:1.5rem 1.4rem 1.6rem;
  margin:2.4rem 0;
}
.d1-moat{
  font-family:'Cormorant Garamond',serif; font-style:italic;
  font-size:1.45rem; line-height:1.5; color:#E8C97A;
  margin:0 0 1.4rem; text-align:center;
}
.d1-proof{ margin:0; }
.d1-card{ margin-bottom:0.9rem; }
.d1-card:last-child{ margin-bottom:0; }

/* ── 5. THE EXAMPLES ─────────────────────────────────────────────
   The most concrete, most human lines in the panel, previously set as
   the plainest thing on it. */
.d1-shapes{ margin:0 0 1.3rem; }
.d1-shapes li{
  font-size:1.12rem; line-height:1.65;
  color:rgba(245,239,230,0.85);
  background:rgba(255,255,255,0.02);
  border-left:2px solid rgba(201,168,76,0.45);
  border-radius:0 8px 8px 0;
  padding:0.85rem 1rem 0.85rem 1.1rem;
  margin-bottom:0.6rem;
}

/* ── THE PROCESS ROWS ────────────────────────────────────────────
   Separated by space and a hairline, never boxed. The air between rows
   is what reads as elegant — decoration would read as busy. Marker,
   step, detail: three zones spanning the full width of the panel. */
.d1-steps{ margin:0 0 2.2rem; }
.d1-step{
  padding:1.5rem 0;
  border-top:1px solid rgba(201,168,76,0.10);
}
.d1-step:last-child{ border-bottom:1px solid rgba(201,168,76,0.10); }
.d1-step-n{
  font-family:'Josefin Sans',sans-serif; font-size:0.66rem;
  letter-spacing:0.24em; color:rgba(201,168,76,0.55);
  margin-bottom:0.5rem;
}
.d1-step-t{
  font-family:'Cormorant Garamond',serif; font-size:1.7rem;
  font-weight:300; color:#F5EFE6; line-height:1.2;
  margin-bottom:0.5rem;
}
.d1-step-d{
  font-family:'Cormorant Garamond',serif; font-size:1.08rem;
  line-height:1.75; color:rgba(245,239,230,0.62);
}

/* The setup. Sits above the rows, not below them — it is the reason the
   sequence exists, so it has to arrive before the sequence does. */
.d1-empty-p.d1-because{
  font-size:1.3rem; line-height:1.7; color:rgba(245,239,230,0.9);
  max-width:44rem; margin:0 0 0.6rem;
}

/* The mid-stack aside — quieter ground, same family as the band. */
.d1-already{
  background:rgba(201,168,76,0.035);
  border-left:2px solid rgba(201,168,76,0.5);
  border-radius:0 10px 10px 0;
  padding:1.3rem 1.4rem 0.4rem;
  margin:2.2rem 0;
}
.d1-already .d1-empty-p{ max-width:44rem; }

.d1-btn.wide{ max-width:420px; margin-left:auto; margin-right:auto; }

/* ── ON A LAPTOP ─────────────────────────────────────────────────
   The band goes two-up: claim left, evidence right, vertically centred
   against each other. Examples go three across. Below 900px every one
   of these collapses back to a single column. */
@media(min-width:900px){
  /* ── BREAKING OUT OF THE COLUMN ────────────────────────────────
     The real problem was never the type. Measured live, the panel's
     content box was 1089px inside a ~2020px window — roughly 465px of
     dead black down each side, everything squeezed through the middle.
     No amount of typography inside a narrow column fixes the column.

     This centres the panel against the VIEWPORT rather than its
     parent container: shift the left edge to the middle of the parent,
     then pull back by half the panel's own width. The site-wide
     container rules in shared.css are untouched, so nothing else on
     any page moves. Reverses by deleting these three lines.

     6rem of breathing room is subtracted so it never runs edge to edge,
     and 1500px caps it before the lines get too long to read. */
  .d1-shelf{
    width:min(1500px, calc(100vw - 6rem));
    margin-left:50%;
    transform:translateX(-50%);
  }

  .d1-shelf{ padding:2.6rem 2.6rem 2rem; }

  .d1-band{ padding:1.9rem 2rem 2rem; }
  .d1-band-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    gap:2.6rem; align-items:center;
  }
  .d1-moat{
    font-size:clamp(1.6rem, 2.1vw, 2.05rem);
    line-height:1.42; margin:0; text-align:left;
    align-self:center;
  }

  /* Three zones across the full width: marker, step, detail. The wide
     gap is deliberate — it is the space that makes it look composed. */
  .d1-step{
    display:grid;
    grid-template-columns:4rem minmax(0,15rem) minmax(0,1fr);
    gap:0 3.5rem; align-items:baseline;
    padding:2rem 0;
  }
  .d1-step-n{ margin:0; font-size:0.7rem; }
  .d1-step-t{ margin:0; font-size:1.95rem; }
  .d1-step-d{ margin:0; max-width:42rem; }

  .d1-shapes{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem; margin-bottom:1.6rem;
  }
  .d1-shapes li{ margin-bottom:0; }
}

/* ── 4. THE RECORD ──────────────────────────────────────────────
   The left rail of My Current Stack (stack-assembled-v2). In flight on
   top, verdicts below. Every family and weight is set here rather than
   inherited: the dashboard body is Cormorant, the lab's was Josefin 300. */
.d1-rec{
  background:rgba(232,201,122,0.033); border:1px solid rgba(201,168,76,0.18);
  border-radius:14px; padding:1.1rem 1.2rem 1.3rem;
}
.d1-rec-h{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:300;
  font-size:1.45rem; color:#E8C97A; margin:0 0 0.15rem; line-height:1.2;
}
.d1-rec-sub{
  font-family:'Josefin Sans',sans-serif; font-weight:300; font-size:0.76rem;
  color:rgba(245,239,230,0.7); line-height:1.6; margin:0 0 1.1rem;
}

.d1-rec-live{
  border:1px solid rgba(201,168,76,0.4); background:rgba(201,168,76,0.07);
  border-radius:10px; padding:0.8rem 0.85rem; margin-bottom:0.7rem;
}
.d1-rec-live + .d1-rec-mark{ margin-top:1.2rem; }
.d1-rec-live-n{
  font-family:'Cormorant Garamond',serif; font-size:1.05rem; color:#F5EFE6;
  line-height:1.25; overflow-wrap:anywhere;
}
.d1-rec-live-m{
  font-family:'Josefin Sans',sans-serif; font-weight:300; font-size:0.70rem;
  color:rgba(245,239,230,0.75); margin-top:0.25rem; line-height:1.5;
}
.d1-rec-act{
  margin-top:0.7rem; background:linear-gradient(135deg,#C9A84C,#E8C97A,#C9A84C);
  color:#0a0a0a; border:none; border-radius:4px;
  font-family:'Josefin Sans',sans-serif; font-size:0.58rem; letter-spacing:0.16em;
  text-transform:uppercase; padding:0.5rem 0.85rem; cursor:pointer;
}

.d1-rec-mark{
  font-family:'Josefin Sans',sans-serif; font-weight:500; font-size:0.62rem;
  letter-spacing:0.14em; text-transform:uppercase; color:#E8C97A; text-align:center;
  padding-bottom:0.5rem; border-bottom:1px solid rgba(201,168,76,0.14); margin-bottom:0.2rem;
}
.d1-rec-row{ padding:0.85rem 0; border-bottom:1px solid rgba(201,168,76,0.1); }
.d1-rec-row:last-of-type{ border-bottom:none; }
.d1-rec-top{ display:flex; align-items:baseline; justify-content:space-between; gap:0.5rem; }
.d1-rec-n{
  font-family:'Cormorant Garamond',serif; font-size:1.02rem; color:#F5EFE6;
  line-height:1.25; min-width:0; overflow-wrap:anywhere;
}
.d1-rec-vd{
  font-family:'Josefin Sans',sans-serif; font-weight:300; font-size:0.54rem;
  letter-spacing:0.16em; text-transform:uppercase; white-space:nowrap; padding-top:0.15rem;
}
.d1-rec-vd.keep{ color:#E8C97A; }
.d1-rec-vd.stop{ color:rgba(245,239,230,0.45); }

/* Inline gold-ringed chevron, house style. Rotates on open. */
.d1-rec-open{
  display:inline-flex; align-items:center; gap:0.42rem;
  font-family:'Josefin Sans',sans-serif; font-size:0.62rem; letter-spacing:0.14em;
  color:rgba(201,168,76,0.92); margin-top:0.45rem; cursor:pointer;
  background:none; border:none; padding:0;
}
.d1-rec-chev{
  width:18px; height:18px; flex:0 0 18px; border:1px solid rgba(201,168,76,0.5);
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  transition:transform .28s ease, border-color .28s ease;
}
.d1-rec-chev svg{ width:8px; height:8px; display:block; }
.d1-rec-chev svg path{
  stroke:#E8C97A; stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round;
}
.d1-rec-row.open .d1-rec-chev{ transform:rotate(180deg); border-color:rgba(232,201,122,0.85); }
.d1-rec-row.open .d1-rec-open{ color:#E8C97A; }
.d1-rec-open:focus-visible{ outline:1px solid #E8C97A; outline-offset:3px; }

.d1-rec-drawer{
  display:none; margin-top:0.65rem; padding-left:0.7rem;
  border-left:1px solid rgba(201,168,76,0.28);
}
.d1-rec-row.open .d1-rec-drawer{ display:block; }

/* Label and sentence share a first text baseline — two families at two
   sizes never line up by padding. Her words verbatim: long unbroken
   strings wrap instead of overflowing, and her own line breaks are kept. */
.d1-rec-ba{ display:grid; grid-template-columns:auto 1fr; gap:0.5rem; align-items:baseline; }
.d1-rec-l{
  font-family:'Josefin Sans',sans-serif; font-weight:300; font-size:0.60rem;
  letter-spacing:0.14em; text-transform:uppercase; color:rgba(201,168,76,0.85);
}
.d1-rec-t{
  font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.88rem;
  color:rgba(245,239,230,0.82); line-height:1.45; min-width:0;
  overflow-wrap:anywhere; white-space:pre-line;
}

.d1-rec-start{
  display:block; width:100%; margin-top:0; background:transparent;
  color:#E8C97A; border:1px solid rgba(201,168,76,0.45); border-radius:4px;
  font-family:'Josefin Sans',sans-serif; font-size:0.6rem; letter-spacing:0.18em;
  text-transform:uppercase; padding:0.6rem 0.5rem; cursor:pointer;
}
/* Josefin, not Cormorant: at this size on black Cormorant's hairlines drop
   out and it reads translucent whatever the colour. Sits above the button
   as its lead-in, so its bottom margin is the gap to the action. */
.d1-rec-note{
  font-family:'Josefin Sans',sans-serif; font-style:normal; font-size:0.60rem;
  font-weight:400; color:#E8C97A; margin:1rem 0 0.6rem;
}
@media (prefers-reduced-motion:reduce){ .d1-rec-chev{ transition:none; } }