/* Way of Heaven — The 33rd Degree (course PDP). Page rules only.
   Design install package 2026-09-09 (v2), route /33rd-degree-training/.
   Every selector is scoped under #woh-the-33rd-degree, except the two
   body-level rules the notice needs while it is open. */


/* -- Canonical components -------------------------------------------
   README §8b: the package's five page-local primitives are not installed; the
   site's own .section-label, .mono, .fine, .rule and .hairline-btn carry them.
   The header anchor reads "Return to home", gold at rest, as on Articles and
   the legal pages. */
#woh-the-33rd-degree .nav-anchor,
#woh-the-33rd-degree .nav-anchor:hover{color:var(--gold)}
#woh-the-33rd-degree .d33-fine{margin:0}

/* -- Body size on this page ---------------------------------------
   Owner direction 2026-09-10: the reading copy runs one pixel above the site
   default here. This is the longest read on the site, 43 paragraphs and about
   10,600 characters, and 15px asked too much over that distance.

   Set as a page-scoped token rather than an edit to the package's own rule, so
   a future Design delivery keeps the change: .d33-read p still reads
   font-size:var(--fs-body), and on this page that resolves to 16px. Line
   height is a ratio (--lh-body, 1.85), so it follows on its own: 27.75px to
   29.6px. The legal register (--fs-body-sm, 13.5px) is deliberately untouched
   -- it is fine print and reads as fine print. */
#woh-the-33rd-degree{--fs-body:16px}

/* -- Reading voices -----------------------------------------------
   The label registers (.d33-label, .d33-serif-label, .mono) are <p> too and
   sit inside .d33-read / .d33-legal; the :not() keeps the reading voice off
   them (the package's own rules lost that fight on specificity).

   .d33-notice-links is excluded for the same reason and is not a change of
   Design's intent, but a repair of it: the package sets that row to
   --fs-caps-sm Jost caps with no underline, and its own .d33-legal p rule
   (a type selector, so higher specificity than the class) was overriding it.
   The modal's two links were rendering as 13.5px Geist body copy with a
   hairline underline. They are the caps register again. */
#woh-the-33rd-degree .d33-read p:not(.d33-label):not(.d33-serif-label):not(.mono){
  margin:0;
  font-family:var(--font-ui);
  font-weight:var(--w-book);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:.012em;
  color:var(--text-body);
}
#woh-the-33rd-degree .d33-legal p:not(.d33-label):not(.d33-serif-label):not(.mono):not(.d33-notice-links){
  margin:0;
  font-family:var(--font-ui);
  font-weight:var(--w-book);
  font-size:var(--fs-body-sm);
  line-height:var(--lh-fine);
  letter-spacing:.012em;
  color:var(--cream-52);
}
#woh-the-33rd-degree .d33-read p a,
#woh-the-33rd-degree .d33-legal p:not(.d33-notice-links) a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid var(--gold-40);
  transition:var(--transition-quiet);
}
#woh-the-33rd-degree .d33-read p a:hover,
#woh-the-33rd-degree .d33-legal p:not(.d33-notice-links) a:hover{
  color:var(--gold-bright);
  border-bottom-color:var(--gold-88);
}
#woh-the-33rd-degree .d33-term{color:var(--text-heading)}

/* Section labels on this page run at 2x the installed caps-sm size. */
#woh-the-33rd-degree .d33-label{
  margin:0;
  font-size:calc(var(--fs-caps-sm) * 2);
  line-height:1.4;
}
#woh-the-33rd-degree .d33-serif-label{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--w-light);
  font-size:clamp(22px,2.7vw,36px);
  letter-spacing:var(--track-monument);
  line-height:1.15;
  text-transform:uppercase;
  text-align:center;
  color:var(--text-accent);
}

/* -- Shared column + section rhythm ------------------------------- */
#woh-the-33rd-degree .d33-col{
  width:min(720px,90%);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:30px;
}
#woh-the-33rd-degree .d33-section{
  padding:var(--section-pad-y) var(--gutter);
  max-width:var(--max-page);
  margin-inline:auto;
}
#woh-the-33rd-degree .d33-section--order{
  padding-top:clamp(72px,9.6vh,132px);
  padding-bottom:clamp(36px,4.8vh,66px);
}
#woh-the-33rd-degree .d33-section--stages{padding-top:clamp(72px,9.6vh,132px)}
#woh-the-33rd-degree .d33-section--gate{
  padding-top:clamp(24px,3.2vh,44px);
  padding-bottom:clamp(24px,3.2vh,44px);
}
#woh-the-33rd-degree .d33-section--questions{padding-top:clamp(60px,8vh,110px)}
#woh-the-33rd-degree .d33-section--note{padding-top:clamp(84px,11.2vh,154px)}

/* -- S1 · Hero ---------------------------------------------------- */
#woh-the-33rd-degree .d33-head{
  padding:150px var(--gutter) 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
  text-align:center;
}
#woh-the-33rd-degree .d33-title{
  margin:0;
  font-family:var(--font-heading);
  font-weight:var(--w-light);
  font-size:clamp(40px,6vw,88px);
  letter-spacing:.16em;
  line-height:var(--lh-display);
  text-transform:uppercase;
  color:var(--text-heading);
}
#woh-the-33rd-degree .d33-head-dek{width:min(640px,90vw)}
#woh-the-33rd-degree .d33-facts{
  margin:0;
  max-width:90vw;
  font-family:var(--font-heading);
  font-weight:var(--w-light);
  font-size:var(--fs-caps-sm);
  letter-spacing:var(--track-caps-wide);
  line-height:1.9;
  text-transform:uppercase;
  color:var(--text-dim);
}
#woh-the-33rd-degree .d33-head-rule{width:min(620px,90vw);margin-top:40px}

/* -- S2 · closing thread + knot (glow tier 2) --------------------- */
#woh-the-33rd-degree .d33-thread{
  position:relative;
  width:min(620px,90%);
  height:1px;
  margin:var(--sp-9) auto 0;
  background:linear-gradient(to right,var(--gold-00,rgba(210,174,133,0)),var(--gold-40) 35%,var(--gold-bright) 50%,var(--gold-40) 65%,var(--gold-00,rgba(210,174,133,0)));
  box-shadow:0 0 18px var(--gold-24);
}
#woh-the-33rd-degree .d33-thread-knot{
  position:absolute;
  left:50%;
  top:50%;
  width:5px;
  height:5px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 0 6px 2px var(--gold-64),0 0 22px 6px var(--gold-24);
}

/* -- S3 · the five parts ------------------------------------------ */
#woh-the-33rd-degree .d33-stages-wrap{
  width:min(860px,90%);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:56px;
}
#woh-the-33rd-degree .d33-stages-intro{
  width:min(720px,100%);
  margin-inline:0;
}
#woh-the-33rd-degree .d33-stage{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:var(--sp-6);
  padding:52px 0;
  border-top:1px solid var(--line-hair);
}
#woh-the-33rd-degree .d33-stage--last{border-bottom:1px solid var(--line-hair)}
#woh-the-33rd-degree .d33-stage-body{
  display:flex;
  flex-direction:column;
  gap:18px;
}
#woh-the-33rd-degree .d33-stage-title{
  margin:0;
  font-family:var(--font-heading);
  font-weight:var(--w-medium);
  font-size:var(--fs-title);
  letter-spacing:var(--track-caps);
  line-height:var(--lh-heading);
  text-transform:uppercase;
  color:var(--text-heading);
}

/* -- S6 · the teacher --------------------------------------------- */
#woh-the-33rd-degree .d33-teacher-grid{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-9);
  align-items:center;
  width:90%;
  margin-inline:auto;
}
#woh-the-33rd-degree .d33-portrait{
  flex:0 1 300px;
  min-width:0;
  max-width:100%;
  height:clamp(340px,40vw,520px);
  -webkit-mask-image:var(--mask-edge-feather);
  mask-image:var(--mask-edge-feather);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}
#woh-the-33rd-degree .d33-portrait img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  /* Owner instruction 2026-09-08: the supplied PNG carries a baked-in bright
     halo behind the head. Held down until the asset is re-exported. */
  filter:brightness(.78) contrast(1.12);
}
#woh-the-33rd-degree .d33-teacher-copy{
  flex:1 1 380px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:30px;
}
#woh-the-33rd-degree .d33-caps-link{
  align-self:flex-start;
  font-family:var(--font-heading);
  font-weight:var(--w-light);
  font-size:var(--fs-caps-sm);
  letter-spacing:var(--track-caps-wide);
  text-transform:uppercase;
  color:var(--text-dim);
  text-decoration:none;
  transition:var(--transition-quiet);
}
#woh-the-33rd-degree .d33-caps-link:hover{color:var(--gold)}

/* -- S8 · questions ----------------------------------------------- */
#woh-the-33rd-degree .d33-questions-wrap{
  width:min(720px,90%);
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:40px;
}
#woh-the-33rd-degree .d33-questions{
  display:flex;
  flex-direction:column;
  gap:36px;
}
#woh-the-33rd-degree .d33-q{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}
#woh-the-33rd-degree .d33-q-title{
  margin:0;
  font-family:var(--font-heading);
  font-weight:var(--w-medium);
  font-size:calc(var(--fs-caps-sm) * 2);
  letter-spacing:var(--track-caps);
  line-height:1.4;
  text-transform:uppercase;
  color:var(--text-heading);
}

/* -- S10 · close, consent gate, Begin ----------------------------- */
#woh-the-33rd-degree .d33-close{
  padding:20px var(--gutter) 140px;
  display:flex;
  justify-content:center;
}
#woh-the-33rd-degree .d33-close-inner{
  width:100%;
  max-width:var(--max-page);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:40px;
}
#woh-the-33rd-degree .d33-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  width:min(360px,90vw);
}
#woh-the-33rd-degree .d33-cta .fine{text-align:center}
#woh-the-33rd-degree .d33-consent{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  font-family:var(--font-heading);
  font-weight:var(--w-light);
  font-size:var(--fs-caps-sm);
  letter-spacing:var(--track-caps-wide);
  text-transform:uppercase;
  color:var(--gold);
}
#woh-the-33rd-degree .d33-check{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--hit-min);
  height:var(--hit-min);
  margin:-14px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--gold);
  transition:var(--transition-quiet);
}
#woh-the-33rd-degree .d33-check:hover{color:var(--gold-bright)}
#woh-the-33rd-degree .d33-check .d33-check-mark{opacity:0}
#woh-the-33rd-degree .d33-check[aria-checked="true"] .d33-check-mark{opacity:1}
#woh-the-33rd-degree .d33-consent-link{
  padding:var(--sp-3) 0;
  background:none;
  border:0;
  cursor:pointer;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:inherit;
  transition:var(--transition-quiet);
}
#woh-the-33rd-degree .d33-consent-link span{border-bottom:1px solid var(--gold-40)}
#woh-the-33rd-degree .d33-consent-link:hover{color:var(--gold-bright)}
#woh-the-33rd-degree .d33-begin-wrap{
  width:100%;
  transition:opacity var(--dur-slow,420ms) var(--ease);
}
#woh-the-33rd-degree .d33-begin-wrap[data-locked]{
  opacity:.35;
  pointer-events:none;
}
#woh-the-33rd-degree .d33-begin{width:100%}

/* -- Before-you-buy notice ---------------------------------------- */
#woh-the-33rd-degree .d33-notice{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gutter);
  background:var(--scrim,rgba(4,4,4,.72));
  -webkit-backdrop-filter:blur(14px) saturate(118%);
  backdrop-filter:blur(14px) saturate(118%);
}
#woh-the-33rd-degree .d33-notice[hidden]{display:none}
#woh-the-33rd-degree .d33-notice-panel{
  position:relative;
  width:min(680px,100%);
  max-height:min(84vh,900px);
  overflow-y:auto;
  padding:56px clamp(24px,5vw,56px) 48px;
  /* Solid, not the frosted card: the light stays on the edge only. */
  background:var(--ground-deep);
  border:1px solid var(--line-gold);
  border-radius:2px;
  display:flex;
  flex-direction:column;
  gap:22px;
  box-shadow:0 0 70px var(--gold-12),inset 0 0 48px var(--gold-06);
}
#woh-the-33rd-degree .d33-notice-close{
  position:absolute;
  top:var(--sp-4);
  right:var(--sp-4);
  width:var(--hit-min);
  height:var(--hit-min);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:none;
  border:0;
  cursor:pointer;
  color:var(--text-dim);
  transition:var(--transition-quiet);
}
#woh-the-33rd-degree .d33-notice-close:hover{color:var(--gold)}
#woh-the-33rd-degree .d33-notice-links{
  margin:10px 0 0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-4);
  font-family:var(--font-heading);
  font-weight:var(--w-light);
  font-size:var(--fs-caps-sm);
  letter-spacing:var(--track-caps-wide);
  line-height:var(--lh-caps);
  text-transform:uppercase;
  color:var(--text-dim);
}
#woh-the-33rd-degree .d33-notice-links a{
  color:var(--gold);
  text-decoration:none;
  border-bottom:0;
  transition:var(--transition-quiet);
}
#woh-the-33rd-degree .d33-notice-links a:hover{color:var(--gold-bright)}
#woh-the-33rd-degree .d33-notice-links span{color:var(--cream-22)}

/* Scroll lock while the notice is open. */
body.woh-notice-open{overflow:hidden}

/* -- Breakpoints -------------------------------------------------- */
@media (max-width:820px){
  #woh-the-33rd-degree .d33-teacher-grid{flex-direction:column;gap:var(--sp-8)}
  #woh-the-33rd-degree .d33-portrait{width:min(80%,360px);margin-inline:auto}
  #woh-the-33rd-degree .d33-stage{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  #woh-the-33rd-degree .d33-head{padding-top:120px}
  #woh-the-33rd-degree .d33-section{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}
  #woh-the-33rd-degree .d33-notice-panel{padding:48px 24px 40px}
}