:root { --board:#F5F6F4; --black:#151515; --red:#D62828; --red-d:#B21F1F; --blue:#1D4ED8; --green:#15803D; --soft:#5C5F63; --frame:#B9BDC2; --paper:#ECEDEA; --line:#D6D8DA; }
* { box-sizing:border-box; }
html { scroll-padding-top:80px; }
body { margin:0; background:var(--paper); color:var(--black); font:17px/1.6 'Geist',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
h1, h2, h3, .bs { font-family:'Big Shoulders','Geist',sans-serif; font-weight:800; line-height:.92; text-transform:uppercase; letter-spacing:.005em; }
.wrap { max-width:1200px; margin:0 auto; padding:0 24px; }
.skip { position:absolute; left:-999px; top:8px; background:var(--red); color:#fff; padding:8px 12px; z-index:50; }
.skip:focus { left:8px; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

.top { position:sticky; top:0; z-index:20; background:rgba(236,237,234,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:26px; height:66px; }
.logo { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--black); }
.logo svg { width:38px; height:30px; }
.logo span { font:800 26px/1 'Big Shoulders',sans-serif; letter-spacing:.02em; }
.top nav { display:flex; gap:22px; margin-left:auto; }
.top nav a { text-decoration:none; font-weight:600; font-size:15px; color:var(--soft); padding:6px 0; border-bottom:2px solid transparent; }
.top nav a:hover, .top nav a[aria-current] { color:var(--black); border-color:var(--red); }
.top .cta { text-decoration:none; font-weight:700; font-size:15px; background:var(--red); color:#fff; padding:10px 16px; border-radius:4px; }
.top .cta:hover { background:var(--red-d); }
.menu-toggle { display:none; margin-left:auto; background:none; border:2px solid var(--black); font:700 14px 'Geist'; padding:7px 13px; border-radius:4px; color:var(--black); }

.btn { display:inline-block; background:var(--red); color:#fff; font-weight:700; text-decoration:none; padding:14px 20px; border-radius:4px; border:0; font-size:16px; cursor:pointer; font-family:inherit; }
.btn:hover { background:var(--red-d); }
.btn.dark { background:var(--black); }
.btn.dark:hover { background:#000; }
.btn.line { background:transparent; color:inherit; box-shadow:inset 0 0 0 2px currentColor; }
.sec { padding:96px 0; }
.sec h2 { font-size:clamp(46px,6vw,86px); margin:0 0 18px; }
.lede { font-size:clamp(18px,1.5vw,21px); color:var(--soft); max-width:36em; margin:0 0 40px; }
.ink { background:var(--black); color:#F2F2F0; }
.ink .lede { color:#B8BBBF; }
.board-bg { background:var(--board); }
.page-intro { padding:80px 0 56px; border-bottom:1px solid var(--line); background:var(--board); }
.page-intro h1 { font-size:clamp(60px,9vw,136px); margin:0 0 16px; }
.page-intro h1 em { font-style:normal; color:var(--red); }
.page-intro p { font-size:clamp(18px,1.6vw,22px); color:var(--soft); max-width:34em; margin:0; }
.src { font-size:13px; color:var(--soft); }
.ink .src { color:#9EA2A7; }

/* the whiteboard */
.wb { background:linear-gradient(#C9CDD2,#AEB3B9); border-radius:10px; padding:12px; box-shadow:0 30px 60px -30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.6); position:relative; }
.wb-in { background:var(--board); border-radius:4px; padding:24px 26px 30px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06), inset 0 10px 30px rgba(0,0,0,.04); position:relative; overflow:hidden; }
.wb-in::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 30%, rgba(21,21,21,.035), transparent 40%), radial-gradient(ellipse at 75% 70%, rgba(29,78,216,.03), transparent 45%); pointer-events:none; }
.wb-tray { height:14px; margin:0 26px; background:linear-gradient(#B9BDC2,#9EA3A9); border-radius:0 0 6px 6px; position:relative; }
.wb-tray i { position:absolute; top:-5px; width:70px; height:9px; border-radius:5px 2px 2px 5px; }
.wb-tray i::after { content:''; position:absolute; right:-10px; top:2px; width:12px; height:5px; border-radius:0 3px 3px 0; background:inherit; filter:brightness(.7); }
.mk { font-family:'Big Shoulders',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.01em; }

/* the week written on the board */
.wb-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; border-bottom:3px solid var(--black); padding-bottom:10px; margin-bottom:6px; position:relative; }
.wb-head h3 { font-size:clamp(34px,4vw,52px); margin:0; color:var(--blue); }
.red { color:var(--red); } .blue { color:var(--blue); } .green { color:var(--green); } .rest { color:#9AA0A6; }
.wb-week { display:grid; grid-template-columns:repeat(7,1fr); position:relative; min-height:300px; }
.day { padding:10px 8px 10px 10px; border-left:2px solid var(--black); min-width:0; }
.day:first-child { border-left:0; padding-left:0; }
.day b { display:block; font-size:22px; margin-bottom:6px; }
.day span { display:block; font-size:19px; margin-bottom:6px; line-height:1; }
.day i { display:block; font-style:normal; font-size:15px; line-height:1.15; margin-bottom:6px; color:#2B2B2B; word-wrap:break-word; }
.day.rest span { color:#9AA0A6; }
.day > * { animation:ink .5s both; }
@keyframes ink { from { opacity:0; clip-path:inset(0 100% 0 0); } to { opacity:1; clip-path:inset(0 0 0 0); } }
.wb-note { margin:12px 0 0; text-align:right; color:var(--red); font-size:24px; transform:rotate(-2deg); }
@media (max-width:760px) {
    .wb-week { grid-template-columns:1fr; min-height:0; }
    .day { border-left:0; border-top:1.5px solid rgba(21,21,21,.25); padding:10px 0; display:grid; grid-template-columns:56px 1fr; column-gap:10px; }
    .day:first-child { border-top:0; }
    .day b { grid-row:span 9; margin:0; }
    .day.rest i { display:none; }
}

.foot { background:var(--black); color:#9EA2A7; font-size:14px; padding:56px 0 28px; }
.foot .wrap { display:grid; grid-template-columns:1fr auto; gap:28px; }
.foot .logo { color:#F2F2F0; }
.foot p { margin:8px 0 0; }
.foot nav { display:flex; gap:22px; flex-wrap:wrap; align-items:center; }
.foot nav a { text-decoration:none; color:#D7D9DB; font-weight:600; }
.fine { grid-column:1 / -1; display:flex; gap:8px 24px; flex-wrap:wrap; border-top:1px solid #2A2A2A; padding-top:20px; margin:0; color:#7F8388; }

@media (max-width:980px) {
  .menu-toggle { display:block; }
  .top .cta { display:none; }
  .top nav { display:none; position:absolute; top:66px; left:0; right:0; background:var(--paper); flex-direction:column; gap:0; padding:6px 24px 18px; border-bottom:1px solid var(--line); }
  .top nav.open { display:flex; }
  .top nav a { padding:12px 0; font-size:17px; border-bottom:1px solid var(--line); }
  .sec { padding:70px 0; }
}
@media (max-width:600px) { .foot .wrap { grid-template-columns:1fr; } .page-intro { padding:56px 0 44px; } .wb-in { padding:18px 16px 22px; } }