/* Taupe marketing: scoped so existing LUFF products and companion UI stay unchanged.
   Shared verbatim with taupe.luff.works/about/ by build-web-marketing.py. */
.taupe-marketing { --taupe-paper:#f4efe7; --taupe-card:#ece4d8; --taupe-ink:#352f2a; --taupe-muted:#6a5b4e; --taupe-line:#d4c6b6; color:var(--taupe-ink); background:var(--taupe-paper); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:17px; line-height:1.7; margin:0; }
.taupe-marketing * { box-sizing:border-box; }
.taupe-marketing h1,.taupe-marketing h2,.taupe-marketing h3 { color:var(--taupe-ink); font-family:Georgia,"Songti SC",serif; font-weight:400; letter-spacing:-.025em; }
.taupe-marketing a { color:inherit; text-underline-offset:5px; }
.taupe-marketing img { display:block; max-width:100%; height:auto; }
.taupe-marketing .tm-wrap { max-width:1220px; margin:auto; padding-inline:40px; }
.taupe-marketing .tm-nav { display:flex; justify-content:space-between; gap:22px; align-items:center; padding-top:28px; padding-bottom:28px; border-bottom:1px solid var(--taupe-line); font-size:14px; }
.taupe-marketing .tm-nav nav { display:flex; gap:20px; flex-wrap:wrap; }
.taupe-marketing .tm-brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:650; }
.taupe-marketing .tm-brand img { width:42px; height:42px; }
.taupe-marketing .tm-hero { display:grid; grid-template-columns:1.4fr .6fr; gap:64px; align-items:center; padding-block:72px 88px; }
.taupe-marketing .tm-eyebrow { color:var(--taupe-muted); font-size:13px; letter-spacing:.075em; font-weight:650; margin:0 0 22px; }
.taupe-marketing h1 { font-size:clamp(42px,5.4vw,76px); line-height:1.08; margin:0 0 28px; text-wrap:balance; }
.taupe-marketing .tm-intro { font-size:21px; line-height:1.7; max-width:640px; }
.taupe-marketing .tm-actions { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin:32px 0 26px; }
.taupe-marketing .tm-button { background:var(--taupe-ink); color:var(--taupe-paper); border-radius:999px; padding:13px 24px; text-decoration:none; min-height:48px; display:inline-flex; gap:10px; align-items:center; font-weight:600; font-size:16px; transition:transform .2s ease; }
.taupe-marketing .tm-button:hover { transform:translateY(-2px); }
.taupe-marketing .tm-promises { display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; padding:0; margin:0; font-size:14px; color:var(--taupe-muted); }
.taupe-marketing .tm-promises li::before { content:"✓"; margin-right:8px; color:var(--taupe-ink); }
.taupe-marketing .tm-hero-shot { max-width:300px; margin-inline:auto; }
.taupe-marketing .tm-hero-shot .tm-screen { box-shadow:0 30px 60px #352f2a1f; width:100%; height:auto; display:block; background:var(--taupe-paper); }
.taupe-marketing .tm-hero-shot a { display:block; border-radius:28px; transition:transform .2s ease; }
.taupe-marketing .tm-hero-shot a:hover { transform:translateY(-4px); }
.taupe-marketing .tm-hero-still { display:none!important; }
.taupe-marketing .tm-small { font-size:14px; color:var(--taupe-muted); line-height:1.65; }
.taupe-marketing .tm-note { max-width:760px; margin-top:40px; }
.taupe-marketing .tm-status { display:inline-block; border:1px solid var(--taupe-line); padding:4px 12px; border-radius:999px; font-size:13px; margin:0 0 22px; }
.taupe-marketing figure { margin:0; }
.taupe-marketing .tm-screen { border:1px solid var(--taupe-line); border-radius:28px; box-shadow:0 16px 40px #352f2a12; }
.taupe-marketing .tm-section { border-top:1px solid var(--taupe-line); padding-block:80px; scroll-margin-top:20px; }
.taupe-marketing h2 { font-size:clamp(32px,3.5vw,52px); line-height:1.15; margin:0 0 32px; text-wrap:balance; }
.taupe-marketing h3 { font-size:26px; line-height:1.3; margin:0 0 12px; }
.taupe-marketing .tm-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; list-style:none; padding:0; margin:48px 0 0; }
.taupe-marketing .tm-step figure { background:var(--taupe-card); border-radius:20px; padding:36px 36px 0; overflow:hidden; height:430px; margin-bottom:28px; }
.taupe-marketing .tm-step figure img { max-width:250px; margin-inline:auto; border-bottom-left-radius:0; border-bottom-right-radius:0; }
.taupe-marketing .tm-step-number { font-size:13px; letter-spacing:.075em; font-weight:650; color:var(--taupe-muted); margin:0 0 8px; }
.taupe-marketing .tm-step p:last-child { margin:0; }
.taupe-marketing .tm-principles { display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.taupe-marketing .tm-principles h3 { font-size:22px; }
.taupe-marketing .tm-principles p { margin:0; color:var(--taupe-muted); }
.taupe-marketing .tm-web { display:grid; grid-template-columns:1.1fr .9fr; gap:72px; align-items:start; }
.taupe-marketing .tm-web > div > p { max-width:560px; }
.taupe-marketing .tm-pair { background:var(--taupe-card); border-radius:20px; padding:36px 40px; }
.taupe-marketing .tm-pair ol { counter-reset:pair; list-style:none; padding:0; margin:20px 0 24px; }
.taupe-marketing .tm-pair li { counter-increment:pair; display:grid; grid-template-columns:36px 1fr; gap:12px; padding:14px 0; border-top:1px solid var(--taupe-line); }
.taupe-marketing .tm-pair li::before { content:counter(pair); width:28px; height:28px; border-radius:50%; background:var(--taupe-ink); color:var(--taupe-paper); display:grid; place-items:center; font-size:13px; font-weight:650; margin-top:3px; }
.taupe-marketing .tm-pair .tm-small { margin:0; }
.taupe-marketing .tm-lede { font-size:19px; max-width:640px; margin:0 0 44px; }
.taupe-marketing .tm-ways { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.taupe-marketing .tm-ways article { display:flex; flex-direction:column; background:var(--taupe-card); border-radius:20px; padding:28px; }
.taupe-marketing .tm-ways h3 { font-size:22px; }
.taupe-marketing .tm-ways p { flex:1; margin:0 0 20px; font-size:15px; color:var(--taupe-muted); }
.taupe-marketing .tm-ways a { font-weight:600; font-size:15px; }
.taupe-marketing .tm-faq { max-width:800px; }
.taupe-marketing details { border-top:1px solid var(--taupe-line); padding:20px 0; }
.taupe-marketing summary { cursor:pointer; font-weight:600; padding-block:5px; }
.taupe-marketing details p { color:var(--taupe-muted); padding-right:20px; }
.taupe-marketing .tm-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; padding-block:30px; border-top:1px solid var(--taupe-line); font-size:14px; }
.taupe-marketing .tm-footer nav { display:flex; gap:24px; }
.taupe-marketing a:focus-visible,.taupe-marketing summary:focus-visible { outline:3px solid #285a64; outline-offset:6px; }
.taupe-marketing .tm-skip { position:absolute; top:-100px; left:20px; z-index:20; background:var(--taupe-paper); padding:12px; }
.taupe-marketing .tm-skip:focus { top:12px; }
.studio-home .project-taupe .project-visual { background:#eadfce; min-height:345px; }
.studio-home .project-taupe .app-preview { color:#352f2a; }
.taupe-feature .feature-app { background:#eadfce; }
/* Marginalia stays listed but quieter: a closing full-width row, laid out like Toolsperson's. */
.studio-home .project-marginalia { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:32px; padding-bottom:16px; }
.studio-home .project-marginalia .project-body { padding:16px 20px 16px 0; }
.studio-home .project-marginalia .project-visual { height:240px; }
@media(max-width:720px) { .studio-home .project-marginalia { display:flex; gap:0; padding-bottom:22px; } .studio-home .project-marginalia .project-body { padding:22px 6px 0; } }
@media(max-width:1050px) { .taupe-marketing .tm-principles,.taupe-marketing .tm-ways { grid-template-columns:1fr 1fr; } .taupe-marketing .tm-steps { gap:28px; } .taupe-marketing .tm-step figure { padding:24px 20px 0; height:360px; } }
@media(max-width:760px) { .taupe-marketing .tm-wrap { padding-inline:22px; } .taupe-marketing .tm-nav { flex-wrap:wrap; gap:8px 22px; } .taupe-marketing .tm-nav nav { gap:4px 16px; } .taupe-marketing .tm-hero { grid-template-columns:1fr; gap:36px; padding-block:44px 56px; } .taupe-marketing .tm-hero-shot { max-width:260px; } .taupe-marketing .tm-intro { font-size:19px; } .taupe-marketing .tm-steps,.taupe-marketing .tm-principles,.taupe-marketing .tm-ways,.taupe-marketing .tm-web { grid-template-columns:1fr; gap:40px; } .taupe-marketing .tm-step figure { height:380px; } .taupe-marketing .tm-pair { padding:28px 24px; } .taupe-marketing .tm-section { padding-block:56px; } .taupe-marketing .tm-nav a { min-height:36px; display:inline-flex; align-items:center; } }
@media(prefers-reduced-motion:reduce) { .taupe-marketing .tm-hero-video { display:none!important; } .taupe-marketing .tm-hero-still { display:block!important; } .taupe-marketing * { scroll-behavior:auto!important; transition:none!important; } }