/* ============================================================
   THE EDITORIAL SERIES LEDGER  —  /schedule/
   ============================================================
   The offer is the hook, so the terms lead at display scale and
   the photograph follows. Everything is a ruled row: no cards,
   no panels, no badges. Rules and space carry the structure,
   which is what a ledger has always used.
   ============================================================ */

.ser__open{
  padding:clamp(40px,9vh,120px) var(--gut) clamp(48px,8vh,110px);
  display:grid; gap:clamp(34px,6vh,76px);
  grid-template-columns:1fr; max-width:1360px; margin-inline:auto;
}
@media (min-width:900px){
  .ser__open{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); column-gap:clamp(44px,6vw,110px); align-items:start}
  .ser__act{grid-column:2}
}

/* editorial.css asserts type at ID weight (#main-content h1, #main-content p,
   #main-content .entry-content p). Class selectors lose to that no matter the
   load order, which silently killed six rules in this file - most damagingly
   .catch__big, which rendered as 16px body copy. Every rule that competes with
   the theme now carries the same ID prefix editorial.css uses. */
#main-content .entry-content .ser__h,
.ser__open .ser__h{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.9rem,1.6rem + 6.4vw,8.5rem); line-height:.92; letter-spacing:-.022em;
  margin:0 0 .5em; text-wrap:balance;
}
#main-content .entry-content .ser__lede .lede,.ser__lede .lede{max-width:38ch}

#main-content .entry-content .ser__h2,.ser__h2{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-2); line-height:1.06; letter-spacing:-.015em;
  margin:0 0 clamp(26px,4vh,52px);
}

/* ── The terms, as a ledger ───────────────────────────────── */

.terms{margin:0; border-top:1px solid var(--rule)}
.terms__row{
  display:grid; grid-template-columns:1fr; gap:6px;
  padding:clamp(16px,2.4vh,26px) 0; border-bottom:1px solid var(--rule);
}
@media (min-width:640px){
  .terms__row{grid-template-columns:minmax(104px,144px) 1fr; gap:clamp(18px,3vw,44px); align-items:baseline}
}
.terms__row dt{
  font-family:var(--mono); font-size:var(--step--1); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
#main-content .entry-content .terms__row dd,.terms__row dd{margin:0; font-size:var(--step-0); line-height:1.5; max-width:52ch}

/* The one row that answers the question everyone actually arrived with. */
.terms__row--money{padding-block:clamp(22px,3.2vh,36px)}
.terms__none{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,1.2rem + 3.4vw,5rem); line-height:.9; letter-spacing:-.03em;
  margin-bottom:.22em;
}
.terms__gloss{display:block; color:var(--muted); font-size:var(--step-0); line-height:1.5}

.ser__act{margin:0}

/* ── The photograph ───────────────────────────────────────── */

.ser__frame{padding:clamp(30px,6vh,84px) var(--gut) clamp(40px,7vh,96px)}
.ser__plate{margin:0 auto; max-width:1360px; aspect-ratio:16/9}
.ser__plate img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width:640px){.ser__plate{aspect-ratio:4/5}}
#main-content .entry-content .ser__cap,.ser__cap{
  max-width:var(--prose); margin:clamp(22px,3.4vh,40px) auto 0;
  color:var(--muted); font-size:var(--step-0); line-height:1.6;
}

/* ── What it costs you ────────────────────────────────────── */

.ser__catch{padding:clamp(48px,9vh,124px) var(--gut); max-width:1360px; margin-inline:auto}
.catch{display:grid; gap:clamp(28px,4.6vh,60px)}
#main-content .entry-content .catch__big,.catch__big{
  font-family:var(--display); font-weight:400;
  font-size:var(--step-2); line-height:1.14; letter-spacing:-.015em;
  max-width:22ch; margin:0;
}
.catch__cols{display:grid; gap:clamp(20px,3vw,44px); grid-template-columns:1fr}
@media (min-width:860px){.catch__cols{grid-template-columns:repeat(3,1fr)}}
#main-content .entry-content .catch__cols p,.catch__cols p{margin:0; color:var(--muted); font-size:var(--step-0); line-height:1.62; max-width:44ch}
#main-content .entry-content .catch__cols a,.catch__cols a{color:var(--fg); text-underline-offset:.18em}

/* ── What is left ─────────────────────────────────────────── */

.ser__dates{padding:clamp(48px,9vh,124px) var(--gut); max-width:1360px; margin-inline:auto}

.ledger{margin:0 0 clamp(26px,4vh,44px); border-top:1px solid var(--rule)}
.ledger__row{
  display:grid; grid-template-columns:1fr auto; gap:18px; align-items:baseline;
  padding:clamp(13px,1.9vh,20px) 0; border-bottom:1px solid var(--rule);
}
.ledger__row dt{
  font-family:var(--mono); font-size:var(--step--1); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin:0;
}
.ledger__row dd{margin:0; font-size:var(--step-1); font-family:var(--display); text-align:right}
.ledger__fig{font-size:var(--step-2); line-height:1; letter-spacing:-.02em}
#main-content .entry-content .ledger__note,#main-content .entry-content .ledger__none,.ledger__note,.ledger__none{
  color:var(--muted); font-size:var(--step--1); line-height:1.6;
  max-width:56ch; margin:clamp(14px,2vh,22px) 0 0;
}
.ledger__none a{color:var(--fg)}

/* The booking widget ships its own light surface. On the night stop that
   would read as something pasted on, so it is given a deliberate bone plate
   with the rule and padding the rest of the page uses. */
.ser__cal{
  background:var(--bone); color:#0F1E1D;
  padding:clamp(10px,2.6vw,32px); border-radius:2px;
  margin-block:clamp(26px,4vh,52px);
  /* The booking widget lays out at its own intrinsic width and was being
     clipped on phones, taking the primary action with it. Let the plate
     scroll rather than the page. */
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.ser__cal .fcal_powered_by{opacity:.5}

/* The widget sets its own description at 14px in a pale slate, which passes a
   contrast check on paper and still reads washed out at that size. Give it the
   site's ink and a readable size wherever the calendar renders, including the
   standalone booking URL, which does not carry the page's own styles. */
.fcal_slot_description,
.fcal_slot_description p{
  color:#0F1E1D;
  font-size:15.5px;
  line-height:1.62;
}
.fcal_slot_wrapper .fcal_slot_title{color:#0F1E1D}
.fcal_slot_meta_item,
.fcal_slot_wrapper .fcal_slot_meta_item span{color:#263A38}

/* ── What happens next ────────────────────────────────────── */

.after{border-top:1px solid var(--rule); margin-top:clamp(34px,5vh,70px)}
.after__row{
  display:grid; grid-template-columns:minmax(74px,96px) 1fr;
  gap:clamp(14px,3vw,44px); align-items:baseline;
  padding:clamp(18px,2.6vh,30px) 0; border-bottom:1px solid var(--rule);
}
.after__t{
  font-family:var(--mono); font-size:var(--step--1); font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.after__h{font-family:var(--display); font-weight:400; font-size:var(--step-1); line-height:1.15; margin:0 0 .3em}
#main-content .entry-content .after__d,.after__d{color:var(--muted); margin:0; font-size:var(--step-0); line-height:1.6; max-width:52ch}

/* ── Buy links on /pricing/ ───────────────────────────────────── */

/* One ruled line per inclusion, the same rhythm the terms ledger uses, so a
   collection reads as a specification rather than a marketing list. */
.feat{list-style:none; margin:0 0 1.4em; padding:0; max-width:46ch}
.feat li{
  padding:9px 0; border-bottom:1px solid var(--rule);
  font-size:var(--step-0); line-height:1.45;
}
.feat li:first-child{border-top:1px solid var(--rule)}

.buy{margin:.4em 0 2.2em}
.buy--addon{margin:0 0 .55em}
.buy--addon a{color:var(--fg); text-underline-offset:.18em}

/* The one authored moment: the photograph develops in, bottom edge last,
   the way a print comes up in the tray. The image is fully visible without
   JavaScript and without the class — the animation is the enhancement, never
   the thing that makes the content appear. */
@keyframes mbp-develop{
  from{clip-path:inset(0 0 14% 0); opacity:0}
  to{clip-path:inset(0 0 0 0); opacity:1}
}
@media (prefers-reduced-motion:no-preference){
  .ser__plate.is-lit img{animation:mbp-develop 1.15s cubic-bezier(.16,1,.3,1) both}
}

/* Divi paints a brass dash and 26px indent on every #main-content ul li,
   which made .feat read as a bulleted list AND a ruled one at the same time. */
#main-content .entry-content ul.feat li{padding-left:0}
#main-content .entry-content ul.feat li::before{content:none}

/* The plate is a light island inside the night stop, so the stop's tokens have
   to be redeclared on it - otherwise the global :focus-visible ring resolves to
   lit brass on bone at 1.99:1, on the page's only conversion control. */
.ser__cal{--accent:#5A421E;--fg:#0F1E1D;--muted:#3E4E4C;--rule:rgba(15,30,29,.18)}