/* ============================================================
   Potnis Foundation: shared base layer
   Tokens, reset, type, illustration fills, nav, buttons, badges,
   card + band primitives, footer, reveal, focus, reduced motion.
   Page-specific mechanics (the door, the rooms, the shelf, the
   hallway) live in the page that uses them.
   ============================================================ */

/* ---------- Day: sunny walls, cobalt door ---------- */
:root{
  --sun:#FFC53D; --sun-d:#E8A21F; --cobalt:#2340C4; --cobalt-d:#15288A; --cobalt-l:#5B74E6;
  --tomato:#E5462B; --tomato-d:#B5301B; --teal:#0E7A69; --teal-d:#0A5A4D; --teal-l:#3DB39B;
  --pink:#F5A9B8; --cream:#FFF4DF; --ink:#1C1A36; --slate:#223047;
  --frame:#FFF4DF; --frame-d:#E9D5AE; --floor:#E8A21F; --inside:#EF6A3A; --inside-f:#FFD37C;
  --spill:#FFF6E0; --ray2:#FFEFCB; --glass:#15288A; --glow:#FFF1C4; --glow-op:.85; --win:#FFE08A; --moon-op:0;
  --wall-clinic:#0E7A69; --floor-clinic:#0A5A4D; --wall-class:#E5462B; --floor-class:#B5301B;
  --wall-shop:#2340C4; --floor-shop:#15288A;
  --panel-a:#FFC53D; --panel-b:#E5462B;
  --g-hero:#FFC53D; --t-hero:#1C1A36;
  --g-rooms:#FFE9B8; --t-rooms:#1C1A36;
  --g-work:#2340C4; --t-work:#FFF4DF; --a-work:#FFC53D;
  --g-goods:#FFF6E6; --t-goods:#1C1A36;
  --g-began:#0E6A5B; --t-began:#FFF4DF; --a-began:#FFC53D;
  --g-stew:#C4351F; --t-stew:#FFF4DF;
  --g-partner:#FFC53D; --t-partner:#1C1A36;
  --g-foot:#1C1A36; --t-foot:#FFF4DF;
  --btn:#2340C4; --btn-t:#FFF4DF; --btn-h:#15288A;
  --plate:#E8A21F; --plate-hi:#FFD36B; --plate-t:#1C1A36;
  --q:1;
  color-scheme:light;
}
/* ---------- Night: same house, lights on inside ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sun:#F4B838; --sun-d:#C98A1A; --cobalt:#3150D6; --cobalt-d:#1A2A7A; --cobalt-l:#6E84EC;
    --tomato:#D9442B; --tomato-d:#8F2616; --teal:#157A69; --teal-d:#0B4A40; --teal-l:#3DB39B;
    --pink:#E891A3; --cream:#FBEFD8; --ink:#14132B; --slate:#101828;
    --frame:#DCCDAE; --frame-d:#9F8E70; --floor:#10122C; --inside:#F08A3E; --inside-f:#FFCF6E;
    --spill:#F7B946; --ray2:#E08A18; --glass:#FFD36B; --glow:#FFCB63; --glow-op:.95; --win:#0E1233; --moon-op:1;
    --wall-clinic:#0B3F37; --floor-clinic:#072A25; --wall-class:#5A1E14; --floor-class:#3A120C;
    --wall-shop:#141C4E; --floor-shop:#0B1030;
    --panel-a:#2A2150; --panel-b:#4A1710;
    --g-hero:#1A1D48; --t-hero:#FBEFD8;
    --g-rooms:#1E1A38; --t-rooms:#FBEFD8;
    --g-work:#101B5E; --t-work:#FBEFD8; --a-work:#F4B838;
    --g-goods:#1A1726; --t-goods:#FBEFD8;
    --g-began:#06302A; --t-began:#FBEFD8; --a-began:#F4B838;
    --g-stew:#4A1710; --t-stew:#FBEFD8;
    --g-partner:#2A1A3D; --t-partner:#FBEFD8;
    --g-foot:#0A0A1A; --t-foot:#FBEFD8;
    --btn:#F4B838; --btn-t:#14132B; --btn-h:#FFD36B;
    --plate:#B8841E; --plate-hi:#E8B447; --plate-t:#14132B;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
    --sun:#F4B838; --sun-d:#C98A1A; --cobalt:#3150D6; --cobalt-d:#1A2A7A; --cobalt-l:#6E84EC;
    --tomato:#D9442B; --tomato-d:#8F2616; --teal:#157A69; --teal-d:#0B4A40; --teal-l:#3DB39B;
    --pink:#E891A3; --cream:#FBEFD8; --ink:#14132B; --slate:#101828;
    --frame:#DCCDAE; --frame-d:#9F8E70; --floor:#10122C; --inside:#F08A3E; --inside-f:#FFCF6E;
    --spill:#F7B946; --ray2:#E08A18; --glass:#FFD36B; --glow:#FFCB63; --glow-op:.95; --win:#0E1233; --moon-op:1;
    --wall-clinic:#0B3F37; --floor-clinic:#072A25; --wall-class:#5A1E14; --floor-class:#3A120C;
    --wall-shop:#141C4E; --floor-shop:#0B1030;
    --panel-a:#2A2150; --panel-b:#4A1710;
    --g-hero:#1A1D48; --t-hero:#FBEFD8;
    --g-rooms:#1E1A38; --t-rooms:#FBEFD8;
    --g-work:#101B5E; --t-work:#FBEFD8; --a-work:#F4B838;
    --g-goods:#1A1726; --t-goods:#FBEFD8;
    --g-began:#06302A; --t-began:#FBEFD8; --a-began:#F4B838;
    --g-stew:#4A1710; --t-stew:#FBEFD8;
    --g-partner:#2A1A3D; --t-partner:#FBEFD8;
    --g-foot:#0A0A1A; --t-foot:#FBEFD8;
    --btn:#F4B838; --btn-t:#14132B; --btn-h:#FFD36B;
    --plate:#B8841E; --plate-hi:#E8B447; --plate-t:#14132B;
    color-scheme:dark;
}

/* ---------- Reset + base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--g-hero);color:var(--t-hero);font-family:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;font-size:18px;line-height:1.55;font-optical-sizing:auto;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:16px;top:-80px;background:var(--ink);color:var(--cream);padding:8px 16px;border-radius:8px;z-index:50;text-decoration:none}
.skip:focus{top:16px}

/* ---------- Typography scale ---------- */
.serif{font-family:"Young Serif",Georgia,serif;font-weight:400}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(46px,6.4vw,86px);line-height:.94;letter-spacing:-.026em}
h2{font-size:clamp(44px,6.4vw,88px);line-height:.98}
h3{font-size:clamp(26px,2.6vw,34px);line-height:1.1}
p{max-width:34em;text-wrap:pretty}
.wrap{width:100%;max-width:1216px;margin:0 auto;padding:0 32px}
@media (max-width:640px){.wrap{padding:0 16px}body{font-size:17px}}
.lede{font-size:clamp(19px,1.6vw,22px);line-height:1.5}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;opacity:.8}
em.accent,.accent{font-style:normal;color:var(--cobalt)}
:root[data-theme="dark"] .accent{color:var(--sun)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .accent{color:var(--sun)}}

/* ---------- SVG illustration fills: one flat system ---------- */
.il .k{fill:var(--ink)} .il .c{fill:var(--cream)} .il .s{fill:var(--sun)} .il .sd{fill:var(--sun-d)}
.il .b{fill:var(--cobalt)} .il .bd{fill:var(--cobalt-d)} .il .bl{fill:var(--cobalt-l)}
.il .t{fill:var(--tomato)} .il .td{fill:var(--tomato-d)} .il .g{fill:var(--teal)} .il .gd{fill:var(--teal-d)} .il .gl{fill:var(--teal-l)}
.il .p{fill:var(--pink)} .il .fr{fill:var(--frame)} .il .frd{fill:var(--frame-d)} .il .fl{fill:var(--floor)}
.il .in{fill:var(--inside)} .il .inf{fill:var(--inside-f)} .il .sp{fill:var(--spill)}
.il .gs{fill:var(--glass)} .il .win{fill:var(--win)} .il .sl{fill:var(--slate)}
.il .gw{fill:var(--glow);opacity:var(--glow-op);transition:opacity .9s ease}
.il .gw circle{opacity:.34}
.il .sf{font-family:"Young Serif",Georgia,serif}
.il .sh{fill:var(--ink);opacity:.2}
.il .moon{fill:var(--cream);opacity:var(--moon-op)}
.il .wcl{fill:var(--wall-clinic)} .il .fcl{fill:var(--floor-clinic)} .il .wcs{fill:var(--wall-class)} .il .fcs{fill:var(--floor-class)}
.il .wsh{fill:var(--wall-shop)} .il .fsh{fill:var(--floor-shop)}
.il .ks{stroke:var(--ink);fill:none;stroke-linecap:round;stroke-linejoin:round}
.il .cs{stroke:var(--cream);fill:none;stroke-linecap:round;stroke-linejoin:round}
.il .frs{stroke:var(--frame);fill:none;stroke-linecap:round}
.il text{font-family:"Bricolage Grotesque",sans-serif}

/* ---------- Nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;color:var(--t-hero)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-family:"Young Serif",serif;font-size:21px;letter-spacing:-.01em}
.brand svg{width:22px;height:30px}
.nav ul{display:flex;gap:28px;list-style:none;font-size:16px;font-weight:500}
.nav ul a{text-decoration:none;padding:4px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;transition:background-size .3s}
.nav ul a:hover,.nav ul a[aria-current="page"]{background-size:100% 2px}
.navr{display:flex;align-items:center;gap:24px}
/* theme toggle: a light switch */
.switch{display:flex;align-items:center;gap:10px;background:none;border:0;color:inherit;font:inherit;font-size:15px;font-weight:600;cursor:pointer;padding:4px}
.plate{width:26px;height:38px;border-radius:6px;background:var(--cream);box-shadow:inset 0 0 0 2px var(--ink);position:relative}
.plate::before{content:"";position:absolute;left:8px;top:7px;width:10px;height:24px;border-radius:3px;background:var(--frame-d);box-shadow:inset 0 0 0 2px var(--ink)}
.plate::after{content:"";position:absolute;left:8px;top:7px;width:10px;height:12px;border-radius:3px;background:var(--ink);transition:transform .25s ease}
.switch[aria-pressed="true"] .plate::after{transform:translateY(12px)}
@media (max-width:900px){.nav .wrap{flex-wrap:wrap;row-gap:8px}.nav ul{display:flex;flex-wrap:wrap;gap:16px 20px;font-size:15px;order:3;width:100%;padding:2px 0 6px}.nav nav{width:100%;order:3}.navr{gap:12px}}@media (max-width:420px){.nav ul{gap:12px 14px;font-size:14px}}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:var(--btn-t);text-decoration:none;font-weight:600;font-size:17px;padding:14px 22px;border-radius:999px;transition:background .2s,transform .2s}
.btn:hover{background:var(--btn-h);transform:translateY(-2px)}
.btn svg{width:18px;height:18px}
.link{font-weight:600;text-underline-offset:5px;text-decoration-thickness:2px}
.link:hover{text-decoration-thickness:3px}
.aud{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px;font-size:14.5px;font-weight:600}
.aud a{text-decoration:none;opacity:.78;border-bottom:1.5px solid currentColor;padding-bottom:3px;transition:opacity .2s}
.aud a:hover,.aud a:focus-visible{opacity:1}
.cta-row{margin-top:40px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}

/* ---------- Badges and pills ---------- */
.enamel{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin:20px 0 8px;background:var(--cobalt);color:var(--cream);padding:6px 16px 6px 6px;border-radius:999px;font-weight:600;font-size:15px;box-shadow:inset 0 0 0 2px var(--cream),0 0 0 2px var(--cobalt)}
.enamel i{font-style:normal;display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:999px;background:var(--cream);color:var(--cobalt);font-family:"Young Serif",serif;font-size:14px;letter-spacing:.02em}
.tags{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-bottom:32px}
.tags li{font-weight:600;font-size:15px;padding:8px 16px;border-radius:999px;border:2px solid currentColor;transform:rotate(var(--r,0deg))}
.tags li:nth-child(1){background:var(--teal);color:var(--cream);border-color:var(--teal);--r:-2deg}
.tags li:nth-child(2){--r:1.5deg}
.tags li:nth-child(3){background:var(--sun);color:#1C1A36;border-color:var(--sun);--r:-1deg}
.tags li:nth-child(4){--r:2deg}

/* ---------- Sections and colour bands ---------- */
section{position:relative}
.sec{padding:96px 0}
@media (max-width:640px){.sec{padding:64px 0}}
.band-sun{background:var(--g-hero);color:var(--t-hero)}
.band-cream{background:var(--g-rooms);color:var(--t-rooms)}
.band-cobalt{background:var(--g-work);color:var(--t-work)}
.band-paper{background:var(--g-goods);color:var(--t-goods)}
.band-teal{background:var(--g-began);color:var(--t-began)}
.band-tomato{background:var(--g-stew);color:var(--t-stew)}

/* ---------- Card primitives ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:48px;list-style:none}
.ways li{border-top:3px solid currentColor;padding-top:16px}
.ways b{display:block;font-family:"Young Serif",serif;font-weight:400;font-size:24px;line-height:1.15;margin-bottom:6px}
.ways span{font-size:16px}
@media (max-width:860px){.ways{grid-template-columns:1fr;gap:24px}}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:64px;list-style:none}
.steps li{border-top:3px solid currentColor;padding-top:14px}
.steps .enamel{margin:0 0 12px}
.steps p{font-size:17px;max-width:20em}

/* ---------- Footer ---------- */
footer{background:var(--g-foot);color:var(--t-foot);padding:80px 0 48px}
.mat{margin:0 auto;max-width:560px;background:var(--tomato-d);color:var(--cream);border-radius:14px;padding:12px;box-shadow:0 14px 0 -6px rgba(0,0,0,.35)}
.mat div{border:3px dashed var(--cream);border-radius:8px;padding:28px 16px;text-align:center}
.mat strong{display:block;font-family:"Young Serif",serif;font-weight:400;font-size:clamp(32px,5vw,48px);line-height:1}
.mat span{display:block;margin-top:8px;font-weight:600;font-size:15px}
.foot-line{margin-top:48px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;font-size:15px;max-width:none}
.foot-line a{text-underline-offset:4px}

/* ---------- Reveal: visible by default, JS hides then shows by geometry ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .lampon .gw{opacity:0}
.js .lampon.in .gw{opacity:var(--glow-op);transition-delay:.35s}

/* Night: warm glows must read as lamplight, not mud. Screen-blend inside each drawing. */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .il{isolation:isolate}
  :root:not([data-theme="light"]) .il .gw{mix-blend-mode:screen}
  :root:not([data-theme="light"]) .il .gw circle{opacity:.42}}
:root[data-theme="dark"] .il{isolation:isolate}
:root[data-theme="dark"] .il .gw{mix-blend-mode:screen}
:root[data-theme="dark"] .il .gw circle{opacity:.42}

@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .lampon .gw{opacity:var(--glow-op)}
  .btn,.plate::after{transition:none}
}