// Direction 1 — DOSSIER (FINAL)
// Cinematic editorial. Now with Tweaks for palette / font / hero / density / wordmark.

const DOSSIER_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ink",
  "displayFont": "fraunces",
  "heroTreatment": "parallax",
  "density": "regular",
  "wordmarkSize": "huge",
  "showGrain": true
}/*EDITMODE-END*/;

const DOS_PALETTES = {
  ink:    { ink:'#0c0a09', ink2:'#0a0807', bone:'#f4ede0', cream:'#e9dfc8', red:'#c43030', redHi:'#e34244' },
  oxblood:{ ink:'#0e0908', ink2:'#0a0606', bone:'#efe6d3', cream:'#e3d6b6', red:'#7a1e1e', redHi:'#9a2828' },
  paper:  { ink:'#1b1815', ink2:'#221e19', bone:'#1b1815', cream:'#1b1815', red:'#a32525', redHi:'#c43030', invert:true },
};
const DOS_FONTS = {
  fraunces: { fontFamily: 'Fraunces, serif', fontVariationSettings: '"opsz" 144, "SOFT" 50' },
  playfair: { fontFamily: 'Playfair Display, serif' },
  brutal:   { fontFamily: 'Rubik Mono One, monospace', letterSpacing:'-.02em' },
};
const DOS_DENSITY = {
  compact: { sec: 64, secX: 56, hero: 880,  big: 96, xl: 156 },
  regular: { sec: 112,secX: 64, hero: 1040, big: 124, xl: 188 },
  airy:    { sec: 160,secX: 80, hero: 1180, big: 144, xl: 220 },
};
const WORDMARK_SCALE = { large: 132, huge: 188, mega: 240 };

function useParallaxOffset(ref, speed = 0.3) {
  const [y, setY] = React.useState(0);
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    let scroller = el.parentElement;
    while (scroller && !scroller.classList?.contains('ftc-artboard-content')) scroller = scroller.parentElement;
    scroller = scroller || window;
    const onScroll = () => {
      const rect = el.getBoundingClientRect();
      const sr = scroller === window ? { top: 0 } : scroller.getBoundingClientRect();
      setY((rect.top - sr.top) * -speed);
    };
    onScroll();
    const target = scroller === window ? window : scroller;
    target.addEventListener('scroll', onScroll, { passive: true });
    return () => target.removeEventListener('scroll', onScroll);
  }, [ref, speed]);
  return y;
}

function DirectionDossier() {
  const [t, setTweak] = useTweaks(DOSSIER_TWEAK_DEFAULTS);
  const P = DOS_PALETTES[t.palette] || DOS_PALETTES.ink;
  const F = DOS_FONTS[t.displayFont] || DOS_FONTS.fraunces;
  const D = DOS_DENSITY[t.density] || DOS_DENSITY.regular;
  const wmSize = WORDMARK_SCALE[t.wordmarkSize] || WORDMARK_SCALE.huge;
  const ctx = { P, F, D, wmSize, hero: t.heroTreatment, grain: t.showGrain };
  return (
    <div style={{ width:'100%', minHeight:'100%', background: P.ink, color: P.bone,
                  fontFamily:'IBM Plex Mono, monospace', fontSize:14, lineHeight:1.55, position:'relative', overflow:'hidden' }}>
      <DosTopBar ctx={ctx}/>
      <DosHero ctx={ctx}/>
      <DosPullQuote ctx={ctx}/>
      <DosIndictment ctx={ctx}/>
      <DosEvidence ctx={ctx}/>
      <DosComparison ctx={ctx}/>
      <DosTimeline ctx={ctx}/>
      <DosSpecs ctx={ctx}/>
      <DosField ctx={ctx}/>
      <DosResolution ctx={ctx}/>
      <DosFooter ctx={ctx}/>
    </div>
  );
}

function DosTopBar({ ctx: { P, F } }) {
  return (
    <div style={{ position:'sticky', top:0, zIndex:30,
                  background: `${P.ink}cc`, backdropFilter:'blur(14px) saturate(140%)',
                  borderBottom:`1px solid ${P.bone}14`,
                  display:'grid', gridTemplateColumns:'1fr auto 1fr', alignItems:'center',
                  padding:'14px 36px', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color: P.bone }}>
      <div style={{ display:'flex', gap:24, opacity:.78 }}>
        <span style={{ color: P.red }}>● Live</span><span>Vol. I</span><span>Filed MMXXVI</span>
      </div>
      <div style={{ ...F, fontSize:18, letterSpacing:'.04em', textTransform:'none' }}>
        Fuck&nbsp;<i style={{ fontWeight:300 }}>This</i>&nbsp;Chair
      </div>
      <div style={{ display:'flex', gap:24, justifyContent:'flex-end', opacity:.78 }}>
        <span>Indictment</span><span>Evidence</span><span>Verdict</span>
        <span style={{ color: P.red, padding:'4px 10px', border:`1px solid ${P.red}` }}>Sign ↗</span>
      </div>
    </div>
  );
}

function DosHero({ ctx: { P, F, D, hero, grain } }) {
  const sit = useSitTimer();
  const heroRef = React.useRef(null);
  const y = useParallaxOffset(heroRef, hero === 'parallax' ? 0.25 : 0);
  const showImg = hero !== 'typeonly';
  return (
    <section ref={heroRef} style={{ position:'relative', height: D.hero, overflow:'hidden', background: P.ink }}>
      {showImg && (
        <div style={{ position:'absolute', inset:'-10% 0', transform: `translateY(${y}px)` }}>
          <img src="images/hero.jpg" alt="" style={{
            position:'absolute', inset:0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 38%',
            filter:'contrast(1.08) saturate(.78) brightness(.95)' }} />
        </div>
      )}
      <div style={{ position:'absolute', inset:0,
        background:`radial-gradient(110% 70% at 72% 45%, transparent 0%, ${P.ink}8c 55%, ${P.ink} 100%)` }}/>
      {grain && (
        <div style={{ position:'absolute', inset:0, opacity:.18, mixBlendMode:'overlay',
          backgroundImage:'radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px)', backgroundSize:'2px 2px' }}/>
      )}

      <div style={{ position:'absolute', inset:0, padding:'56px 64px', display:'flex', flexDirection:'column', justifyContent:'space-between', color: P.bone }}>
        <div style={{ display:'flex', justifyContent:'space-between', alignItems:'flex-start',
                      fontSize:11, letterSpacing:'.15em', textTransform:'uppercase' }}>
          <div><div style={{ opacity:.5, marginBottom:6 }}>Subject</div><div>Tolix Model A · France · MCMXXXIV</div></div>
          <div style={{ textAlign:'right' }}><div style={{ opacity:.5, marginBottom:6 }}>Filing</div><div>Public Service Announcement, Vol. I</div></div>
        </div>

        <div style={{ maxWidth: 940 }}>
          <div style={{ fontSize:11, letterSpacing:'.32em', color: P.red, marginBottom:24, textTransform:'uppercase', display:'flex', alignItems:'center', gap:14 }}>
            <span style={{ display:'inline-block', width:42, height:1, background: P.red }}/>
            A formal complaint, lodged on behalf of every spine.
          </div>
          <h1 style={{ ...F, margin:0, fontSize: D.big, lineHeight:.9, letterSpacing:'-.025em', fontWeight:300, color: P.bone }}>
            Ninety-two years<br/>
            of <Flinch intensity={1.4}><i style={{ fontWeight:400, color: P.red }}>discomfort</i></Flinch>,<br/>
            <span style={{ fontWeight:600 }}>expertly engineered.</span>
          </h1>
          <p style={{ marginTop:32, maxWidth:660, fontSize:16, lineHeight:1.6, opacity:.85 }}>
            A long-overdue formal complaint against the most beloved chair on Earth — and the only one
            <Flinch intensity={1.2} style={{ color: P.red, fontStyle:'italic', ...F, padding:'0 4px' }}>
              designed entirely without you in mind.
            </Flinch>
          </p>
        </div>

        <div style={{ display:'flex', alignItems:'flex-end', justifyContent:'space-between' }}>
          <div onMouseDown={sit.start} onMouseUp={sit.stop} onMouseLeave={sit.stop}
               onTouchStart={sit.start} onTouchEnd={sit.stop}
               style={{ cursor:'pointer', userSelect:'none', display:'flex', gap:20, alignItems:'center',
                        padding:'18px 24px', border:`1px solid ${P.bone}${sit.sitting ? '8c' : '4d'}`,
                        background: sit.sitting ? `${P.red}24` : `${P.ink}73`,
                        backdropFilter:'blur(8px)', transition:'background .2s, border-color .2s' }}>
            <div style={{ width:10, height:10, borderRadius:'50%', background: sit.sitting ? P.red : `${P.bone}66`,
                          animation: sit.sitting ? 'ftc-pulse 1.2s infinite' : 'none' }}/>
            <div>
              <div style={{ fontSize:10, letterSpacing:'.2em', opacity:.6, textTransform:'uppercase' }}>
                {sit.sitting ? 'Time on chair' : 'Press & hold to sit'}
              </div>
              <div style={{ fontFamily:'JetBrains Mono, monospace', fontSize:28, marginTop:2, color: sit.sitting ? P.bone : `${P.bone}80` }}>
                {sit.formatted}
              </div>
            </div>
            <div style={{ width:240, fontSize:12, opacity:.85, lineHeight:1.45, ...F, fontStyle:'italic' }}>
              {sit.escalation.label}
            </div>
          </div>
          <div style={{ fontSize:10, letterSpacing:'.25em', opacity:.55, textAlign:'right', textTransform:'uppercase' }}>
            ↓ Continue<br/>The indictment
          </div>
        </div>
      </div>
    </section>
  );
}

function DosPullQuote({ ctx: { P, F, D } }) {
  return (
    <section style={{ background: P.cream, color: P.invert ? P.bone : P.ink, padding:`${D.sec}px 64px`, position:'relative', overflow:'hidden' }}>
      <div style={{ position:'absolute', inset:0, opacity:.06, backgroundImage:'radial-gradient(rgba(0,0,0,.8) 1px, transparent 1px)', backgroundSize:'3px 3px' }}/>
      <div style={{ position:'relative', maxWidth:1100, margin:'0 auto' }}>
        <div style={{ fontSize:11, letterSpacing:'.3em', color: P.red, marginBottom:24, textTransform:'uppercase' }}>
          § The charge, in plain language
        </div>
        <p style={{ ...F, margin:0, fontSize:64, lineHeight:1.05, fontWeight:300, letterSpacing:'-.012em' }}>
          “It is not a chair. It is a <Flinch intensity={1.6}><i style={{ color: P.red, fontWeight:400 }}>punishment</i></Flinch> with four legs,
          finished in galvanized steel, and somehow protected as a <span style={{ borderBottom:`2px solid ${P.red}`, paddingBottom:2 }}>national treasure</span> of France.”
        </p>
        <div style={{ marginTop:28, fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', opacity:.6 }}>
          — The Petitioners. Every lower back. Every cafe. Everywhere.
        </div>
      </div>
    </section>
  );
}

function DosIndictment({ ctx: { P, F, D } }) {
  const items = [
    { n:'01', t:'Heritage',  body:'Designed by Xavier Pauchard in 1934 to be cheap, indestructible, and stackable. He achieved all three with terrifying confidence. Comfort was, by all available evidence, considered out of scope.', kicker:'Three out of four virtues. The fourth: missing.' },
    { n:'02', t:'Materials', body:'Pressed galvanized steel. The exact substance used to roof barns. The exact substance you are now being asked to pay four hundred dollars to sit on while your femurs slowly forget what circulation feels like.', kicker:'$400 for a barn roof you sit on.' },
    { n:'03', t:'Ergonomics',body:'Engineered to a tolerance of zero. Zero curvature. Zero give. Zero apology. The dished steel locates your sit-bones, the rolled lip pinches your hamstrings, and the pressed back panel files a formal complaint with your sacrum — all simultaneously, none with padding to mediate the introduction.', kicker:'A three-front war on the human pelvis.' },
  ];
  return (
    <section style={{ padding:`${D.sec+16}px 64px ${D.sec-16}px`, background: P.ink, color: P.bone }}>
      <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:56, alignItems:'baseline', marginBottom:72 }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', opacity:.5, textTransform:'uppercase' }}>§ 02 — The Indictment</div>
        <h2 style={{ ...F, margin:0, fontSize:76, lineHeight:.95, fontWeight:300, letterSpacing:'-.018em', maxWidth:920 }}>
          A formal accusation, in <i style={{ color: P.red }}>three movements.</i>
        </h2>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:0, borderTop:`1px solid ${P.bone}2e` }}>
        {items.map((it, i) => (
          <article key={it.n} style={{
            padding:'40px 32px 40px 0',
            borderRight: i < items.length-1 ? `1px solid ${P.bone}2e` : 'none',
            paddingLeft: i === 0 ? 0 : 32,
          }}>
            <div style={{ display:'flex', alignItems:'baseline', gap:14, marginBottom:18 }}>
              <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:11, color: P.red }}>{it.n}</span>
              <span style={{ fontSize:10, letterSpacing:'.25em', opacity:.4, textTransform:'uppercase' }}>Charge</span>
            </div>
            <h3 style={{ ...F, margin:'0 0 8px 0', fontSize:52, fontWeight:300, letterSpacing:'-.012em' }}>{it.t}.</h3>
            <div style={{ ...F, fontStyle:'italic', color: P.red, fontSize:15, marginBottom:18, opacity:.95 }}>{it.kicker}</div>
            <p style={{ margin:0, opacity:.78, fontSize:13.5, lineHeight:1.7 }}>{it.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

function DosEvidence({ ctx: { P, F, D } }) {
  return (
    <section style={{ background: P.ink, color: P.bone }}>
      <div style={{ padding:'48px 64px 32px', display:'grid', gridTemplateColumns:'200px 1fr', gap:56 }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', opacity:.5, textTransform:'uppercase' }}>§ 03 — Material Evidence</div>
        <div style={{ ...F, fontSize:30, lineHeight:1.25, fontWeight:300, fontStyle:'italic', maxWidth:760, opacity:.88 }}>
          Hover the marked points. The chair would prefer you didn't.
        </div>
      </div>
      <div style={{ position:'relative', borderTop:`1px solid ${P.bone}2e`, borderBottom:`1px solid ${P.bone}2e`, background:'#000' }}>
        <ChairAnnotations src="images/detail-large.jpg" alt="Tolix Model A seat detail" points={FTC_HOTSPOTS}
          captionStyle={{ background: P.bone, color: P.ink, borderLeft:`3px solid ${P.red}` }}/>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'200px 1fr 1fr', gap:32, padding:'24px 64px 0', fontSize:11 }}>
        <div style={{ opacity:.5, letterSpacing:'.22em', textTransform:'uppercase' }}>Pl. I</div>
        <div style={{ opacity:.7, lineHeight:1.7 }}>
          The contact surface. Cold-pressed steel, dished at center, eight perforations nominally intended for rain.
          Your sit-bones, your hamstrings, and — given enough brunch — your sacrum will all leave their depositions here.
        </div>
        <div style={{ opacity:.7, lineHeight:1.7, fontStyle:'italic', ...F }}>
          “Eight holes. None of them for breathing. All of them for plausible deniability.”
        </div>
      </div>
    </section>
  );
}

function DosComparison({ ctx: { P, F, D } }) {
  const rows = [
    ['Curvature',          'Zero. A flat plane.',                     'Anatomical. Multiple radii.'],
    ['Padding',            '0 mm. By design.',                        '38 mm closed-cell foam.'],
    ['Time-to-numbness',   '≈ 12 minutes',                            '≈ 4 hours'],
    ['Surface temperature','Ambient minus three degrees',             'Body temperature within 90 seconds'],
    ['Acoustic profile',   'Cathedral-grade ring on contact',         'Silent.'],
    ['Cost of one unit',   '$400',                                    '$240–$1,800'],
    ['Apologetic?',        'No.',                                     'Yes.'],
  ];
  return (
    <section style={{ background: P.bone, color: P.invert ? P.bone : P.ink, padding:`${D.sec-8}px 64px` }}>
      <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:56, alignItems:'baseline', marginBottom:48 }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', opacity:.6, textTransform:'uppercase', color: P.red }}>§ 04 — Comparative Anatomy</div>
        <h2 style={{ ...F, margin:0, fontSize:72, lineHeight:.95, fontWeight:300, letterSpacing:'-.018em' }}>
          The Tolix, side-by-side with a chair that <i style={{ color: P.red }}>actually likes you.</i>
        </h2>
      </div>
      <div style={{ border:`1px solid ${P.ink}`, background: P.cream }}>
        <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', borderBottom:`1px solid ${P.ink}` }}>
          <div style={{ padding:'18px 22px', fontFamily:'IBM Plex Mono, monospace', fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.7 }}>Property</div>
          <div style={{ padding:'18px 22px', borderLeft:`1px solid ${P.ink}`, background: P.ink, color: P.bone }}>
            <div style={{ fontSize:10, letterSpacing:'.25em', textTransform:'uppercase', color: P.red, marginBottom:4 }}>The Defendant</div>
            <div style={{ ...F, fontSize:24, fontWeight:400 }}>Tolix Model A</div>
          </div>
          <div style={{ padding:'18px 22px', borderLeft:`1px solid ${P.ink}` }}>
            <div style={{ fontSize:10, letterSpacing:'.25em', textTransform:'uppercase', opacity:.55, marginBottom:4 }}>Any humane chair</div>
            <div style={{ ...F, fontSize:24, fontWeight:400 }}>A reasonable adult</div>
          </div>
        </div>
        {rows.map(([k, a, b], i) => (
          <div key={k} style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr',
                                 borderBottom: i < rows.length-1 ? `1px solid ${P.ink}26` : 'none' }}>
            <div style={{ padding:'18px 22px', fontFamily:'IBM Plex Mono, monospace', fontSize:13, opacity:.7 }}>{k}</div>
            <div style={{ padding:'18px 22px', borderLeft:`1px solid ${P.ink}`,
                           ...F, fontStyle:'italic', fontSize:17, color: P.red, background:`${P.red}0a` }}>{a}</div>
            <div style={{ padding:'18px 22px', borderLeft:`1px solid ${P.ink}`, ...F, fontSize:17 }}>{b}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function DosTimeline({ ctx: { P, F, D } }) {
  const events = [
    { y:'1934', t:'The Crime Begins',     body:'Pauchard files patent. Galvanizes steel. Stacks 25 high. The world claps.' },
    { y:'1939', t:'Wartime Service',      body:'Issued to French troops. Soldiers report it is, somehow, less comfortable than the trench.' },
    { y:'1958', t:'Brussels World Expo',  body:'Tolix wins a gold medal for design. Receives no medal for ergonomics. None offered.' },
    { y:'1985', t:'Cafe Colonization',    body:'Spreads through Parisian terraces. Brunch dwell time begins its decades-long decline.' },
    { y:'2004', t:'Patrimoine Vivant',    body:'Awarded the Living Heritage Company designation by the French state. Spines protest in silence.' },
    { y:'2011', t:'MoMA Acquisition',     body:'Inducted into the permanent collection. Visitors look. None sit.' },
    { y:'2026', t:'This Petition',        body:'Filed in perpetuity. Re-filed every time you sit down.' },
  ];
  return (
    <section style={{ background: P.ink, color: P.bone, padding:`${D.sec-8}px 64px` }}>
      <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:56, marginBottom:56 }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', opacity:.5, textTransform:'uppercase' }}>§ 05 — A Timeline of Insult</div>
        <h2 style={{ ...F, margin:0, fontSize:72, lineHeight:.95, fontWeight:300, letterSpacing:'-.018em' }}>
          Ninety-two years. Same chair. <i style={{ color: P.red }}>Same crime.</i>
        </h2>
      </div>
      <div style={{ position:'relative' }}>
        <div style={{ position:'absolute', top:18, left:0, right:0, height:1, background:`${P.bone}33` }}/>
        <div style={{ display:'grid', gridTemplateColumns:`repeat(${events.length}, 1fr)`, gap:18 }}>
          {events.map((e, i) => (
            <div key={e.y} style={{ position:'relative', paddingTop:48 }}>
              <div style={{ position:'absolute', top:11, left:0, width:14, height:14, borderRadius:'50%',
                             background: i === events.length-1 ? P.red : P.bone,
                             boxShadow: i === events.length-1 ? `0 0 0 4px ${P.red}40` : 'none' }}/>
              <div style={{ ...F, fontSize:36, fontWeight:300, color: P.bone, lineHeight:1, marginBottom:8 }}>{e.y}</div>
              <div style={{ fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', color: P.red, marginBottom:10 }}>{e.t}</div>
              <p style={{ margin:0, fontSize:12.5, lineHeight:1.55, opacity:.7 }}>{e.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function DosSpecs({ ctx: { P, F, D } }) {
  return (
    <section style={{ padding:'80px 0 96px', background: P.ink2, color: P.bone }}>
      <div style={{ padding:'0 64px', display:'grid', gridTemplateColumns:'200px 1fr', gap:56, marginBottom:48 }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', opacity:.5, textTransform:'uppercase' }}>§ 06 — Technical Spec.</div>
        <h2 style={{ ...F, margin:0, fontSize:72, fontWeight:300, lineHeight:.95, letterSpacing:'-.018em' }}>
          An object, <i style={{ color: P.red }}>honestly described.</i>
        </h2>
      </div>
      <div style={{ padding:'0 64px' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:13.5 }}>
          <tbody>
            {FTC_SPECS.map(([k, v], i) => (
              <tr key={k} style={{ borderTop:`1px solid ${P.bone}1f` }}>
                <td style={{ padding:'20px 0', width:'30%', opacity:.55, letterSpacing:'.05em', verticalAlign:'top', fontFamily:'IBM Plex Mono, monospace' }}>
                  <span style={{ fontSize:10, opacity:.5, marginRight:14 }}>{String(i+1).padStart(2,'0')}</span>{k}
                </td>
                <td style={{ padding:'20px 0',
                              fontFamily: i % 3 === 0 ? F.fontFamily : 'IBM Plex Mono, monospace',
                              fontStyle: i === 11 ? 'italic' : 'normal',
                              fontSize: i === 11 ? 26 : 14, color: P.bone }}>
                  {i === 11 ? <span><span style={{ color: P.red }}>0</span> / 10</span> : v}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function DosField({ ctx: { P, F, D } }) {
  return (
    <section style={{ padding:`${D.sec-8}px 64px`, background: P.ink, color: P.bone }}>
      <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:56, marginBottom:56 }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', opacity:.5, textTransform:'uppercase' }}>§ 07 — Field Evidence</div>
        <h2 style={{ ...F, margin:0, fontSize:72, fontWeight:300, lineHeight:.95, letterSpacing:'-.018em' }}>
          Depositions, <i style={{ color: P.red }}>verbatim.</i>
        </h2>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:48 }}>
        <div style={{ position:'relative' }}>
          <img src="images/suffering-large.jpg" alt="" style={{ width:'100%', display:'block', filter:'contrast(1.06) saturate(.88) brightness(.95)' }}/>
          <div style={{ position:'absolute', inset:0, background:`linear-gradient(180deg, transparent 50%, ${P.ink}d9 100%)` }}/>
          <div style={{ position:'absolute', bottom:18, left:20, right:20, fontSize:11, letterSpacing:'.22em', textTransform:'uppercase', opacity:.85 }}>
            Pl. II — Documentary, Paris XIᵉ. Brunch service, 11:47.
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:36 }}>
          {FTC_QUOTES.slice(0,4).map((q,i) => (
            <figure key={i} style={{ margin:0, paddingBottom:28, borderBottom: i<3 ? `1px solid ${P.bone}1f` : 'none' }}>
              <blockquote style={{ ...F, margin:0, fontSize:24, lineHeight:1.32, fontWeight:300, color: P.bone }}>
                <span style={{ color: P.red, fontStyle:'italic' }}>“</span>{q.text}<span style={{ color: P.red, fontStyle:'italic' }}>”</span>
              </blockquote>
              <figcaption style={{ marginTop:14, fontSize:11, letterSpacing:'.18em', opacity:.55, textTransform:'uppercase' }}>
                — {q.who}, {q.where}
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function DosResolution({ ctx: { P, F, wmSize } }) {
  const [count, sign] = usePetitionCount();
  return (
    <section style={{ padding:'140px 64px 80px', borderTop:`2px solid ${P.red}`, position:'relative', background: P.ink, color: P.bone }}>
      <div style={{ display:'grid', gridTemplateColumns:'200px 1fr', gap:56, alignItems:'flex-start' }}>
        <div style={{ fontSize:11, letterSpacing:'.25em', color: P.red, textTransform:'uppercase' }}>§ 08 — Resolution</div>
        <div>
          <h2 style={{ ...F, margin:0, fontSize: wmSize, lineHeight:.86, fontWeight:600, letterSpacing:'-.035em' }}>
            Fuck<br/>this <Flinch intensity={2.4}><i style={{ color: P.red, fontWeight:300 }}>chair.</i></Flinch>
          </h2>
          <p style={{ marginTop:36, maxWidth:720, fontSize:16, lineHeight:1.65, opacity:.85 }}>
            A petition signed, in spirit, by every lower back in every cafe in every city.
            Filed in perpetuity. Re-filed every time you sit down.
            <span style={{ ...F, fontStyle:'italic', color: P.red, display:'block', marginTop:10, fontSize:18 }}>
              The petition does nothing. That, too, is the point.
            </span>
          </p>
          <div style={{ marginTop:56, display:'flex', alignItems:'center', gap:36, flexWrap:'wrap' }}>
            <a href={PETITION_MAILTO} onClick={sign} style={{
              display:'inline-flex', alignItems:'center', gap:14,
              padding:'22px 32px', background: P.red, color: P.bone, textDecoration:'none',
              fontSize:13, letterSpacing:'.2em', textTransform:'uppercase', fontWeight:500,
              transition:'background .15s, transform .15s' }}
              onMouseEnter={e => { e.currentTarget.style.background = P.redHi; e.currentTarget.style.transform='translate(-1px,-1px)'; }}
              onMouseLeave={e => { e.currentTarget.style.background = P.red; e.currentTarget.style.transform='none'; }}>
              Add your name <span>→</span>
            </a>
            <div style={{ display:'flex', flexDirection:'column' }}>
              <span style={{ fontFamily:'JetBrains Mono, monospace', fontSize:38, color: P.bone, lineHeight:1 }}>{count.toLocaleString()}</span>
              <span style={{ fontSize:10, letterSpacing:'.22em', opacity:.55, marginTop:6, textTransform:'uppercase' }}>Signatures · Live count</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function DosFooter({ ctx: { P, F } }) {
  return (
    <footer style={{ padding:'56px 64px 64px', borderTop:`1px solid ${P.bone}1f`, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:32, fontSize:11, lineHeight:1.7, background: P.ink, color: P.bone }}>
      <div>
        <div style={{ ...F, fontSize:20, marginBottom:12 }}>fuckthischair.com</div>
        <div style={{ opacity:.55 }}>A public service announcement.<br/>Filed on behalf of the global lumbar spine.</div>
      </div>
      <div style={{ opacity:.55 }}>
        Not affiliated with, endorsed by, or to be invited anywhere near, Tolix Steel Design.
        “Tolix” and “Model A” are trademarks invoked herein solely for purposes of editorial commentary and criticism.
      </div>
      <div style={{ opacity:.55, textAlign:'right' }}>© MMXXVI · Vol. I</div>
    </footer>
  );
}

window.DirectionDossier = DirectionDossier;