/* ============================================================
   THE CALLIGRAPHY FOUNDATION
   Stationer system. Navy on white, humanist sans, small scale.
   Colour and type hierarchy drawn from the Smythson reference.
   Same markup as v2, different visual system.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* ground */
  --paper:#FFFFFF;
  --panel:#F6F6F6;
  --panel-2:#F0F0F0;
  --blue-pale:#DCE6F2;
  --blue-mid:#C8D8EB;

  /* ink */
  --navy:#041E42;      /* headings, brand, primary ink   */
  --royal:#0B2171;     /* deeper note                    */
  --ink:#111111;       /* body copy                      */
  --ink-2:#4A4A4A;     /* secondary                      */
  --ink-3:#767676;     /* labels, meta                   */
  --blue:#407EC9;      /* links and states               */

  --rule:#E3E3E3;      /* hairline    */
  --rule-2:#CFCFCF;    /* stronger    */

  /* four workshops, drawn from the blue family */
  --w1:#407EC9;
  --w2:#0B2171;
  --w3:#6E93BC;
  --w4:#B6CBE3;
  --wc:var(--navy);

  --wa:#3F7A5A;

  --sans:'Cabin',"Gill Sans MT","Gill Sans",-apple-system,'Segoe UI',sans-serif;
  --serif:'Newsreader',Georgia,serif;   /* pull quotes only */
  --deva:'Tiro Devanagari Hindi',serif;

  --pad:clamp(20px,4vw,48px);
  --sec:clamp(48px,5.6vw,80px);
  --gap:clamp(14px,1.6vw,22px);
  --ease:cubic-bezier(.32,0,.14,1);
  --r:0px;                    /* stationery is not rounded */
  --nav-h:64px;
}

/* ---------- 2. RESET ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;
  font-weight:400;line-height:1.72;letter-spacing:.012em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
::selection{background:var(--blue-mid);color:var(--navy)}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:800px}
.sec{padding:var(--sec) 0}
.sec-t0{padding-top:0}
.alt{background:var(--panel)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 3. TYPE ----------
   Nothing on the reference exceeds 24px. Hierarchy is carried
   by letterspacing, case and colour, not by size.             */
h1,h2,h3,h4{font-family:var(--sans);font-weight:500;color:var(--navy);line-height:1.3}
.t-hero{font-size:clamp(19px,2.1vw,26px);line-height:1.4;text-transform:uppercase;
  letter-spacing:.19em;font-weight:500}
.t-sec{font-size:clamp(15px,1.5vw,18px);text-transform:uppercase;letter-spacing:.17em;
  font-weight:600;line-height:1.5}
.t-card{font-size:15px;letter-spacing:.06em;font-weight:600;line-height:1.4;
  text-transform:capitalize}
.t-sub{font-size:13.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:600}
.it{font-style:italic;text-transform:none;letter-spacing:.02em}
.lead{font-size:15.5px;line-height:1.78;color:var(--ink);max-width:56ch;letter-spacing:.012em}
.body{font-size:14.5px;line-height:1.78;color:var(--ink-2);max-width:62ch}
.body + .body{margin-top:13px}
.label{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);display:inline-block}
.meta{font-size:12.5px;color:var(--ink-3);letter-spacing:.03em}
.dim{color:var(--ink-3)}
.mb-s{margin-bottom:10px}.mb-m{margin-bottom:20px}.mt-m{margin-top:22px}.mt-l{margin-top:38px}

/* section heading, centred rule beneath, as on a card */
.shead{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:clamp(24px,3vw,40px)}
.shead .label{white-space:nowrap}
@media(max-width:620px){.shead{flex-wrap:wrap;gap:8px}}

.grid{display:grid;gap:var(--gap)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.6vw,56px);align-items:start}
.split.wl{grid-template-columns:1.15fr .85fr}
.split.wr{grid-template-columns:.85fr 1.15fr}
@media(max-width:960px){.g4{grid-template-columns:repeat(2,1fr)}
  .g3,.split,.split.wl,.split.wr{grid-template-columns:1fr}}
@media(max-width:560px){.g4,.g2{grid-template-columns:1fr}}

/* ---------- 4. PATTERN, now a scallop ----------
   The reference is a scalloped invitation card. The motif is
   the scallop edge, used as a rule rather than as a field.     */
.pattern{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle at 11px 22px,var(--blue-pale) 10.4px,transparent 10.8px);
  background-size:22px 22px;background-repeat:repeat;opacity:.5}
.pattern-ribbon{-webkit-mask-image:linear-gradient(118deg,transparent 10%,#000 40%,transparent 74%);
  mask-image:linear-gradient(118deg,transparent 10%,#000 40%,transparent 74%)}
/* scalloped divider between sections */
.pattern-band{height:14px;position:relative;overflow:hidden;border:0;
  background-image:radial-gradient(circle at 9px 14px,transparent 8.1px,var(--rule-2) 8.1px 9px,transparent 9.1px);
  background-size:18px 14px;background-repeat:repeat-x}
.pattern-band .pattern{display:none}
@media(max-width:720px){.pattern{background-size:16px 16px;
  background-image:radial-gradient(circle at 8px 16px,var(--blue-pale) 7.6px,transparent 8px)}}

/* ---------- 5. HEADER ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:var(--nav-h)}
.logo{display:flex;align-items:center;gap:11px;padding:8px 0;flex:0 0 auto}
.logo .mark{width:32px;height:32px;flex:0 0 32px;border:1px dashed var(--rule-2);
  display:grid;place-items:center;font-size:7px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;line-height:1.1}
.logo .mark img{width:100%;height:100%;object-fit:contain}
.logo .word{display:flex;flex-direction:column;line-height:1.2}
.logo .word b{font-weight:600;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--navy)}
.logo .word span{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.site-nav{display:flex;gap:clamp(14px,1.8vw,28px);align-items:center}
.site-nav a{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--navy);padding:4px 0;position:relative;white-space:nowrap}
.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--navy);transition:right .4s var(--ease)}
.site-nav a:hover::after,.site-nav a:focus-visible::after,.site-nav a.on::after{right:0}
.hcta{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.burger{display:none;width:36px;height:32px;border:1px solid var(--rule-2);
  align-items:center;justify-content:center}
.burger i{width:14px;height:1px;background:var(--navy);position:relative;display:block}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:14px;height:1px;
  background:var(--navy)}
.burger i::before{top:-4px}.burger i::after{top:4px}
@media(max-width:980px){
  .site-nav{position:fixed;inset:var(--nav-h) 0 auto 0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:4px var(--pad) 18px;
    border-bottom:1px solid var(--rule);transform:translateY(-10px);opacity:0;
    pointer-events:none;transition:.3s var(--ease)}
  .site-nav.open{transform:none;opacity:1;pointer-events:auto}
  .site-nav a{padding:13px 0;border-bottom:1px solid var(--rule);font-size:12px}
  .site-nav a::after{display:none}
  .burger{display:flex}
  .logo .word span{display:none}
}

/* ---------- 6. BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:13px 26px;
  border:1px solid transparent;transition:.35s var(--ease);white-space:nowrap;line-height:1}
.btn-solid{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-solid:hover,.btn-solid:focus-visible{background:#fff;color:var(--navy)}
.btn-line{border-color:var(--navy);color:var(--navy)}
.btn-line:hover,.btn-line:focus-visible{background:var(--navy);color:#fff}
.btn-text{padding:5px 0;color:var(--navy);letter-spacing:.13em;border-bottom:1px solid var(--rule-2)}
.btn-text:hover{border-bottom-color:var(--navy)}
.btn-wa{border-color:var(--wa);color:var(--wa)}
.btn-wa:hover{background:var(--wa);color:#fff}
.btn-wa svg{width:13px;height:13px;fill:currentColor}
.btn-sm{padding:10px 18px;font-size:10px}
.btn-block{width:100%}
.arw{transition:transform .35s var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 7. HERO ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule);background:var(--paper)}
.hero .wrap{position:relative;z-index:1;padding-top:clamp(38px,5vw,66px);
  padding-bottom:clamp(38px,5vw,66px)}
.crumb{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:18px}
.crumb a:hover{color:var(--navy)}
.hero .label{margin-bottom:14px}
.hero .lead{margin-top:16px}
.hero .acts{margin-top:24px}
.hero-facts{display:flex;flex-wrap:wrap;margin-top:26px;padding-top:16px;
  border-top:1px solid var(--rule)}
.hero-facts div{padding-right:24px;margin-right:24px;border-right:1px solid var(--rule)}
.hero-facts div:last-child{border:0;margin:0;padding:0}
.hero-facts b{display:block;font-size:19px;font-weight:500;line-height:1.3;color:var(--navy);
  letter-spacing:.1em}
.hero-facts span{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
@media(max-width:520px){.hero-facts div{border:0;margin:0 20px 8px 0;padding:0}}

/* ---------- 8. CARDS ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.card{position:relative;background:var(--paper);border:1px solid var(--rule);padding:20px 20px 18px;
  display:flex;flex-direction:column;transition:border-color .4s var(--ease),background .4s var(--ease)}
.card::before{content:"";position:absolute;top:-1px;left:-1px;width:34px;height:2px;
  background:var(--wc);transition:width .55s var(--ease)}
.card:hover,.card:focus-within{border-color:var(--navy);background:var(--panel)}
.card:hover::before,.card:focus-within::before{width:calc(100% + 2px)}
.card .idx{font-size:9.5px;letter-spacing:.22em;color:var(--ink-3);margin-bottom:14px}
.card .glyph{font-family:var(--serif);font-style:italic;font-size:38px;line-height:1;
  color:var(--wc);margin-bottom:14px;transition:color .4s var(--ease)}
.card .glyph.deva{font-family:var(--deva);font-style:normal;font-size:32px}
.card h3{margin-bottom:8px}
.card h3 .deva{font-family:var(--deva);font-size:.9em}
.card p{font-size:13.5px;line-height:1.66;color:var(--ink-2);margin-bottom:14px}
.card dl{margin-top:auto;border-top:1px solid var(--rule);padding-top:10px}
.card dl div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.card dt{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.card dd{font-size:12.5px;text-align:right;color:var(--navy)}
.card .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:12px;padding-top:11px;border-top:1px solid var(--rule)}
.card .fee{font-size:14px;font-weight:600;letter-spacing:.08em;color:var(--navy)}
.card .stretch{position:absolute;inset:0;z-index:1}
.card .above{position:relative;z-index:2}
@media(max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}.card{padding:18px}}

/* ---------- 9. STRIP ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.strip > div{border-top:1px solid var(--rule);padding-top:15px}
.strip h4{font-size:13px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;
  margin:8px 0 7px}
.strip p{font-size:13.5px;line-height:1.7;color:var(--ink-2)}
@media(max-width:880px){.strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.strip{grid-template-columns:1fr}}

/* ---------- 10. LEDGER ---------- */
.ledger{border-top:1px solid var(--rule)}
.ledger > div{display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--rule)}
.ledger dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  padding-top:4px;flex:0 0 auto}
.ledger dd{font-size:13.5px;text-align:right;max-width:62%;color:var(--navy)}

/* ---------- 11. ACCORDION ---------- */
.acc details{border-bottom:1px solid var(--rule)}
.acc details:first-child{border-top:1px solid var(--rule)}
.acc summary{list-style:none;cursor:pointer;padding:17px 40px 17px 0;position:relative;
  font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--navy);line-height:1.5;transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--blue)}
.acc summary::after,.acc summary::before{content:"";position:absolute;background:var(--navy);
  transition:.35s var(--ease)}
.acc summary::after{right:2px;top:26px;width:10px;height:1px}
.acc summary::before{right:6.5px;top:21.5px;width:1px;height:10px}
.acc details[open] summary::before{opacity:0;transform:rotate(90deg)}
.acc .ans{padding:0 clamp(0px,6vw,80px) 20px 0;animation:fade .4s var(--ease)}
.acc .ans p{font-size:14.5px;line-height:1.78;color:var(--ink-2)}
.acc .ans p + p{margin-top:10px}
@keyframes fade{from{opacity:0;transform:translateY(-3px)}}

/* ---------- 12. LISTS ---------- */
.ticks{list-style:none}
.ticks li{position:relative;padding:9px 0 9px 24px;font-size:14px;color:var(--ink-2);
  border-bottom:1px solid var(--rule);line-height:1.62}
.ticks li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:1px;
  background:var(--wc)}
.curric{list-style:none;counter-reset:c}
.curric li{counter-increment:c;display:grid;grid-template-columns:30px 1fr;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--rule)}
.curric li::before{content:counter(c,decimal-leading-zero);font-size:9.5px;font-weight:600;
  letter-spacing:.16em;color:var(--wc);padding-top:6px}
.curric b{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--navy);display:block;margin-bottom:3px}
.curric span{font-size:13.5px;color:var(--ink-2);line-height:1.66}

/* ---------- 13. TABLE ---------- */
.tbl-scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;min-width:660px}
.tbl th{text-align:left;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 16px 12px 0;border-bottom:1px solid var(--rule-2)}
.tbl td{padding:15px 16px 15px 0;border-bottom:1px solid var(--rule);vertical-align:top;
  font-size:13.5px;color:var(--ink-2)}
.tbl td:first-child{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--navy)}
.tbl td:last-child,.tbl th:last-child{text-align:right;padding-right:0}
.tbl tr:hover td{background:var(--panel)}

/* ---------- 14. QUOTE ---------- */
.quote{border-left:2px solid var(--blue-mid);padding-left:20px}
.quote blockquote{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;
  color:var(--navy);margin-bottom:12px}
.quote cite{font-style:normal;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}

/* ---------- 15. PLATE ---------- */
.plate{position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:14px}
.plate .pattern{opacity:.45}
.plate span{position:relative;z-index:2;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);max-width:22ch;line-height:2}
body.reveal .plate{border:1px dashed var(--blue)}
.p45{aspect-ratio:4/5}.p11{aspect-ratio:1}.p32{aspect-ratio:3/2}.p169{aspect-ratio:16/9}
figcaption{margin-top:9px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);display:flex;justify-content:space-between;gap:10px}

/* ---------- 16. GALLERY ---------- */
.gfil{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:24px}
.gfil button{border:1px solid var(--rule-2);padding:9px 16px;font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);transition:.35s var(--ease)}
.gfil button:hover{border-color:var(--navy)}
.gfil button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.gwall{columns:4;column-gap:var(--gap)}
.gwall figure{break-inside:avoid;margin-bottom:var(--gap);cursor:zoom-in}
.gwall .plate{transition:.45s var(--ease)}
.gwall figure:hover .plate{border-color:var(--navy)}
@media(max-width:1000px){.gwall{columns:3}}
@media(max-width:700px){.gwall{columns:2}}
@media(max-width:440px){.gwall{columns:1}}
.lightbox{position:fixed;inset:0;background:rgba(4,30,66,.93);z-index:99;display:none;
  align-items:center;justify-content:center;padding:5vw;animation:fade .25s}
.lightbox.on{display:flex}
.lightbox .plate{width:min(72vw,600px);aspect-ratio:4/5;background:#fff}
.lightbox .x{position:absolute;top:16px;right:20px;font-size:24px;color:#fff}

/* ---------- 17. FORM ---------- */
.form{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.form .full{grid-column:1/-1}
.field label{display:block;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:7px;font-weight:600}
.field label b{color:var(--blue);font-weight:600}
.field input,.field select,.field textarea{width:100%;background:var(--paper);
  border:1px solid var(--rule-2);color:var(--ink);font-family:var(--sans);font-size:14.5px;
  padding:11px 13px;transition:.3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--navy)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--navy) 50%),
                   linear-gradient(135deg,var(--navy) 50%,transparent 50%);
  background-position:calc(100% - 16px) 20px,calc(100% - 11px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field textarea{resize:vertical;min-height:80px}
::placeholder{color:#A6A6A6}
.consent{display:flex;gap:11px;align-items:flex-start}
.consent input{width:15px;height:15px;flex:0 0 15px;margin-top:4px;accent-color:var(--navy)}
.consent label{font-size:13px;color:var(--ink-2);line-height:1.6;letter-spacing:0;
  text-transform:none;font-weight:400;margin:0}
.thanks{display:none}.thanks.on{display:block}
@media(max-width:640px){.form{grid-template-columns:1fr}}

/* ---------- 18. CTA ---------- */
.cta{position:relative;overflow:hidden;background:var(--navy);color:#fff;border:0}
.cta .wrap{position:relative;z-index:1;padding-top:var(--sec);padding-bottom:var(--sec);
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta h2{color:#fff}
.cta .lead{color:#C9D6E6}
.cta .pattern{opacity:.09}
.cta .btn-solid{background:#fff;color:var(--navy);border-color:#fff}
.cta .btn-solid:hover{background:transparent;color:#fff}
.cta .btn-wa{border-color:#8FB3A0;color:#CFE0D6}
.cta .btn-wa:hover{background:#fff;color:var(--navy);border-color:#fff}
@media(max-width:720px){.cta .wrap{flex-direction:column;align-items:flex-start}}

/* ---------- 19. FOOTER ---------- */
.site-footer{position:relative;overflow:hidden;background:var(--panel);
  border-top:1px solid var(--rule)}
.site-footer .wrap{position:relative;z-index:1;padding-top:38px;padding-bottom:22px}
.site-footer .pattern{display:none}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px;padding-bottom:24px;
  border-bottom:1px solid var(--rule-2)}
.fgrid h5{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;margin-bottom:11px}
.fgrid a{display:block;font-size:13.5px;color:var(--ink-2);padding:3px 0}
.fgrid a:hover{color:var(--navy)}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:14px;
  font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}
  .fgrid > :first-child{grid-column:1/-1}}

/* ---------- 20. FLOAT + STICKY ---------- */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;
  border-radius:50%;background:#fff;border:1px solid var(--rule-2);display:grid;place-items:center;
  transition:.35s var(--ease);box-shadow:0 2px 14px rgba(4,30,66,.08)}
.wa-float:hover{background:var(--wa);border-color:var(--wa)}
.wa-float svg{width:19px;height:19px;fill:var(--wa)}
.wa-float:hover svg{fill:#fff}
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:59;display:none;gap:8px;padding:9px;
  background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-top:1px solid var(--rule-2)}
.stickybar .btn{flex:1}
@media(max-width:760px){
  body.has-sticky .stickybar{display:flex}
  body.has-sticky{padding-bottom:66px}
  body.has-sticky .wa-float{bottom:74px}
  body.has-sticky .tools{bottom:74px}
}
.tools{position:fixed;left:18px;bottom:18px;z-index:60}
.tools button{font-size:9px;letter-spacing:.18em;text-transform:uppercase;background:#fff;
  border:1px solid var(--rule-2);color:var(--ink-3);padding:10px 14px;transition:.3s var(--ease)}
.tools button:hover{border-color:var(--navy);color:var(--navy)}
body.reveal .tools button{background:var(--navy);color:#fff;border-color:var(--navy)}
.ph{border-bottom:1px dashed var(--blue);color:var(--blue)}
body.reveal .ph{background:var(--blue-pale)}

/* ---------- 22. WORKSHOP THUMBNAIL ----------
   Replaces the decorative glyph that previously sat beside the
   course number. Small on purpose, so it does not become a card. */
.card .thumb{width:100%;max-width:120px;aspect-ratio:4/5;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--rule);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:8px;
  transition:border-color .4s var(--ease)}
.card .thumb img{width:100%;height:100%;object-fit:cover;object-position:center}
.card .thumb span{font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  line-height:1.8;max-width:16ch}
.card:hover .thumb{border-color:var(--navy)}
.card .thumb::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;
  background:var(--wc)}
body.reveal .card .thumb{border:1px dashed var(--blue)}
@media(max-width:560px){
  .card{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 14px}
  .card .thumb{max-width:76px;flex:0 0 76px;margin-bottom:12px;order:2}
  .card .idx{order:1;flex:1 1 100%}
  .card h3{order:3;flex:1 1 calc(100% - 90px)}
  .card p{order:4;flex:1 1 100%}
  .card dl,.card .foot{order:5;flex:1 1 100%}
}

/* ---------- 23. PROCESS FLOW ----------
   Used only where a sequence genuinely reads better than prose. */
.flow{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule)}
.flow > li{list-style:none;flex:1 1 0;min-width:120px;padding:16px 18px 16px 0;position:relative;
  display:flex;flex-direction:column;gap:6px}
.flow > li + li{padding-left:18px;border-left:1px solid var(--rule)}
.flow .n{font-size:9px;font-weight:600;letter-spacing:.2em;color:var(--blue)}
.flow b{font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--navy);line-height:1.45}
.flow span{font-size:12px;line-height:1.55;color:var(--ink-2)}
.flow > li + li::before{content:"";position:absolute;left:-4px;top:26px;width:7px;height:7px;
  border-top:1px solid var(--rule-2);border-right:1px solid var(--rule-2);
  transform:rotate(45deg);background:var(--paper)}
.flow.on-panel > li + li::before{background:var(--panel)}
@media(max-width:820px){
  .flow{flex-direction:column;border-bottom:0}
  .flow > li,.flow > li + li{flex:1 1 auto;padding:13px 0 13px 22px;border-left:1px solid var(--rule);
    margin-left:3px}
  .flow > li + li::before{left:-4px;top:19px;transform:rotate(135deg)}
}

/* ---------- 24. WHATSAPP COURSE PICKER ----------
   Four buttons, each opens WhatsApp already naming the course.   */
.wa-picker{border:1px solid var(--rule-2);padding:18px}
.wa-picker h3{font-size:12px;text-transform:uppercase;letter-spacing:.16em;font-weight:600;
  margin-bottom:5px}
.wa-picker p{font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.wa-picker ol{list-style:none;counter-reset:w;display:grid;gap:7px}
.wa-picker li{counter-increment:w}
.wa-picker a{display:flex;align-items:center;gap:11px;border:1px solid var(--rule-2);
  padding:11px 13px;font-size:13px;color:var(--navy);transition:.3s var(--ease)}
.wa-picker a::before{content:counter(w,decimal-leading-zero);font-size:9px;font-weight:600;
  letter-spacing:.14em;color:var(--ink-3);flex:0 0 auto}
.wa-picker a:hover,.wa-picker a:focus-visible{border-color:var(--wa);color:var(--wa)}
.wa-picker a svg{width:13px;height:13px;fill:var(--wa);margin-left:auto;flex:0 0 13px}

/* ---------- 25. REAL IMAGES ----------
   Applied when a slot holds a photograph rather than a placeholder. */
.plate.has-img{padding:0;border-color:var(--rule-2)}
.plate.has-img .pattern{display:none}
.plate img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.card .thumb.has-img{padding:0}
.card .thumb.has-img span{display:none}
.logo .mark.has-img{border:0;padding:0}
.logo .mark.has-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
body.reveal .plate.has-img,
body.reveal .card .thumb.has-img{outline:0;border-color:var(--rule-2)}

/* ---------- 26. FLOW WITH LINE ICONS ---------- */
.flow.icons > li{padding-top:18px}
.flow .ico{display:block;width:24px;height:24px;margin-bottom:3px}
.flow .ico svg{width:100%;height:100%;fill:none;stroke:var(--navy);
  stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 27. PROGRESSION LADDER ---------- */
.ladder{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.ladder b{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--navy);border:1px solid var(--rule-2);padding:9px 13px;white-space:nowrap}
.ladder i{font-style:normal;color:var(--blue);font-size:12px}

/* ============================================================
   28. THE IMAGE SYSTEM
   Three formats, one ratio, one frame. This block deliberately
   overrides the ad hoc ratios used earlier in this file.

   A  PLATE     every artwork. 4:5 frame, artwork contained,
                never cropped. Mount shows where the artwork
                is a different shape. This is the default.
   B  FEATURE   a plate spanning two columns. One per page,
                maximum. Same ratio, more room.
   C  PORTRAIT  people and teaching photographs only. Same
                frame, but cropped to fill, because a face
                has no composition to preserve.
   ============================================================ */
:root{
  --plate:4/5;            /* the only artwork ratio on the site */
  --mount:#F2F2F0;        /* what shows around a contained work */
  --plate-gap:clamp(12px,1.4vw,20px);
}

/* every legacy ratio collapses to the one plate ratio */
.p45,.p11,.p32,.p169{aspect-ratio:var(--plate)}

/* ---- A. the plate ---- */
.plate{background:var(--mount);border:1px solid var(--rule);
  aspect-ratio:var(--plate);padding:0;overflow:hidden}
.plate img{width:100%;height:100%;object-fit:contain;object-position:center;
  display:block;background:var(--mount)}
/* ---- C. portraits and teaching photographs ---- */
.plate.crop img{object-fit:cover}

/* one grid for every set of plates, gallery and course alike */
.plates{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--plate-gap)}
.plates-3{grid-template-columns:repeat(3,1fr)}
/* ---- B. the feature ---- */
.plates .feature{grid-column:span 2}
@media(max-width:900px){.plates,.plates-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.plates,.plates-3{grid-template-columns:repeat(2,1fr)}}

/* the gallery wall becomes the same grid, not masonry.
   two columns on mobile keeps each image small and the page short. */
.gwall{columns:auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--plate-gap)}
.gwall figure{margin-bottom:0;break-inside:auto}
.gwall figure:hover .plate{transform:none;border-color:var(--navy)}
@media(max-width:900px){.gwall{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.gwall{grid-template-columns:repeat(2,1fr)}}

/* course student work uses the same grid as the gallery */
.grid.g4 figure .plate{aspect-ratio:var(--plate)}
@media(max-width:900px){.grid.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid.g4{grid-template-columns:repeat(2,1fr)}}

/* captions sit on one line, quiet, never competing */
figcaption{font-size:9px;letter-spacing:.16em;margin-top:7px}

/* the thumbnail is a small plate, same ratio, same frame */
.card .thumb{aspect-ratio:var(--plate);max-width:104px;background:var(--mount);
  border:1px solid var(--rule)}
.card .thumb img{object-fit:contain}
.card .thumb::after{display:none}

/* lightbox holds the plate ratio and contains the work */
.lightbox .plate{width:min(76vw,620px);aspect-ratio:var(--plate);background:var(--mount)}
.lightbox .plate img{object-fit:contain}

/* ============================================================
   29. LESS CARD, MORE PAGE
   The four workshop cards were filled, bordered boxes that
   lifted on hover. They now read as editorial entries divided
   by a hairline, with the accent rule as the only ornament.
   ============================================================ */
.card{background:transparent;border:0;border-top:1px solid var(--rule);
  padding:18px 0 16px;transition:none}
.card::before{top:-1px;height:2px;width:100%;background:var(--rule)}
.card::after{content:"";position:absolute;top:-1px;left:0;height:2px;width:40px;
  background:var(--wc);transition:width .5s var(--ease)}
.card:hover,.card:focus-within{background:transparent;border-color:var(--rule);
  transform:none}
.card:hover::before,.card:focus-within::before{width:100%}
.card:hover::after,.card:focus-within::after{width:100%}
.card dl,.card .foot{border-top:1px solid var(--rule)}
.card:hover .thumb{border-color:var(--navy)}
.cards{gap:clamp(18px,2.4vw,34px)}

/* ============================================================
   30. MOBILE RESTRAINT
   No image on a phone should be taller than a thumb's reach.
   ============================================================ */
@media(max-width:760px){
  .hero figure .plate,
  .split figure .plate{max-height:64vh}
  .plate img{max-height:64vh}
  .card .thumb{max-width:84px}
  figcaption{font-size:8.5px}
}
@media(max-width:560px){
  .card{padding-top:16px}
  .card .thumb{max-width:76px}
}

/* ============================================================
   31. COLOUR SYSTEM — WARM NEUTRAL
   A token swap, not a repaint. Every rule above reads these
   variables, so the palette changes once and applies site wide.

   HIERARCHY, in order of how much of the page each occupies:
     White        dominant ground
     Linen        alternating sections, footer, form
     Almond       the highlight. rules, marks, hover, focus
     Deep Umber   all typography, borders, the one dark band
     Terracotta   micro accents only. required marks, active states
     Sage         rarer still. WhatsApp, one course accent
   ============================================================ */
:root{
  /* ---- grounds ---- */
  --paper:#FFFFFF;         /* dominant */
  --panel:#E8E1D5;         /* linen, alternating sections and footer */
  --panel-2:#F4F0E8;       /* linen at half, for quieter blocks      */
  --mount:#F4F0E8;         /* what shows around a contained artwork  */

  /* ---- the palette, as supplied ---- */
  --linen:#E8E1D5;
  --almond:#CEB58E;
  --umber:#4C362D;
  --terracotta:#A46447;
  --sage:#88937B;

  /* ---- typography, all derived from umber ---- */
  --navy:#4C362D;          /* headings, nav, borders. 11.3:1 on white */
  --ink:#4C362D;           /* body                                    */
  --ink-2:#6B5248;         /* secondary. 7.1:1                        */
  --ink-3:#856B5C;         /* labels and meta. 4.9:1                  */

  /* ---- accents ---- */
  --blue:#A46447;          /* the interactive accent, now terracotta  */
  --royal:#A46447;
  --blue-pale:#CEB58E;     /* the scallop motif                       */
  --blue-mid:#E8E1D5;      /* selection                               */
  --sage-deep:#6E7A62;     /* sage darkened until it reads as text    */
  --wa:#6E7A62;

  /* ---- rules, warmed ---- */
  --rule:#E6DFD4;
  --rule-2:#CBBEA9;

  /* ---- four course marks. Small rules and ticks only.
         Never a background, never a card colour. ---- */
  --w1:#CEB58E;            /* Brush Pen   · almond     */
  --w2:#A46447;            /* Devanagari  · terracotta */
  --w3:#4C362D;            /* Copperplate · umber      */
  --w4:#88937B;            /* Flourishing · sage       */
  --wc:var(--umber);
}

/* ---- raw colours left over from the navy build ---- */
::placeholder{color:#A99B8C}
.site-header{background:rgba(255,255,255,.94)}
.lightbox{background:rgba(76,54,45,.94)}
.wa-float{box-shadow:0 2px 14px rgba(76,54,45,.10)}
.cta .lead{color:#D8CCBE}
.cta .btn-wa{border-color:#9AA68C;color:#D9DFD2}
.field select option{background:#FFFFFF}

/* ---- almond is the highlight. These are the only places it
        carries weight, and all of them are small. ---- */
.btn-solid:hover,.btn-solid:focus-visible{background:var(--almond);
  border-color:var(--almond);color:var(--umber)}
.tbl tr:hover td{background:var(--panel-2)}
.gfil button:hover{border-color:var(--almond)}
.shead::after{background:var(--almond)}
.quote{border-left-color:var(--almond)}
.eyebrow::before{background:var(--almond)}
:focus-visible{outline-color:var(--terracotta)}
::selection{background:var(--almond);color:var(--umber)}

/* ---- terracotta, micro only ---- */
.field label b{color:var(--terracotta)}
.flow .n{color:var(--terracotta)}
.ladder i{color:var(--terracotta)}
.ph{border-bottom-color:var(--terracotta);color:var(--terracotta)}
body.reveal .ph{background:rgba(164,100,71,.12)}
.acc summary:hover{color:var(--terracotta)}
.site-nav a::after{background:var(--terracotta)}

/* the accordion marker is umber at rest, terracotta on open */
.acc summary::after,.acc summary::before{background:var(--umber)}
.acc details[open] summary::after{background:var(--terracotta)}

/* numerals stay readable rather than taking the course colour */
.curric li::before{color:var(--ink-3)}
.card .idx{color:var(--ink-3)}

/* the scallop motif, warmed and kept faint */
.pattern{opacity:.42}
.pattern-band{background-image:radial-gradient(circle at 9px 14px,
  transparent 8.1px,var(--rule-2) 8.1px 9px,transparent 9.1px)}

/* ---- the one dark band on each page ---- */
.cta{background:var(--umber)}
.cta .btn-solid{background:#FFFFFF;color:var(--umber);border-color:#FFFFFF}
.cta .btn-solid:hover{background:var(--almond);border-color:var(--almond);color:var(--umber)}

/* ---- form, calm and warm rather than boxed in ---- */
.field input,.field select,.field textarea{background:#FFFFFF;border-color:var(--rule-2)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--almond);
  box-shadow:0 1px 0 0 var(--almond)}
.consent input{accent-color:var(--umber)}

/* ---- artwork is never tinted. The frame is warm, the work is not. ---- */
.plate img{background:transparent;mix-blend-mode:normal;filter:none}

/* ============================================================
   32. FINAL REFINEMENTS
   Logo scale, the wordmark, and the WhatsApp icon. Nothing else.
   ============================================================ */
:root{--nav-h:70px}

/* ---- the mark, larger but still contained by the header ---- */
.logo{gap:13px}
.logo .mark{width:44px;height:44px;flex:0 0 44px}
@media(max-width:560px){.logo .mark{width:38px;height:38px;flex:0 0 38px}}

/* ---- the wordmark. The display face in italic, already loaded
        for pull quotes, so no new font is added. Legible at 19px
        rather than decorative. Colour is set in section 33. ---- */
.logo .word b{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:19px;letter-spacing:0;text-transform:none;color:var(--umber);
  line-height:1.15}
.logo .word span{font-size:8px;letter-spacing:.2em;margin-top:1px}
@media(max-width:560px){.logo .word b{font-size:17px}}

/* ---- WhatsApp: the icon carries the green, the button does not ---- */
.btn-wa svg,.wa-float svg{fill:#25D366}
.btn-wa:hover svg,.btn-wa:focus-visible svg,.wa-float:hover svg{fill:#FFFFFF}
.cta .btn-wa svg{fill:#25D366}

/* ---------- 21. MOTION ---------- */
.rv{opacity:0;transform:translateY(9px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.06s}.d2{transition-delay:.12s}
.d3{transition-delay:.18s}.d4{transition-delay:.24s}
.pattern-drift{animation:drift 60s linear infinite}
@keyframes drift{to{background-position:22px 22px}}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .pattern-drift{animation:none}
}

/* ============================================================
   33. COLOUR AND TYPE — STUDIO BLOCK
   A token swap only. No size, weight, line height, letter
   spacing, padding, margin, dimension or layout rule is
   touched by this block. Every selector below changes a
   colour or a font family and nothing else.

   Core six      Paper #F3EBDD · Forest #263B32 · Ink #252624
                 Terracotta #B65C43 · Sand #D8CCBA · Gold #B99552
   Derived       Cream · Paper 2 · Terracotta Text · Terracotta
                 Deep · Forest 2 · Ink Soft · Ink Faint
   ============================================================ */
:root{
  /* ---- the kit, verbatim ---- */
  --kit-paper:#F3EBDD;
  --kit-forest:#263B32;
  --kit-ink:#252624;
  --kit-terracotta:#B65C43;
  --kit-sand:#D8CCBA;
  --kit-gold:#B99552;
  --cream:#FFF6EC;
  --paper-2:#EDE3D2;
  --terracotta-text:#9A4631;
  --terracotta-deep:#A8503A;
  --forest-2:#1E2F28;
  --ink-soft:#55574F;
  --ink-faint:#86867C;

  /* ---- grounds ---- */
  --paper:#F3EBDD;         /* dominant ground            */
  --panel:#EDE3D2;         /* alternating sections, footer */
  --panel-2:#EDE3D2;       /* quieter blocks             */
  --mount:#EDE3D2;         /* image wells                */

  /* ---- type ---- */
  --navy:#252624;          /* headings, nav, brand. 12.85:1 on Paper */
  --ink:#252624;           /* primary body                           */
  --ink-2:#55574F;         /* secondary body. 6.52:1                 */
  --ink-3:#86867C;         /* labels and meta. 3.10:1, see note      */

  /* ---- accents ---- */
  --blue:#9A4631;          /* interactive accent as small type. 5.38:1 */
  --royal:#9A4631;
  --blue-pale:#D8CCBA;     /* the scallop motif  */
  --blue-mid:#EDE3D2;      /* selection          */
  --wa:#263B32;            /* WhatsApp button, Forest */

  /* ---- rules. Sand draws every division ---- */
  --rule:#D8CCBA;
  --rule-2:#D8CCBA;

  /* ---- the four course marks ---- */
  --w1:#D8CCBA;            /* Brush Pen   · Sand       */
  --w2:#B99552;            /* Devanagari  · Gold       */
  --w3:#B65C43;            /* Copperplate · Terracotta */
  --w4:#263B32;            /* Flourishing · Forest     */
  --wc:var(--kit-ink);

  /* ---- type families. Families only. ----
     Inter carries every piece of information. Cormorant carries
     anything that is an image made of letters. Both slots keep
     the sizes, weights, tracking and line heights already set. */
  --sans:'Inter',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Cormorant',Georgia,serif;
}

/* ---- raw colours carried over from earlier builds ---- */
::placeholder{color:var(--ink-faint)}
.site-header{background:rgba(243,235,221,.94)}
.lightbox{background:rgba(37,38,36,.94)}
.wa-float{box-shadow:0 2px 14px rgba(37,38,36,.10)}
.field select option{background:var(--kit-paper)}

/* ---- Terracotta is the one accent, and it appears small ---- */
.btn-solid{background:var(--kit-ink);color:var(--kit-paper);border-color:var(--kit-ink)}
.btn-solid:hover,.btn-solid:focus-visible{background:var(--kit-terracotta);
  border-color:var(--kit-terracotta);color:var(--cream)}
.btn-line{border-color:var(--kit-ink);color:var(--kit-ink)}
.btn-line:hover,.btn-line:focus-visible{background:var(--kit-ink);color:var(--kit-paper)}
.tbl tr:hover td{background:var(--paper-2)}
.gfil button:hover{border-color:var(--kit-ink)}
.gfil button.on{background:var(--kit-ink);border-color:var(--kit-ink);color:var(--kit-paper)}
.quote{border-left-color:var(--kit-terracotta)}
:focus-visible{outline-color:var(--kit-terracotta)}
::selection{background:var(--kit-sand);color:var(--kit-ink)}
.field label b{color:var(--terracotta-text)}
.flow .n{color:var(--terracotta-text)}
.ladder i{color:var(--terracotta-text)}
.ph{border-bottom-color:var(--terracotta-text);color:var(--terracotta-text)}
body.reveal .ph{background:rgba(182,92,67,.12)}
.acc summary:hover{color:var(--terracotta-text)}
.site-nav a::after{background:var(--kit-terracotta)}
.acc summary::after,.acc summary::before{background:var(--kit-ink)}
.acc details[open] summary::after{background:var(--kit-terracotta)}
.curric li::before{color:var(--ink-faint)}
.card .idx{color:var(--ink-faint)}

/* ---- the one dark band. Terracotta Deep, because it carries
        a paragraph, which clears 5.12:1 against Cream. ---- */
.cta{background:var(--terracotta-deep)}
.cta h2{color:var(--cream)}
.cta .lead{color:var(--cream)}   /* full Cream: 5.07:1. At 88% it fell to 4.33:1 */
.cta .btn-solid{background:var(--cream);color:var(--terracotta-deep);border-color:var(--cream)}
.cta .btn-solid:hover{background:transparent;color:var(--cream);border-color:var(--cream)}
.cta .btn-wa{border-color:rgba(255,246,236,.55);color:var(--cream)}
.cta .btn-wa:hover{background:var(--cream);color:var(--terracotta-deep);border-color:var(--cream)}

/* ---- form ---- */
.field input,.field select,.field textarea{background:var(--kit-paper);border-color:var(--kit-sand)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--kit-terracotta);
  box-shadow:0 1px 0 0 var(--kit-terracotta)}
.consent input{accent-color:var(--kit-ink)}

/* ---- Gold is punctuation. A numeral, a strip, a stop. ---- */
.logo .word b i,.fbot .gold{color:var(--kit-gold)}

/* ---- artwork is never tinted ---- */
.plate img{background:transparent;mix-blend-mode:normal;filter:none}
.logo .mark.has-img img{mix-blend-mode:multiply}

/* ---- WhatsApp icon keeps its own green, as approved ---- */
.btn-wa svg,.wa-float svg{fill:#25D366}
.btn-wa:hover svg,.btn-wa:focus-visible svg,.wa-float:hover svg{fill:#FFFFFF}
.cta .btn-wa svg{fill:#25D366}

/* ---- three marks that still carried the old palette. Colour
        only. The short rule under a section head and the dash
        before a kicker are divisions, so Sand draws them. The
        wordmark takes Ink. Its family, size, weight, tracking
        and line height are untouched. ---- */
.shead::after{background:var(--kit-sand)}
.eyebrow::before{background:var(--kit-sand)}
.logo .word b{color:var(--kit-ink)}