*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#13271e;color:var(--rfb-paper);font:500 1.05rem/1.6 Cormorant,Georgia,serif}.skip{position:fixed;left:1rem;top:.8rem;transform:translateY(-180%);background:white;color:#111;padding:.7rem;z-index:var(--rfb-z-scene)}.skip:focus{transform:none}:focus-visible{outline:3px solid var(--rfb-focus);outline-offset:4px}/* Sized by its content with a floor, and centred, so the slack is shared
   top and bottom instead of pooling into a 671px hole under the links. */
.satchel-intro{display:grid;align-content:center;justify-items:start;min-height:min(100svh, 640px);padding:calc(var(--rfb-head-h) + var(--rfb-s8)) var(--rfb-gutter) var(--rfb-s8);background:linear-gradient(90deg,color-mix(in srgb, var(--rfb-night) 91%, transparent),transparent 65%),url('../assets/teachers-workshop-v1.webp') center/cover}/* These two look alike but sit on opposite grounds. .eyebrow is on the
   parchment activity cards; .satchel-intro p is on the dark hero art.
   Grouping them under one dark colour left the hero line at roughly 1.3:1
   - invisible. Same type, different ground, different colour. */
.eyebrow{color:var(--rfb-wood-deep);font:700 var(--rfb-t-micro) Montserrat;letter-spacing:var(--rfb-track-word)}
.satchel-intro p{color:var(--rfb-brass-lit);font:700 var(--rfb-t-micro) Montserrat;letter-spacing:var(--rfb-track-word);text-shadow:0 2px 10px #000,0 0 22px #000}.satchel-intro h1{margin:var(--rfb-s2) 0;font:400 clamp(3rem,7.5vw,7rem)/.94 var(--rfb-theatre);text-transform:uppercase;text-wrap:balance}.satchel-intro span{display:block;max-width:34rem;font:italic var(--rfb-t-lead)/1.4 var(--rfb-display);color:var(--rfb-paper-dim)}.satchel-intro nav{display:flex;gap:var(--rfb-s3);flex-wrap:wrap;margin-top:var(--rfb-s5)}.satchel-intro nav a{display:inline-flex;align-items:center;justify-content:center;min-height:var(--rfb-tap);padding:0 var(--rfb-s5);border:1px solid var(--rfb-brass);border-radius:var(--rfb-r-sm);color:var(--rfb-paper);text-decoration:none;font:600 var(--rfb-t-label)/1 var(--rfb-ui);letter-spacing:var(--rfb-track-label);text-transform:uppercase;background:color-mix(in srgb, var(--rfb-night) 82%, transparent)}
.satchel-intro nav a:hover{background:var(--rfb-brass);color:var(--rfb-ink)}.guides{position:relative;padding:var(--rfb-s9) var(--rfb-gutter);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--rfb-s6);background:radial-gradient(circle at 50% 0,#47634e,#14281f 60%)}
/* The satchel scene above ends at #090707 and this panel opened at #3a5442 -- a
   45-point jump across three pixels, the only hard edge on the site. Every other
   scene resolves into darkness, so let this one do the same: the green now emerges
   from the scene's own shadow instead of starting. */
.guides::before{content:'';position:absolute;inset:0 0 auto;height:170px;pointer-events:none;background:linear-gradient(#090707,rgba(9,7,7,.86) 22%,rgba(9,7,7,.55) 48%,rgba(9,7,7,.22) 74%,transparent)}
.guides>*{position:relative;z-index:1}.guides article{position:relative;box-sizing:border-box;min-width:0;max-width:100%;padding:clamp(1.5rem,3vw,3rem);color:#251f16;background:var(--rfb-paper);box-shadow:0 1.5rem 2rem #07120c88}@media(min-width:900px){.guides article:nth-child(even){transform:translateY(3rem)}}.guide-mark{position:absolute;right:2rem;top:1.4rem;color:var(--rfb-crimson-deep);font:400 3rem Limelight}/* "OBSERVATION" is one unbreakable 11-character word in an all-caps display
   face. At 4.5rem it measured 423px inside a 335px card and ran out over the
   neighbouring card. The size is now driven by the card, not the viewport,
   so the longest word always fits whatever the column width is. */
.guides h2{margin:.4rem 0 1rem;font:400 clamp(1.9rem,10cqi,3.4rem)/.94 Limelight;text-transform:uppercase;overflow-wrap:anywhere;hyphens:auto}
.guides article{container-type:inline-size}
@supports not (container-type:inline-size){
  .guides h2{font-size:clamp(1.9rem,3.2vw,3.4rem)}
}.guides h3{margin:1.4rem 0 .2rem;color:#793044;font:700 .75rem Montserrat;letter-spacing:var(--rfb-track-label);text-transform:uppercase}.guides ol{padding-left:1.3rem}.guides li{margin:.45rem 0}.purpose{font-size:1.2rem;font-style:italic}.reflection{margin-top:1.5rem;padding:1rem;border:2px dashed #947750}.reflection b,.reflection span{display:block}.reflection b{font:700 var(--rfb-t-micro) Montserrat;letter-spacing:var(--rfb-track-label);color:#7f2c3e}@media(max-width:900px){.guides article:nth-child(even){transform:none}.satchel-intro{padding-inline:1.5rem}.satchel-intro h1{font-size:3.8rem}}@media print{.satchel-intro, footer{display:none}.guides{display:block;padding:0;background:white}.guides article{box-shadow:none;min-height:100svh;break-after:page;padding:.5in}.guides article:last-child{break-after:auto}}

/* Moved out of the global header 2026-09-08: page actions belong with the
   page, not in site furniture. */
.satchel-print{margin:var(--rfb-s5) 0 0}
.satchel-print button{display:inline-flex;align-items:center;justify-content:center;min-height:var(--rfb-tap);padding:0 var(--rfb-s5);border:1px solid var(--rfb-hairline);border-radius:var(--rfb-r-sm);background:none;color:var(--rfb-paper);font:600 var(--rfb-t-label)/1 var(--rfb-ui);letter-spacing:var(--rfb-track-label);text-transform:uppercase;cursor:pointer}
.satchel-print button:hover{border-color:var(--rfb-brass);color:var(--rfb-brass-lit)}
@media print{.satchel-print{display:none}}

/* The satchel itself. It only ever existed on the homepage stage that has now
   been removed, which left the page named after it without it. On wide screens
   it sits in the empty right-hand two thirds of the hero; below 900px it drops
   under the guide links so it never crowds the headline. */
.satchel-art{display:block;width:min(78vw,20rem);height:auto;margin:var(--rfb-s6) auto 0;
  filter:drop-shadow(0 1.6rem 2.4rem rgba(0,0,0,.62))}
@media (min-width:900px){
  .satchel-intro{grid-template-columns:minmax(0,36rem) minmax(0,1fr);column-gap:var(--rfb-s7);align-items:center}
  .satchel-intro>:not(.satchel-art){grid-column:1}
  /* span, not 1/-1: with no explicit rows declared, -1 resolves to the last
     EXPLICIT line, which is row 1 - so the satchel sat in row one and the
     headline dropped underneath it instead of beside it. */
  .satchel-art{grid-column:2;grid-row:1/span 20;justify-self:center;align-self:center;
    width:min(100%,25rem);margin:0}
}
@media print{.satchel-art{display:none}}

/* The workshop plate is this page's LCP element at 197 KB; the 71 KB phone cut sits
   under the same heavy scrim. The satchel's sizes claim also overshot -- 78vw on a
   390px phone at DPR3 asks for 913 device px, so the 900w plate won over the 520w
   cut. Declaring the real rendered width lets the small file win. */
@media(max-width:600px){.satchel-intro{background-image:linear-gradient(180deg,color-mix(in srgb,var(--rfb-night) 91%,transparent),transparent 65%),url('../assets/teachers-workshop-v1-mobile.webp');background-size:cover;background-position:center}}