/* Path to Glory · base styles (Concept A: the mentor file) */
/* Layout: a case file spread across a desk. Every section is a physical document:
   folder, memo, planner, lanyard ID, roster tabs, index cards, tickets. Single committed look. */
:root{
  --desk:#16100d; --desk-hi:#2b1f19;
  --kraft:#cdae84; --kraft-shade:#b39466; --kraft-ink:#3a2c1c;
  --paper:#f3f2ee; --paper-rule:#d4d0c7;
  --ink:#151413; --ink-soft:#5b554d;
  --red:#d6403a; --red-deep:#a42b26;
  --badge:#1a1a1c; --green:#2e9b5f;
  --muted:#b7aa9d;
  --f-display:"Archivo","Arial Black",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --f-type:"Courier Prime","Courier New",Courier,monospace;
  --lift:0 1px 0 rgba(0,0,0,.08),0 22px 44px -16px rgba(0,0,0,.7);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-padding-top:64px}
body{background-color:var(--desk);background-image:radial-gradient(110% 70% at 50% -10%,var(--desk-hi),transparent 70%),var(--grain);color:var(--paper);font:400 16px/1.55 var(--f-display);overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
h1,h2,h3,h4{text-wrap:balance}
@media (min-width:1360px){html{zoom:1.05}}   /* everything 5% bigger where the screen has room; narrower screens keep their layouts */
.wrap{max-width:1200px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.sheet{background-color:var(--paper);background-image:var(--grain);color:var(--ink);box-shadow:var(--lift);position:relative;color-scheme:light}   /* light paper: light tick boxes and menus */
.ph{color:#8f887e;font-style:italic}
.mono-label{font:600 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase}

/* ---------- top tape ---------- */
.topbar{background-color:var(--red);background-image:var(--grain);color:#fff;font:500 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 20px -10px rgba(0,0,0,.7);position:sticky;top:0;z-index:50}
.topbar .wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.topbar .code{white-space:nowrap;opacity:.9}
.topbar nav{display:flex;gap:16px;flex-wrap:wrap;margin-left:auto}
.topbar nav a{text-decoration:none}
.topbar nav a:hover{text-decoration:underline;text-underline-offset:4px}
.topbar .cta{background:var(--ink);color:#fff;text-decoration:none;padding:9px 12px;white-space:nowrap}
@media (max-width:1100px){.topbar nav{display:none}.topbar .cta{margin-left:auto}}
@media (max-width:420px){.topbar .code{font-size:10px;letter-spacing:.08em}}

/* ---------- hero ---------- */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:24px;padding-block:60px 120px}
.folder{position:relative;background-color:var(--kraft);background-image:var(--grain);border-radius:3px 12px 12px 12px;padding:118px clamp(18px,4.5vw,60px) 150px;margin-top:30px;box-shadow:var(--lift)}
.folder::before{content:"";position:absolute;left:0;top:-30px;width:42%;height:31px;background:inherit;border-radius:10px 24px 0 0}
.file-id{position:absolute;left:clamp(16px,3vw,32px);top:20px;font:500 13px/1.5 var(--f-mono);color:var(--kraft-ink);letter-spacing:.06em}
.file-id .pill{display:inline-block;border:2px solid var(--kraft-ink);border-radius:999px;padding:3px 14px;font-weight:600;margin-bottom:6px}
.folder-tape{position:absolute;top:42px;left:36%;right:-10px;background:var(--red);color:#fff;font:500 12px/1 var(--f-mono);letter-spacing:.16em;padding:12px 18px;transform:rotate(-1.6deg);display:flex;justify-content:space-between;gap:16px;white-space:nowrap;overflow:hidden;box-shadow:0 3px 8px rgba(0,0,0,.25)}
.hero-sheet{padding:clamp(28px,5vw,64px) clamp(22px,5vw,64px);transform:rotate(-.7deg)}
.hero-sheet .tape-bit{position:absolute;left:-24px;top:18px;width:150px;height:40px;background:var(--red);opacity:.9;transform:rotate(-12deg)}
.clip{position:absolute;top:-38px;right:20%;width:44px;height:112px;color:#9ba1a8}
.title{font:900 clamp(52px,9.2vw,124px)/.84 var(--f-display);letter-spacing:-.055em;margin:0 0 24px;text-transform:uppercase;position:relative}
.pill-lg{display:inline-block;border:3px solid var(--ink);border-radius:999px;padding:6px 26px 7px;font:800 clamp(16px,2.2vw,26px)/1.1 var(--f-display);letter-spacing:.03em}
.kicker{font:600 13px/1.4 var(--f-mono);color:var(--red-deep);letter-spacing:.08em;text-transform:uppercase;margin:30px 0 8px}
.lede{font-size:clamp(17px,1.9vw,22px);line-height:1.4;max-width:32ch;margin:0}
.range{display:flex;align-items:center;gap:clamp(10px,2vw,24px);margin-top:clamp(30px,5vw,56px);font:900 clamp(38px,7vw,84px)/1 var(--f-display);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.range i{flex:1;height:3px;background:var(--ink);max-width:170px;min-width:24px}
.range span:last-child{transform:translateY(.12em)}

.ticket{position:absolute;left:-14px;bottom:-60px;width:min(540px,94%);display:grid;grid-template-columns:84px minmax(0,1fr);background-color:#f8f7f4;background-image:var(--grain);color:var(--ink);text-decoration:none;transform:rotate(1.5deg);box-shadow:var(--lift);z-index:2;transition:transform .25s ease}
.ticket:hover{transform:rotate(.5deg) translateY(-4px)}
.ticket .stub{border-right:2px dashed #bdb9b0;display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 12px}
.ticket .stub .barcode{width:100%;height:44px;color:var(--ink)}
.ticket .stub span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 14px/1 var(--f-mono);letter-spacing:.3em}
.t-main{padding:18px 22px 22px;display:grid;gap:10px;min-width:0}
.t-label{font:600 12px/1 var(--f-mono);letter-spacing:.28em;color:var(--ink-soft);text-transform:uppercase}
.t-date{font:900 clamp(30px,4.6vw,52px)/1 var(--f-display);letter-spacing:-.055em}
.t-date sup{font-size:.42em;letter-spacing:0;vertical-align:.95em}
.t-cta{justify-self:start;background:var(--red);color:#fff;font:800 clamp(15px,1.8vw,20px)/1.15 var(--f-display);white-space:pre-line;letter-spacing:.04em;padding:10px 18px;transform:rotate(-1deg)}
.ticket:hover .t-cta{background:var(--ink)}

.seal{position:absolute;left:-40px;top:50%;width:180px;height:180px;z-index:3;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));pointer-events:none}
.seal svg{width:100%;height:100%;display:block}
.seal .ring{transform-origin:100px 100px;animation:spin 32s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.hero-side{position:relative;display:grid;gap:30px;align-content:start;justify-items:center;z-index:4}
.lanyard{position:relative;display:flex;flex-direction:column;align-items:center;transform:rotate(6deg);transform-origin:top center;margin-left:-70px}
/* swing-in (swing.js): the lanyard stays hidden until its entrance starts; the moving strap is drawn as an SVG path */
@media (prefers-reduced-motion:no-preference){.swing-pending .lanyard{visibility:hidden}}
.swing-strap{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;will-change:transform}
.strap{width:28px;height:104px;background:var(--red);color:#3a0d0a;font:600 9px/1 var(--f-mono);letter-spacing:.32em;writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;margin-top:-60px}
/* lanyard hardware (markup in index.html): a 40 x 110 drawing whose last 20px overlap the card.
   Stacking inside .lanyard: .clasp-back (0) < hero badge (1) < .clasp (2), so the clasp's back leg is hidden by
   the card and only shows through the slot punched below. */
.hook{position:relative;width:40px;height:110px;margin-bottom:-20px}
.hook svg{display:block;width:40px;height:110px}
.clasp{position:relative;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55))}
.clasp-back{position:absolute;inset:0;z-index:0}
/* the hero card always gets its own GPU layer: it keeps the card's text a touch heavier (the look it has while
   swinging in), and since it never switches on or off, the text can't change weight when the swing lands.
   The card inside, the clip and the moving strap get layers too, so during the swing the GPU just moves and
   squeezes finished pictures instead of the page redrawing the card (and its large art) every frame. */
.lanyard #hero-badge,.lanyard #hero-badge>.badge,.lanyard .clasp,.lanyard .clasp-back{will-change:transform}
/* the punched slot: a real 16 x 7 hole cut 8px below the hero card's top edge */
.lanyard .badge{z-index:1;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Crect width='16' height='7' rx='3.5'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='7'%3E%3Crect width='16' height='7' rx='3.5'/%3E%3C/svg%3E"),linear-gradient(#000,#000);
  -webkit-mask-position:50% 8px,0 0;mask-position:50% 8px,0 0;
  -webkit-mask-size:16px 7px,100% 100%;mask-size:16px 7px,100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:xor;mask-composite:exclude}

.goals{background-color:var(--red);background-image:var(--grain);color:#fff;font-family:var(--f-type);padding:26px 24px 22px;width:min(310px,100%);transform:rotate(3.5deg);box-shadow:var(--lift)}
.goals h3{font:700 15px/1 var(--f-type);letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;padding-bottom:12px;border-bottom:2px solid rgba(255,255,255,.85)}
.goals label{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;font-size:18px;letter-spacing:.12em;line-height:1.35;padding-block:8px;cursor:pointer}
.goals input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border:2px solid #fff;margin:2px 0 0;background:transparent;display:grid;place-content:center;cursor:pointer}
.goals input:checked::after{content:"✕";font:700 17px/1 var(--f-type);color:#fff}
.goals input:checked + span{text-decoration:line-through;text-decoration-thickness:2px}
.goals small{display:block;margin-top:20px;font-size:12px;letter-spacing:.2em;opacity:.92}

/* ---------- ID badge (shared by hero + faculty) ---------- */
.badge{width:min(320px,100%);background:var(--badge);color:#f4f4f2;border-radius:16px;display:grid;grid-template-columns:30px minmax(0,1fr);overflow:hidden;box-shadow:0 30px 50px -18px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.07);position:relative;text-align:left}
.badge::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 32%);pointer-events:none}
.b-strip{background:var(--red);display:flex;align-items:center;justify-content:center;position:relative}
.b-strip span{writing-mode:vertical-rl;transform:rotate(180deg);font:600 9.5px/1 var(--f-mono);letter-spacing:.34em;color:#2b0b09;white-space:nowrap}
.b-strip::before,.b-strip::after{content:"";position:absolute;left:50%;width:8px;height:8px;border-radius:50%;background:var(--badge);transform:translateX(-50%)}
.b-strip::before{top:14px}.b-strip::after{bottom:14px}
.b-body{padding:16px 16px 18px;display:grid;gap:10px;min-width:0}
.b-top{display:flex;justify-content:space-between;align-items:center;font:500 11px/1 var(--f-mono);letter-spacing:.14em;color:#b3b3b8}
.b-dash{display:flex;gap:4px}.b-dash i{height:4px;background:var(--red);display:block;width:7px}.b-dash i:first-child{width:22px}
.b-role{font:900 34px/.9 var(--f-display);font-stretch:108%;letter-spacing:-.01em;text-transform:uppercase}
.b-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.b-id{border:1.5px solid var(--red);font:500 11px/1 var(--f-mono);letter-spacing:.12em;padding:5px 8px;white-space:nowrap}
.b-row .barcode{width:92px;height:24px;color:#f4f4f2;flex:none}
.b-art{position:relative;aspect-ratio:4/5;background:#141416;overflow:hidden;container-type:inline-size}
.b-art::before,.b-art::after{content:"";position:absolute;width:22px;height:22px;z-index:2;border:0 solid var(--red)}
.b-art::before{top:8px;right:8px;border-width:2px 2px 0 0}
.b-art::after{bottom:8px;left:8px;border-width:0 0 2px 2px}
.ph-art{position:absolute;inset:0;display:grid;place-items:center;background-color:#151517;background-image:linear-gradient(#24242a 1px,transparent 1px),linear-gradient(90deg,#24242a 1px,transparent 1px);background-size:20px 20px}
.ph-art .L{font:900 58cqw/1 var(--f-display);color:transparent;-webkit-text-stroke:2px var(--red);opacity:.85}
.ph-art .cap{position:absolute;left:14px;right:14px;bottom:14px;font:500 10px/1.45 var(--f-mono);letter-spacing:.12em;color:#9a9aa1;text-transform:uppercase}
.b-name small{display:block;font:500 10px/1 var(--f-mono);letter-spacing:.24em;color:#a5a5aa;margin-bottom:5px}
.b-name b{display:block;font:800 21px/1.05 var(--f-display);letter-spacing:.01em;text-transform:uppercase;overflow-wrap:anywhere;color:#fff}
.b-team{justify-self:start;background:var(--green);color:#fff;font:600 12px/1 var(--f-mono);letter-spacing:.1em;padding:6px 9px;text-transform:uppercase}

/* ---------- section scaffolding ---------- */
.sec{padding-block:clamp(70px,9vw,120px) 0}
.sec-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:34px}
.sec-head .no{font:600 13px/1 var(--f-mono);color:#fff;background:var(--red);padding:7px 10px;letter-spacing:.1em;transform:rotate(-2deg)}
.sec-head h2{font:900 clamp(34px,5.4vw,64px)/.95 var(--f-display);letter-spacing:-.045em;margin:0;text-transform:uppercase}
.sec-head p{flex-basis:100%;margin:4px 0 0;color:var(--muted);max-width:62ch}

/* brief */
.brief{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:34px;align-items:start}
.memo{padding:clamp(24px,4vw,48px)}
.memo-head{display:grid;grid-template-columns:auto 1fr;gap:6px 20px;font:400 14px/1.45 var(--f-mono);margin:0 0 24px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.memo-head dt{font-weight:600;letter-spacing:.12em}
.memo-head dd{margin:0}
.memo h3{font:600 12px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;margin:30px 0 16px;color:var(--red-deep)}
.memo p{max-width:62ch;margin:0}
.goal-line{font:800 clamp(20px,2.4vw,28px)/1.2 var(--f-display);letter-spacing:-.02em;margin-bottom:12px!important}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;counter-increment:s}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 14px/1.55 var(--f-mono);color:var(--red-deep)}
.steps b{display:block;font-weight:800}
.prio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;margin-top:30px;padding-top:24px;border-top:1px dashed #b9b5ac}
.stamp{font:900 17px/1 var(--f-display);letter-spacing:.14em;color:var(--red);border:3px solid var(--red);padding:9px 12px 8px;transform:rotate(-7deg);text-transform:uppercase;border-radius:3px;mix-blend-mode:multiply}

.index{background-color:#fbfbf8;color:var(--ink);background-image:linear-gradient(transparent 27px,#c4d2e1 27px);background-size:100% 28px;background-position:0 44px;padding:14px 22px 28px;box-shadow:var(--lift);font:400 15px/28px var(--f-display);position:relative}
.index h3{font:600 12px/28px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;margin:0;border-bottom:2px solid var(--red);background:#fbfbf8}
.index p{margin:0}
.index b{font:600 12px/28px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--red-deep)}
.roles-card{transform:rotate(1.4deg)}
.roles-card p+p{margin-top:28px}
.roles-card .alt{font-family:var(--f-type);color:var(--ink-soft)}
/* badge display art: dark charcoal with a fine light grid and darker edges, like the Katja poster crop */
.ptg-art.art-grid{background-color:#1a1a1d!important;
  background-image:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%),
    linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);
  background-size:100% 100%,7.5% 6.1%,7.5% 6.1%;background-position:0 0,-1px -1px,-1px -1px}
/* desk prop: fountain pen tucked under the Who's who paper, ink leaking out from beneath it */
.brief-side{position:relative}
.brief-side .roles-card{z-index:1}
.desk-pen{display:block;width:min(430px,96%);height:auto;margin:-92px 0 50px 10%;transform:rotate(26deg);transform-origin:8% 30%;position:relative;z-index:0;pointer-events:none;user-select:none}
/* ink soaking into the paper where the nib sits underneath */
.brief-side .roles-card::after{content:"";position:absolute;left:4%;bottom:-6px;width:46%;height:70px;pointer-events:none;background:radial-gradient(60% 55% at 35% 100%,rgba(164,43,38,.30),rgba(164,43,38,.12) 55%,transparent 75%);mix-blend-mode:multiply}
.role-dot{display:inline-block;margin-right:8px;font-size:.95em;line-height:1}
/* text marks: yellow highlighter + red squiggle */
mark.hl{color:inherit;background:linear-gradient(100deg,rgba(255,230,0,0) 0,rgba(255,232,90,.5) 3%,rgba(255,232,90,.4) 96%,rgba(255,230,0,0) 100%);padding:0 .14em;margin:0 -.14em;border-radius:.3em .5em .35em .45em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.squig{text-decoration:underline wavy color-mix(in srgb,var(--red) 50%,transparent);text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-skip-ink:none}
.sec-head .squig{text-decoration-color:color-mix(in srgb,var(--red) 70%,transparent);text-decoration-thickness:1.5px}

/* schedule */
.sched{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:30px;align-items:start}
.planner{padding:clamp(18px,3vw,34px) clamp(22px,3.4vw,38px)}
/* planner as a cream ticket with stamp-style half-circle notches down both sides.
   The paper lives on ::before (masked into the notched shape); the shadow is a drop-shadow so it follows the notches. */
.sheet.planner{
  --paper:#f4eee0; --paper-rule:#a8987a;
  --paper-fiber:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .34 0 0 0 0 .2 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background:none;box-shadow:none;isolation:isolate;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.08)) drop-shadow(0 18px 22px rgba(0,0,0,.55));
}
.sheet.planner::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-color:var(--paper);background-image:var(--grain),var(--paper-fiber);
  --notch:radial-gradient(circle at 0 50%,transparent 9px,#000 9.5px);
  --notch-r:radial-gradient(circle at 100% 50%,transparent 9px,#000 9.5px);
  -webkit-mask:var(--notch) left top/51% 52px repeat-y,var(--notch-r) right top/51% 52px repeat-y;
  mask:var(--notch) left top/51% 52px repeat-y,var(--notch-r) right top/51% 52px repeat-y;
}
.planner .day{background-image:var(--grain),var(--paper-fiber)}
.planner .day:hover{background-color:#ebe3d0}
.planner .day[aria-pressed="true"]{background-color:#fcf9f1}
@media (max-width:640px){
  .planner{padding:18px 12px}
  .sheet.planner::before{--notch:radial-gradient(circle at 0 50%,transparent 6px,#000 6.5px);--notch-r:radial-gradient(circle at 100% 50%,transparent 6px,#000 6.5px);-webkit-mask-size:51% 40px;mask-size:51% 40px}
}
.planner-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding-bottom:12px}
.planner-top h3{font:900 clamp(26px,3.4vw,40px)/1 var(--f-display);letter-spacing:-.035em;margin:0;text-transform:uppercase}
.planner-top span{font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase}
.dows,.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dows span{font:600 11px/1 var(--f-mono);letter-spacing:.14em;color:var(--ink-soft);padding:12px 6px 8px;text-transform:uppercase}
.wk{font:600 12px/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:16px 0 8px;display:flex;gap:10px;align-items:center;color:var(--red-deep)}
.wk::after{content:"";flex:1;height:1px;background:var(--ink);opacity:.25}
.week{gap:1px;background:var(--paper-rule);border:1px solid var(--paper-rule)}
.day{appearance:none;border:0;border-radius:0;background:var(--paper);color:var(--ink);font:inherit;text-align:left;min-height:100px;padding:9px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:6px;cursor:pointer;position:relative;min-width:0}
.day:hover{background:#eae8e2}
.day[aria-pressed="true"]{background:#fff;box-shadow:inset 0 0 0 2px var(--ink);z-index:1}
.day .num{font:800 clamp(18px,2.4vw,28px)/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.day .today{position:absolute;top:9px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.chip{font:600 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:4px 6px;border:1.5px solid currentColor;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.chip.mock{color:var(--red);transform:rotate(-5deg)}
.chip.final{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-4deg)}
.chip.kickoff{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip.tbc{border-style:dashed}
.legend{display:flex;flex-wrap:wrap;gap:14px 20px;margin-top:16px;font:500 11px/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase;align-items:center}
.legend .chip{transform:none}
/* scrim days: Project Lumi SCRIM sticker slapped on the day box */
.day .scrim-sticker{position:absolute;left:var(--sx,20%);top:var(--sy,30%);width:min(60%,64px);height:auto;transform:rotate(var(--sr,-7deg));pointer-events:none}
.legend .scrim-mini{display:inline-flex;align-items:center;gap:6px}
.legend .scrim-mini img{width:24px;height:24px;transform:rotate(-7deg)}

.dd{padding:26px 24px 24px;display:grid;gap:12px}
.dd::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;background:rgba(214,64,58,.88);transform:translateX(-50%) rotate(-3deg)}
.dd-date{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin:0}
.dd h3{font:900 clamp(24px,2.6vw,32px)/1 var(--f-display);letter-spacing:-.035em;margin:0;text-transform:uppercase}
.dd p{margin:0}
.tbc-note{justify-self:start;font:600 11px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;border:1.5px dashed var(--ink-soft);padding:5px 8px;color:var(--ink-soft)}
.btn{display:inline-flex;align-items:center;gap:8px;justify-self:start;background:var(--ink);color:var(--paper);text-decoration:none;font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 14px;border:0;cursor:pointer}
.btn:hover{background:var(--red)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.agenda{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px dashed #b9b5ac;display:grid;gap:2px}
.agenda button{appearance:none;border:0;background:none;color:var(--ink);font:inherit;width:100%;display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;text-align:left;padding:6px 4px;cursor:pointer}
.agenda button:hover,.agenda button[aria-current="true"]{background:#e9e7e1}
.agenda .d{font:500 12px/1.5 var(--f-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.agenda .t{font-size:15px;font-weight:600}

/* faculty */
.fac{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.fac-badge{display:flex;justify-content:center;padding-top:10px}
.fac-badge .badge{width:min(320px,100%);min-height:565px;transform:rotate(-2.5deg)}   /* the assistant tall card's proportions, a little larger */
.fac-badge .b-art{aspect-ratio:5/7}   /* a taller picture on the Instructor card, using the spare room around the name */
/* the punched lanyard slot on the tall cards */
.fac-badge .badge::before,.as-tall .badge::before{content:"";position:absolute;top:8px;left:50%;width:16px;height:7px;margin-left:-8px;border-radius:3.5px;background:var(--desk);box-shadow:inset 0 1px 2px rgba(0,0,0,.8),0 0 0 .7px rgba(255,255,255,.14);z-index:3}
.info{padding:clamp(22px,4vw,44px)}
.info .clip{right:12%}
.info-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 12px/1 var(--f-mono);letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.info h3{font:900 clamp(34px,5vw,62px)/.95 var(--f-display);letter-spacing:-.05em;margin:22px 0 12px;text-transform:uppercase;overflow-wrap:anywhere}
.team-tag{display:inline-block;background:var(--green);color:#fff;font:600 13px/1 var(--f-mono);letter-spacing:.1em;padding:7px 10px;text-transform:uppercase}
.info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 30px;margin-top:28px}
.info-grid h4{font:600 11px/1 var(--f-mono);letter-spacing:.16em;color:var(--red-deep);text-transform:uppercase;margin:0 0 10px}
.info-grid p{margin:0}
.info-grid .wide{grid-column:1/-1}
.pool{display:flex;flex-wrap:wrap;gap:8px}
.pool span{border:1.5px solid var(--ink);padding:6px 11px;font:600 13px/1 var(--f-display);border-radius:999px}
.hist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-family:var(--f-type);font-size:16px}
.hist li::before{content:"› ";color:var(--red)}
.info-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:30px;padding-top:18px;border-top:1px dashed #b9b5ac;font:500 12px/1.4 var(--f-mono);color:var(--ink-soft);letter-spacing:.06em}
.fac-nav{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:40px}
.fac-tabs{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.tab{appearance:none;border:0;background:var(--kraft-shade);color:#2f2416;font:600 12px/1 var(--f-mono);padding:11px 12px 12px;border-radius:7px 7px 0 0;cursor:pointer;letter-spacing:.06em;transition:transform .15s,background .15s}
.tab:hover{background:var(--kraft)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink);transform:translateY(-5px)}
.arrows{display:flex;gap:8px}
.arrow{appearance:none;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--paper);background:transparent;color:var(--paper);font:600 18px/1 var(--f-mono);cursor:pointer}
.arrow:hover{background:var(--paper);color:var(--ink)}
/* mentor file flips over to show its back */
.info-flip{perspective:1800px;cursor:pointer;min-width:0}
.flip-card{display:grid;transition:transform .7s cubic-bezier(.3,.7,.2,1),height .45s ease;transform-style:preserve-3d}
.flip-card>.face{grid-area:1/1;align-self:start;backface-visibility:hidden;-webkit-backface-visibility:hidden;min-width:0}
.flip-card>.back{transform:rotateY(180deg)}
.info-flip.flipped .flip-card{transform:rotateY(180deg)}
.info-flip .face a,.info-flip .face button{cursor:pointer}
.info-grid p+p{margin-top:10px}
.foot-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.flip-btn{appearance:none;background:transparent;border:0;border-bottom:1.5px dashed currentColor;color:var(--red-deep);font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:4px 0;cursor:pointer}
.flip-btn:hover{color:var(--ink)}
.back-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
/* "Off the record": bigger rubber stamp, ink bleeds at the edges and skips in spots (#ink-bleed in index.html) */
.back .stamp{transform:rotate(-6deg);font-size:clamp(19px,2.2vw,24px);padding:12px 16px 11px;border-width:4px;filter:url(#ink-bleed);text-shadow:0 0 1.5px rgba(214,64,58,.55)}
/* coaching motto: straight, pencil handwriting with a graphite texture */
.motto{margin-top:16px!important;font:400 clamp(30px,3.4vw,40px)/1.05 "Reenie Beanie","Bradley Hand","Segoe Print",cursive;letter-spacing:.01em;
  color:#2f2d2a;-webkit-text-stroke:.3px #2f2d2a;filter:url(#pencil)}
/* (background-clip:text breaks the 3D flip in Chrome, so the pencil texture is an SVG filter instead) */
/* character pool: black & white pfp that follows the hovered character */
/* pfp sits beside the character names so the pool is about as tall as Playstyle (no gap in the row) */
.pool-sec{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:16px}
.pool-sec>.pfp{grid-row:2/4}
.pool-sec>h4{grid-column:1/-1}
.pool-sec>.pool{flex-direction:column;align-items:flex-start;align-self:start;gap:6px}
.pfp{width:104px;aspect-ratio:1;margin:2px 0 0;background:#111;border:2px solid var(--ink);box-shadow:3px 3px 0 rgba(0,0,0,.18);position:relative;overflow:hidden;display:grid;place-items:center;transform:rotate(-2deg)}
.pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%;filter:grayscale(1) contrast(1.12)}
.pfp-ph{font:900 52px/1 var(--f-display);color:#f3f2ee;letter-spacing:-.04em}
.pool-chip{appearance:none;background:transparent;color:var(--ink);border:1.5px solid var(--ink);padding:6px 11px;font:600 13px/1 var(--f-display);border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.pool-chip.on,.pool-chip:hover{background:var(--ink);color:var(--paper)}
/* red pencil doodles on the mentor files */
.doodle{fill:none;stroke:var(--red);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil);pointer-events:none;overflow:visible}
.info h3 .d-burst{display:inline-block;width:.62em;height:.53em;margin-left:-.02em;vertical-align:top;transform:translateY(-.32em);stroke-width:2.6}
.pool-sec{position:relative}
.pool-sec .d-spark{position:absolute;left:clamp(84px,44%,118px);top:-26px;width:58px;height:36px}
.pool-sec .d-plus{position:absolute;left:-14px;top:116px;width:18px;height:18px}
.hist-sec{position:relative}
.hist-sec .d-burger{position:absolute;left:-30px;bottom:-40px;width:54px;height:42px;transform:rotate(-8deg)}
@media (max-width:640px){.hist-sec .d-burger{left:auto;right:4px;bottom:auto;top:-14px}.pool-sec .d-plus{left:-10px}}
/* handwritten red pencil notes */
.scribble,.pencil-fix .fix{-webkit-text-stroke:.5px var(--red)}
.scribble{font:400 26px/.9 "Reenie Beanie","Bradley Hand","Segoe Print",cursive;color:var(--red);filter:url(#pencil);pointer-events:none;letter-spacing:.02em}
.pool-sec .s-smile{position:absolute;left:clamp(130px,62%,170px);top:-34px;font-size:30px;transform:rotate(-6deg)}
.info-foot{position:relative}
.s-foot{position:absolute;right:8%;top:30px;font-size:30px;line-height:.85;transform:rotate(-9deg);text-align:left}
@media (max-width:640px){.s-foot{position:static;transform:rotate(-6deg);margin:4px 0 0 auto}.pool-sec .s-smile{left:150px;top:-10px}}
.pencil-fix{position:relative;display:inline-block;white-space:nowrap}
.pencil-fix s{text-decoration:none;position:relative}
.pencil-fix s::after{content:"";position:absolute;left:-3px;right:-4px;top:52%;height:6px;filter:url(#pencil);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M2 4 C25 2.5 55 3.5 98 1.5' fill='none' stroke='%23d6403a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.pencil-fix .fix{position:absolute;left:-2px;top:88%;font:400 24px/1 "Reenie Beanie","Bradley Hand","Segoe Print",cursive;color:var(--red);filter:url(#pencil);transform:rotate(-2deg);letter-spacing:.04em}
.hist li:has(.pencil-fix){margin-bottom:14px}
.pencil-add{font:400 1.7em/0 "Reenie Beanie","Bradley Hand","Segoe Print",cursive;color:var(--red);-webkit-text-stroke:.6px var(--red);filter:url(#pencil);margin-left:1px;vertical-align:-.05em}
.d-bang{display:inline-block;width:.4em;height:1.25em;vertical-align:-.1em;margin-left:0;stroke-width:3.6}
/* Chibiarc: cat ears on the name + chibi face under it, fries by the character pool */
.doodle .fill{fill:var(--red);stroke:none}
.info h3{position:relative}
.doodle .shine{fill:#f3f2ee;stroke:none}
/* sized and placed from the sketch (62px name, 754px-wide file) */
.info h3 .d-chibi{position:absolute;left:2.03em;top:-.34em;width:2.86em;height:2.89em;stroke-width:2.2}
.pool-sec .d-fries{position:absolute;right:-2px;top:67px;width:132px;height:104px;stroke-width:2}
@media (max-width:640px){.pool-sec .d-fries{right:-4px;top:auto;bottom:-34px;width:84px;height:66px}}
.pencil-ul{position:relative;white-space:nowrap}
.pencil-ul::after{content:"";position:absolute;left:-2px;right:-3px;bottom:-8px;height:7px;pointer-events:none;filter:url(#pencil);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.5 C30 2.5 60 3 90 4 S140 5 158 2.5' fill='none' stroke='%23d6403a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
.pool-sec>.pool-note{grid-column:2;margin:8px 0 0;font:400 13px/1.35 var(--f-type);color:var(--ink-soft)}
.hist-note{display:block;font-size:14px;color:var(--ink-soft);padding-left:1.1em}
.fun{font-family:var(--f-type);font-size:17px}
@media (prefers-reduced-motion:reduce){.flip-card{transition:none}}
.swap{animation:swap .35s ease}
@keyframes swap{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}

/* rosters: teams in two columns, plus a Standings view once the mock has results */
.roster{padding:clamp(20px,4vw,42px)}
.roster-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:3px solid var(--ink);padding-bottom:14px}
.roster-top h3{font:900 clamp(28px,4.4vw,50px)/.95 var(--f-display);letter-spacing:-.05em;text-transform:uppercase;margin:6px 0 0}
.rost-seg{display:flex;border:2px solid var(--ink)}
.rost-seg button{appearance:none;border:0;background:none;font:600 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;cursor:pointer;color:var(--ink)}
.rost-seg button+button{border-left:2px solid var(--ink)}
.rost-seg button[aria-selected="true"]{background:var(--ink);color:#fff}
.rost-seg button:disabled{color:#a29d94;cursor:default}
.rost-seg .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);margin-left:7px;vertical-align:1px}
.rost-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;margin-top:6px}
.rc{border-bottom:1.5px solid var(--ink);padding:16px 4px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 10px}
.rc .n{font:600 13px/1.6 var(--f-mono);color:var(--ink-soft);grid-row:span 3}
.rc b{font:900 20px/1.1 var(--f-display);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere}
.rc .co{font:700 15px/1.3 var(--f-type);color:var(--red-deep)}
.rc .pl{font:400 14px/1.5 var(--f-type);color:var(--ink-soft)}
.roster .rost-coach{color:var(--red-deep);text-decoration:none}
.roster .rost-coach:hover{text-decoration:underline;text-underline-offset:3px}
.roster .tba{color:#a29d94;font-weight:400}
.rost-none{font:400 17px/1.5 var(--f-type);color:var(--ink-soft);padding:22px 4px;margin:0}
.champ{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:22px 0 8px;padding:18px 20px;background:var(--ink);color:#fff}
.champ-stamp{font:900 15px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;border:3px solid #e2b23a;color:#e2b23a;padding:8px 10px 7px;transform:rotate(-4deg)}
.champ b{display:block;font:900 clamp(24px,3vw,32px)/1 var(--f-display);letter-spacing:-.03em;text-transform:uppercase}
.champ div span{display:block;font:400 14px/1.5 var(--f-type);color:#cfcac0;margin-top:4px}
.stable{width:100%;border-collapse:collapse;margin-top:6px}
.stable th{font:600 10px/1 var(--f-mono);letter-spacing:.16em;color:var(--ink-soft);text-transform:uppercase;text-align:left;padding:14px 10px 8px;white-space:nowrap}
.stable th.c{text-align:center}
.stable td{border-bottom:1.5px solid var(--ink);padding:13px 10px;vertical-align:top}
.stable .n{font:700 15px/1.6 var(--f-type);color:var(--ink-soft);width:56px}
.stable .tm{font:900 20px/1.15 var(--f-display);letter-spacing:-.03em;text-transform:uppercase;overflow-wrap:anywhere}
.stable .co{font:700 16px/1.6 var(--f-type)}
.stable .m-in{display:none;font:700 14px/1.4 var(--f-type);letter-spacing:0;text-transform:none;margin-top:4px;color:var(--red-deep)}
.stable .res{font:700 17px/1.5 var(--f-type);text-align:center;width:110px}
.stable .res.blank{color:#b3ada3;font-weight:400}
.stable .win{background:var(--red);color:#fff}
.rost-sum{margin:16px 0 0;color:var(--ink-soft);font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){
  .rost-cards{grid-template-columns:minmax(0,1fr)}
  .rost-seg button{padding:10px;font-size:11px;letter-spacing:.06em}
  .stable .mcol{display:none}
  .stable .m-in{display:block}
  .stable .n{width:40px;padding-inline:4px 8px}
  .stable .res{width:58px;font-size:15px;padding-inline:4px}
  .stable th{padding-inline:4px;white-space:normal}
}
.stamp.open{color:#2f6f4b;border-color:#2f6f4b}

/* field notes */
.notes{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:34px;align-items:start}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.cards .index:nth-child(odd){transform:rotate(-1deg)}
.cards .index:nth-child(even){transform:rotate(1.1deg)}
.oblig{padding:clamp(22px,3.6vw,38px)}
.oblig h3{font:900 clamp(24px,2.8vw,34px)/1 var(--f-display);letter-spacing:-.035em;text-transform:uppercase;margin:6px 0 18px}
.oblig ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-family:var(--f-type);font-size:16px;line-height:1.4}
.oblig li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.oblig li::before{content:"[✓]";color:var(--red-deep);font-weight:700}
.oblig .fine{margin:22px 0 0;padding-top:16px;border-top:1px dashed #b9b5ac;font-size:14px;color:var(--ink-soft)}

/* channels */
.links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.link{display:grid;grid-template-columns:70px minmax(0,1fr);background-color:#f8f7f4;background-image:var(--grain);color:var(--ink);text-decoration:none;box-shadow:var(--lift);transition:transform .2s ease}
.link:hover{transform:translateY(-4px) rotate(-.4deg)}
.link .tier{background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;border-right:2px dashed rgba(255,255,255,.7)}
.link .tier span{writing-mode:vertical-rl;transform:rotate(180deg);font:800 15px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.link .lb{padding:20px 22px;display:grid;gap:6px;min-width:0}
.link h3{font:900 clamp(22px,2.6vw,30px)/1 var(--f-display);letter-spacing:-.035em;margin:0;text-transform:uppercase;overflow-wrap:anywhere}
.link p{margin:0;color:var(--ink-soft)}
.link .go{font:600 12px/1 var(--f-mono);letter-spacing:.14em;color:var(--red-deep);text-transform:uppercase;margin-top:6px}

.foot{display:flex;justify-content:space-between;gap:16px 30px;flex-wrap:wrap;padding-block:100px 44px;font:700 clamp(17px,2vw,24px)/1.2 var(--f-display)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--red)}

/* assistant / role coaches */
.assist{margin-top:64px}
.assist-head{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;margin-bottom:24px}
.assist-head h3{font:900 clamp(24px,3vw,36px)/1 var(--f-display);letter-spacing:-.035em;text-transform:uppercase;margin:0}
.assist-head p{margin:0;color:var(--muted);max-width:62ch}
/* small cards on the left, the tall card on the right. The cards sit in a strip inside a window:
   a slide moves the strip, then the cards that left are removed. */
.as-stage{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:22px 46px;align-items:stretch}
.as-left{display:grid;gap:14px;align-content:start;min-width:0}
.as-view{overflow:hidden;padding:14px;margin:-14px;min-width:0}
.as-track{will-change:transform;--g:20px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:calc((100% - var(--g)) / 2);gap:20px var(--g)}
.as-meta{display:flex;align-items:center;gap:14px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.as-meta span{white-space:nowrap}
.as-meta .arrows{flex:none}
.as-bar{flex:1;height:2px;background:rgba(255,255,255,.14);overflow:hidden}
.as-bar i{display:block;height:100%;background:var(--red);transform-origin:left;animation:asBar 4s linear forwards}
.paused .as-bar i{animation-play-state:paused}
@keyframes asBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.as-card{cursor:pointer;transition:box-shadow .15s ease;-webkit-user-select:none;user-select:none}   /* quick clicks shouldn't highlight the card */
.as-card:hover{box-shadow:var(--lift),0 0 0 2px rgba(255,255,255,.55)}
.as-card.on{box-shadow:var(--lift),0 0 0 2.5px var(--red)}
.as-hit{position:absolute;inset:0;z-index:4;background:none;border:0;padding:0;cursor:pointer;border-radius:12px}
.as-hit:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.as-card .mb-foot a{position:relative;z-index:5}
/* the tall card, leaning the opposite way from the Instructor card above it, with the details beside it */
.as-main{display:grid;min-width:0}
.as-tall{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;align-items:stretch;min-width:0}
.as-tall .badge{width:100%;transform:rotate(2.5deg);will-change:transform}   /* its own layer, so its tilted text is not redrawn each time the cards slide */
.as-badge{display:grid;min-width:0}
.as-tall .b-role,.fac-badge .b-role{font-size:33px}
.as-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.as-facts{margin:0;display:grid;grid-template-columns:minmax(0,1fr);border-top:1px dashed #4a4a50;font:500 13px/1.45 var(--f-mono);color:#ececee}
.as-facts dt,.as-facts dd{margin:0}
.as-facts dt{padding-top:9px;font-size:10px;line-height:1.9;letter-spacing:.12em;text-transform:uppercase;color:#a0a0a6}
.as-facts dd{padding:3px 0 9px;border-bottom:1px dashed #4a4a50}
.as-facts .ph{color:#9a9aa1}
.as-go{align-self:flex-start;margin-top:auto;background:var(--red);color:#fff;text-decoration:none;font:600 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:13px 11px;line-height:1.3}
.as-go:hover{background:#fff;color:var(--ink)}
@media (max-width:1220px){.as-stage{grid-template-columns:minmax(0,1fr)}.as-main{order:-1}}   /* below this the details beside the tall card get too narrow */
@media (max-width:520px){
  .as-track{--g:12px;row-gap:12px}
  .as-tall{grid-template-columns:minmax(0,1fr)}
  .as-card .mb-body{padding:11px 10px 12px;gap:6px}
  .as-card .mb-role{font-size:18px}
  .as-card .mb-name{font-size:13px}
  .as-card .mb-icon{width:44px}
  .as-card .mb-focus{font-size:9.5px}
  .as-card .b-top{font-size:9px;letter-spacing:.06em}
  .as-card .mb-sticker{width:46px}
  .as-card .mb-foot{flex-wrap:wrap;gap:6px}
}
@media (prefers-reduced-motion:reduce){.as-bar{display:none}}
.mini-badge{background:var(--badge);color:#f4f4f2;border-radius:12px;display:grid;grid-template-columns:22px minmax(0,1fr);overflow:hidden;box-shadow:var(--lift);min-width:0;position:relative}
.mini-badge::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.1),transparent 34%);pointer-events:none}
.mini-badge .b-strip span{font-size:7.5px;letter-spacing:.26em}
.mini-badge .b-strip::before,.mini-badge .b-strip::after{width:6px;height:6px}
.mb-body{padding:14px 14px 16px;display:grid;gap:8px;min-width:0}
.mb-role{font:900 26px/.9 var(--f-display);font-stretch:108%;text-transform:uppercase}
.mb-name{font:800 17px/1.1 var(--f-display);text-transform:uppercase;overflow-wrap:anywhere}
/* wear on some assistant badges: fine scratches, scuffs, a red pen tick */
.mini-badge .wear{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.1;stroke-linecap:round;mix-blend-mode:screen}
.mini-badge .wear *{vector-effect:non-scaling-stroke}
.mini-badge .wear .faint{stroke:rgba(255,255,255,.3);stroke-width:.8}
.mini-badge .wear .scuff{fill:rgba(255,255,255,.13);stroke:none;filter:blur(6px)}
.mini-badge .wear .ink{stroke:var(--red);stroke-width:2.2;opacity:.75;filter:url(#pencil)}
/* sticker on an assistant badge (right side, next to the icon) */
.mb-sticker{position:absolute;right:8%;top:44%;width:clamp(58px,30%,76px);height:auto;transform:rotate(var(--tilt,8deg));z-index:3;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
/* assistant icon: small square on the same dark grid as the instructor art, with red corner marks */
.mb-icon{width:58px;aspect-ratio:1;position:relative;overflow:hidden;border:1px solid #3a3a40;display:grid;place-items:center;
  background-color:#1a1a1d;background-image:linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px);background-size:8px 8px}
.mb-icon::before,.mb-icon::after{content:"";position:absolute;width:9px;height:9px;border:0 solid var(--red);z-index:1}
.mb-icon::before{top:3px;left:3px;border-top-width:2px;border-left-width:2px}
.mb-icon::after{bottom:3px;right:3px;border-bottom-width:2px;border-right-width:2px}
.mb-icon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mb-icon-ph{font:900 26px/1 var(--f-display);color:transparent;-webkit-text-stroke:1.5px var(--red);opacity:.85}
.mb-focus{font:500 11px/1.5 var(--f-mono);color:#b3b3b8;letter-spacing:.04em}
.mb-focus .ph{color:#8d8d93}
.mini-badge .b-team{font-size:9px;padding:3px 6px;white-space:nowrap}
.mb-nameline{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 8px;min-width:0}
.mb-nameline .b-team{margin-top:1px}
.b-nameline{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px 10px;min-width:0}
.b-nameline .b-team{font-size:9px;padding:3px 6px;margin-top:2px;white-space:nowrap}

/* office hours: appointment book */
.sent-stamp{position:absolute;right:14px;top:46px;transform:rotate(-12deg)}

/* seminars notice board */
.notice{margin-top:40px;background-color:var(--kraft);background-image:var(--grain);padding:clamp(20px,3.6vw,38px);box-shadow:var(--lift);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:30px;align-items:start;color:var(--kraft-ink);border-radius:3px}
.notice h3{font:900 clamp(28px,3.6vw,46px)/.95 var(--f-display);letter-spacing:-.045em;text-transform:uppercase;margin:8px 0 14px;color:var(--ink)}
.notice p{margin:0;max-width:44ch}
.notice p+p{margin-top:12px}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;padding-top:8px}
.sem{background-color:#fbfbf8;color:var(--ink);padding:30px 16px 18px;position:relative;box-shadow:0 12px 22px -12px rgba(0,0,0,.55);min-width:0}
.sem::before{content:"";position:absolute;top:9px;left:50%;width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f27a70,var(--red-deep));box-shadow:0 2px 3px rgba(0,0,0,.4);transform:translateX(-50%)}
.sem:nth-child(odd){transform:rotate(-1.6deg)}
.sem:nth-child(even){transform:rotate(1.3deg)}
.sem .w{font:600 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--red-deep)}
.sem b{display:block;font:800 19px/1.15 var(--f-display);text-transform:uppercase;margin:8px 0 10px;overflow-wrap:anywhere}
.sem span.d{display:block;font:500 12px/1.6 var(--f-mono);color:var(--ink-soft)}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{grid-template-columns:minmax(0,1fr);padding-bottom:40px}
  .hero-side{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));justify-items:center;align-items:start;padding-top:40px}
  .lanyard{margin-left:0}
  .ticket{position:relative;left:0;bottom:0;width:100%;margin-top:28px;transform:rotate(.6deg)}
  .folder{padding-bottom:clamp(24px,5vw,48px)}
  .seal{left:auto;right:-8px;top:-18px;width:132px;height:132px}
  .brief,.sched,.fac,.notes,.notice{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){.slots{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .folder-tape{display:none}
  .folder{padding-top:96px}
  .day{min-height:66px;padding:6px 4px}
  .chip{font-size:8.5px;padding:3px 3px;letter-spacing:.02em}
  .dows span{font-size:9px;letter-spacing:.06em;padding-inline:3px}
  .cards,.links,.info-grid{grid-template-columns:minmax(0,1fr)}
  .ticket{grid-template-columns:62px minmax(0,1fr)}
  .t-cta{font-size:12.5px;letter-spacing:.01em;padding:9px 12px}
  .seal{width:108px;height:108px;top:-30px;right:2px}
  .lanyard{transform:rotate(3deg)}
  .lanyard .badge{width:min(300px,80vw)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}