/* Sketch Hour website pages (home, curriculum, handbook, support...). Palette and the button base come from styles.css.
   Colours follow 60-30-10: off-white page (60), linen bands and cards (30), dusk blue for actions and one band (10).
   Type follows Lovable's sizes: 40/52px headline, 30/36px section headings, 24px features, 18px cards and lead, 16px text, 14px small.
   Phone below 768px, tablet 768-1023px, desktop 1024px and up. */

.site{
  --gutter:20px;--sec-y:48px;
  --h1:2.5rem;--h2:1.875rem;--h3:1.375rem;--h4:1.125rem;--lead:1.125rem;--body:1rem;--small:.875rem;
  --accent:var(--dusk-blue);--accent-hover:#46526f;--on-accent:#fff;--accent-text:var(--dusk-blue);
  --band:var(--linen);--card:#fff;--muted:var(--text-weak);
  --band-accent:var(--dusk-blue);
  padding:0;font-size:var(--body);line-height:1.5
}
@media (min-width:768px){.site{--gutter:32px;--sec-y:72px;--h1:3.25rem;--h2:2.25rem;--h3:1.5rem}}
@media (min-width:1024px){.site{--gutter:40px;--sec-y:80px}}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .site{--band:#1c1d22;--card:#191a1f;--accent:#5a688c;--accent-hover:#66759b;--band-accent:#2c3550;--accent-text:var(--primary-text)}
}
:root[data-theme="dark"] .site{--band:#1c1d22;--card:#191a1f;--accent:#5a688c;--accent-hover:#66759b;--band-accent:#2c3550;--accent-text:var(--primary-text)}

/* ---------- containers ---------- */
.site main{max-width:none;padding:0}
.wrap{max-width:1200px;margin-inline:auto;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.page{padding-bottom:var(--sec-y)}
.sec{padding-block:var(--sec-y)}
.band-linen{background:var(--band)}
.band-accent{background:var(--band-accent);color:#fff}
.site [id]{scroll-margin-top:96px}

/* ---------- type ---------- */
.site h1{font-size:var(--h1);font-weight:700;line-height:1.05;letter-spacing:-.03em}
.site h2{font-size:var(--h2);font-weight:700;line-height:1.1;letter-spacing:-.02em}
.site h3{font-size:var(--h3);font-weight:700;line-height:1.25;letter-spacing:-.01em}
.site main p{text-wrap:pretty}
.site .lbl{display:block;font-family:var(--font-body);font-size:var(--small);font-weight:600;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--accent-text)}
.site .lead{font-size:var(--lead);line-height:1.55;color:var(--text)}
.fine,.site .muted{font-size:var(--small);line-height:1.45;color:var(--muted)}
.site main :is(p,li,td) a:not(.btn){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.site main :is(p,li,td) a:not(.btn):hover{text-decoration-thickness:2px}
.site .lbl + :is(h1,h2,h3){margin-top:12px}
.site :is(h1,h2,h3) + :is(p,.lead){margin-top:16px}
.sec-head{display:grid;justify-items:center;text-align:center;margin-bottom:48px}
.sec-head h2{max-width:20ch}
.sec-head p{max-width:40em;margin-top:16px;color:var(--text)}

/* ---------- buttons and header ---------- */
.site .btn{min-height:44px;height:auto;padding:10px 20px;border-radius:10px;border:1px solid var(--border-hover);background:var(--card);color:var(--text-strong);font-family:var(--font-head);font-size:.9375rem;font-weight:700;line-height:1.25;white-space:normal;text-align:center}
.site .btn:hover{border-color:var(--text-strong)}
.site .btn.primary{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.site .btn.primary:hover{background:var(--accent-hover);color:var(--on-accent)}
.site .btn.big{min-height:48px;padding:12px 24px;font-size:1rem}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:479.98px){.cta-row{flex-direction:column;align-items:stretch;justify-self:stretch;width:100%}.cta-row .btn{width:100%}}

.site .top{margin:0;padding:0}
.site .top-in{max-width:1200px;padding-inline:max(var(--gutter),env(safe-area-inset-left,0px)) max(var(--gutter),env(safe-area-inset-right,0px))}
.site .tab{height:44px;padding:0 14px;font-family:var(--font-head);font-size:.9375rem;font-weight:700;line-height:1.4}
.site-cta{margin-left:auto;align-self:center}
.site .brand{min-height:44px}
@media (max-width:760px){
  .site .top-in{row-gap:0}
  .site .brand{min-height:52px}
  .site .tabs{padding-bottom:4px}
  .site .tab{padding:0 10px;height:44px}
}

/* ---------- home: hero ---------- */
.hero{padding-block:64px 0;text-align:center}
.hero-copy{display:grid;justify-items:center;max-width:780px;margin-inline:auto}
.badge{display:inline-flex;align-items:center;min-height:32px;padding:4px 14px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--shadow-card);font-size:var(--small);font-weight:600;line-height:1.4;color:var(--accent-text)}
.badge + h1{margin-top:20px}
.hero h1{max-width:13em}
.scribble{position:relative;white-space:nowrap}
.scribble svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.32em;overflow:visible;pointer-events:none}
.scribble path{fill:none;stroke:var(--lavender-grey);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation:pen-stroke .9s cubic-bezier(.6,.05,.3,1) .35s both}
@keyframes pen-stroke{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.scribble path{animation:none}}
.hero .lead{max-width:34em;margin-top:20px}
.hero .cta-row{justify-content:center;margin-top:28px}
.hero .fine{margin-top:12px}
.hero-shot{position:relative;isolation:isolate;max-width:960px;margin:48px auto 0}
.hero-shot::before{content:"";position:absolute;inset:10% 4% -6%;z-index:-1;background:var(--glow);filter:blur(48px);opacity:.8}
.hero-shot img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:var(--shadow-pop)}
@media (max-width:767.98px){.hero{padding-top:40px}.hero-shot{margin-top:32px}}

/* reference strip */
.ref-strip{padding-block:56px 72px}
.ref-row{display:flex;gap:12px;justify-content:center;list-style:none;margin:0;padding:4px var(--gutter);overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}
.ref-row::-webkit-scrollbar{display:none}
.ref-row li{flex:none;scroll-snap-align:center}
.ref-row img{display:block;height:160px;width:auto;border-radius:12px;background:var(--sunk)}
@media (max-width:1279.98px){
  .ref-row{justify-content:flex-start;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
}
@media (max-width:767.98px){.ref-strip{padding-block:40px 48px}.ref-row img{height:120px}.keycaps{gap:16px 20px}.keycaps kbd{min-width:48px;height:48px}}

/* ---------- home: how it works ---------- */
.rows{display:grid;gap:64px}
.row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.row.flip .row-copy{order:2}
.row-copy p{margin-top:16px;max-width:30em}
.shot{margin:0;border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-pop)}
.shot img{display:block;width:100%;height:auto}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:20px 0 0;padding:0}
.tags li{padding:4px 12px;border-radius:var(--r-pill);background:var(--card);font-size:var(--small);line-height:1.45;color:var(--text-strong)}
@media (max-width:767.98px){
  .rows{gap:40px}
  .row{grid-template-columns:minmax(0,1fr);gap:24px}
  .row.flip .row-copy{order:0}
}

/* ---------- home: more tools ---------- */
.tools{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
@media (min-width:640px){.tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:1024px){.tools{gap:24px}}
.tool{background:var(--card);border-radius:16px;box-shadow:var(--shadow-card);padding:12px 12px 24px}
.tool-media{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#f8f6f1;display:flex}
.tool-media img{width:100%;height:100%;object-fit:cover;display:block}
.tool-media.contain img{object-fit:contain}
.tool-media.pair figure{position:relative;margin:0;flex:1;min-width:0}
.tool-media.pair figure + figure{border-left:2px solid #f8f6f1}
.tool-media figcaption{position:absolute;left:8px;bottom:8px;padding:2px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:#17181c;font-size:var(--small);font-weight:600;line-height:1.45}
.tool h3{font-size:var(--h4);line-height:1.3;margin:20px 12px 0}
.tool p{margin:8px 12px 0;color:var(--text)}
@media (max-width:639.98px){
  .tool{display:grid;grid-template-columns:minmax(0,9fr) minmax(0,11fr);grid-template-areas:"m t" "m p";column-gap:16px;padding:12px}
  .tool-media{grid-area:m;aspect-ratio:1/1}
  .tool h3{grid-area:t;align-self:end;margin:0}
  .tool p{grid-area:p;align-self:start;margin:6px 0 0}
  .tool-media figcaption{left:4px;bottom:4px;padding:0 6px;white-space:nowrap}
}

/* ---------- home: shortcuts band ---------- */
.keys-wrap{display:grid;justify-items:center;text-align:center}
.band-accent h2{color:#fff}
.keycaps{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 32px;list-style:none;margin:32px 0 0;padding:0}
.keycaps li{display:grid;justify-items:center;gap:12px}
.keycaps .caps{display:flex;gap:8px}
.keycaps kbd{display:inline-grid;place-items:center;min-width:56px;height:56px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.35);border-bottom-width:4px;background:rgba(255,255,255,.1);color:#fff;font-family:var(--font-head);font-size:var(--h4);font-weight:700;line-height:1}
.keycaps span{font-size:var(--small);line-height:1.45;color:rgba(255,255,255,.88)}
.band-accent .more-link{margin-top:32px}
.band-accent a{color:#fff;text-decoration:underline;text-underline-offset:.2em}

/* ---------- home: closing ---------- */
.closing{text-align:center}
.closing .wrap{display:grid;justify-items:center}
.closing .cta-row{justify-content:center;margin-top:28px}
.closing .fine{margin-top:16px}

/* ---------- inner pages ---------- */
.page-head{padding-block:64px 40px;max-width:44em}
.page-head .lead{margin-top:16px;max-width:38em}
.page-head .cta-row{margin-top:28px}
@media (max-width:767.98px){.page-head{padding-top:40px}}

.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start}
.toc{position:sticky;top:96px;display:grid;gap:0;font-size:.9375rem;line-height:1.4}
.toc .lbl{margin-bottom:8px}
.toc a{display:flex;align-items:center;min-height:44px;color:var(--text);padding:0 12px;border-radius:var(--r-pill)}
.toc a:hover{color:var(--text-strong);background:var(--band)}
@media (max-width:1023.98px){
  .doc{grid-template-columns:minmax(0,1fr);gap:40px}
  .toc{position:static;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));column-gap:16px}
  .toc .lbl{grid-column:1/-1}
}

.prose{max-width:68ch;min-width:0;line-height:1.6}
.prose > * + *{margin-top:16px}
.prose h2{font-size:var(--h3);line-height:1.25;letter-spacing:-.01em;margin-top:48px;padding-top:40px;border-top:1px solid var(--border)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:var(--h4);line-height:1.3;letter-spacing:0;margin-top:32px}
.prose ul,.prose ol{padding-left:24px}
.prose li + li{margin-top:8px}
.prose strong{color:var(--text-strong)}
.prose code{font-family:var(--font-mono);font-size:.9em;background:var(--sunk);color:var(--text-strong);padding:0 4px;border-radius:6px}
.note{background:var(--band);color:var(--text);border-radius:12px;padding:16px 20px}
.quick{background:var(--band);border-radius:16px;padding:24px 28px}
.quick h2{margin:0;padding:0;border:0}
.quick ol{margin-top:16px}
.table-wrap{overflow-x:auto}
table.kb{border-collapse:collapse;width:100%;line-height:1.5}
table.kb th,table.kb td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
table.kb th{color:var(--text-strong);font-weight:600}
table.kb td:first-child{white-space:nowrap;width:1%}
kbd{display:inline-block;font-family:var(--font-body);font-size:var(--small);font-weight:600;line-height:1.6;min-width:2em;text-align:center;padding:0 6px;border:1px solid var(--border-hover);border-bottom-width:2px;border-radius:6px;background:var(--card);color:var(--text-strong);white-space:nowrap}

.faq{display:grid}
.faq details{border-bottom:1px solid var(--border)}
.faq details:first-child{border-top:1px solid var(--border)}
.faq summary{display:flex;align-items:center;min-height:56px;cursor:pointer;font-family:var(--font-head);font-size:var(--h4);font-weight:700;line-height:1.3;color:var(--text-strong);list-style:none;padding-block:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;padding-left:16px;font-size:1.5rem;font-weight:700;color:var(--accent-text)}
.faq details[open] summary::after{content:"−"}
.faq details > div{display:grid;gap:12px;padding-bottom:20px}

.contact{background:var(--band);border-radius:16px;padding:28px;display:grid;gap:12px;max-width:44em;margin-top:56px}
.contact .addr{font-size:var(--lead);font-weight:600}

.log-entry{display:grid;gap:12px}
.log-entry .when{font-size:var(--small);color:var(--muted)}

.notfound{padding-block:64px;display:grid;gap:16px;justify-items:start;max-width:40em}

/* ---------- curriculum page ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-bottom:var(--sec-y)}
.stat{background:var(--band);border-radius:16px;padding:28px}
.stat b{display:block;font-family:var(--font-head);font-size:var(--h1);font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--accent-text);font-variant-numeric:tabular-nums}
.stat .stat-label{display:block;margin-top:8px;font-family:var(--font-head);font-size:var(--h4);font-weight:700;color:var(--text-strong)}
.stat p{margin-top:8px;color:var(--text)}
@media (max-width:767.98px){.stats{grid-template-columns:minmax(0,1fr);gap:16px}}
.band-in{padding-bottom:var(--sec-y)}
.band-in .sec-head{justify-items:start;text-align:left;margin-bottom:32px}
.cur-terms{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cur-term{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;background:var(--card);border-radius:16px;box-shadow:var(--shadow-card);padding:24px}
.cur-n{font-family:var(--font-head);font-size:var(--h2);font-weight:800;line-height:1;color:var(--accent-text);font-variant-numeric:tabular-nums;min-width:1.1em}
.cur-term ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site main .cur-term li > a{display:grid;align-content:center;min-height:44px;color:var(--text-strong);text-decoration:none;font-weight:600;line-height:1.4}
.cur-term a span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.cur-term a:hover span{text-decoration-thickness:2px}
.cur-term small{font-size:var(--small);font-weight:400;color:var(--muted)}
.cur-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:899.98px){.cur-tracks{grid-template-columns:minmax(0,1fr)}}
.cur-track{background:var(--card);border-radius:16px;box-shadow:var(--shadow-card);padding:28px;display:grid;gap:12px;align-content:start}
.cur-track h3{font-size:var(--h4);line-height:1.3}
.cur-track ol{padding-left:22px;display:grid;gap:12px}
.cur-track li span{display:block;color:var(--muted)}
.cur-track li a{color:var(--text-strong)}
.panel{background:var(--band);border-radius:16px;padding:48px 28px;text-align:center;display:grid;justify-items:center}
.panel .cta-row{justify-content:center;margin-top:28px}

/* ---------- footer ---------- */
.site-foot{margin:0;padding:0;background:transparent;border-top:1px solid var(--border)}
.foot-in{max-width:1200px;margin:0 auto;padding:48px max(var(--gutter),env(safe-area-inset-right,0px)) 40px max(var(--gutter),env(safe-area-inset-left,0px));display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand{display:grid;gap:12px;align-content:start}
.foot-brand p{color:var(--muted);font-size:var(--small);line-height:1.6;max-width:28em}
.foot-col{display:grid;align-content:start;font-size:var(--small);line-height:1.45}
.foot-col .lbl{color:var(--text-strong);margin-bottom:4px}
.foot-col a{display:flex;align-items:center;min-height:44px;color:var(--text)}
.foot-col a:hover{color:var(--accent-text);text-decoration:underline}
.foot-legal{grid-column:1/-1;border-top:1px solid var(--border);padding-top:24px;font-size:var(--small);line-height:1.6;color:var(--muted)}
@media (max-width:760px){
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px}
  .foot-brand{grid-column:1/-1}
}