/* page-founder-uses.css - "What the Founder Uses" authority page.
   Hero is a NIGHT band (.fu-hero, mockup arrangement, theme dark-band tokens) holding eyebrow + h1 +
   intro (.lede) + disclosure (.fu-disclose); page runs in default dark-hero nav mode. Body is paper.
   This sheet carries the per-page theme idioms (.sec-head/.lede) + the product-card grid, the attached
   .fu-deep expanders, and the in-expander prose (.fu-reason). Built from theme tokens only. Accordion
   OPEN/CLOSE animation is JS-driven site-wide from main.js (both .fu-deep and global .faq-item). */

/* --- theme idioms this page needs (per-page, mirrors page-hygienization.css/service.css) --- */
.sec-head{max-width:48ch;margin-bottom:52px;}
.sec-head h2{font-size:clamp(2rem,4.2vw,3.2rem);margin:14px 0;font-weight:300;letter-spacing:-.02em;line-height:1.12;}
.sec-head h2 em{font-family:'Fraunces',serif;font-style:italic;color:var(--accent);}
.sec-head p{color:var(--ink-soft);font-size:1.1rem;max-width:60ch;}
.lede{max-width:66ch;}
.lede p{color:var(--ink-soft);font-size:1.08rem;margin-bottom:14px;}
.lede p:last-child{margin-bottom:0;}
.lede a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.principle{margin-top:34px;border-left:2px solid var(--accent);padding:8px 0 8px 26px;max-width:64ch;}
.principle p{font-family:'Fraunces',serif;font-style:italic;font-size:1.3rem;line-height:1.36;color:var(--ink);margin:0;}

/* --- product cards + placeholder slots (NO theme equivalent) --- */
.fu-air-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch;margin-bottom:22px;}
@media(max-width:760px){.fu-air-grid{grid-template-columns:1fr;}}
.fu-card{background:var(--paper-deep);border:1px solid var(--line);padding:28px 30px;display:flex;flex-direction:column;}
.fu-card .fu-shot{width:100%;aspect-ratio:1/1;margin-bottom:20px;position:relative;background:var(--paper);border:1px solid var(--line);overflow:hidden;}
.fu-card .fu-shot img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;}
.fu-card .fu-shot.ph{border-style:dashed;border-color:rgba(107,79,46,.45);}
.fu-card .fu-shot.ph .mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-family:'Archivo',sans-serif;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(107,79,46,.55);}
.fu-card .name{font-family:'Fraunces',serif;font-size:1.5rem;line-height:1.15;margin-bottom:4px;}
.fu-card .maker{font-size:.82rem;color:var(--ink-soft);margin-bottom:18px;}
.fu-card dl{display:grid;grid-template-columns:1fr;gap:2px 0;margin:0;}
.fu-card dt{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-top:14px;}
.fu-card dt:first-child{margin-top:0;}
.fu-card dd{font-size:.96rem;color:var(--ink);margin:2px 0 0;}
.fu-card .card-links{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;}
.fu-card .speclink{display:inline-block;font-size:.84rem;font-weight:600;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px;}
.fu-card .speclink:hover{border-color:var(--accent);}

/* 2a: domain heads (Air/Surface/Humidity) as a small Fraunces-italic accent LABEL (the theme's
   .serif / hero-em emphasis idiom), not a display heading. Overrides this sheet's .sec-head h2. */
.fu-domain-head{margin-bottom:40px;}
.fu-domain-head h2{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--accent);margin:0 0 6px;}
/* 2d: single-card sections (Surface, Humidity) span the full content width as a horizontal card
   (image left, body right); the Air two-up grid is unaffected. */
.fu-solo{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start;margin-bottom:22px;}
.fu-solo .fu-shot{margin-bottom:0;}
.fu-solo-body{display:flex;flex-direction:column;}
@media(max-width:640px){.fu-solo{grid-template-columns:1fr;}}
/* 2c: expanders span the full page content container, not the 65ch prose measure (this sheet loads
   only on the founder page, so overriding the global .faq-a does not leak). */
.faq-a{max-width:none;}

/* === v0.5.52 SCOPE 1 - restore the mockup structure (theme tokens) === */
/* === v0.5.53 mockup-structure restore (theme tokens) === */
/* 2a: in-card "Read my full reasoning" anchor (mockup .readmore idiom): opens + scrolls to .fu-deep */
.fu-readmore{font-family:'Archivo',sans-serif;font-weight:600;font-size:.86rem;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;cursor:pointer;transition:color .3s;}
.fu-readmore:hover{color:var(--night);}
/* 2b: attached full-reasoning expander (mockup details.deep) - two-part summary; cue swaps on [open] */
.fu-deep{border-top:1px solid var(--line);}
.fu-deep:last-of-type{border-bottom:1px solid var(--line);}
.fu-deep>summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;}
.fu-deep>summary::-webkit-details-marker{display:none;}
.fu-sm-title{font-family:'Fraunces',serif;font-size:1.25rem;line-height:1.2;color:var(--ink);}
.fu-sm-cue{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);white-space:nowrap;}
.fu-c-close{display:none;}
.fu-deep[open] .fu-c-open{display:none;}
.fu-deep[open] .fu-c-close{display:inline;}
.fu-deep .fu-reason{padding:2px 0 30px;}
.fu-deep .fu-reason h3:first-child{margin-top:6px;}
/* v0.5.56 item 4: disclosure as the PULL-QUOTE idiom on the night band (mirrors this page's
   .fu-reason .pull: 3px gold left bar, Fraunces italic at 1.24rem, no box). Night adaptation:
   the paper .pull is accent-tinted; on night the serif tint token is #d9b783 (the dark-band
   h2-em/serif gold). Label stays the small uppercase gold line above the quote. */
.fu-disclose{background:transparent;border-left:3px solid var(--gold);padding:4px 0 4px 22px;margin-top:34px;max-width:64ch;}
.fu-disclose-k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#c79a5e;margin-bottom:8px;}
.fu-disclose p{font-family:'Fraunces',serif;font-style:italic;font-size:1.24rem;line-height:1.32;color:#d9b783;margin:0;}
/* 1b: "why I run both" restored as the mockup's distinct highlighted box, square corners. */
.fu-honest{background:var(--paper-deep);border:1px solid var(--line);border-radius:0;padding:26px 30px;margin-top:22px;}
.fu-honest .name{font-family:'Fraunces',serif;font-style:italic;font-size:1.3rem;line-height:1.2;color:var(--ink);margin-bottom:8px;}
.fu-honest p{margin:0;color:var(--ink-soft);font-size:1.02rem;}
/* 1c: the theme is uniformly square - force 0 radius on every founder card/slot/box/expander. */
.fu-card,.fu-card .fu-shot,.fu-honest,.fu-deep,.fu-disclose,.faq-item{border-radius:0;}

/* === founder hero as a NIGHT band (mockup arrangement, theme dark-band tokens: --night bg, gold
   eyebrow, paper h1, gold-serif em, --night-text intro). Height is CONTENT-DRIVEN (padding as the
   floor, never a fixed height); >=1200px adds min-height:100svh + vertical centering so the band
   fills the first screen where content fits - content may still push taller, so nothing can clip.
   Page is default dark-hero nav mode (light-hero flag removed). .fu-disclose sits ON the band in
   the OLI dark-panel idiom (see its block above). */
.fu-hero{background:var(--night);color:var(--night-text);padding:150px 0 84px;}
/* v0.5.57 item 1+3: desktop band FILLS the first screen, content anchored BOTTOM-LEFT. The flex
   column + the .wrap's margin:0 auto was overriding align-items:stretch, shrinking the wrap to its
   widest child's max-content and then centering it (content drifted toward viewport center). width:100%
   gives the wrap a definite cross size so it resolves to the global .wrap box (max-width 1180 + 40px
   padding, margin:0 auto) - IDENTICAL geometry to every .ac-hero/.contact-hero sibling; left edge
   at (vw-1180)/2 + 40. justify-content:flex-end keeps it bottom; 84px padding is the floor;
   min-height only, so content can push taller and nothing clips. Below 1200px unchanged. */
@media(min-width:1200px){
  .fu-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;}
  .fu-hero > .wrap{width:100%;}
}
.fu-hero .eyebrow{color:var(--gold);display:block;margin-bottom:22px;}
.fu-hero h1{color:#fff;font-size:clamp(2.6rem,6vw,3.4rem);max-width:20ch;margin-bottom:24px;}
.fu-hero h1 em{font-family:'Fraunces',serif;font-style:italic;color:var(--gold);}
.fu-hero .lede{max-width:66ch;}
.fu-hero .lede p{color:var(--night-text);}
.fu-hero .lede a{color:var(--gold);}
@media(max-width:600px){.fu-hero{padding:118px 0 64px;}}

/* --- deep-reasoning prose inside the .faq-item expanders (.faq-a; no theme prose class reaches here) --- */
/* v0.5.56 item 1: panel h3 = the summary title's EXACT computed style, one size step smaller.
   The title (.fu-sm-title) computes: Fraunces / weight 300 (inherited from body) / var(--ink) /
   letter-spacing normal / line-height 1.2. The h3 was declaring 400 AND leaking the global
   h1,h2,h3 letter-spacing -.025em + line-height 1.1 (denser tracking = the "heavier" read;
   color was already identical). All four now declared explicitly. */
.fu-reason h3{font-family:'Fraunces',serif;font-weight:300;font-size:1.15rem;line-height:1.2;letter-spacing:normal;color:var(--ink);margin:32px 0 8px;}
.fu-reason h3:first-child{margin-top:4px;}
.fu-reason p{margin-bottom:12px;color:var(--ink-soft);}
.fu-reason strong{color:var(--ink);font-weight:500;}
.fu-reason a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.fu-reason .pull{font-family:'Fraunces',serif;font-style:italic;font-size:1.24rem;line-height:1.32;color:var(--accent);border-left:3px solid var(--gold);padding:4px 0 4px 22px;margin:24px 0;}
.fu-reason ul{margin:0 0 14px;padding-left:0;list-style:none;}
.fu-reason li{padding:6px 0 6px 22px;position:relative;color:var(--ink-soft);}
.fu-reason li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--accent);border-radius:50%;}
.fu-reason .evid li{padding:10px 0 10px 22px;border-bottom:1px solid var(--line);}
.fu-reason .evid li:last-child{border-bottom:none;}
.fu-reason .evid li::before{top:19px;}
.fu-reason .evid b{color:var(--ink);font-weight:600;}
.fu-reason .limits li::before{content:"\2717";background:none;left:0;top:6px;color:var(--line);font-weight:700;width:auto;height:auto;border-radius:0;}