/* A reading desk, a set of paths, and an open library. Layout responds to
   actual content width, including the space taken by the desktop sidebar. */
.home-page{padding:clamp(1.5rem,4vw,4rem) clamp(1.25rem,3.5vw,4rem) 2rem;color:var(--ink-1)}
.home-page__inner{max-width:76rem;margin-inline:auto;container:homepage / inline-size}
.home-page :is(h1,h2,h3,h4,h5,p){margin:0}
.home-page :is(button,a,input){-webkit-tap-highlight-color:transparent}
.home-page button{font:inherit;cursor:pointer}
.home-page :is(a,button,input):focus-visible{outline:2px solid var(--text-accent);outline-offset:5px}
.home-page :is(h1,h2):focus{outline:none}
.home-page [hidden]{display:none!important}
.home-page svg{flex-shrink:0}
.home-kicker{font:500 .64rem/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-accent)}
.home-kicker__dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin:0 .5rem .08rem 0}
.home-hero{display:grid;gap:2rem;align-items:center;padding:.5rem 0 2.75rem}
.home-hero__title{font:650 clamp(2.75rem,8.8cqi,5.6rem)/1.01 var(--font-display);letter-spacing:-.055em;margin-top:1.3rem!important;text-wrap:balance}
.home-hero__title span,.home-hero__title em{display:block}
.home-hero__title em{font-style:normal;color:var(--text-accent)}
.home-hero__intro{max-width:41ch;font:400 clamp(1rem,2cqi,1.14rem)/1.7 var(--font-body);color:var(--ink-3);margin-top:1.4rem!important;text-wrap:pretty}
.home-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:1.65rem}
.home-action{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:.65rem 1.15rem;border:1px solid transparent;border-radius:10px;text-decoration:none;font:600 .9rem/1.4 var(--font-body);transition:background-color 180ms,color 180ms,border-color 180ms,transform 180ms}
.home-action svg{width:19px;height:19px;transition:transform 180ms}
.home-action--primary{background:var(--tape-orange);color:#170d07;border-color:var(--tape-orange)}
.home-action--text{color:var(--ink-2);padding-inline:.15rem;border-radius:4px}
.home-action--text>span{margin-left:.5rem}
.home-action--quiet{color:var(--ink-1);background:var(--paper-1);border-color:var(--border-strong)}
.home-hero__facts{display:flex;gap:.5rem 1rem;flex-wrap:wrap;margin-top:1.4rem!important;font:.72rem/1.5 var(--font-body);color:var(--ink-3)}
.home-hero__facts span+span::before{content:'·';margin-right:1rem;color:var(--text-accent)}
.home-desk{align-self:center;min-width:0;overflow:hidden;border:1px solid var(--border-strong);border-radius:18px;background:var(--paper-1)}
.home-desk__visual{height:135px;background:var(--paper-2);position:relative;overflow:hidden;border-bottom:1px solid var(--border-soft)}
.home-desk__label{position:absolute;top:1rem;left:1.4rem;font:.53rem var(--font-mono);letter-spacing:.15em;color:var(--ink-3)}
.home-thread{position:absolute;width:100%;height:100%;inset:1.6rem 0 0;color:var(--tape-orange);overflow:visible}
.home-thread__line{stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-dasharray:680;stroke-dashoffset:0}
.home-thread__echo{stroke:var(--ink-3);stroke-width:1;opacity:.3}
.home-thread circle{fill:var(--paper-2);stroke:currentColor;stroke-width:3}
.home-desk__stamp{position:absolute;right:1.5rem;top:2.7rem;display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:var(--paper-1);border:1px solid var(--border-strong);transform:rotate(9deg);color:var(--text-accent)}
.home-desk__notation{position:absolute;bottom:.7rem;right:1rem;font:.55rem var(--font-mono);color:var(--ink-3);background:var(--paper-2);padding:.25rem}
.home-desk__body{padding:1.4rem 1.5rem .5rem}
.home-desk__context{font:.72rem/1.5 var(--font-body);color:var(--ink-3);margin-top:.75rem!important}
.home-desk h2{font:600 clamp(1.25rem,3cqi,1.65rem)/1.25 var(--font-display);letter-spacing:-.025em;margin-top:.5rem!important;text-wrap:pretty}
.home-desk__link{min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;text-decoration:none;color:var(--text-accent);font:600 .83rem var(--font-body);margin-top:.5rem}
.home-desk__link svg{width:18px;height:18px}
.home-desk__progress{border-top:1px dashed var(--border-soft);padding:1rem 1.5rem;font:.7rem/1.5 var(--font-body);color:var(--ink-3)}
.home-desk__progress strong{color:var(--ink-1)}
.home-desk progress{display:block;width:100%;height:3px;margin-top:.7rem;appearance:none;border:0;background:var(--paper-2);border-radius:3px;overflow:hidden}
.home-desk progress::-webkit-progress-bar{background:var(--paper-2)}
.home-desk progress::-webkit-progress-value{background:var(--tape-orange)}
.home-desk progress::-moz-progress-bar{background:var(--tape-orange)}
.home-sectionhead{display:flex;justify-content:space-between;gap:1rem;align-items:end;margin-bottom:1.4rem}
.home-sectionhead h2{font:600 clamp(1.6rem,3.5cqi,2.15rem)/1.16 var(--font-display);letter-spacing:-.035em;margin-top:.65rem!important;text-wrap:balance}
.home-sectionhead>p{font:.85rem/1.55 var(--font-body);color:var(--ink-3);max-width:24ch}
.home-paths{padding-top:2rem;border-top:1px solid var(--border-soft)}
.home-paths__grid{display:grid;gap:.85rem}
.home-path{display:flex;flex-direction:column;min-width:0;gap:.6rem;border:1px solid var(--border-soft);border-radius:12px;padding:1.25rem;text-align:left;color:var(--ink-1);background:var(--paper-1);transition:border-color 180ms,background-color 180ms,transform 180ms}
.home-path__top{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem;width:100%}
.home-path__top>svg{width:18px;height:18px;color:var(--ink-3);margin-left:auto}
.home-path__icon{display:grid;place-items:center;width:40px;height:40px;background:var(--paper-2);border-radius:10px;color:var(--text-accent)}
.home-path[data-home-path="python"] .home-path__icon{color:var(--ink-1)}
.home-path[data-home-path="pyspark"] .home-path__icon{color:var(--text-accent)}
.home-path[data-home-path="go"] .home-path__icon{color:var(--ink-3)}
.home-path__count{font:.66rem var(--font-mono);color:var(--ink-3)}
.home-path__name{font:600 1.6rem/1.1 var(--font-display);letter-spacing:-.025em}
.home-path__tag{font:600 .82rem/1.4 var(--font-body)}
.home-path__description{font:.83rem/1.65 var(--font-body);color:var(--ink-3);margin-bottom:.5rem;text-wrap:pretty}
.home-path__footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding-top:.8rem;margin-top:auto;border-top:1px solid var(--border-soft);font:.7rem/1.5 var(--font-body);color:var(--ink-3)}
.home-path__footer>span{font-size:1rem;color:var(--text-accent)}
.home-path[aria-pressed="true"]{border-color:var(--text-accent);background:var(--paper-2)}
.home-sound{display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.25rem;padding:1.5rem 0;margin-block:2rem 2.75rem;border-block:1px solid var(--border-soft)}
.home-sound__art{width:52px;height:52px;display:grid;place-items:center;color:var(--text-accent);border-radius:50%;border:1px solid var(--border-strong);outline:1px solid var(--border-soft);outline-offset:-6px;flex-shrink:0}
.home-sound__art svg{width:27px;height:27px}
.home-sound__copy{flex:1;min-width:180px}
.home-sound h2{font:600 1.25rem/1.25 var(--font-display);letter-spacing:-.02em;margin-top:.4rem!important}
.home-sound__copy>p:last-child{font:.83rem/1.6 var(--font-body);color:var(--ink-3);margin-top:.4rem!important;max-width:50ch}
.home-sound .home-action{font-size:.8rem}
.home-library{scroll-margin-top:7rem}
#library,#home-heading{scroll-margin-top:7rem}
.home-filters{margin-top:1.6rem}
.home-search{display:flex;align-items:center;gap:.75rem;border:1px solid var(--border-strong);border-radius:10px;padding:0 1rem;min-height:52px;color:var(--ink-3)}
.home-search:focus-within{outline:2px solid var(--text-accent);outline-offset:3px}
.home-search svg{width:20px;height:20px}
.home-search input{min-width:0;width:100%;height:52px;border:0;background:transparent;color:var(--ink-1);font:400 1rem var(--font-body);outline:none!important;padding:0;box-shadow:none}
.home-search input::placeholder{color:var(--ink-3);opacity:1}
.home-filterbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.65rem 1rem;margin-top:1rem}
.home-filterpaths{display:flex;gap:.3rem;flex-wrap:wrap}
.home-filter{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px;padding:.6rem .85rem;background:var(--paper-1);border:1px solid transparent;border-radius:8px;color:var(--ink-3);font:500 .8rem/1.4 var(--font-body)!important;transition:background-color 180ms,border-color 180ms,color 180ms}
.home-filter[aria-pressed="true"]{border-color:var(--border-strong);background:var(--paper-2);color:var(--ink-1)}
.home-filter--unread{border-color:var(--border-soft)}
.home-filter--unread svg{width:15px;height:15px;opacity:.4}
.home-filter--unread[aria-pressed="true"] svg{opacity:1;color:var(--text-accent)}
.home-resultsbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;color:var(--ink-3);font:.75rem/1.5 var(--font-body)}
.home-clear{min-height:44px;background:transparent;border:0;color:var(--text-accent);text-decoration:underline;text-underline-offset:4px;padding:.5rem}
.home-domain+.home-domain{margin-top:2.5rem}
.home-domain__title{font:600 1.3rem/1.3 var(--font-display);padding:.9rem 0;border-bottom:1px solid var(--border-strong);letter-spacing:-.02em}
.home-curriculum{margin-top:1.5rem}
.home-curriculum__title{font:500 .67rem/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-accent);margin-bottom:.75rem!important}
.home-phase+.home-phase{margin-top:1.5rem}
.home-phase__title{font:500 .83rem/1.5 var(--font-body);color:var(--ink-3);margin-bottom:.6rem!important}
.home-lessons{list-style:none;margin:0;padding:0}
.home-lessons>li{margin:0;padding:0;border-top:1px solid var(--border-soft)}
.home-lessons>li:last-child{border-bottom:1px solid var(--border-soft)}
.home-lesson{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:.75rem;align-items:start;min-height:76px;padding:1rem .25rem;color:var(--ink-1);text-decoration:none;border-radius:6px;transition:background-color 160ms}
.home-lesson__symbol{color:var(--ink-3);display:flex;align-items:center;padding-top:.1rem}
.home-lesson__symbol svg{width:20px;height:20px}
.home-lesson__symbol[data-read="true"]{color:var(--text-accent)}
.home-lesson__copy{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.home-lesson__title{font:600 1rem/1.45 var(--font-body);text-wrap:pretty}
.home-lesson__description{color:var(--ink-3);font:.84rem/1.65 var(--font-body);max-width:68ch;text-wrap:pretty;overflow-wrap:anywhere}
.home-lesson__meta{display:flex;flex-direction:column;align-items:end;gap:.35rem;white-space:nowrap;color:var(--ink-3);font:.65rem/1.6 var(--font-mono);padding-top:.2rem}
.home-lesson__read{font:.65rem var(--font-body);color:var(--text-accent)}
.home-lesson__arrow{display:none;align-self:center;color:var(--ink-3)}
.home-empty{padding:3rem 1rem;text-align:center;border-block:1px solid var(--border-soft)}
.home-empty__icon{display:inline-flex;color:var(--text-accent);margin-bottom:1rem}
.home-empty h3{font:600 1.35rem var(--font-display)}
.home-empty p{max-width:38ch;margin:1rem auto!important;color:var(--ink-3);font:.95rem/1.6 var(--font-body)}
.home-footer{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--border-soft);padding-top:1.25rem;margin-top:3rem;color:var(--ink-3);font:.85rem var(--font-body)}
@container homepage (min-width:620px){
  .home-paths__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-path{padding:1.2rem}
  .home-lesson{grid-template-columns:28px minmax(0,1fr) auto 20px;gap:1rem;padding:1.1rem .6rem}
  .home-lesson__arrow{display:block}
  .home-lesson__arrow svg{width:18px;height:18px}
}
@container homepage (min-width:1040px){.home-paths__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container homepage (min-width:760px){
  .home-hero{grid-template-columns:minmax(0,1.25fr) minmax(280px,.85fr);gap:clamp(2rem,4cqi,4rem);padding:1rem 0 3.5rem}
  .home-hero__title{font-size:clamp(3rem,6.4cqi,5.1rem)}
  .home-hero__intro{max-width:37ch}
  .home-desk{margin-top:.75rem}
  .home-desk__visual{height:145px}
  .home-paths{padding-top:2.5rem}
  .home-sound{margin-block:2.5rem 3.25rem}
}
@container homepage (max-width:440px){
  .home-hero__title{font-size:clamp(2.5rem,11.5cqi,3.6rem)}
  .home-hero__facts{gap:.4rem .65rem;font-size:.68rem}
  .home-hero__facts span+span::before{margin-right:.65rem}
  .home-desk__visual{height:95px}
  .home-desk__label{font-size:.5rem;top:.75rem}
  .home-desk__stamp{top:1.5rem;width:42px;height:42px}
  .home-sectionhead{display:block}
  .home-sectionhead>p{margin-top:.75rem!important;max-width:none}
  .home-sound .home-action{width:100%}
  .home-filterbar{gap:.5rem}
  .home-filter{padding:.6rem .7rem}
  .home-lesson{grid-template-columns:minmax(0,1fr) auto}
  .home-lesson__symbol{display:none}
  .home-lesson__title{font-size:.95rem}
  .home-lesson__meta{font-size:.6rem}
}
@media (hover:hover){
  .home-action--primary:hover{background:var(--tape-orange-hi);border-color:var(--tape-orange-hi)}
  .home-action--quiet:hover,.home-filter:hover,.home-lesson:hover{background:var(--paper-2)}
  .home-action--text:hover,.home-desk__link:hover{color:var(--text-accent);text-decoration:underline;text-underline-offset:5px}
  .home-action:hover svg{transform:translateX(3px)}
  .home-path:hover{border-color:var(--text-accent);transform:translateY(-3px)}
}
@media (prefers-reduced-motion:no-preference){
  .home-hero__copy{animation:home-arrive 400ms ease-out both}
  .home-desk{animation:home-arrive 500ms 70ms ease-out both}
  .home-thread__line{animation:home-thread 1100ms 100ms ease-out both}
  @keyframes home-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
  @keyframes home-thread{from{stroke-dashoffset:680}to{stroke-dashoffset:0}}
  html[data-vt="true"] .home-hero__copy,html[data-vt="true"] .home-desk{animation:none}
}
@media (prefers-reduced-motion:reduce){.home-page *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}