/* ============================================================
   SideLoft — "Lights Out" palette · Fraunces + Hanken Grotesk
   Visual fingerprint: cool night-bedroom tones (no cream/terracotta),
   serif display + humanist sans body, left floating quick-nav,
   horizontal product cards. Full light/dark.
   Fonts self-hosted from assets/fonts/ (see @font-face at end);
   falls back to system fonts if absent.
   ============================================================ */
:root{
  color-scheme: light dark;
  --ink:#141a24; --slate:#46536b; --faint:#6c7890;
  --mist:#e7ebf1; --snow:#fbfcfe; --raise:#ffffff; --line:#d7dde7;
  --iris:#5661b3; --iris-ink:#3b4488; --iris-wash:#edeefb;
  --plum:#7c5a86; --plum-wash:#f2eaf3;
  --sage:#3f8e7c; --sage-wash:#e6f2ee;
  --rose:#a85d6b; --rose-wash:#f6e9ec;
  --gold:#b07d2a;
  --shadow: 0 1px 2px rgba(20,26,36,.05), 0 8px 24px rgba(20,26,36,.06);
  --shadow-lg: 0 2px 6px rgba(20,26,36,.07), 0 18px 44px rgba(20,26,36,.10);
  --r-sm:8px; --r:14px; --r-lg:22px;
  --wrap:1180px;
  --head:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --ink:#e9edf4; --slate:#aab6cc; --faint:#8793aa;
  --mist:#10151e; --snow:#1a212d; --raise:#212938; --line:#2b3442;
  --iris:#8e97df; --iris-ink:#aab1ec; --iris-wash:#20263c;
  --plum:#bb94c4; --plum-wash:#2c2433;
  --sage:#5fb7a1; --sage-wash:#1b2c29;
  --rose:#d08a97; --rose-wash:#32232a; --gold:#d9ab57;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.6);
}}
:root[data-theme="dark"]{
  --ink:#e9edf4; --slate:#aab6cc; --faint:#8793aa;
  --mist:#10151e; --snow:#1a212d; --raise:#212938; --line:#2b3442;
  --iris:#8e97df; --iris-ink:#aab1ec; --iris-wash:#20263c;
  --plum:#bb94c4; --plum-wash:#2c2433;
  --sage:#5fb7a1; --sage-wash:#1b2c29;
  --rose:#d08a97; --rose-wash:#32232a; --gold:#d9ab57;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 22px 50px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{animation:none!important; transition:none!important} }
body{margin:0; background:var(--mist); color:var(--ink); font-family:var(--body);
  font-size:18px; line-height:1.65; letter-spacing:.005em;
  padding-top:env(safe-area-inset-top,0px)}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:22px}
h1,h2,h3,h4{font-family:var(--head); line-height:1.13; letter-spacing:-.012em; margin:0 0 .4em; font-weight:600}
h1{font-size:clamp(2.05rem,5vw,3.4rem)} h2{font-size:clamp(1.5rem,3.3vw,2.1rem)}
h3{font-size:1.25rem} h4{font-size:1.05rem}
p{margin:0 0 1rem} a{color:var(--iris-ink); text-underline-offset:3px; text-decoration-thickness:1.5px}
a:hover{color:var(--iris)}
:focus-visible{outline:3px solid var(--iris); outline-offset:3px; border-radius:4px}
img{max-width:100%; display:block}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- top bar (identical on every page) ---------- */
.topbar{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--mist) 86%, transparent);
  backdrop-filter:saturate(1.3) blur(10px); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px)}
.topbar .wrap{display:flex; align-items:center; gap:16px; height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); margin-right:auto}
.brand .logo{width:38px;height:38px;flex:0 0 auto}
.brand b{font-family:var(--head); font-weight:600; font-size:1.18rem; line-height:1}
.brand span span{display:block; font-size:.71rem; color:var(--faint); margin-top:2px}
.nav{display:flex; gap:20px; align-items:center}
.nav a{color:var(--slate); text-decoration:none; font-weight:500; font-size:.95rem; white-space:nowrap}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--iris); text-underline-offset:6px}
.toggle,.burger{border:1px solid var(--line); background:var(--snow); color:var(--slate); width:40px;height:40px;
  border-radius:11px; cursor:pointer; display:grid; place-items:center}
.toggle:hover,.burger:hover{color:var(--ink); border-color:var(--iris)}
.burger{display:none}
@media (max-width:900px){ .nav{display:none} .nav.open{display:flex; position:absolute; top:64px; left:0; right:0;
  flex-direction:column; gap:0; background:var(--snow); border-bottom:1px solid var(--line); padding:8px 22px 16px}
  .nav.open a{padding:11px 0; border-bottom:1px solid var(--line)} .burger{display:grid} }

/* ---------- hero (split) ---------- */
.hero{padding:58px 0 34px}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center}
.kicker{display:inline-flex; align-items:center; gap:8px; color:var(--plum); font-weight:600; font-size:.93rem; margin-bottom:15px}
.kicker svg{width:17px;height:17px}
.hero h1{max-width:13ch}
.lede{font-size:1.14rem; color:var(--slate); max-width:48ch}
.lede b{color:var(--ink); font-weight:600}
.loftnum{font-family:var(--head); font-weight:600; color:var(--iris-ink); white-space:nowrap}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:600; font-size:1rem;
  padding:12px 21px; border-radius:13px; cursor:pointer; text-decoration:none; border:1.5px solid transparent; transition:transform .12s, background .15s, border-color .15s}
.btn-primary{background:var(--iris); color:#fff}
.btn-primary:hover{background:var(--iris-ink); color:#fff; transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--iris); color:var(--iris-ink)}
.btn svg{width:18px;height:18px}
.btn-amazon{background:var(--gold); color:#20160a} .btn-amazon:hover{filter:brightness(1.05); color:#20160a}
.trust{display:flex; gap:26px; flex-wrap:wrap; margin-top:22px}
.trust div{display:flex; flex-direction:column}
.trust b{font-family:var(--head); font-size:1.5rem; color:var(--ink); line-height:1}
.trust span{font-size:.82rem; color:var(--faint)}
.figwrap{background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 26px 18px; box-shadow:var(--shadow-lg)}
.figwrap figcaption{font-size:.82rem; color:var(--faint); margin-top:12px; text-align:center}
.figwrap svg{width:100%;height:auto}
@media (max-width:880px){ .hero{padding:34px 0 16px} .hero-grid{grid-template-columns:1fr; gap:28px} .figwrap{order:-1} }

/* ---------- quick finder ---------- */
.finder{background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:22px 24px; margin-top:8px}
.finder-tabs{display:inline-flex; gap:6px; background:var(--mist); border:1px solid var(--line); border-radius:999px; padding:4px; margin-bottom:16px}
.finder-tabs button{border:0; background:transparent; color:var(--slate); font-family:var(--body); font-weight:600; font-size:.92rem; padding:8px 16px; border-radius:999px; cursor:pointer}
.finder-tabs button[aria-selected="true"]{background:var(--snow); color:var(--iris-ink); box-shadow:var(--shadow)}
.finder-panel{display:none; flex-wrap:wrap; gap:11px}
.finder-panel.on{display:flex}
.finderchip{display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:12px 15px; min-width:210px; flex:1 1 210px; cursor:pointer; text-decoration:none; color:var(--ink); transition:border-color .15s, transform .12s}
.finderchip:hover{border-color:var(--iris); transform:translateY(-2px)}
.finderchip .k{font-weight:700; font-size:.95rem; display:flex; justify-content:space-between; align-items:center; gap:10px}
.finderchip .k .go{color:var(--iris); font-weight:700}
.finderchip .pick{color:var(--iris-ink); font-weight:600; font-size:.9rem}
.finderchip .why{font-size:.82rem; color:var(--faint)}

/* ---------- section scaffolding ---------- */
section{padding:44px 0}
.sec-head{display:flex; align-items:center; gap:13px; margin-bottom:6px}
.sec-ico{width:44px;height:44px;border-radius:13px; display:grid; place-items:center; font-size:1.3rem; flex:0 0 auto}
.sec-sub{color:var(--slate); max-width:66ch; margin-top:-2px}
.ico-a{background:var(--iris-wash)} .ico-b{background:var(--sage-wash)} .ico-c{background:var(--plum-wash)}
.prose{max-width:72ch}
.prose p{color:var(--ink)}

/* ---------- disclosure strip ---------- */
.disclosure-top{display:flex; gap:10px; align-items:flex-start; background:var(--plum-wash); border:1px solid color-mix(in srgb,var(--plum) 25%, transparent);
  border-radius:var(--r); padding:11px 16px; font-size:.85rem; color:var(--ink); margin-top:18px}
.disclosure-top svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--plum)}

/* ---------- top picks compact grid ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(224px,1fr)); gap:18px; margin-top:24px}
.minicard{display:flex; flex-direction:column; background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow); transition:transform .12s, border-color .15s}
.minicard:hover{transform:translateY(-3px); border-color:var(--iris)}
.minicard .ishot{position:relative; aspect-ratio:1/1; background:var(--raise); display:grid; place-items:center; border-bottom:1px solid var(--line); padding:14px}
.minicard .ishot img{width:100%;height:100%;object-fit:contain}
.minibadge{position:absolute; top:10px; left:10px; font-weight:700; font-size:.72rem; padding:4px 10px; border-radius:999px; background:var(--iris); color:#fff}
.minibadge.cool{background:var(--sage)}
.minicard .mbody{padding:14px 15px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.minicard h3{font-size:1.02rem; margin:0; line-height:1.2}
.stars{display:flex; align-items:center; gap:6px; font-size:.83rem; color:var(--slate)}
.stars .s{color:var(--gold); letter-spacing:1px; font-size:.82rem}
.minicard .mp{font-family:var(--head); font-weight:600; font-size:1.2rem; margin-top:auto}
.minirow{display:flex; gap:8px; margin-top:4px}
.minirow a{flex:1; text-align:center; font-size:.85rem; padding:9px 8px; border-radius:10px; text-decoration:none; font-weight:600}
.minirow .buy{background:var(--gold); color:#20160a}
.minirow .read{background:var(--mist); color:var(--ink); border:1px solid var(--line)}

/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); margin-top:22px; background:var(--snow)}
table.cmp{border-collapse:collapse; width:100%; min-width:720px; font-size:.93rem}
.cmp th,.cmp td{padding:12px 15px; text-align:left; border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--mist); font-family:var(--body); font-weight:700; white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td b{font-weight:600}
.cmp .award{color:var(--iris-ink); font-weight:600; font-size:.82rem}
.cmp a.mini{font-size:.82rem; font-weight:600}

/* ---------- fast answer ---------- */
.fast{background:var(--snow); border:1px solid var(--line); border-left:5px solid var(--plum); border-radius:var(--r); padding:22px 24px; box-shadow:var(--shadow); margin-top:22px}
.fast ol{margin:.4rem 0 0; padding-left:1.2rem}
.fast li{margin-bottom:7px}
.fast li a{font-weight:600}

/* ---------- detailed product cards ---------- */
.cards{display:flex; flex-direction:column; gap:22px; margin-top:24px}
.pcard{scroll-margin-top:84px; display:grid; grid-template-columns:260px 1fr; gap:26px; background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px; box-shadow:var(--shadow)}
.pcard .shot{position:relative; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); aspect-ratio:1/1; display:grid; place-items:center; padding:16px; align-self:start}
.pcard .shot img{width:100%;height:100%;object-fit:contain}
.rank{position:absolute; top:-10px; left:-10px; width:34px;height:34px; border-radius:10px; background:var(--ink); color:var(--mist); font-family:var(--head); font-weight:600; display:grid; place-items:center; font-size:1rem; box-shadow:var(--shadow)}
.badge{display:inline-block; font-weight:700; font-size:.76rem; padding:5px 12px; border-radius:999px; margin-bottom:9px; background:var(--iris-wash); color:var(--iris-ink)}
.badge.cool{background:var(--sage-wash); color:var(--sage)}
.pcard h3{margin:.05em 0 .15em; font-size:1.42rem}
.meta-line{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:12px}
.price{font-family:var(--head); font-weight:600; font-size:1.3rem}
.price .asof{display:block; font-family:var(--body); font-size:.7rem; color:var(--faint); font-weight:500}
.specs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 13px; padding:0; list-style:none}
.specs li{background:var(--mist); border:1px solid var(--line); border-radius:9px; padding:5px 11px; font-size:.83rem; color:var(--slate)}
.specs li b{color:var(--ink); font-weight:600}
.pcard .rev p{margin-bottom:.7rem}
.proscons{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0}
.pc{border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; background:var(--mist)}
.pc h4{font-size:.92rem; margin:0 0 8px; display:flex; align-items:center; gap:7px}
.pc.pros h4{color:var(--sage)} .pc.cons h4{color:var(--rose)}
.pc ul{margin:0; padding-left:1.1rem; font-size:.9rem; color:var(--ink)}
.pc li{margin-bottom:5px}
.skip{display:flex; gap:10px; align-items:flex-start; background:var(--rose-wash); border:1px solid color-mix(in srgb,var(--rose) 28%, transparent); border-radius:var(--r-sm); padding:12px 15px; font-size:.92rem; margin:0 0 14px}
.skip b{color:var(--rose)} .skip svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--rose)}
.skip a{font-weight:600}
.decide{width:100%; border-collapse:collapse; font-size:.88rem; margin:0 0 15px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.decide td{padding:9px 13px; border-bottom:1px solid var(--line)}
.decide tr:last-child td{border-bottom:0}
.decide td:first-child{font-weight:600; color:var(--slate); width:34%; background:var(--mist)}
.decide tr:last-child td{background:var(--iris-wash)} .decide tr:last-child td:first-child{color:var(--iris-ink)}
.buyrow{display:flex; align-items:center; flex-wrap:wrap; gap:14px}
.srcs{font-size:.8rem; color:var(--faint); margin:12px 0 0}
.srcs a{color:var(--slate)}
@media (max-width:640px){ .pcard{grid-template-columns:1fr; padding:20px} .pcard .shot{max-width:230px; margin:0 auto} .proscons{grid-template-columns:1fr} .rank{left:6px;top:6px} }

/* ---------- left floating quick-nav / mobile dock ---------- */
.jumpnav{position:fixed; left:14px; top:50%; transform:translateY(-50%); z-index:40; background:var(--snow); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); padding:10px 8px; width:140px}
.jumpnav .jt{font-size:.68rem; letter-spacing:.06em; color:var(--faint); font-weight:700; text-transform:uppercase; padding:4px 8px 8px}
.jumpnav a{display:flex; align-items:center; gap:9px; padding:8px 9px; border-radius:10px; text-decoration:none; color:var(--slate); font-size:.84rem; font-weight:500}
.jumpnav a:hover{background:var(--mist); color:var(--ink)}
.jumpnav a.active{background:var(--iris-wash); color:var(--iris-ink); font-weight:600}
.jumpnav a i{font-style:normal; font-size:1rem; width:18px; text-align:center}

.dock{display:none}
@media (max-width:1380px){
  .dock{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:45; background:color-mix(in srgb,var(--snow) 94%, transparent);
    backdrop-filter:blur(10px); border-top:1px solid var(--line); justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
  .dock a{display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--slate); font-size:.64rem; font-weight:600; padding:4px 6px; border-radius:10px}
  .dock a i{font-style:normal; font-size:1.15rem}
  .dock a.active{color:var(--iris-ink)}
  body.has-dock{padding-bottom:62px}
}

/* ---------- loft calculator ---------- */
.calc{background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-lg); margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:30px}
.calc .q{margin-bottom:18px}
.calc .q>label{display:block; font-weight:600; margin-bottom:9px}
.opts{display:flex; flex-wrap:wrap; gap:9px}
.opt{position:relative}
.opt input{position:absolute; opacity:0; inset:0; cursor:pointer}
.opt span{display:block; border:1.5px solid var(--line); border-radius:11px; padding:10px 15px; font-weight:500; font-size:.93rem; cursor:pointer; color:var(--slate)}
.opt input:checked + span{border-color:var(--iris); background:var(--iris-wash); color:var(--iris-ink); font-weight:600}
.opt input:focus-visible + span{outline:3px solid var(--iris); outline-offset:2px}
.result{background:var(--mist); border:1px solid var(--line); border-radius:var(--r); padding:22px; align-self:start}
.result .big{font-family:var(--head); font-weight:600; font-size:2.5rem; color:var(--iris-ink); line-height:1; margin:4px 0 2px}
.result .big small{font-size:1rem; color:var(--slate)}
.result .cm{color:var(--faint); font-size:.9rem; margin-bottom:14px}
.result .reco{font-size:.95rem; margin:0 0 14px}
.result .reco b{color:var(--ink)}
@media (max-width:720px){ .calc{grid-template-columns:1fr; gap:22px} }

/* ---------- video facade ---------- */
.video{position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); margin-top:22px;
  background:linear-gradient(135deg,var(--ink),var(--iris-ink)); display:grid; place-items:center; cursor:pointer; text-align:center}
.video .play{width:76px;height:76px;border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; margin:0 auto 14px}
.video .play svg{width:30px;height:30px;color:var(--iris-ink); margin-left:4px}
.video .vtext{color:#fff; font-weight:600; max-width:34ch; padding:0 20px}
.video .vtext small{display:block; font-weight:400; opacity:.8; font-size:.82rem; margin-top:4px}
.vhint{font-size:.82rem; color:var(--faint); margin-top:10px}

/* ---------- accessories ---------- */
.acats{margin-top:8px}
.acat-label{display:inline-block; font-weight:700; font-size:.78rem; padding:5px 13px; border-radius:999px; margin:22px 0 2px}
.acat-ess{background:var(--sage-wash); color:var(--sage)} .acat-prac{background:var(--iris-wash); color:var(--iris-ink)}
.acc{display:flex; flex-direction:column; gap:16px; margin-top:12px}
.acard{display:grid; grid-template-columns:120px 1fr auto; gap:20px; align-items:center; background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow)}
.acard .ishot{aspect-ratio:1/1; background:var(--raise); border:1px solid var(--line); border-radius:var(--r); display:grid; place-items:center; padding:10px}
.acard .ishot img{width:100%;height:100%;object-fit:contain}
.acard h3{font-size:1.1rem; margin:0 0 5px}
.acard .abrand{font-size:.8rem; color:var(--faint); font-weight:600}
.acard p{margin:7px 0 7px; font-size:.93rem; color:var(--ink)}
.acard .atip{font-size:.85rem; color:var(--slate)} .acard .atip b{color:var(--sage)}
.acard .aside{text-align:right; min-width:140px}
.acard .aside .price{font-size:1.15rem}
@media (max-width:720px){ .acard{grid-template-columns:90px 1fr; } .acard .aside{grid-column:1/-1; text-align:left; display:flex; justify-content:space-between; align-items:center} }

/* ---------- faq ---------- */
.faq{margin-top:20px; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--snow); box-shadow:var(--shadow)}
details{border-bottom:1px solid var(--line)} details:last-child{border-bottom:0}
summary{cursor:pointer; padding:16px 22px; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:center}
summary::-webkit-details-marker{display:none}
summary .pl{color:var(--iris); font-size:1.4rem; line-height:1; transition:transform .2s}
details[open] summary .pl{transform:rotate(45deg)}
details .a{padding:0 22px 17px; color:var(--slate); max-width:76ch}

/* ---------- conclusion / author ---------- */
.endbox{background:linear-gradient(180deg,var(--snow),var(--iris-wash)); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 30px; box-shadow:var(--shadow); max-width:80ch}
.authorbox{display:flex; gap:18px; align-items:flex-start; background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px 24px; box-shadow:var(--shadow); margin-top:22px; max-width:80ch}
.authorbox .av{width:62px;height:62px;flex:0 0 auto}
.authorbox h3{margin:0 0 3px; font-size:1.15rem}
.authorbox .role{font-size:.82rem; color:var(--faint); font-weight:600; margin-bottom:8px}
.authorbox p{margin:0; font-size:.92rem; color:var(--slate)}

/* ---------- footer ---------- */
footer{background:var(--snow); border-top:1px solid var(--line); margin-top:34px; padding:46px 0 42px; padding-bottom:calc(42px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px}
.about-me{display:flex; gap:15px}
.about-me .av{width:54px;height:54px;flex:0 0 auto}
.about-me p{font-size:.9rem; color:var(--slate); margin:0}
.about-me h4{margin:0 0 6px; font-size:1.05rem}
.fcol h5{font-family:var(--body); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin:0 0 12px; font-weight:700}
.fcol ul{list-style:none; padding:0; margin:0} .fcol li{margin-bottom:9px}
.fcol a{color:var(--slate); text-decoration:none; font-size:.93rem} .fcol a:hover{color:var(--ink)}
.disclose{margin-top:28px; padding-top:20px; border-top:1px solid var(--line); font-size:.81rem; color:var(--faint); max-width:96ch}
.disclose strong{color:var(--slate)}
@media (max-width:760px){ .foot-grid{grid-template-columns:1fr; gap:24px} }

/* fonts: self-hosted (place .woff2 in assets/fonts/; system fallback if absent) */
@font-face{font-family:'Fraunces'; src:url('fonts/Fraunces.woff2') format('woff2'); font-weight:400 700; font-display:swap}
@font-face{font-family:'Hanken Grotesk'; src:url('fonts/HankenGrotesk.woff2') format('woff2'); font-weight:400 700; font-display:swap}

/* ============================================================
   REVISION — richer, differentiated HOMEPAGE
   ============================================================ */
/* home hero gets a soft gradient so it doesn't read like an article */
.home-hero{background:
   radial-gradient(900px 360px at 88% -40%, var(--iris-wash), transparent 70%),
   radial-gradient(700px 300px at -10% 120%, var(--sage-wash), transparent 70%);
  border-bottom:1px solid var(--line)}

/* full-width tinted section bands (home only) — visual rhythm vs flat content pages */
.band-iris{background:var(--iris-wash); border-block:1px solid color-mix(in srgb,var(--iris) 14%, transparent)}
.band-sage{background:var(--sage-wash); border-block:1px solid color-mix(in srgb,var(--sage) 16%, transparent)}
.band-plum{background:var(--plum-wash); border-block:1px solid color-mix(in srgb,var(--plum) 16%, transparent)}

/* "cross-checked against" source strip */
.sourcestrip{display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap; padding:16px 0 4px; border-top:1px solid var(--line); margin-top:4px}
.sourcestrip span{font-size:.78rem; color:var(--faint); font-weight:600; letter-spacing:.02em}
.sourcestrip b{font-family:var(--head); font-weight:600; font-size:.92rem; color:var(--slate)}

/* browse-by-need tiles */
.tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px; margin-top:22px}
.tile{position:relative; display:flex; flex-direction:column; gap:7px; background:var(--snow); border:1px solid var(--line);
  border-left:4px solid var(--iris); border-radius:var(--r-lg); padding:20px 22px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow); transition:transform .12s, border-color .15s, box-shadow .15s}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-lg)}
.tile .ti{font-size:1.7rem; line-height:1}
.tile .tt{font-family:var(--head); font-weight:600; font-size:1.18rem}
.tile .td{font-size:.9rem; color:var(--slate)}
.tile .tgo{position:absolute; top:18px; right:20px; color:var(--iris); font-weight:700; font-size:1.2rem; transition:transform .15s}
.tile:hover .tgo{transform:translateX(3px)}
.tile.t0{border-left-color:var(--plum)} .tile.t0 .tgo{color:var(--plum)}
.tile.t1{border-left-color:var(--sage)} .tile.t1 .tgo{color:var(--sage)}
.tile.t2{border-left-color:var(--iris)}
.tile.t3{border-left-color:var(--gold)} .tile.t3 .tgo{color:var(--gold)}
.tile.t4{border-left-color:var(--plum)} .tile.t4 .tgo{color:var(--plum)}
.tile.t5{border-left-color:var(--sage)} .tile.t5 .tgo{color:var(--sage)}

/* how loft works */
.loftgrid{display:grid; grid-template-columns:1fr 1fr; gap:34px; align-items:center; margin-top:22px}
.loftaside p{color:var(--ink)}
.lofttable{width:100%; border-collapse:collapse; margin:14px 0 4px; background:var(--snow); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; font-size:.95rem}
.lofttable th,.lofttable td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line)}
.lofttable thead th{background:var(--mist); font-family:var(--body); font-weight:700}
.lofttable tbody tr:last-child td{border-bottom:0}
.lofttable td b{color:var(--iris-ink)}
@media (max-width:820px){ .loftgrid{grid-template-columns:1fr; gap:22px} }

/* materials compared */
.mats{display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr)); gap:16px; margin-top:22px}
.mat{background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow)}
.mat .mi{font-size:1.9rem; line-height:1; margin-bottom:6px}
.mat h3{font-size:1.12rem; margin:0 0 12px}
.mat .mrow{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:8px 0; border-top:1px solid var(--line)}
.mat .mrow span{font-size:.74rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--faint); padding-top:2px}
.mat .mrow p{margin:0; font-size:.88rem; color:var(--ink)}
.mat .mrow.watch p{color:var(--rose)}

/* owner-feedback voices */
.voices{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; margin-top:22px}
.voice{position:relative; background:var(--snow); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 22px 18px; box-shadow:var(--shadow)}
.voice::before{content:"\201C"; position:absolute; top:4px; left:16px; font-family:var(--head); font-size:3.4rem; color:var(--iris-wash); line-height:1}
.voice blockquote{margin:0 0 12px; font-size:.96rem; color:var(--ink); position:relative}
.voice figcaption{font-size:.8rem; font-weight:700; color:var(--plum); letter-spacing:.01em}

/* detailed scrollable sidebar with nested picks */
.jumpnav{width:166px; max-height:86vh; overflow-y:auto; scrollbar-width:thin}
.jumpnav::-webkit-scrollbar{width:7px} .jumpnav::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px}
.jumpnav .subwrap{margin:2px 0 4px; padding-left:4px; border-left:2px solid var(--line); margin-left:12px}
.jumpnav a.sub{padding:5px 8px; font-size:.75rem; color:var(--faint); gap:0}
.jumpnav a.sub:hover,.jumpnav a.sub.active{color:var(--iris-ink); background:transparent; font-weight:600}
@media (max-width:1380px){ .jumpnav{display:none} }

/* minicard polish */
.minicard{border-radius:var(--r-lg)}
.minicard .ishot{background:linear-gradient(180deg,var(--raise),color-mix(in srgb,var(--mist) 40%,var(--raise)))}
.minibadge{box-shadow:0 2px 8px rgba(20,26,36,.18)}

/* ---- launch revision: top-3 in hero, price tiers, text-only nav ---- */
.top3{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:10px; max-width:560px}
.top3 li{display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center; background:var(--raise);
  border:1px solid var(--line); border-radius:14px; padding:8px 12px 8px 8px}
.t3img{display:block; width:64px; height:64px; border-radius:10px; overflow:hidden; background:#fff}
.t3img img{width:100%; height:100%; object-fit:contain; display:block}
.t3txt{display:flex; flex-direction:column; min-width:0}
.t3a{font-size:.74rem; font-weight:700; color:var(--plum); line-height:1.3}
.t3n{font-family:var(--head); font-weight:600; font-size:1.02rem; color:var(--ink); text-decoration:none; line-height:1.25}
.t3n:hover{color:var(--iris-ink); text-decoration:underline}
.t3w{font-size:.82rem; color:var(--slate); line-height:1.35}
.t3b{white-space:nowrap; text-decoration:none; font-weight:700; font-size:.82rem; padding:9px 14px; border-radius:999px}
.home-hero .hero-cta{margin-top:18px}
.price.tier{font-family:var(--body); font-size:.78rem; font-weight:700; padding:4px 11px; border-radius:999px;
  background:var(--mist); color:var(--slate); border:1px solid var(--line)}
.voice .vwho{font-size:.82rem}
.jumpnav a{gap:0}
@media (max-width:880px){
  .home-hero .figwrap{display:none}
  .top3 li{grid-template-columns:56px 1fr; }
  .t3img{width:56px; height:56px}
  .t3b{grid-column:2; justify-self:start; padding:7px 13px}
  .dock a{font-size:.74rem; padding:10px 6px}
}
.voice::before{content:none}
.voice{padding:20px 22px 16px}
.voice .vwho{margin:0 0 8px; color:var(--plum); font-weight:700}
.voice p:last-child{margin:0}
.home-hero h1{max-width:20ch; font-size:clamp(2rem, 3.6vw, 3.1rem); line-height:1.08}
.home-hero .lede{margin-bottom:0}
.home-hero{padding-top:40px}