/* Flonest maker's index. Ported from the approved Floot source (2026-10-08). */
:root {
 --background:#f2f0e9;--foreground:#24231f;--surface:#eae7dd;--surface-foreground:#24231f;
 --card:#f8f7f1;--primary:#c74727;--primary-ink:#b33d21;--muted-foreground:#625f58;--border:#ccc7bc;
 --font-family-base:'Archivo',Arial,sans-serif;--font-family-display:'Archivo',Arial,sans-serif;
 --font-family-monospace:'IBM Plex Mono',monospace;--font-family-cursive:'Newsreader',Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--background);color:var(--foreground);font-family:var(--font-family-base);margin:0;font-synthesis:none}
a{color:inherit}
a:focus-visible{outline:3px solid var(--primary);outline-offset:5px}
svg{width:16px;height:16px;flex-shrink:0}
.page{min-height:100dvh;background:var(--background);color:var(--foreground)}
.shell{max-width:1500px;margin:0 auto;padding:0 clamp(22px,4.8vw,78px)}
.topbar,.masthead{min-height:78px;display:flex;align-items:center;gap:21px;border-bottom:1px solid var(--foreground)}
.mark{display:grid;place-items:center;width:42px;height:42px;flex-shrink:0;background:var(--foreground);color:var(--background);text-decoration:none;font-family:var(--font-family-display);font-size:24px;font-weight:900;letter-spacing:-.09em;line-height:1}
.mark span{color:#ef754f;margin-left:1px}
.topMeta,.nav,.supra,.sectionIndex,.workHeaderNote,.projectField,.projectNumber,.projectPhase,.projectLink,.endIndex,.footerRight,.mastText,.back,.kicker,.sectionLabel,.stepNumber,.evidenceNumber,.note,.footer,.relatedTitle,.reviewed{font-family:var(--font-family-monospace)}
.topMeta{font-size:10px;font-weight:500;letter-spacing:.035em;white-space:nowrap}
.metadataSeparator{color:var(--primary);padding:0 3px}
.nav{margin-left:auto;display:flex;gap:30px;font-size:11px}
.nav a{text-decoration:none;display:flex;gap:7px;align-items:center;padding:12px 0}
.nav a span{color:var(--primary)}
.nav a:hover,.discover:hover{color:var(--primary-ink)}
.intro{padding-top:43px;padding-bottom:83px}
.supra{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:10px;letter-spacing:.025em;color:var(--muted-foreground)}
.register{display:inline-flex;align-items:center;gap:12px}
.cross{font-size:19px;font-weight:600;color:var(--primary);line-height:.65}
.edition{text-align:right}
.slash{color:var(--primary)}
.wordmark{font-family:var(--font-family-display);font-size:clamp(75px,16vw,232px);font-weight:900;letter-spacing:-.103em;line-height:1.04;margin:20px 0 11px;padding:0 12px 10px 0;white-space:nowrap}
.fullstop{color:var(--primary);letter-spacing:-.05em}
.heroBottom{border-top:1px solid var(--foreground);padding-top:35px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:72px;align-items:start}
.thesis{font-size:clamp(30px,3.8vw,53px);line-height:1.13;font-weight:600;letter-spacing:-.054em;margin:0;max-width:660px}
.italic{font-family:var(--font-family-cursive);font-size:1.08em;font-weight:400;letter-spacing:-.035em}
.heroAside{max-width:320px;padding-top:3px}
.heroAside p{font-size:15px;line-height:1.6;margin:0 0 27px;letter-spacing:-.01em}
.discover{display:inline-flex;align-items:center;gap:13px;font-size:12px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--primary);padding-bottom:7px}
.discover svg{width:15px;height:15px;color:var(--primary)}
.work{border-top:1px solid var(--foreground);padding-top:28px;padding-bottom:89px;scroll-margin-top:20px}
.workHeader{display:flex;justify-content:space-between;align-items:end;gap:18px;margin-bottom:40px}
.sectionIndex{font-size:10px;color:var(--primary-ink);font-weight:600;letter-spacing:.045em}
.workHeaderTitle h2{font-size:clamp(29px,3vw,42px);letter-spacing:-.055em;margin:12px 0 0;font-weight:650}
.titlePeriod{color:var(--primary)}
.workHeaderNote{font-size:10px;letter-spacing:.015em;color:var(--muted-foreground);padding-bottom:4px;text-align:right}
.projectList{border-top:1px solid var(--foreground)}
.project{position:relative;display:grid;grid-template-columns:110px minmax(0,1fr) 245px;gap:18px;align-items:start;padding:31px 18px 34px 0;border-bottom:1px solid var(--border);text-decoration:none}
.project:hover,.project:focus-visible{background:var(--surface)}
.project::before{content:"";position:absolute;left:0;top:24px;bottom:24px;width:2px;background:var(--primary);opacity:0;transform:scaleY(0);transform-origin:center;transition:opacity .18s ease,transform .18s ease}
.project:hover::before,.project:focus-visible::before{opacity:1;transform:scaleY(1)}
.projectContent{min-width:0;transition:transform .18s ease}
@media(hover:hover) and (pointer:fine){.project:hover .projectContent{transform:translateX(5px)}}
.project:focus-visible .projectContent{transform:translateX(5px)}
.projectNumber{font-size:13px;color:var(--primary-ink);font-weight:600;padding-top:6px}
.numberSlash{color:var(--border)}
.projectField{font-size:10px;letter-spacing:.035em;color:var(--muted-foreground)}
.projectName{font-family:var(--font-family-display);font-size:clamp(38px,4.8vw,65px);font-weight:750;letter-spacing:-.078em;line-height:1.08;margin:12px 0 9px}
.projectDescription{font-size:14px;line-height:1.55;margin:0;max-width:520px;color:var(--muted-foreground)}
.projectSide{height:100%;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:40px}
.projectPhase{font-size:10px;border:1px solid var(--border);padding:9px 10px;white-space:nowrap;letter-spacing:.01em}
.projectLink{display:flex;gap:10px;align-items:center;font-size:10px;white-space:nowrap}
.projectLink svg{width:20px;height:20px;color:var(--primary);transition:transform .18s}
.project:hover .projectLink svg{transform:translate(3px,-3px)}
.endIndex{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted-foreground);padding-top:16px}
.studio{padding:28px 0 90px;border-top:1px solid var(--foreground);scroll-margin-top:20px}
.studioGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:start;margin-top:19px}
.studioGrid h2{font-size:clamp(34px,4.6vw,62px);line-height:1.1;letter-spacing:-.075em;margin:0;font-weight:700}
.studioGrid p{max-width:510px;font-size:clamp(17px,2vw,21px);line-height:1.58;letter-spacing:-.022em;margin:0}
.footer{border-top:1px solid var(--foreground);padding:23px 0 29px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.footerBrand{font-weight:800;font-size:25px;letter-spacing:-.09em;text-decoration:none}
.footerBrand span{color:var(--primary)}
.footerRight{display:flex;gap:25px;color:var(--muted-foreground);font-size:10px}
.footerEmail{text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:3px;overflow-wrap:anywhere}
.footerEmail:hover{color:var(--primary-ink);border-bottom-color:var(--primary)}
/* Shared product notes */
.mastText{font-size:10px}.vermillion{color:var(--primary)}
.back{margin-left:auto;font-size:11px;text-decoration:none;display:inline-flex;gap:9px;align-items:center}
.back svg{width:14px;height:14px;color:var(--primary)}
.kicker{display:flex;justify-content:space-between;align-items:start;gap:15px;padding:29px 0 14px;font-size:10px;color:var(--muted-foreground)}
.kicker span:first-child{color:var(--primary-ink)}
.detailHero{padding-bottom:100px}
.detailHero h1{font-size:clamp(77px,16vw,222px);font-weight:900;letter-spacing:-.105em;line-height:1;margin:10px 0 25px}
.detailHero h1.longName{font-size:clamp(62px,12.3vw,152px)}
.detailHero h1 span{color:var(--primary)}
.heroGrid{border-top:1px solid var(--foreground);padding-top:35px;display:grid;grid-template-columns:1.2fr .8fr;gap:60px}
.statement{font-size:clamp(34px,4.3vw,61px);line-height:1.08;font-weight:700;letter-spacing:-.064em;max-width:690px;margin:0}
.heroRight{max-width:400px}.heroRight p{font-size:17px;line-height:1.65;margin:0 0 27px}
.primaryLink{display:inline-flex;background:var(--foreground);color:var(--background);text-decoration:none;gap:18px;align-items:center;padding:14px 17px;font-size:13px;font-weight:600}
.primaryLink:hover{background:var(--primary)}
.accessLink{display:inline-flex;min-height:44px;align-items:center;gap:10px;font-size:13px;font-weight:650;text-decoration:none;border-bottom:1px solid var(--primary);margin-top:10px}
.accessLink svg{width:15px;height:15px;color:var(--primary-ink)}
.accessLink:hover{color:var(--primary-ink)}
.note{display:block;color:var(--muted-foreground);font-size:10px;margin-top:11px}
.section{border-top:1px solid var(--foreground);padding:31px 0 100px;display:grid;grid-template-columns:1fr 2fr;gap:45px}
.sectionLabel{color:var(--primary-ink);font-size:10px;letter-spacing:.03em}
.sectionHeading{font-size:clamp(30px,3.7vw,51px);letter-spacing:-.07em;line-height:1.12;margin:0 0 32px}
.steps{border-top:1px solid var(--border)}
.step{display:grid;grid-template-columns:46px 1fr 1.2fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--border);align-items:start}
.stepNumber,.evidenceNumber{color:var(--primary-ink);font-size:12px}
.step h3,.evidence h3{font-size:17px;font-weight:700;letter-spacing:-.025em;margin:0}
.step p,.evidence p{font-size:14px;line-height:1.55;color:var(--muted-foreground);margin:0}
.lead{font-size:17px;line-height:1.65;max-width:680px;margin:0 0 26px}
.evidenceList{border-top:1px solid var(--border)}
.evidence{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--border)}
.evidence h3{margin-bottom:8px}.evidence p{max-width:590px}
.evidenceLinks{display:flex;flex-wrap:wrap;gap:18px 26px;margin-top:29px}
.evidenceLink{font-size:14px;font-weight:700;text-decoration:none;display:inline-flex;gap:10px;align-items:center;border-bottom:1px solid var(--primary);padding:0 0 8px}
.evidenceLink svg{width:15px;height:15px;color:var(--primary)}
.reviewed{color:var(--muted-foreground);font-size:10px;margin-top:20px}
.related{border-top:1px solid var(--foreground);padding:30px 0 65px}
.relatedTitle{font-size:10px;color:var(--primary-ink);margin-bottom:20px}
.relatedLinks{display:flex;flex-wrap:wrap;gap:14px 24px}
.relatedLinks a{font-size:22px;letter-spacing:-.04em;font-weight:700;text-decoration:none;border-bottom:1px solid var(--border);padding-bottom:8px;display:inline-flex;align-items:center;gap:8px}
.relatedLinks svg{width:16px;height:16px;color:var(--primary)}
.detailPage .footer{font-size:10px;color:var(--muted-foreground);padding:25px 0 42px}
.detailPage .footerBrand{color:var(--foreground)}
.footerReturn{text-decoration:none}
.notFound{max-width:720px;margin:12vh auto;padding:25px}
.notFound h1{font-size:clamp(38px,7vw,65px);letter-spacing:-.065em}
.notFound p{font-family:var(--font-family-monospace);font-size:11px;color:var(--primary-ink);margin-top:60px}
@media(max-width:950px){.topMeta{max-width:240px;line-height:1.7;white-space:normal}.wordmark{font-size:clamp(74px,15.5vw,145px)}.project{grid-template-columns:68px minmax(0,1fr) 170px}.projectDescription{max-width:390px}.workHeaderNote{max-width:260px}}
@media(max-width:850px){.section{grid-template-columns:1fr;gap:26px}.heroGrid{grid-template-columns:1fr;gap:27px}}
@media(max-width:650px){
 .shell{padding:0 22px}.topbar,.masthead{min-height:72px;gap:12px}.mark{width:44px;height:44px;font-size:22px}.topMeta{font-size:9px;max-width:145px;line-height:1.45}.nav{gap:9px;font-size:11px}.nav a{min-width:44px;min-height:44px;justify-content:center;white-space:nowrap}.nav a span{display:none}
 .intro{padding:28px 0 62px}.supra{font-size:9px;align-items:start}.register{max-width:150px;align-items:start;line-height:1.5;gap:7px}.edition{max-width:150px;line-height:1.5}
 .wordmark{font-size:clamp(61px,19.4vw,118px);letter-spacing:-.108em;margin:24px 0 17px;padding:0 3px 6px 0}
 .heroBottom{grid-template-columns:1fr;gap:22px;padding-top:21px}.thesis{font-size:clamp(32px,8.7vw,45px)}.heroAside{padding-top:0}.heroAside p{font-size:14px;margin-bottom:16px}
 .work{padding:22px 0 58px}.workHeader{flex-direction:column;align-items:start;gap:14px;margin-bottom:27px}.workHeaderTitle h2{font-size:32px;margin-top:10px}.workHeaderNote{text-align:left;font-size:9px}
 .project{grid-template-columns:37px minmax(0,1fr);gap:8px;padding:24px 0 26px}.projectNumber{font-size:11px;padding-top:3px}.projectName{font-size:clamp(37px,11vw,53px);margin:10px 0 7px}.projectField{font-size:9px}.projectDescription{font-size:13px;max-width:100%}.projectSide{grid-column:2;flex-direction:row;align-items:center;gap:12px;margin-top:12px}.projectPhase{font-size:9px;padding:7px 8px}.projectLink{font-size:0;gap:0}.projectLink svg{width:20px;height:20px}.endIndex{font-size:8px;line-height:1.4}
 .studio{padding:22px 0 60px}.studioGrid{grid-template-columns:1fr;gap:20px}.studioGrid h2{font-size:38px}.studioGrid p{font-size:16px}.footer{align-items:flex-start}.footerRight{flex-direction:column;gap:5px;text-align:right;font-size:10px}
 .mastText{font-size:9px;max-width:126px;line-height:1.5}.back{font-size:10px}.kicker{flex-wrap:wrap;font-size:9px;gap:9px;padding-top:22px}
 .detailHero{padding-bottom:66px}.detailHero h1{font-size:clamp(68px,17vw,120px);margin:25px 0 15px}.detailHero h1.longName{font-size:clamp(48px,12.3vw,90px)}
 .heroGrid{padding-top:22px}.statement{font-size:clamp(35px,10vw,48px)}.heroRight p{font-size:15px}
 .section{padding:25px 0 65px}.sectionHeading{font-size:33px;margin-bottom:24px}.step{grid-template-columns:27px 1fr;gap:8px}.step p{grid-column:2}.step h3{font-size:15px}.evidence{grid-template-columns:27px 1fr;gap:10px}.lead{font-size:15px}
 .detailPage .footer{flex-wrap:wrap}.detailPage .footer span{order:3;width:100%;font-size:10px}
 /* Touch targets stay generous even when the editorial labels look compact. */
 .discover,.back,.evidenceLink,.relatedLinks a,.footerReturn,.footerEmail,.footerBrand{min-height:44px;display:inline-flex;align-items:center}
 .discover{padding:10px 0}.evidenceLink,.relatedLinks a{padding-top:9px;padding-bottom:9px}
 .footerEmail{align-self:flex-end;font-size:11px}.footerReturn{font-size:11px}
 .footerBrand{align-self:flex-start}.endIndex{font-size:10px}
}
@media(max-width:360px){.topMeta{max-width:107px}.nav{gap:7px;font-size:11px}.wordmark{font-size:17.7vw}.detailHero h1{font-size:17vw}.detailHero h1.longName{font-size:11.8vw}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.projectContent,.project::before,.projectLink svg{transition:none}.project:hover .projectContent,.project:focus-visible .projectContent{transform:none}}