/* FRAMElogic Academy: the graphics layer.
   Loaded after site.css on every page. It holds the drawn and photographic pieces:
   the classroom window on /saturdays, the gallery prints, the engraved marks, the
   timetable, the seat ticket, the shop plates and the quieter icon roundels.

   Most rules are scoped to <main class="engraved">, so a page opts in with one class
   and nothing changes on a page that has not. A few pieces (the shop plate, the
   classroom window, the prints) are self contained and work anywhere. */

:root{
  --hair-d:rgba(255,255,255,.12);          /* hairline on the dark ivy */
  --hair-l:rgba(29,41,32,.14);             /* hairline on ivory paper */
  --brass-line:rgba(201,154,91,.55);
  --brass-grad:linear-gradient(135deg,#F2D9A8 0%,#C99A5B 46%,#8A6224 100%);
  --deep:#0D1510;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =====================================================================
   The live classroom (Saturdays hero)
   ===================================================================== */
.room{position:relative;margin:0;width:100%;max-width:580px;justify-self:end}
/* on wide screens the window bleeds a little past the text column, into the margin */
@media (min-width:1061px){
  .hero-room .wrap{gap:clamp(40px,3.6vw,56px)}
  .hero-room .room{--bleed:clamp(0px,calc((100vw - 1200px) / 2),72px);width:calc(100% + var(--bleed));max-width:none;margin-right:calc(var(--bleed) * -1)}
}
.room-win{container-type:inline-size;position:relative;border-radius:12px;overflow:hidden;background:var(--deep);outline:1px solid rgba(201,154,91,.26);outline-offset:10px;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 60px 100px -50px rgba(0,0,0,.9),0 28px 50px -30px rgba(0,0,0,.65)}

.rm-bar{display:flex;align-items:center;gap:clamp(6px,2cqi,12px);height:clamp(28px,7.4cqi,40px);padding:0 clamp(9px,3cqi,16px);
  background:linear-gradient(180deg,#1B2920,#131D17);border-bottom:1px solid rgba(255,255,255,.07);
  font:600 clamp(8px,2.05cqi,11px)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.66);white-space:nowrap}
.rm-live{display:inline-flex;align-items:center;gap:clamp(4px,1.1cqi,6px);padding:clamp(3px,.9cqi,5px) clamp(5px,1.4cqi,8px);border-radius:3px;background:#8B2E2A;color:#FFF1EC;letter-spacing:.16em}
.rm-live i{width:clamp(4px,1cqi,5px);aspect-ratio:1;border-radius:50%;background:var(--gold-light);animation:rmPulse 2.4s ease-out infinite}
@keyframes rmPulse{0%{box-shadow:0 0 0 0 rgba(238,214,166,.6)}70%,100%{box-shadow:0 0 0 5px rgba(238,214,166,0)}}
.rm-code{color:var(--gold-light)}
.rm-name{min-width:0;overflow:hidden;text-overflow:ellipsis;font:italic 500 clamp(11px,2.9cqi,15px)/1 var(--serif);letter-spacing:0;text-transform:none;color:#fff}
.rm-time{margin-left:auto;color:rgba(255,255,255,.6)}

.rm-stage{position:relative;aspect-ratio:800/534;background:#2a2f2b;overflow:hidden}
.rm-stage picture,.rm-stage img{position:absolute;inset:0;width:100%;height:100%}
.rm-stage img{object-fit:cover}
.rm-stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--noise);opacity:.16;mix-blend-mode:soft-light}
.rm-marks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rm-thirds path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:.8;vector-effect:non-scaling-stroke}
.rm-level path{fill:none;stroke:#F6E3BB;stroke-width:1.25;vector-effect:non-scaling-stroke}
.rm-level path:first-child{stroke-dasharray:5 4}
.rm-ring circle{fill:none;stroke:#FFF8EA;stroke-width:1.1;vector-effect:non-scaling-stroke}
.rm-pen{fill:none;stroke:#EBC88E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(0,0,0,.35))}
.js .room .rm-pen{stroke-dasharray:100;stroke-dashoffset:100}
.js .room.in .rm-pen{animation:rmDraw 1.5s .7s cubic-bezier(.5,.1,.25,1) forwards}
@keyframes rmDraw{to{stroke-dashoffset:0}}

.rm-note,.rm-share{position:absolute;display:inline-flex;align-items:center;gap:clamp(4px,1.2cqi,7px);padding:clamp(3px,.9cqi,5px) clamp(5px,1.4cqi,8px);border-radius:3px;
  background:rgba(11,17,13,.74);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font:600 clamp(7.5px,1.95cqi,10.5px)/1 var(--mono);letter-spacing:.06em;color:#F7EDD8;white-space:nowrap}
.rm-note{box-shadow:inset 0 0 0 1px rgba(242,217,168,.42)}
.rm-note b{width:clamp(8px,2.4cqi,14px);height:1px;background:#EBC88E}
.n-v{left:15.4%;top:74%}
.n-w{left:61%;top:21.5%}
.n-l{left:26.6%;top:8.4%}
.rm-share{left:2.6%;top:4.6%;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.rm-histo{position:absolute;right:2.6%;bottom:4%;width:31%;padding:clamp(4px,1.3cqi,7px) clamp(5px,1.5cqi,8px) clamp(4px,1.1cqi,6px);border-radius:5px;
  background:rgba(9,14,11,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.rm-histo span{display:block;margin-bottom:clamp(3px,.9cqi,5px);font:600 clamp(6.5px,1.6cqi,9px)/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.rm-histo svg{display:block;width:100%;height:auto;aspect-ratio:200/64}
.rm-histo .h-fill{fill:rgba(242,217,168,.24)}
.rm-histo .h-line{fill:none;stroke:#F2D9A8;stroke-width:1;vector-effect:non-scaling-stroke}
.rm-histo .h-grid{fill:none;stroke:rgba(255,255,255,.14);stroke-width:.75;vector-effect:non-scaling-stroke}

.rm-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:clamp(7px,2.2cqi,12px) clamp(9px,3cqi,16px);background:#101913;border-top:1px solid rgba(255,255,255,.06)}
.rm-people{display:flex;gap:clamp(4px,1.2cqi,7px)}
.rm-p{display:grid;place-items:center;width:clamp(30px,10.4cqi,58px);aspect-ratio:16/11;border-radius:4px;background:radial-gradient(120% 90% at 30% 20%,#2E4034,#141E18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  font:500 clamp(9.5px,2.6cqi,13.5px)/1 var(--serif);letter-spacing:.06em;color:rgba(255,255,255,.82)}
.rm-p.host svg{width:40%;height:auto;color:var(--gold-light)}
.rm-p.you{font-style:italic;color:#fff;box-shadow:inset 0 0 0 1px #D9B375,0 0 14px -4px rgba(201,154,91,.65)}
.rm-hour{display:inline-flex;align-items:center;gap:clamp(5px,1.5cqi,9px);font:600 clamp(7.5px,1.9cqi,10px)/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.rm-hour i{width:clamp(8px,2.6cqi,16px);height:1px;background:rgba(201,154,91,.7)}
@container (max-width:400px){
  .n-l,.rm-ring{display:none}
  .rm-hour{display:none}
  .n-w{left:58%;top:19%}
}
@container (max-width:300px){
  .rm-time{display:none}
}
.room-cap{display:flex;gap:12px;align-items:baseline;margin-top:20px;font:500 12px/1.55 var(--mono);letter-spacing:.03em;color:rgba(255,255,255,.66);max-width:46ch}
.room-cap::before{content:"";flex:none;width:22px;height:1px;background:var(--gold);transform:translateY(-3px)}
@media (max-width:1060px){
  .room{justify-self:start;max-width:600px;margin-top:8px}
}
@media (max-width:420px){
  .room-win{outline-offset:6px}
  .room-cap{font-size:11.5px}
}

/* =====================================================================
   Class day, printed like a programme (Saturdays)
   ===================================================================== */
.engraved .day-plan{counter-reset:dp;gap:0;border-block:3px double rgba(29,41,32,.5);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.2))}
.engraved .day-plan>div{counter-increment:dp;position:relative;align-content:start;gap:9px;padding:24px 24px 26px;border-radius:0;background:none;box-shadow:none;border-left:1px solid var(--hair-l)}
.engraved .day-plan>div:first-child{border-left:0}
.engraved .day-plan>div::before{content:counter(dp,upper-roman);position:absolute;top:20px;right:22px;font:italic 500 22px/1 var(--serif);color:rgba(134,96,31,.55)}
.engraved .day-plan>div>span:first-child{font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--gold-text)}
.engraved .day-plan b{font:600 clamp(20px,1.9vw,24px)/1.1 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.engraved .day-plan .code{padding:0;background:none;border-radius:0;color:var(--oxblood);letter-spacing:.14em}
@media (max-width:1060px){
  .engraved .day-plan>div:nth-child(3){border-left:0}
  .engraved .day-plan>div:nth-child(n+3){border-top:1px solid var(--hair-l)}
}
@media (max-width:760px){
  .engraved .day-plan>div{border-left:0;padding:18px 4px 20px;grid-template-columns:auto 1fr;column-gap:16px;row-gap:6px}
  .engraved .day-plan>div+div{border-top:1px solid var(--hair-l)}
  .engraved .day-plan>div::before{position:static;grid-row:span 3;align-self:start;width:34px;font-size:24px}
  .engraved .day-plan>div::before{top:auto;right:auto}
}

/* =====================================================================
   Catalog cards: engraved roundels and Roman numerals (Saturdays)
   ===================================================================== */
.engraved .classes{counter-reset:cls}
.engraved .cls{counter-increment:cls}
.engraved .cls .top .ic,.engraved .kit-item .ic,.engraved .feat .ic{border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,var(--gold-wash));color:var(--ivy);
  box-shadow:inset 0 0 0 1px rgba(168,119,53,.6),0 0 0 4px var(--white),0 0 0 5px rgba(168,119,53,.22)}
.engraved .cls .top .ic svg,.engraved .kit-item .ic svg,.engraved .feat .ic svg{width:46%;height:46%}
/* the same roundel for the home page cards, when a page opts in with <main class="engraved"> */
.engraved .who-card .ic,.engraved .rung .ic{border-radius:50%;background:radial-gradient(circle at 50% 35%,#fff,var(--gold-wash));color:var(--ivy);
  box-shadow:inset 0 0 0 1px rgba(168,119,53,.6),0 0 0 4px var(--white),0 0 0 5px rgba(168,119,53,.22)}
.engraved .reason .ic,.engraved .rung:nth-child(4) .ic{border-radius:50%;background:radial-gradient(circle at 50% 35%,rgba(242,217,168,.12),rgba(242,217,168,.02));color:var(--gold-light);
  box-shadow:inset 0 0 0 1px rgba(233,207,159,.55),0 0 0 4px var(--night),0 0 0 5px rgba(233,207,159,.2)}
.engraved .who-card .ic svg,.engraved .reason .ic svg,.engraved .rung .ic svg{width:46%;height:46%}
/* the class cards: the same Roman medallion as the home ladder, shown once */
.engraved .cls .top .medal{margin-left:5px}
.engraved .cls .medal i{font:italic 600 22px/1 var(--serif);letter-spacing:.02em;color:var(--gold-ink);transform:translateY(-1px)}

/* =====================================================================
   The seat ticket (Saturdays, founding extras)
   ===================================================================== */
.ticket{--tk-paper:#FBF7EC;container-type:inline-size;position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(120px,24%,170px);width:min(600px,100%);margin:6px auto 40px;color:var(--ink);transform:rotate(-.6deg);backface-visibility:hidden;filter:drop-shadow(0 26px 30px rgba(29,41,32,.16)) drop-shadow(0 2px 3px rgba(29,41,32,.1))}
.js .ticket.rv{transform:translateY(24px) rotate(-.6deg)}
.js .ticket.rv.in{transform:rotate(-.6deg)}
.tk-main,.tk-stub{position:relative;background:var(--tk-paper)}
.tk-main::after,.tk-stub::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--noise);opacity:.32;mix-blend-mode:soft-light;border-radius:inherit}
.tk-main{display:grid;gap:8px;justify-items:start;text-align:left;padding:26px 30px 24px 32px;border-radius:12px 0 0 12px;
  -webkit-mask:radial-gradient(circle 11px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 11px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tk-stub{display:grid;place-items:center;align-content:center;gap:8px;padding:18px 14px;border-radius:0 12px 12px 0;border-left:1.5px dashed rgba(29,41,32,.28);
  -webkit-mask:radial-gradient(circle 11px at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 11px at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tk-main::before{content:"";position:absolute;inset:9px 0 9px 9px;border:1px solid rgba(168,119,53,.5);border-right:0;border-radius:6px 0 0 6px;box-shadow:inset 3px 3px 0 0 var(--tk-paper),inset 4px 4px 0 0 rgba(168,119,53,.22),inset 0 -3px 0 0 var(--tk-paper),inset 0 -4px 0 0 rgba(168,119,53,.22);pointer-events:none}
.tk-k{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--oxblood)}
.tk-k em{font-style:normal}
.tk-k i{width:18px;height:1px;background:currentColor;opacity:.5}
.tk-t{font:italic 600 clamp(26px,8.6cqi,46px)/1 var(--serif);letter-spacing:-.02em;color:var(--ink);margin-top:2px}
.tk-s{font:600 12px/1.3 var(--mono);letter-spacing:.06em;color:var(--gold-text)}
.tk-row{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:10px;padding-top:12px;border-top:1px solid var(--hair-l);width:100%;font:500 13px/1.3 var(--body);color:var(--text)}
.tk-row span{display:grid;gap:4px}
.tk-row i{font:700 10px/1 var(--mono);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--mute-2)}
.tk-stub img{width:clamp(64px,70%,96px);height:auto;filter:drop-shadow(0 6px 10px rgba(29,41,32,.25))}
.tk-stub span{font:700 10px/1.35 var(--mono);letter-spacing:.18em;text-transform:uppercase;text-align:center;color:var(--gold-text)}
@container (max-width:420px){
  .tk-k i,.tk-k em{display:none}
  .tk-k{letter-spacing:.16em}
}
@media (max-width:520px){
  .ticket{grid-template-columns:minmax(0,1fr) 92px;transform:none}
  .js .ticket.rv,.js .ticket.rv.in{transform:none}
  .js .ticket.rv:not(.in){transform:translateY(24px)}
  .tk-main{padding:22px 18px 20px 22px}
  .tk-row{gap:10px 18px}
  .tk-stub{padding:14px 8px}
}

/* =====================================================================
   The Track dial (Track hero) and the syllabus ledger
   ===================================================================== */
.dial{margin:0;justify-self:center;width:min(430px,100%);display:grid;gap:20px;justify-items:center}
.dial-art{width:100%;aspect-ratio:1;filter:drop-shadow(0 46px 60px rgba(0,0,0,.55)) drop-shadow(0 10px 16px rgba(0,0,0,.35))}
.dial-svg{display:block;width:100%;height:100%}
.js .dial.rv .dial-svg{transform:rotate(-28deg);transition:transform 1.8s cubic-bezier(.2,.7,.2,1) .15s}
.js .dial.rv.in .dial-svg{transform:none}
.dial-cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.dial-cap::before{content:"";width:22px;height:1px;background:var(--gold)}
.dial-cap .r{white-space:nowrap;font:italic 500 15px/1 var(--serif);letter-spacing:.04em;text-transform:none;color:var(--gold-light)}
@media (max-width:1060px){
  .dial{justify-self:start;width:min(340px,100%);justify-items:start;margin-top:6px}
}

.engraved .curric{counter-reset:ph}
.engraved .cphase{counter-increment:ph;border-radius:16px}
.engraved .cphase header{position:relative;padding-left:clamp(86px,8vw,100px);background:linear-gradient(90deg,var(--gold-wash),var(--white) 64%)}
.engraved .cphase header::before{content:counter(ph,upper-roman);position:absolute;left:clamp(20px,2vw,26px);top:22px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:#fff;
  font:italic 600 20px/1 var(--serif);color:var(--gold-ink);box-shadow:inset 0 0 0 1px rgba(168,119,53,.62),0 0 0 4px var(--white),0 0 0 5px rgba(168,119,53,.24)}
.engraved .cphase ol{padding:6px 24px 14px;gap:0 34px}
.engraved .cphase li{border-radius:0;padding:12px 2px;border-bottom:1px solid var(--hair-l);grid-template-columns:36px 1fr auto}
.engraved .cphase li:hover{background:none}
.engraved .cphase li b{background:none;border-radius:0;padding:0;text-align:left;font:600 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--gold-text)}
.engraved .cphase li.free b{background:none;color:var(--oxblood)}
.engraved .cphase li.free .m{color:var(--oxblood)}
.engraved .cphase .qz{border-radius:10px}
@media (max-width:760px){
  .engraved .cphase header{padding-left:22px;padding-top:84px}
  .engraved .cphase header::before{top:24px;left:22px}
  .engraved .cphase ol{padding:4px 18px 12px}
}

/* =====================================================================
   Gallery prints: an ivory mat, a hairline, a mono caption
   ===================================================================== */
.prints{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:clamp(14px,2.2vw,28px);align-items:start}
.print{margin:0;display:grid;gap:12px}
.pr-mat{position:relative;padding:clamp(8px,1vw,12px);background:#FDFBF6;border-radius:3px;box-shadow:0 0 0 1px rgba(29,41,32,.1),0 1px 2px rgba(29,41,32,.08),0 22px 40px -26px rgba(29,41,32,.45)}
.pr-mat picture{position:relative;display:block;overflow:hidden;box-shadow:0 0 0 1px rgba(29,41,32,.16)}
.pr-mat picture::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--noise);opacity:.14;mix-blend-mode:soft-light}
.pr-mat img{display:block;width:100%;height:clamp(190px,24vw,330px);object-fit:cover}
.print figcaption{display:flex;justify-content:space-between;gap:12px;padding:0 2px;font:600 11px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute-2)}
.print figcaption span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.print figcaption span:first-child::before{content:"";width:16px;height:1px;background:var(--gold)}
@media (max-width:760px){
  .prints{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .print-lg{grid-column:span 2}
  .print figcaption{flex-direction:column;gap:4px}
  .pr-mat img{height:clamp(150px,44vw,260px)}
  .print-lg .pr-mat img{height:auto;aspect-ratio:3/2}
}

/* the values, numbered in Roman numerals on a ruled line */
.engraved .value .n{display:flex;align-items:center;gap:14px;font:italic 500 24px/1 var(--serif);color:var(--gold-text)}
.engraved .value .n::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(168,119,53,.45),rgba(168,119,53,0))}

/* =====================================================================
   Day 1 plate (/free): a real room in the viewfinder, the settings below
   ===================================================================== */
.d1plate{margin:-28px -28px 4px;container-type:inline-size}
.d1-shot{position:relative;aspect-ratio:800/560;overflow:hidden;border-radius:var(--r-lg) var(--r-lg) 0 0;background:#1a2119}
.d1-shot picture,.d1-shot img{position:absolute;inset:0;width:100%;height:100%}
.d1-shot img{object-fit:cover}
.d1-shot::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,15,12,.55) 0%,rgba(10,15,12,0) 26%,rgba(10,15,12,0) 58%,rgba(10,15,12,.82) 100%)}
.d1-shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--noise);opacity:.14;mix-blend-mode:soft-light}
.d1-c{position:absolute;z-index:2;width:18px;height:18px;border:1.25px solid rgba(255,248,234,.9)}
.d1-c.tl{top:14px;left:14px;border-right:0;border-bottom:0}
.d1-c.tr{top:14px;right:14px;border-left:0;border-bottom:0}
.d1-c.bl{bottom:14px;left:14px;border-right:0;border-top:0}
.d1-c.br{bottom:14px;right:14px;border-left:0;border-top:0}
.d1-af{position:absolute;z-index:2;left:50%;top:48%;width:13%;aspect-ratio:1.25;transform:translate(-50%,-50%);border:1px solid rgba(233,207,159,.95);box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.d1-af::before,.d1-af::after{content:"";position:absolute;left:50%;top:50%;background:rgba(233,207,159,.95)}
.d1-af::before{width:1px;height:6px;transform:translate(-50%,-50%)}
.d1-af::after{width:6px;height:1px;transform:translate(-50%,-50%)}
.d1-top{position:absolute;z-index:2;left:40px;right:40px;top:17px;display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.88);white-space:nowrap}
.d1-rec{display:inline-flex;align-items:center;gap:7px;color:#fff}
.d1-rec i{width:6px;height:6px;border-radius:50%;background:#E9CF9F;box-shadow:0 0 0 3px rgba(233,207,159,.22)}
.d1-hud{position:absolute;z-index:2;left:14px;right:14px;bottom:14px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border-top:1px solid rgba(255,255,255,.22);padding:10px 4px 2px}
.d1-hud span{display:grid;gap:5px;justify-items:center;font:600 8.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.d1-hud b{font:600 clamp(11px,3.4cqi,14px)/1 var(--mono);letter-spacing:0;text-transform:none;color:#fff}
.d1-hud span:nth-child(2) b,.d1-hud span:nth-child(4) b{color:#F2D9A8}
@container (max-width:330px){
  .d1-hud span{font-size:7.5px;letter-spacing:.06em}
  .d1-top span:last-child{display:none}
}
.engraved .upsell img{border-radius:50%;filter:drop-shadow(0 18px 24px rgba(29,41,32,.28))}

/* =====================================================================
   The shop: a real photo graded (hero), bound plates, the cabinet
   ===================================================================== */
.grade{margin:0;width:100%;max-width:440px;justify-self:end}
.grade-win{position:relative;border-radius:10px;overflow:hidden;background:var(--deep);outline:1px solid rgba(201,154,91,.26);outline-offset:9px;
  box-shadow:0 0 0 1px rgba(255,255,255,.09),0 50px 90px -46px rgba(0,0,0,.9),0 24px 44px -28px rgba(0,0,0,.6)}
.gr-shot{position:relative;aspect-ratio:800/535;overflow:hidden}
.gr-shot picture,.gr-shot img{position:absolute;inset:0;width:100%;height:100%}
.gr-shot img{object-fit:cover}
.gr-before{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}
.gr-before img{filter:saturate(.28) contrast(.72) brightness(1.12) sepia(.1)}
.gr-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--noise);opacity:.14;mix-blend-mode:soft-light}
.gr-line{position:absolute;z-index:2;top:0;bottom:0;left:50%;width:1px;background:rgba(255,248,234,.92);box-shadow:0 0 0 .5px rgba(0,0,0,.15)}
.gr-line i{position:absolute;left:50%;top:50%;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(12,18,14,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px rgba(242,217,168,.85)}
.gr-line i::before,.gr-line i::after{content:"";position:absolute;top:50%;width:5px;height:5px;border:solid #F2D9A8;border-width:0 0 1px 1px}
.gr-line i::before{left:8px;transform:translateY(-50%) rotate(45deg)}
.gr-line i::after{right:8px;transform:translateY(-50%) rotate(-135deg)}
.js .grade.rv .gr-before{clip-path:inset(0 82% 0 0);transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1) .35s}
.js .grade.rv .gr-line{left:18%;transition:left 1.6s cubic-bezier(.3,.7,.2,1) .35s}
.js .grade.rv.in .gr-before{clip-path:inset(0 50% 0 0)}
.js .grade.rv.in .gr-line{left:50%}
.gr-tag{position:absolute;z-index:2;top:12px;padding:5px 8px;border-radius:3px;background:rgba(11,17,13,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#F7EDD8}
.gr-tag.l{left:12px}
.gr-tag.r{right:12px;color:#15211A;background:rgba(251,247,236,.9)}
.gr-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:#101913;border-top:1px solid rgba(255,255,255,.06);font:600 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.66)}
.gr-sw{display:flex;gap:3px}
.gr-sw i{width:18px;height:10px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.gr-sw i:nth-child(1){background:#1F3350}
.gr-sw i:nth-child(2){background:#5C5470}
.gr-sw i:nth-child(3){background:#A27A6A}
.gr-sw i:nth-child(4){background:#E9A96B}
.gr-sw i:nth-child(5){background:#FFD993}
@media (max-width:1060px){.grade{justify-self:start;max-width:520px}}
@media (max-width:760px){.grade{display:none}}

/* a product with no cover: a cloth bound bookplate, typeset. The kind in small capitals, the
   title in italics over an engraved aperture rule, the imprint at the foot. One cloth per kind:
   ivy for guides, oxblood for courses, ink for presets, brass for LUTs, ivory for templates. */
.splate{--cl:#E9CF9F;--tx:#FBF3E0;--sub:rgba(243,230,200,.74);container-type:inline-size;display:grid;grid-template-rows:auto 1fr auto;justify-items:center;align-items:center;
  padding:clamp(16px,8.4cqi,34px) clamp(14px,8cqi,30px) clamp(13px,6.6cqi,26px);text-align:center;color:var(--cl);
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px),radial-gradient(120% 90% at 50% 16%,#2C4436,#15211A)}
.splate::before{inset:clamp(6px,3.2cqi,13px);border:1px solid rgba(233,207,159,.55);border-color:color-mix(in srgb,var(--cl) 58%,transparent);border-radius:2px;box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px color-mix(in srgb,var(--cl) 22%,transparent)}
.splate::after{inset:0;left:0;top:0;width:auto;height:auto;transform:none;border:0;border-radius:0;background:var(--noise);opacity:.2;mix-blend-mode:soft-light}
.splate .sp-k{position:relative;z-index:1;align-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 clamp(7.5px,2.9cqi,12px)/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--sub)}
.splate .sp-m{position:relative;z-index:1;display:grid;justify-items:center;gap:clamp(7px,3.6cqi,16px);max-width:86%}
.splate .sp-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;font:italic 500 clamp(13px,7cqi,40px)/1.1 var(--serif);letter-spacing:-.012em;color:var(--tx);text-wrap:balance}
.splate .sp-r{display:flex;align-items:center;gap:clamp(5px,2.2cqi,10px);width:clamp(56px,32cqi,170px)}
.splate .sp-r::before,.splate .sp-r::after{content:"";flex:1;height:1px;background:currentColor;opacity:.62}
.splate .sp-r svg{flex:none;width:clamp(10px,4cqi,17px);height:auto;aspect-ratio:1;padding:0;border-radius:0;background:none;box-shadow:none;transform:none;stroke-width:1.2}
.splate .sp-i{position:relative;z-index:1;align-self:end;white-space:nowrap;font:500 clamp(6.5px,2.4cqi,10px)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sub);opacity:.85}
@container (max-width:150px){.splate .sp-i,.splate .sp-t{display:none}}
.splate[data-kind]{color:var(--cl)}
/* on a card the plate carries its own kind, so the corner label steps aside */
.scard-media:has(.splate) .scard-kind{display:none}
.splate[data-kind=course]{--cl:#F2D9A8;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px),radial-gradient(120% 90% at 50% 16%,#943532,#4A1614)}
.splate[data-kind=guide]{--cl:#E9CF9F}
.splate[data-kind=preset]{--cl:#E2CFA6;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 4px),radial-gradient(120% 90% at 50% 16%,#2D3D4A,#141C23)}
.splate[data-kind=lut]{--cl:#4A3410;--tx:#1E170C;--sub:rgba(42,30,12,.74);background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(60,40,10,.08) 0 1px,transparent 1px 4px),radial-gradient(120% 90% at 50% 16%,#E6C891,#A87735)}
.splate[data-kind=template]{--cl:#7A561E;--tx:#15211A;--sub:rgba(29,41,32,.66);background:repeating-linear-gradient(0deg,rgba(29,41,32,.035) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 16%,#FBF7EC,#EDE3CC)}

/* the empty shop's cabinet: drawer fronts with framed labels and brass pulls */
.engraved .cabinet{gap:8px;padding:12px;border-radius:14px;background:linear-gradient(180deg,#1E2E24,#121C16);box-shadow:var(--shadow),inset 0 0 0 1px rgba(233,207,159,.22)}
.engraved .cab{border-radius:4px;padding:18px 8px 30px;background:linear-gradient(180deg,#24382C,#1A281F);box-shadow:inset 0 0 0 1px rgba(233,207,159,.2),inset 0 1px 0 rgba(255,255,255,.05)}
.engraved .cab svg{width:22px;height:22px;color:#E9CF9F}
.engraved .cab b{border-radius:2px;background:#F3EAD6;box-shadow:inset 0 0 0 1px rgba(122,86,30,.45),0 0 0 2px #1F2F25,0 0 0 3px rgba(233,207,159,.4);font:600 10.5px/1 var(--mono);letter-spacing:.1em}
.engraved .cab::after{bottom:11px;width:26px;height:9px;border:1.5px solid #C99A5B;border-top:0;border-radius:0 0 14px 14px;background:none;box-shadow:0 1px 0 rgba(0,0,0,.35)}
.engraved .start-card img{width:60px;height:60px;filter:drop-shadow(0 8px 12px rgba(29,41,32,.25))}

/* =====================================================================
   404: a viewfinder that cannot find focus
   ===================================================================== */
.oof{position:relative;width:min(380px,100%);aspect-ratio:3/2;margin:0 auto 30px;border-radius:6px;overflow:hidden;background:#0D1510;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 40px 70px -40px rgba(0,0,0,.85);outline:1px solid rgba(201,154,91,.24);outline-offset:8px}
.oof picture,.oof img{position:absolute;inset:0;width:100%;height:100%}
.oof img{object-fit:cover;filter:blur(6px) saturate(.85) brightness(.82);transform:scale(1.08)}
.oof::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--noise);opacity:.16;mix-blend-mode:soft-light}
.oof::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 45%,rgba(8,12,9,.55))}
.oof-c{position:absolute;z-index:2;width:16px;height:16px;border:1.25px solid rgba(255,248,234,.9)}
.oof-c.tl{top:12px;left:12px;border-right:0;border-bottom:0}.oof-c.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.oof-c.bl{bottom:12px;left:12px;border-right:0;border-top:0}.oof-c.br{bottom:12px;right:12px;border-left:0;border-top:0}
.oof-grid{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,transparent calc(33.33% - .5px),rgba(255,255,255,.22) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.22) 66.66%,transparent calc(66.66% + .5px)),linear-gradient(180deg,transparent calc(33.33% - .5px),rgba(255,255,255,.22) 33.33%,transparent calc(33.33% + .5px),transparent calc(66.66% - .5px),rgba(255,255,255,.22) 66.66%,transparent calc(66.66% + .5px))}
.oof-af{position:absolute;z-index:2;left:50%;top:50%;width:18%;aspect-ratio:1.3;border:1.25px solid #E9CF9F;transform:translate(-50%,-50%);animation:oofHunt 5.5s cubic-bezier(.5,0,.3,1) infinite}
@keyframes oofHunt{0%,12%{transform:translate(-50%,-50%)}30%,40%{transform:translate(-160%,-90%)}58%,66%{transform:translate(70%,10%)}84%,100%{transform:translate(-50%,-50%)}}
.oof-lvl{position:absolute;z-index:2;left:30%;right:30%;top:50%;height:1px;transform:rotate(-4deg)}
.oof-lvl::before,.oof-lvl::after{content:"";position:absolute;top:0;width:38%;height:1px;background:rgba(255,248,234,.85)}
.oof-lvl::before{left:0}.oof-lvl::after{right:0}
.oof-lvl i{position:absolute;left:50%;top:-3px;width:7px;height:7px;transform:translateX(-50%);border-radius:50%;border:1px solid #E9CF9F}
.oof-read{position:absolute;z-index:2;bottom:13px;font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.oof-read.l{left:36px;color:#E9CF9F}.oof-read.r{right:36px}

/* =====================================================================
   Sign in, reset, welcome: the crest above a card framed like a certificate
   ===================================================================== */
.engraved.auth .auth-crest{width:52px;height:auto;margin-bottom:-2px}
.engraved .auth-card{position:relative;border-radius:16px}
.engraved .auth-card::before{content:"";position:absolute;inset:7px;border:1px solid rgba(168,119,53,.32);border-radius:11px;pointer-events:none}
.engraved .auth-card>*{position:relative}

/* =====================================================================
   An engraved rule: two hairlines and the aperture between them
   ===================================================================== */
.orn{display:flex;align-items:center;gap:16px;margin:clamp(26px,4vw,40px) auto 0;width:min(320px,80%);color:var(--gold-deep)}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(168,119,53,0),rgba(168,119,53,.6))}
.orn::after{background:linear-gradient(90deg,rgba(168,119,53,.6),rgba(168,119,53,0))}
.orn svg{width:18px;height:18px;flex:none}

/* =====================================================================
   Course codes: oxblood mono on a hairline, never a filled pill
   ===================================================================== */
.engraved .code{padding:0 0 4px;background:none;border-radius:0;letter-spacing:.12em;color:var(--oxblood);box-shadow:inset 0 -1px 0 rgba(139,46,42,.42)}
.engraved .rung:nth-child(4) .code{background:none;color:var(--gold-light);box-shadow:inset 0 -1px 0 rgba(238,214,166,.5)}

/* the class ladder (home): a numbered medallion instead of a stock icon */
.engraved .rung .medal{width:54px;height:54px;margin:2px 0 2px 5px}
.engraved .rung .medal i{font:italic 600 21px/1 var(--serif);letter-spacing:.02em;color:var(--gold-ink);transform:translateY(-1px)}
.engraved .rung:nth-child(4) .medal i{color:var(--gold-light)}

/* =====================================================================
   The last call (home): gallery prints hung on the dark ivy
   ===================================================================== */
.final .final-prints{margin-top:clamp(56px,7vw,96px);text-align:left}
.final .pr-mat{background:#F5F1E6;box-shadow:0 0 0 1px rgba(0,0,0,.4),0 2px 3px rgba(0,0,0,.25),0 36px 60px -30px rgba(0,0,0,.85)}
.final .print figcaption{color:rgba(255,255,255,.56)}
.final .print figcaption span:first-child{color:rgba(255,255,255,.86)}

/* =====================================================================
   A product page: a taller picture beside the buy box, and ruled ledgers for
   the lessons and what is included (like the syllabus on /track)
   ===================================================================== */
@media (min-width:1061px){.pp-stage{aspect-ratio:4/5}}
.pp-les,.pp-incl{gap:0;border-top:1px solid var(--line-2)}
.pp-les li{grid-template-columns:44px minmax(0,1fr) auto;gap:14px;padding:16px 2px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--hair-l)}
.pp-les .pl-n{display:block;width:auto;height:auto;border-radius:0;background:none;font:600 13px/1 var(--mono);letter-spacing:.06em;color:var(--gold-text)}
.pp-les .pl-t{gap:5px}
.pp-les .pl-t b{font:600 19px/1.25 var(--serif);letter-spacing:-.005em}
.pp-les .pl-t span{letter-spacing:.04em}
.pp-les .pl-v{padding:0 0 3px;border-radius:0;background:none;box-shadow:inset 0 -1px 0 rgba(139,46,42,.42);letter-spacing:.1em;text-transform:uppercase}
.pp-incl li{padding:14px 2px;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid var(--hair-l)}
.pp-incl svg{color:var(--gold-deep)}
@media (max-width:380px){
  .pp-les li{grid-template-columns:34px minmax(0,1fr)}
  .pp-les .pl-n{width:auto;height:auto}
}

/* =====================================================================
   Tablets (761 to 1060): no hero picture stranded at half width
   ===================================================================== */
@media (min-width:861px) and (max-width:1060px){
  .hero .wrap,.page-hero .wrap{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center}
  .page-hero.shop-hero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .brackets,.room,.grade{justify-self:end;width:100%;max-width:none;margin-top:0}
  .dial{justify-self:center;justify-items:center;width:min(360px,100%);margin-top:0}
  .page-hero .emblem{justify-self:center}
}
@media (min-width:761px) and (max-width:860px){
  .brackets,.room,.grade{justify-self:center;width:100%;max-width:600px}
  .dial,.page-hero .emblem{justify-self:center;justify-items:center}
  .hero .wrap>div:first-child,.page-hero .wrap>div:first-child{max-width:640px}
}
@media (min-width:761px) and (max-width:1060px){
  .inside{grid-template-columns:minmax(0,1fr) minmax(0,290px);column-gap:48px}
  /* pricing: the founding card across the top, the other two side by side */
  .plans:not(.two){grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .plans:not(.two) .plan.featured{grid-column:1/-1;padding:40px 36px 30px}
  .plans:not(.two) .plan.featured ul{display:block;columns:2;column-gap:36px}
  .plans:not(.two) .plan.featured li{break-inside:avoid;margin-bottom:12px}
  .plans:not(.two) .plan.featured>.btn{align-self:flex-start;width:auto;min-width:320px}
  .plans:not(.two) .plan.featured .pnote{text-align:left}
  .plans.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
  .plans.two .plan.featured{order:0}
  /* the shop's start cards: the founding card across the top */
  .starts{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .starts .start-card.featured{grid-column:1/-1;order:-1}
}

/* =====================================================================
   Reduced motion: every piece rests in its finished state
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .js .dial.rv .dial-svg{transform:none}
  .js .grade.rv .gr-before{clip-path:inset(0 50% 0 0)}
  .js .grade.rv .gr-line{left:50%}
  .js .room .rm-pen{stroke-dashoffset:0;animation:none}
  .rm-live i,.oof-af{animation:none}
  .js .ticket.rv{transform:rotate(-.6deg)}
}
@media (prefers-reduced-motion:reduce) and (max-width:520px){.js .ticket.rv{transform:none}}