/* ==========================================================================
   The course page.
   ==========================================================================

   The layout is her designer's: a framed portrait beside the words, soft waves
   between the bands, small drawings instead of a list of ticks, the lessons in
   a numbered run.

   The colours are the site's own. Not one value is invented here — every one
   is a variable from site.css, so the course page, the homepage and the shop
   can never drift apart, and a change to the brand reaches this page without
   anybody remembering that it exists.

   Order: tokens, the menu above it, hero, waves, bands, the three cards and
   what they open, the icon grid, the purchase card, instructor, review, then
   the mobile pass.
   ========================================================================== */

/* --- 1. The site's palette, named for this page --------------------------- */

.single-course-page{
  --cp-bg:var(--page-warm);
  --cp-bg-2:var(--surface-2);
  --cp-bg-3:var(--surface-3);
  --cp-white:var(--surface);
  --cp-wine:var(--wine-600);
  --cp-wine-deep:var(--wine-800);
  --cp-gold:var(--gold-400);
  --cp-gold-deep:var(--gold-500);
  --cp-ink:var(--ink);
  --cp-ink-2:var(--ink-2);
  --cp-ink-3:var(--ink-3);
  --cp-line:var(--line);
  --cp-shadow:0 18px 50px -30px rgba(22,16,17,.42);
  --cp-radius:24px;
  background:var(--cp-bg);
  color:var(--cp-ink);
}

/* --- 2. The menu above it -------------------------------------------------
   The site's header is pale text with no background of its own, which works
   over a dark hero and disappears over this one. Here it gets the brand's own
   wine to sit on — the same colour the menu takes once it sticks. */

body.single-product .nav:not(.is-stuck){
  background-image:none;
  background-color:var(--wine-700);
}
body.single-product .nav::after{opacity:.4}

/* --- 3. Hero -------------------------------------------------------------- */

.cp-hero{
  position:relative;
  background:linear-gradient(165deg,var(--page) 0%,var(--cp-bg) 46%,var(--cp-bg-3) 100%);
  padding-block:calc(var(--nav-h,68px) + var(--ticker-h,0px) + clamp(2.4rem,6vw,4.6rem)) clamp(3.4rem,9vw,6.6rem);
  overflow:hidden;
}
.cp-hero::before{
  /* One soft wash of the brand's gold behind the portrait, so the photograph
     is not a rectangle dropped onto a flat page. */
  content:'';position:absolute;inset-block:-20%;inset-inline-end:-12%;
  inline-size:62%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(201,171,114,.20),rgba(201,171,114,0));
  pointer-events:none;
}
.cp-hero-inner{
  position:relative;z-index:1;
  display:grid;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;
  grid-template-columns:1fr 1.02fr;
  grid-template-areas:'copy media';
}
html[dir="rtl"] .cp-hero-inner{grid-template-areas:'media copy'}
.cp-hero-copy{grid-area:copy}
.cp-hero-media{grid-area:media}

.cp-eyebrow{
  font-family:var(--ui);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--cp-gold-deep);margin:0 0 .9rem;
}
.cp-hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.05rem,4.9vw,3.4rem);line-height:1.14;
  color:var(--cp-wine);margin:0;text-wrap:balance;
}
.cp-hero-lead{
  margin-block-start:1.15rem;max-inline-size:44ch;
  font-size:clamp(1rem,1.5vw,1.09rem);line-height:1.78;color:var(--cp-ink-2);
}
.cp-hero-lead p{margin:0 0 .7rem}
.cp-hero-lead p:last-child{margin-block-end:0}

.cp-facts{display:flex;flex-wrap:wrap;gap:.55rem;margin-block-start:1.7rem;padding:0;list-style:none}
.cp-facts li{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.46rem .95rem;border-radius:999px;
  background:rgba(255,255,255,.76);border:1px solid var(--cp-line);
  font-family:var(--ui);font-size:.82rem;font-weight:500;color:var(--cp-wine);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cp-facts svg{inline-size:15px;block-size:15px;flex:none;opacity:.72}
/* The price is a fact like the others, drawn a shade stronger so the eye
   finds it first in the row. */
.cp-facts .cp-fact-price{
  background:var(--cp-wine);border-color:var(--cp-wine);color:var(--on-dark);
  font-family:var(--display);font-size:.98rem;font-weight:500;
  padding-inline:1.05rem;
}
.cp-facts .cp-fact-price del{opacity:.55;font-size:.82em;margin-inline-end:.35rem}
.cp-facts .cp-fact-price ins{text-decoration:none}
.cp-facts .cp-fact-price bdi{white-space:nowrap}

.cp-hero-cta{margin-block-start:1.3rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.cp-hero-cta:empty{display:none}
/* The gift button is the site's plain wine .btn — nothing here restyles it.
   All this does is give its little parcel somewhere to sit. */
.cp-gift svg{inline-size:17px;block-size:17px;flex:none}

.cp-soon-pill{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.55rem 1.1rem;border-radius:999px;
  background:var(--cp-bg-2);border:1px solid var(--cp-line);
  font-family:var(--ui);font-size:.85rem;font-weight:600;color:var(--cp-wine);
}

.cp-hero-media{position:relative}
.cp-hero-frame{
  position:relative;border-radius:var(--cp-radius);overflow:hidden;
  box-shadow:var(--cp-shadow);background:var(--cp-bg-3);
  aspect-ratio:4/5;
}
.cp-hero-frame video,.cp-hero-frame img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.cp-hero-frame::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(20,4,9,0) 46%,rgba(20,4,9,.48) 100%);
}
.cp-hero-script{
  position:absolute;z-index:2;bottom:1.5rem;right:1.6rem;
  direction:ltr;text-align:right;color:var(--on-dark);pointer-events:none;
  text-shadow:0 2px 18px rgba(20,4,9,.55);
}
.cp-hero-script b{
  display:block;font-family:var(--display);font-weight:200;
  font-size:clamp(1.25rem,2.6vw,1.95rem);line-height:1.15;letter-spacing:.015em;
}
.cp-hero-script span{
  display:block;margin-block-start:.35rem;
  font-family:var(--ui);font-size:.63rem;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--gold-300);
}
.cp-expand{
  position:absolute;z-index:3;inset-block-start:1rem;inset-inline-end:1rem;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.44rem .8rem;border:0;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.92);color:var(--cp-wine);
  font-family:var(--ui);font-size:.76rem;font-weight:600;
  transition:transform .25s ease,background .25s ease;
}
.cp-expand:hover{transform:translateY(-1px);background:var(--page)}

/* --- 4. The waves between the bands --------------------------------------- */

.cp-wave{
  display:block;inline-size:100%;block-size:clamp(38px,5vw,74px);
  margin-block-start:calc(clamp(38px,5vw,74px) * -1);
  position:relative;z-index:1;pointer-events:none;
}
.cp-wave svg{display:block;inline-size:100%;block-size:100%}
.cp-wave-warm{color:var(--cp-bg)}
.cp-wave-white{color:var(--page)}
.cp-wave-tint{color:var(--cp-bg-2)}

/* --- 5. The bands --------------------------------------------------------- */

.cp-band{padding-block:clamp(2.8rem,7vw,5.2rem);position:relative}
.cp-band-warm{background:var(--cp-bg)}
.cp-band-tint{background:linear-gradient(180deg,var(--cp-bg-2),var(--cp-bg-3))}
.cp-band-white{background:var(--page)}

.cp-head{text-align:center;max-inline-size:62ch;margin-inline:auto;margin-block-end:clamp(1.8rem,4vw,2.8rem)}
.cp-head h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.15rem);line-height:1.22;
  color:var(--cp-wine);margin:0;
}
.cp-head h2::after{
  content:'';display:block;inline-size:74px;block-size:2px;margin:.75rem auto 0;
  background:linear-gradient(90deg,transparent,var(--cp-gold),transparent);
}
.cp-head p{margin:1rem 0 0;color:var(--cp-ink-2);line-height:1.8;font-size:1.02rem}

.cp-prose{max-inline-size:68ch;margin-inline:auto;color:var(--cp-ink-2);line-height:1.9;font-size:1.03rem}
.cp-prose p{margin:0 0 1.05rem}
.cp-prose p:last-child{margin-block-end:0}
.cp-prose strong{color:var(--cp-wine);font-weight:600}
.cp-prose h2,.cp-prose h3,.cp-prose h4{font-family:var(--display);color:var(--cp-wine);font-weight:500;margin:1.9rem 0 .7rem;line-height:1.3}
.cp-prose ul,.cp-prose ol{margin:0 0 1.1rem;padding-inline-start:1.25rem}
.cp-prose li{margin-block-end:.42rem}
.cp-prose img{max-inline-size:100%;block-size:auto;border-radius:18px}

/* --- 6. The three cards, and what they open -------------------------------
   About this course, the syllabus and who it is for are long enough that all
   three at once is a wall. They are three cards instead: press one, it opens
   underneath and the other two close. The first is open when the page loads,
   so nobody has to press anything to find out what the course is. */

.cp-switch{
  display:grid;gap:clamp(.7rem,1.8vw,1.1rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-block-end:clamp(1.6rem,3.6vw,2.4rem);
}
.cp-card{
  appearance:none;cursor:pointer;text-align:start;
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:center;
  padding:clamp(.95rem,2.2vw,1.35rem) clamp(1rem,2.4vw,1.5rem);
  border-radius:18px;border:1px solid var(--cp-line);
  background:var(--cp-white);color:var(--cp-ink);
  font-family:var(--display);font-weight:500;
  font-size:clamp(.98rem,1.9vw,1.12rem);line-height:1.35;
  box-shadow:0 10px 26px -22px rgba(22,16,17,.5);
  transition:transform .25s ease,border-color .25s ease,background .25s ease,color .25s ease;
}
.cp-card:hover{transform:translateY(-2px);border-color:var(--line-2)}
.cp-card-mark{
  inline-size:40px;block-size:40px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--cp-wine);
  background:var(--cp-bg-2);border:1px solid var(--cp-line);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.cp-card-mark svg{inline-size:19px;block-size:19px}
.cp-card[aria-selected="true"]{
  background:var(--cp-wine);color:var(--on-dark);border-color:var(--cp-wine);
  box-shadow:0 16px 34px -20px rgba(92,18,37,.75);
}
.cp-card[aria-selected="true"] .cp-card-mark{
  background:rgba(248,245,241,.14);color:var(--gold-300);border-color:rgba(248,245,241,.2);
}
.cp-card:focus-visible{outline:2px solid var(--cp-gold);outline-offset:3px}

.cp-open{
  background:var(--cp-white);border:1px solid var(--cp-line);border-radius:var(--cp-radius);
  padding:clamp(1.5rem,3.6vw,2.6rem);box-shadow:var(--cp-shadow);
}
.cp-open[hidden]{display:none}
.cp-open > h3{
  font-family:var(--display);font-weight:500;color:var(--cp-wine);
  font-size:1.1rem;margin:1.9rem 0 .6rem;
}
.cp-open > h3:first-child{margin-block-start:0}
.cp-open > p{margin:0;color:var(--cp-ink-2);line-height:1.8;font-size:1rem}
.cp-open .cp-prose{margin-inline:0}

/* --- 6a. About this course ------------------------------------------------
   Her own writing, and it can run long. A picture of the course on one side,
   the opening paragraph given its own size on the other, and a gold hair
   between them — so the section has a way in rather than opening as a wall. */

.cp-about{
  display:grid;gap:clamp(1.4rem,3.4vw,2.8rem);align-items:start;
  grid-template-columns:.82fr 1.18fr;
}
.cp-about.is-alone{grid-template-columns:1fr;max-inline-size:68ch;margin-inline:auto}
.cp-about-figure{
  margin:0;border-radius:20px;overflow:hidden;position:relative;
  aspect-ratio:3/4;background:var(--cp-bg-2);
  box-shadow:0 20px 44px -26px rgba(22,16,17,.55);
}
.cp-about-figure img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.cp-about-figure::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(200deg,rgba(20,4,9,0) 55%,rgba(20,4,9,.34) 100%);
}
.cp-about-lead{
  margin:0;font-family:var(--display);font-weight:400;
  font-size:clamp(1.08rem,2.1vw,1.35rem);line-height:1.62;
  color:var(--cp-wine);
}
.cp-about-lead p{margin:0 0 .7rem}
.cp-about-lead p:last-child{margin-block-end:0}
.cp-rule{
  display:block;inline-size:64px;block-size:2px;margin-block:1.15rem 1.25rem;
  background:linear-gradient(90deg,var(--cp-gold),transparent);
  border-radius:2px;
}
html[dir="rtl"] .cp-rule{background:linear-gradient(270deg,var(--cp-gold),transparent)}

/* A list inside her description is a list of things she teaches, so it gets
   the same soft gold mark the rest of the page uses rather than a bullet. */
.cp-about-copy .cp-prose ul{list-style:none;padding-inline-start:0;display:grid;gap:.7rem}
.cp-about-copy .cp-prose ul li{position:relative;padding-inline-start:1.5rem}
.cp-about-copy .cp-prose ul li::before{
  content:'';position:absolute;inset-inline-start:0;inset-block-start:.62em;
  inline-size:7px;block-size:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--cp-gold),var(--cp-wine));
}
.cp-about-copy .cp-prose{max-inline-size:none;margin-inline:0;font-size:1rem;line-height:1.86}


/* --- 6b. The bands her description is drawn into -------------------------
   Three shapes, chosen by what she wrote: a grid of small drawings, a column
   of them, and a numbered run. Each sits in a band with a photograph that
   bleeds to the outer edge and dissolves into the band on the side the words
   are on — the fade faces the text, never the margin. */

.cp-intro{max-inline-size:70ch;margin-inline:auto;text-align:center}
.cp-intro .cp-about-lead{margin-inline:auto}
.cp-intro .cp-rule{margin-inline:auto}
.cp-intro .cp-prose{margin-inline:auto;text-align:start}

.cp-panel{
  position:relative;overflow:hidden;border-radius:22px;
  display:grid;align-items:stretch;
  background:linear-gradient(120deg,var(--cp-bg-2),var(--cp-bg) 58%,var(--cp-bg-3));
  margin-inline:calc(clamp(1.5rem,3.6vw,2.6rem) * -1);
  margin-block-start:clamp(1.8rem,3.6vw,2.8rem);
}
.cp-panel-photo{margin:0;position:relative;align-self:stretch;min-block-size:clamp(320px,34vw,500px)}
.cp-panel-photo img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
/* The photograph is at the left of the band in both directions, so the edge it
   dissolves on is its right one either way. */
.cp-panel-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(251,249,246,0) 40%,rgba(251,249,246,.4) 68%,rgba(251,249,246,.86) 87%,var(--cp-bg) 100%);
}


/* --- 6c. The opening band ------------------------------------------------
   Her first words, and a photograph beside them. The picture sits at the end
   of the band in both directions, so the edge it dissolves on is its inner
   one — the side the words are on — either way. Writing a mirrored rule for
   Arabic is what puts the fade against the margin instead. */

.cp-opening{
  grid-template-columns:1fr .92fr;grid-template-areas:'copy photo';
  background:linear-gradient(110deg,var(--cp-bg-2),var(--cp-bg) 52%,var(--cp-bg-3));
}
html[dir="rtl"] .cp-opening{grid-template-columns:.92fr 1fr;grid-template-areas:'photo copy'}
.cp-opening-photo{grid-area:photo;margin:0;position:relative;align-self:stretch;min-block-size:clamp(380px,42vw,600px)}
.cp-opening-photo img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:center top}
.cp-opening-photo::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to left,rgba(251,249,246,0) 42%,rgba(251,249,246,.38) 70%,rgba(251,249,246,.86) 88%,var(--cp-bg) 100%);
}
.cp-opening-copy{grid-area:copy;align-self:center;padding:clamp(1.8rem,4vw,3.2rem) clamp(1.4rem,3.2vw,2.8rem)}
.cp-opening-copy > h3{
  font-family:var(--display);font-weight:600;color:var(--cp-wine);
  font-size:clamp(1.35rem,3vw,2.05rem);line-height:1.34;margin:0 0 1.2rem;text-wrap:balance;
}
.cp-opening-copy .cp-prose{max-inline-size:none;margin-inline:0;font-size:.98rem;line-height:1.85}
.cp-opening-copy .cp-prose p{margin:0 0 .95rem}
/* A list in her opening is a list of what the course is for. Her designer put a
   small heart against each line, and a heart is a better mark there than a
   bullet — it is the only place on the page that gets one. */
.cp-opening-copy .cp-prose ul{list-style:none;padding-inline-start:0;display:grid;gap:.45rem;margin:0 0 1.1rem}
.cp-opening-copy .cp-prose ul li{position:relative;padding-inline-start:1.5rem;line-height:1.8}
.cp-opening-copy .cp-prose ul li::before{
  content:'\2665';position:absolute;inset-inline-start:0;inset-block-start:0;
  color:var(--wine-400);font-size:.86em;line-height:1.9;
}
@media (max-width:860px){
  .cp-opening,html[dir="rtl"] .cp-opening{grid-template-columns:1fr;grid-template-areas:'photo' 'copy'}
  .cp-opening-photo{min-block-size:320px}
  .cp-opening-photo::after{background:linear-gradient(to bottom,rgba(251,249,246,0) 52%,var(--cp-bg) 100%)}
}

/* The details band: photograph, then the heading, the lead and the grid. */
.cp-specs-band{grid-template-columns:.58fr 1fr;grid-template-areas:'photo body'}
html[dir="rtl"] .cp-specs-band{grid-template-columns:1fr .58fr;grid-template-areas:'body photo'}
.cp-specs-band.has-no-photo,html[dir="rtl"] .cp-specs-band.has-no-photo{grid-template-columns:1fr;grid-template-areas:'body'}
.cp-specs-band .cp-panel-photo{grid-area:photo}
.cp-specs-body{grid-area:body;padding:clamp(1.6rem,3.2vw,2.6rem) clamp(1.2rem,2.6vw,2.2rem)}
.cp-specs-body > h3{
  text-align:center;font-family:var(--display);font-weight:600;color:var(--cp-wine);
  font-size:clamp(1.3rem,2.6vw,1.75rem);margin:0;line-height:1.3;
}
.cp-specs-body > h3::after{content:'';display:block;inline-size:70px;block-size:2px;margin:.65rem auto 0;background:linear-gradient(90deg,transparent,var(--cp-gold),transparent)}
.cp-specs-lead{text-align:center;max-inline-size:56ch;margin:1.1rem auto clamp(1.4rem,2.8vw,2rem);color:var(--cp-ink-2);line-height:1.8;font-size:.98rem}
.cp-spec-grid{display:grid;gap:clamp(1.4rem,2.6vw,2rem) clamp(1rem,2vw,1.7rem);grid-template-columns:repeat(3,minmax(0,1fr))}
.cp-spec{display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;text-align:start}
.cp-spec-mark{
  inline-size:46px;block-size:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:radial-gradient(circle at 32% 28%,var(--page),var(--cp-bg-3));
  border:1px solid var(--cp-line);box-shadow:0 8px 20px -14px rgba(22,16,17,.5);color:var(--cp-wine);
}
.cp-spec-mark svg{inline-size:21px;block-size:21px}
.cp-spec b{display:block;font-family:var(--display);font-weight:600;font-size:.97rem;line-height:1.42;color:var(--cp-wine);margin-block-end:.28rem}
.cp-spec p{margin:0;font-size:.86rem;line-height:1.72;color:var(--cp-ink-2)}

/* The run-through, and the syllabus beside it. */
.cp-journey{grid-template-columns:.8fr 1.04fr 1.06fr;grid-template-areas:'photo copy list'}
html[dir="rtl"] .cp-journey{grid-template-columns:1.06fr 1.04fr .8fr;grid-template-areas:'list copy photo'}
.cp-journey.has-no-photo{grid-template-columns:1fr 1fr;grid-template-areas:'copy list'}
html[dir="rtl"] .cp-journey.has-no-photo{grid-template-columns:1fr 1fr;grid-template-areas:'list copy'}
.cp-journey.is-single{grid-template-columns:.8fr 1fr;grid-template-areas:'photo copy'}
html[dir="rtl"] .cp-journey.is-single{grid-template-columns:1fr .8fr;grid-template-areas:'copy photo'}
.cp-journey.is-single.has-no-photo,html[dir="rtl"] .cp-journey.is-single.has-no-photo{grid-template-columns:1fr;grid-template-areas:'copy'}
.cp-journey .cp-panel-photo{grid-area:photo}
.cp-journey-copy{grid-area:copy;align-self:start;padding:clamp(1.4rem,3vw,2.2rem) clamp(1.1rem,2.2vw,1.8rem)}
.cp-journey-list{grid-area:list;align-self:start;padding:clamp(1.4rem,3vw,2.2rem) clamp(1.1rem,2.2vw,1.7rem)}
.cp-journey-copy > h3,.cp-journey-list > h3{
  font-family:var(--display);font-weight:600;color:var(--cp-wine);
  font-size:clamp(1.05rem,2vw,1.28rem);margin:0 0 1.2rem;line-height:1.4;
}
.cp-flow{list-style:none;margin:0;padding:0;display:grid;gap:1.15rem}
.cp-flow li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start}
.cp-flow-mark{
  inline-size:38px;block-size:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.72);border:1px solid var(--cp-line);color:var(--wine-500);
}
.cp-flow-mark svg{inline-size:18px;block-size:18px}
.cp-flow b{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;line-height:1.45;color:var(--cp-wine);margin-block-end:.28rem}
.cp-flow p{margin:0;font-size:.85rem;line-height:1.7;color:var(--cp-ink-2)}
.cp-run{list-style:none;margin:0;padding:0;counter-reset:cp-run;display:grid;gap:.4rem}
.cp-run li{
  counter-increment:cp-run;display:grid;grid-template-columns:auto 1fr;gap:.8rem;align-items:start;
  padding:.55rem .7rem;border-radius:13px;background:rgba(255,255,255,.72);border:1px solid var(--cp-line);
}
.cp-run li::before{
  content:counter(cp-run);inline-size:24px;block-size:24px;border-radius:50%;
  display:grid;place-items:center;background:var(--cp-wine);color:var(--on-dark);
  font-family:var(--ui);font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.cp-run b{display:block;font-family:var(--display);font-weight:600;font-size:.93rem;line-height:1.4;color:var(--cp-wine);margin-block-end:.2rem}
.cp-run p{margin:0;font-size:.82rem;line-height:1.6;color:var(--cp-ink-2)}

/* A list she wrote without bold openings stays a list. */
.cp-block{margin-block-start:clamp(2rem,4vw,3rem)}
.cp-block-head{text-align:center;margin-block-end:clamp(1.2rem,2.6vw,1.8rem)}
.cp-block-head h3{font-family:var(--display);font-weight:600;color:var(--cp-wine);font-size:clamp(1.2rem,2.4vw,1.55rem);margin:0}

@media (max-width:1180px){.cp-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1040px){
  .cp-journey,html[dir="rtl"] .cp-journey{grid-template-columns:.9fr 1fr;grid-template-areas:'photo copy' 'list list'}
  html[dir="rtl"] .cp-journey{grid-template-areas:'copy photo' 'list list'}
}
@media (max-width:820px){
  .cp-specs-band,html[dir="rtl"] .cp-specs-band{grid-template-columns:1fr;grid-template-areas:'photo' 'body'}
  .cp-journey,html[dir="rtl"] .cp-journey,
  .cp-journey.is-single,html[dir="rtl"] .cp-journey.is-single{grid-template-columns:1fr;grid-template-areas:'photo' 'copy' 'list'}
  .cp-panel-photo{min-block-size:280px}
  .cp-panel-photo::after{background:linear-gradient(to bottom,rgba(251,249,246,0) 50%,var(--cp-bg) 100%)}
  .cp-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .cp-spec-grid{grid-template-columns:1fr}
  .cp-panel{margin-inline:calc(clamp(1.5rem,3.6vw,2.6rem) * -1)}
}

/* "Who is this for" — a soft mark, not a tick in a box. */
.cp-marks{list-style:none;margin:0;padding:0;display:grid;gap:1.05rem}
.cp-marks li{
  display:grid;grid-template-columns:auto 1fr;gap:.85rem;align-items:start;
  color:var(--cp-ink-2);line-height:1.72;font-size:1rem;
}
.cp-mark{
  inline-size:34px;block-size:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;color:var(--cp-wine);
  background:var(--cp-bg-2);border:1px solid var(--cp-line);
}
.cp-mark svg{inline-size:16px;block-size:16px}

/* The syllabus: a numbered run, the number in its own wine disc. */
.cp-steps{list-style:none;margin:0;padding:0;counter-reset:cp-step;display:grid;gap:.55rem}
.cp-steps li{
  counter-increment:cp-step;position:relative;
  display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start;
  padding:.8rem .9rem;border-radius:16px;
  background:var(--cp-bg);border:1px solid transparent;
  transition:border-color .25s ease,background .25s ease,transform .25s ease;
}
.cp-steps li::before{
  content:counter(cp-step);
  inline-size:30px;block-size:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--cp-wine);color:var(--on-dark);
  font-family:var(--ui);font-size:.8rem;font-weight:600;
  font-variant-numeric:tabular-nums;
}
.cp-steps a,.cp-steps > li > div{display:block;min-inline-size:0;text-decoration:none;color:inherit}
.cp-steps b{display:block;font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.4;color:var(--cp-wine)}
.cp-steps small{display:block;margin-block-start:.2rem;font-size:.85rem;line-height:1.6;color:var(--cp-ink-2)}
.cp-steps li:hover{background:var(--cp-bg-2);border-color:var(--cp-line);transform:translateY(-1px)}
.cp-steps li.is-complete b::after{content:' ✓';color:var(--ok)}

/* --- 7. The icon grid ----------------------------------------------------- */

.cp-icons{
  display:grid;gap:clamp(1.5rem,3.4vw,2.4rem) clamp(1rem,2.4vw,2.2rem);
  grid-template-columns:repeat(3,minmax(0,1fr));
  max-inline-size:1060px;margin-inline:auto;
}
.cp-icon{text-align:center}
.cp-icon-badge{
  inline-size:60px;block-size:60px;margin-inline:auto;margin-block-end:.85rem;
  display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,var(--page),var(--cp-bg-3));
  border:1px solid var(--cp-line);
  box-shadow:0 8px 22px -14px rgba(22,16,17,.5);
  color:var(--cp-wine);
}
.cp-icon-badge svg{inline-size:25px;block-size:25px}
.cp-icon p{margin:0;font-size:.95rem;line-height:1.68;color:var(--cp-ink-2);max-inline-size:26ch;margin-inline:auto}

/* --- 8. The purchase card -------------------------------------------------
   The buttons are the site's own — .btn and .btn-gold from site.css — so the
   thing a customer presses here is the thing she has pressed everywhere else.
   Nothing about them is restyled in this file. */

.cp-buy{
  max-inline-size:640px;margin-inline:auto;text-align:center;
  background:var(--cp-white);border:1px solid var(--cp-line);border-radius:var(--cp-radius);
  padding:clamp(1.7rem,4vw,2.6rem);box-shadow:var(--cp-shadow);
}
.cp-buy h2{
  font-family:var(--display);font-weight:500;color:var(--cp-wine);
  font-size:clamp(1.3rem,2.6vw,1.75rem);margin:0 0 .8rem;line-height:1.3;
}
.cp-price{
  font-family:var(--display);font-weight:500;color:var(--cp-wine);
  font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.1;margin-block:.4rem 1.2rem;
}
.cp-price del{opacity:.45;font-size:.6em;margin-inline-end:.4rem}
.cp-price ins{text-decoration:none}
.cp-buy form.cart{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;margin:0 0 1.2rem}
.cp-buy .quantity{display:none}
.cp-buy-points{
  list-style:none;margin:1.3rem 0 0;padding:1.3rem 0 0;border-block-start:1px solid var(--cp-line);
  display:grid;gap:.5rem;text-align:start;
}
.cp-buy-points li{
  display:grid;grid-template-columns:auto 1fr;gap:.55rem;align-items:start;
  font-size:.92rem;line-height:1.65;color:var(--cp-ink-2);
}
.cp-buy-points li::before{content:'✦';color:var(--cp-gold);line-height:1.65}
.cp-access-line{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .9rem;
  padding:.4rem .9rem;border-radius:999px;background:var(--cp-bg-2);
  color:var(--cp-wine);font-size:.88rem;font-weight:500;
}
.cp-access-line.is-over{background:rgba(176,52,73,.1);color:var(--danger)}
.cp-buy .field{text-align:start;margin-block-end:.9rem}
.cp-buy .muted{margin:1rem 0 0;font-size:.88rem;color:var(--cp-ink-2)}
.cp-buy .muted a{color:var(--cp-wine)}

/* --- 9. Her introduction, and the student's word --------------------------
   The owner card is the site's, and it is styled by the site. All this page
   adds is the heading above it, which has to be pale rather than wine because
   the band it sits in is dark. */

.cp-head-dark h2{color:var(--on-dark)}
.cp-head-dark h2::after{background:linear-gradient(90deg,transparent,var(--cp-gold),transparent)}
.cp-head-dark p{color:var(--on-dark-2)}
.single-course-page .cp-owner{position:relative}

.cp-quote{max-inline-size:620px;margin-inline:auto;text-align:center}
.cp-quote .cp-stars{color:var(--cp-gold);font-size:1.15rem;letter-spacing:.18em}
.cp-quote blockquote{
  margin:1rem 0 .9rem;font-family:var(--display);font-weight:300;
  font-size:clamp(1.1rem,2.4vw,1.45rem);line-height:1.6;color:var(--cp-wine);
}
.cp-quote blockquote::before{content:'“'}
.cp-quote blockquote::after{content:'”'}
.cp-quote p{margin:0;font-size:.9rem;color:var(--cp-ink-2)}

/* --- 10. Notices ---------------------------------------------------------- */

.single-course-page .seham-notices{background:var(--cp-bg);padding-block-start:calc(var(--nav-h,68px) + var(--ticker-h,0px) + 1rem)}
/* With a notice above it the hero no longer has to clear the menu itself. */
.single-course-page .seham-notices + .cp-hero{padding-block-start:clamp(2rem,5vw,3.4rem)}

/* --- 11. Narrower screens -------------------------------------------------
   The portrait goes above the words, the three cards become a column, and the
   icon grid halves and then singles. */

@media (max-width:1040px){
  .cp-icons{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cp-hero-inner{grid-template-columns:1fr;grid-template-areas:'media' 'copy'}
  html[dir="rtl"] .cp-hero-inner{grid-template-areas:'media' 'copy'}
  .cp-hero-frame{aspect-ratio:4/3}
  .cp-hero-lead{max-inline-size:none}
  .cp-switch{grid-template-columns:1fr}
  .cp-about{grid-template-columns:1fr}
  .cp-about-figure{aspect-ratio:16/10}
  .cp-teacher{grid-template-columns:1fr;text-align:center;justify-items:center}
}
@media (max-width:560px){
  .cp-icons{grid-template-columns:1fr;gap:1.4rem}
  .cp-icon{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;text-align:start}
  .cp-icon-badge{margin:0;inline-size:52px;block-size:52px}
  .cp-icon p{max-inline-size:none;margin-inline:0}
  .cp-facts li{font-size:.78rem;padding:.4rem .8rem}
  .cp-hero-script{bottom:1rem}
}

/* --- 12. Motion, only for those who want it ------------------------------- */

@media (prefers-reduced-motion:reduce){
  .cp-steps li,.cp-expand,.cp-card{transition:none}
  .cp-steps li:hover,.cp-card:hover{transform:none}
}