/* rekosk.dev: the School section (squared notebook look): title, timeline and notes */
/* school: squared-notebook design (grid paper, paper cards with a hard offset shadow, highlighter marks,
   Patrick Hand for handwriting, Fira Sans for text, IBM Plex Mono for dates). Tokens live on #school so
   they never leak into the rest of the site. */
#school{--sq-bg:#14181f;--sq-grid:#232a36;--sq-paper:#1c222c;--sq-ink:#e9edf4;--sq-ink2:#a0a9ba;--sq-edge:#566075;--sq-shadow:rgba(0,0,0,.5);--sq-mo:rgba(255,160,90,.34);--sq-mg:rgba(90,200,160,.32);--sq-mp:rgba(240,100,175,.36);--sq-teal:#4fd1b5;--sq-focus:#7fb0ff;--sq-hand:'Patrick Hand',cursive;--sq-body:'Fira Sans',system-ui,-apple-system,'Segoe UI',sans-serif;--sq-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;font-family:var(--sq-body);color:var(--sq-ink)}
/* the title: handwriting on a straight green highlighter stripe instead of the paint brush */
#school .sec-title{font-family:var(--sq-hand);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.05;font-size:clamp(52px,7.4vw,108px);color:var(--sq-ink);padding:0 .25em}
#school .sec-brush{background:var(--sq-mg);clip-path:inset(14% 0 10% 0);transition:clip-path var(--fd,.5s) cubic-bezier(.3,.7,.2,1),transform .5s cubic-bezier(.34,1.56,.64,1)}
#school .sec-title:hover .sec-brush{clip-path:inset(6% -2% 4% -2%);transform:rotate(-1deg)}
.school-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
/* timeline: a dashed pencil line down the left margin, a square box per entry that gets coloured in with a
   highlighter when the entry is open, joined to its paper card by a short tick */
.tl{position:relative;display:flex;flex-direction:column;gap:18px;margin:0;padding:0 0 0 48px;list-style:none;counter-reset:tl}
.tl::before,.tl::after{content:"";position:absolute;left:11px;top:22px;bottom:22px;width:0;border-left:1.5px dashed var(--sq-edge)}
.tl::after{border-left:2px solid var(--sq-teal);transform-origin:top}
.tl-item{position:relative;z-index:1;counter-increment:tl;border-radius:4px;background:var(--sq-paper);border:1.5px solid var(--sq-edge);box-shadow:0 0 0 var(--sq-shadow);transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.tl-item:nth-child(3n+1){--sq-hl:var(--sq-mo)}
.tl-item:nth-child(3n+2){--sq-hl:var(--sq-mo)}
.tl-item:nth-child(3n){--sq-hl:var(--sq-mp)}
.tl-item:hover{border-color:var(--sq-ink);transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--sq-shadow)}
/* hover edge fix: while it's hovered, an invisible copy of the box stays where the box was before it moved, so a
   cursor on its last pixels keeps the hover instead of rapidly losing and getting it back */
.tl-item:hover::after{content:"";position:absolute;inset:-3.5px;z-index:-1;transform:translate(2px,2px)}
.tl-item.open{border-color:var(--sq-ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--sq-shadow)}
/* the square on the margin line with the entry's number written in it */
.tl-dot{position:absolute;left:-49px;top:19px;width:26px;height:26px;display:grid;place-items:center;border-radius:3px;background:var(--sq-bg);border:1.5px solid var(--sq-edge);font:400 17px/1 var(--sq-hand);color:var(--sq-ink2);transition:background-color .25s ease,border-color .2s ease,color .2s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
.tl-dot::before{content:attr(data-n)}
.tl-dot::after{content:"";position:absolute;left:100%;top:50%;width:21px;border-top:1.5px solid var(--sq-edge);transition:border-color .2s ease}
.tl-item:hover .tl-dot{border-color:var(--sq-ink);color:var(--sq-ink);transform:rotate(-6deg)}
.tl-item.open .tl-dot{background:linear-gradient(var(--sq-hl),var(--sq-hl)),var(--sq-bg);border-color:var(--sq-ink);color:var(--sq-ink);transform:rotate(-6deg) scale(1.08)}
.tl-item:hover .tl-dot::after,.tl-item.open .tl-dot::after{border-color:var(--sq-ink)}
.tl-head{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;width:100%;padding:16px 18px;cursor:pointer;border-radius:4px}
.tl-head:focus-visible{outline:3px solid var(--sq-focus);outline-offset:2px}
.tl-when{grid-column:1;justify-self:start;font:500 13px/1 var(--sq-mono);color:var(--sq-ink2);padding:5px 8px;border:1.5px solid var(--sq-edge);border-radius:3px;background:var(--sq-bg)}
/* the school's name gets a highlighter stroke swiped across it when the entry opens */
.tl-what{grid-column:1;justify-self:start;font:400 clamp(26px,2.4vw,32px)/1.15 var(--sq-hand);color:var(--sq-ink);padding:0 .3em;margin-left:-.3em;background:linear-gradient(transparent 14%,var(--sq-hl) 14% 86%,transparent 86%) no-repeat 0 0/0% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .5s cubic-bezier(.3,.7,.2,1)}
.tl-item.open .tl-what{background-size:100% 100%;transition-delay:.12s}
.tl-sub{grid-column:1;font-size:15px;font-style:italic;color:var(--sq-ink2)}
.tl-now{justify-self:start;font-style:normal;font:700 19px/1.2 var(--sq-hand);color:var(--sq-ink)}
.tl-plus{grid-row:1 / span 4!important}
.tl-row{display:flex;align-items:center;gap:16px;margin:0 18px 18px;padding-top:14px;border-top:1.5px dashed var(--sq-edge)}
.tl-row p{margin:0!important;padding:0!important;border:0!important;flex:1}
.tl-logo{flex:none;width:clamp(64px,9vw,96px);height:auto}
@media (max-width:520px){.tl-row{margin:0 14px 14px}}
.tl-plus{grid-column:2;grid-row:1 / span 3;align-self:center;display:grid;place-items:center;width:44px;height:44px;border-radius:4px;background:var(--sq-bg);border:1.5px solid var(--sq-edge);color:var(--sq-ink);transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .15s ease}
.tl-plus .ico{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.tl-head:hover .tl-plus{border-color:var(--sq-ink);transform:translate(-1px,-1px);box-shadow:2px 2px 0 var(--sq-shadow)}
.tl-item.open .tl-plus{background:var(--sq-mg);border-color:var(--sq-ink)}
.tl-item.open .tl-plus .ico{transform:rotate(135deg)}
.tl-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1)}
.tl-item.open .tl-body{grid-template-rows:1fr}
.tl-body-in{overflow:hidden}
.tl-body p{margin:0 18px 18px;padding-top:14px;border-top:1.5px dashed var(--sq-edge);font-size:16px;line-height:1.6;color:var(--sq-ink2)}
/* school notes: a paper card on the grid, clipped on, tilted a little */
.note{position:relative;padding:34px 24px 24px;border-radius:4px;background:var(--sq-paper);border:1.5px solid var(--sq-ink);box-shadow:4px 4px 0 var(--sq-shadow);color:var(--sq-ink);transform:rotate(1.5deg);transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease}
.note:hover{transform:rotate(-.5deg) translate(-3px,-3px);box-shadow:7px 7px 0 var(--sq-shadow)}
/* hover edge fix (see .tl-item:hover::after) */
.note:hover::after{content:"";position:absolute;inset:-3.5px;z-index:-1;transform:translate(3px,3px) rotate(2deg)}
.clip{position:absolute;left:44px;top:-22px;width:22px;height:62px;border:3px solid var(--sq-edge);border-radius:12px;transform:rotate(8deg)}
.clip::after{content:"";position:absolute;left:3px;right:3px;top:10px;bottom:-6px;border:3px solid var(--sq-edge);border-top:0;border-radius:0 0 10px 10px}
.note-h{display:inline;margin:0;font:400 30px/1.4 var(--sq-hand);color:var(--sq-ink);padding:0 .3em;margin-left:-.3em;background:linear-gradient(transparent 14%,rgba(120,190,255,.38) 14% 86%,transparent 86%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.note-p{margin:14px 0 0;font:400 16px/1.6 var(--sq-body);color:var(--sq-ink2)}
.note-btn{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;margin-top:18px;padding:0 22px;font:400 22px/1 var(--sq-hand);color:var(--sq-ink);background:rgba(120,190,255,.38);border:1.5px solid var(--sq-ink);border-radius:4px;box-shadow:4px 4px 0 var(--sq-shadow);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.note-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--sq-shadow)}
.note-btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--sq-shadow)}
/* hover edge fix (see .tl-item:hover::after) */
.note-btn:hover::after{content:"";position:absolute;inset:-3.5px;z-index:-1;transform:translate(2px,2px)}
.note-btn:active::after{transform:translate(-2px,-2px)}
.note-btn:focus-visible{outline:3px solid var(--sq-focus);outline-offset:2px}
.note ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.note li{font:400 16px/1.5 var(--sq-body);color:var(--sq-ink2);padding:10px 12px;border:1.5px solid var(--sq-edge);border-radius:4px;background:var(--sq-bg)}
.note li b{display:block;font:400 19px/1.2 var(--sq-hand);color:var(--sq-ink)}
.note-star{position:absolute;right:16px;top:14px;width:40px;height:40px;color:var(--sq-mp);overflow:visible;transition:transform .6s cubic-bezier(.34,1.56,.64,1)}
.note:hover .note-star{transform:rotate(72deg) scale(1.2)}
.note-star path{fill:none;stroke:currentColor;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.school-grid{grid-template-columns:minmax(0,1fr)}.note{max-width:460px}}
@media (max-width:520px){.tl{padding-left:40px}.tl-dot{left:-41px}.tl-dot::after{width:13px}.tl-head{padding:14px}.tl-body p{margin:0 14px 14px}}
@media (prefers-reduced-motion:reduce){.tl-item,.tl-dot,.tl-what,.tl-plus,.tl-plus .ico,.note{transition:none!important}}