/* Self-hosted (SIL Open Font License 1.1), latin + latin-ext subsets from Google Fonts. */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url("/assets/fonts/fraunces-latin-ext-var.f120089b.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:500 700; font-display:swap;
  src:url("/assets/fonts/fraunces-latin-var.48282a41.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-latin-ext-var.ae1d854f.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Sans"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/assets/fonts/ibm-plex-sans-latin-var.056e4e24.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --ink:#171512;
  --field:#20402F;
  --field-deep:#16301F;
  --paper:#F3F3EF;
  --paper-2:#E7E8E1;
  --stone:#6B6459;
  --wheat:#B5842A;
  --clay:#8C4A2F;
  --rule:rgba(23,21,18,.15);
  --card:#F9F9F5;
  --on-dark:#F2EFE7;
  --wheat-text:#8F661E;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#EDE9E0; --field:#A8C9AE; --field-deep:#16301F; --paper:#121310; --paper-2:#1B1D18;
    --stone:#A09889; --wheat:#D9A94A; --clay:#C4714C; --rule:rgba(237,233,224,.17); --card:#1A1C17; --on-dark:#F2EFE7; --wheat-text:#D9A94A;
  }
}
:root[data-theme="dark"]{
  --ink:#EDE9E0; --field:#A8C9AE; --field-deep:#16301F; --paper:#121310; --paper-2:#1B1D18;
  --stone:#A09889; --wheat:#D9A94A; --clay:#C4714C; --rule:rgba(237,233,224,.17); --card:#1A1C17; --on-dark:#F2EFE7; --wheat-text:#D9A94A;
}

*{box-sizing:border-box}
img{max-width:100%; height:auto}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.6; letter-spacing:.005em;
}
.wrap{max-width:820px; margin:0 auto; padding:0 28px}
@media (max-width:640px){ .wrap{padding:0 20px} body{font-size:16px} }

h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif; font-weight:600; line-height:1.08; margin:0}
p{margin:0 0 1.05em; max-width:62ch}
a{color:inherit}

/* masthead */
.mast{padding:26px 0 0; display:flex; align-items:baseline; gap:12px}
.mast .lg{font-family:Fraunces,Georgia,serif; font-weight:600; font-size:15px; letter-spacing:.01em}
.mast .loc{font-size:13px; color:var(--stone)}

/* hero */
.herowrap{background:var(--field-deep); color:var(--on-dark); margin:22px -28px 0; padding:0 28px;
  background-image:repeating-linear-gradient(0deg, rgba(242,239,231,.045) 0 1px, transparent 1px 34px);}
@media (max-width:640px){ .herowrap{margin:18px -20px 0; padding:0 20px} }
.hero{padding:56px 0 54px}
.hero h1{font-size:clamp(34px,6.6vw,62px); letter-spacing:-.022em; max-width:15ch; color:var(--on-dark)}
.hero h1 .soft{color:#A8C9AE}
.hero .lede{margin-top:26px; font-size:clamp(17px,2.1vw,20px); color:rgba(242,239,231,.72); max-width:52ch}
.herowrap .fact b{color:var(--on-dark)}
.herowrap .fact span{color:rgba(242,239,231,.6)}
.herowrap .fact{border-right-color:rgba(242,239,231,.22)}
.herowrap .btn{background:var(--wheat); border-color:var(--wheat); color:#171512}
.herowrap .btn:hover{background:#C9962F; border-color:#C9962F}
.herowrap .btn-note{color:rgba(242,239,231,.6)}
.photo{width:100%; display:block}
figure{margin:0 0 30px}
figcaption{font-size:13.5px; color:var(--stone); margin-top:10px; max-width:58ch}
.bleed{margin:0 -28px 34px}
@media (max-width:640px){ .bleed{margin:0 -20px 28px} }
.bleed img{width:100%; display:block}
.heroimg{margin:38px -28px -54px; position:relative}
@media (max-width:640px){ .heroimg{margin:32px -20px -54px} }
.heroimg img{width:100%; display:block; aspect-ratio:1260/560; object-fit:cover; object-position:center 55%}
.teachcard img{width:100%; display:block; aspect-ratio:1/1; object-fit:cover; object-position:center 18%; margin-bottom:14px}
.teachcard .ph{width:100%; aspect-ratio:4/5; background:var(--paper-2); border:1px dashed var(--rule);
  display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:14px;
  text-align:center; padding:20px; margin-bottom:14px}
.facts{margin-top:30px; display:flex; flex-wrap:wrap; gap:0}
.fact{padding-right:26px; margin-right:26px; border-right:1px solid var(--rule)}
.fact:last-child{border-right:0; padding-right:0; margin-right:0}
.fact b{display:block; font-family:Fraunces,Georgia,serif; font-size:19px; font-weight:600}
.fact span{font-size:13.5px; color:var(--stone)}
@media (max-width:560px){
  .facts{flex-direction:column; gap:14px}
  .fact{border-right:0; padding-right:0; margin-right:0}
}

.btn{
  display:inline-block; margin-top:34px; background:var(--field); color:var(--paper);
  font-weight:600; font-size:17px; padding:15px 30px; border-radius:2px; text-decoration:none;
  border:1px solid var(--field);
}
.btn:hover{background:var(--ink); border-color:var(--ink)}
.btn:focus-visible{outline:3px solid var(--wheat); outline-offset:3px}
.btn-note{display:block; margin-top:12px; font-size:14px; color:var(--stone)}

section{padding:48px 0; border-bottom:1px solid var(--rule)}
section.tint{background:var(--paper-2); border-bottom:0; margin:0 -28px; padding:48px 28px}
@media (max-width:640px){ section.tint{margin:0 -20px; padding:44px 20px} }
section h2{font-size:clamp(25px,3.6vw,34px); letter-spacing:-.015em; margin-bottom:20px; max-width:20ch}

/* ledger */
.ledger{margin-top:8px; border-top:2px solid var(--ink)}
.row{display:grid; grid-template-columns:54px 1fr; gap:0; border-bottom:1px solid var(--rule); padding:20px 0}
.row .n{font-family:Fraunces,Georgia,serif; font-size:26px; font-weight:500; color:var(--stone); line-height:1.1}
.row .t{font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:600; margin-bottom:5px}
.row .d{color:var(--stone); font-size:15.5px; max-width:56ch; margin:0}
.row .w{font-size:13px; color:var(--stone); margin-top:8px}
@media (max-width:560px){ .row{grid-template-columns:38px 1fr} .row .n{font-size:20px} }

ul.plain{list-style:none; padding:0; margin:0 0 1.1em}
ul.plain li{padding:11px 0 11px 22px; border-bottom:1px solid var(--rule); position:relative; max-width:62ch}
ul.plain li:before{content:""; position:absolute; left:0; top:20px; width:9px; height:1px; background:var(--wheat)}
ul.plain li:last-child{border-bottom:0}

.panel{background:var(--card); border:1px solid var(--rule); padding:26px 26px 18px; margin-top:6px}

.price{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:6px}
.price .now{font-family:Fraunces,Georgia,serif; font-size:clamp(38px,7vw,54px); font-weight:600; line-height:1}
.price .was{font-size:17px; color:var(--stone); text-decoration:line-through; padding-bottom:8px}
.price .tag{font-size:14px; color:var(--wheat-text); padding-bottom:9px; font-weight:600}

.teach{display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:4px}
@media (max-width:640px){ .teach{grid-template-columns:1fr; gap:26px} }
.teach h3{font-size:20px; margin-bottom:7px}
.teach p{font-size:15.5px; color:var(--stone)}

.quotes{display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-top:4px}
@media (max-width:680px){ .quotes{grid-template-columns:1fr; gap:24px} }
blockquote{margin:0; border-left:3px solid var(--wheat); padding-left:18px}
blockquote p{font-family:Fraunces,Georgia,serif; font-size:16px; line-height:1.5; margin:0 0 12px}
blockquote cite{font-style:normal; font-size:13.5px; color:var(--stone)}
.pending{border-left:3px solid var(--rule); padding-left:18px; color:var(--stone); font-size:14.5px}

details{border-bottom:1px solid var(--rule); padding:15px 0}
details:last-of-type{border-bottom:0}
summary{cursor:pointer; font-weight:600; font-size:16.5px; list-style:none}
summary::-webkit-details-marker{display:none}
summary:before{content:"+"; color:var(--wheat); font-weight:600; margin-right:11px}
details[open] summary:before{content:"–"}
details p{margin:11px 0 3px; color:var(--stone); font-size:15.5px}
summary:focus-visible{outline:2px solid var(--wheat); outline-offset:3px}

.close{padding:52px 0 70px; display:grid; grid-template-columns:1fr 330px; gap:40px; align-items:center}
.close h2{max-width:17ch}
.close .me img{width:100%; display:block; aspect-ratio:4/3; object-fit:cover; object-position:58% 50%}
.close .me span{display:block; font-size:13.5px; color:var(--stone); margin-top:9px}
@media (max-width:720px){ .close{grid-template-columns:1fr; gap:26px} .close .me{max-width:420px} }
footer{padding:26px 0 44px; font-size:14px; color:var(--stone); border-top:1px solid var(--rule)}

/* formerly inline styles (moved out so the CSP can forbid inline styles) */
.section-first{padding-top:82px}
.h-clay{color:var(--clay)}
.price-note{margin:-2px 0 14px; font-size:14px; color:var(--stone)}

/* 404 */
.nf{padding:80px 0 90px}
.nf h1{font-size:clamp(32px,6vw,52px); letter-spacing:-.02em; margin-bottom:18px}
