/* Poster layer: Bauhaus / Swiss print language for the homepage.
   Loaded after bench.css. Warm paper, flat overprinted ink, one large geometric idea. */

/* Paper-light by default (as in the reference posters); the dark Bench theme stays as the night variant. */
:root{
  --b-bg:#e7dcc3;--b-panel:#eee4cd;--b-well:#d9cbab;--b-ink:#1d2620;--b-muted:#5b5a4a;--b-sage:#a99f82;
  --b-signal:#e4532f;--b-on-signal:#1d2620;--b-signal-text:#b23a14;
  --p-saffron:#e8a020;--p-red:#e4532f;--p-lens:#1d2620;
  --p-rule:var(--b-frame) solid var(--b-ink);--p-hair:1px solid var(--b-ink);
}
@media(prefers-color-scheme:dark){:root{
  --b-bg:#101814;--b-panel:#17231d;--b-well:#0b110e;--b-ink:#e7dcc3;--b-muted:#98a597;--b-sage:#4a6055;
  --b-signal:#ee6a3f;--b-on-signal:#101814;--b-signal-text:#ee6a3f;
  --p-saffron:#e8a020;--p-red:#e4532f;--p-lens:#0b110e}}

/* Hero: a ruled 12-column sheet. The artwork takes eight columns; the words sit in the last four. */
.poster .company-hero{padding-top:0;padding-bottom:0;min-height:0;display:block;overflow:visible}
.poster-ruler{display:grid;grid-template-columns:repeat(12,1fr);padding-block:14px 12px;font:400 .6875rem/1 var(--mono);letter-spacing:.12em;color:var(--b-muted)}
.poster-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:1fr auto auto;min-height:clamp(560px,calc(100svh - 190px),860px);border-block:var(--p-hair)}
.poster-art{grid-column:1/5;grid-row:1/4;position:relative;overflow:hidden;min-height:320px}
.poster-art svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.poster-title{grid-column:5/13;grid-row:1;align-self:end;border-left:var(--p-hair);padding:0 0 clamp(20px,3vw,40px) clamp(16px,2vw,28px);min-width:0;container-type:inline-size}
.poster .company-hero h1{margin:0;font-size:min(14.6cqw,13rem);font-weight:700;line-height:.9;letter-spacing:-.058em;-webkit-text-stroke:.04em currentColor}
.poster .company-hero h1 span{display:block;white-space:nowrap}
.poster-lede{grid-column:5/13;grid-row:2;border-left:var(--p-hair);padding:0 clamp(16px,2vw,28px) clamp(20px,2.4vw,32px)}
.poster .company-hero .hero-lede{margin:0;max-width:30ch;font-family:var(--mono);font-size:clamp(.9375rem,1.2vw,1.125rem);line-height:1.5;color:var(--b-ink)}
.poster-cta{grid-column:5/13;grid-row:3;border-left:var(--p-hair);border-top:var(--p-hair);padding:0}
.poster .poster-cta .launch-button{width:100%;height:100%;min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,2vw,28px);border:0;box-shadow:none;background:var(--b-ink);color:var(--b-bg);white-space:nowrap}
.poster .poster-cta .launch-button:hover{background:var(--b-signal);color:var(--b-on-signal)}
.poster .poster-cta .launch-button:active{transform:none}

/* Artwork colours. The two discs overprint; the lens is the shared ink. */
.pa-saffron{fill:var(--p-saffron)}
.pa-red{fill:var(--p-red)}
.pa-lens{fill:var(--p-lens)}
.pa-lines circle{fill:none;stroke:var(--b-ink);stroke-width:2.6}
.pa-dot{fill:var(--b-ink)}
.pa-hair{stroke:var(--b-ink);stroke-width:1.5}

/* Sections hang from a left label column on the same 12-column grid. */
.poster .company-section{display:grid;grid-template-columns:repeat(12,1fr);column-gap:0;border-top:var(--p-rule)}
.poster .company-section>.company-eyebrow{grid-column:1/4;grid-row:1/span 4;align-self:start;display:flex;flex-direction:column;gap:12px;border:0;padding:0;margin:0}
.poster .company-section>:not(.company-eyebrow){grid-column:4/13}
.poster .company-eyebrow .eyebrow-no{font:700 clamp(3rem,6vw,5.5rem)/.85 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;color:var(--b-signal-text)}
.poster .company-eyebrow>span:last-child:not(:first-child){display:block}
.poster .section-heading,.poster .company-section>h2{margin-bottom:clamp(32px,4vw,64px)}
.poster .company-section h2{font-size:clamp(2rem,5vw,4.5rem);line-height:.98;letter-spacing:-.05em}

/* Principles: ruled cells with oversized numerals. */
.poster .principles{gap:0;margin-top:0;border-block:var(--p-rule)}
.poster .principles article{border-top:0;padding:clamp(20px,2.4vw,32px);border-left:var(--p-rule)}
.poster .principles article:first-child{border-left:0;padding-left:0}
.poster .principles article>span{display:block;font:700 clamp(3rem,5vw,4.5rem)/.85 'Space Grotesk',Arial,sans-serif;letter-spacing:-.06em;margin-bottom:clamp(24px,4vw,56px)}
.poster .principles h3{margin:0 0 12px}

/* Worn ink on the headlines and the printed discs (filter defined inline in index.html). */
.poster .company-hero h1,.poster .company-section h2,.poster .pa-discs{filter:url(#worn-ink)}

@media(max-width:900px){
  .poster .company-section{display:block}
  .poster .company-section>.company-eyebrow{flex-direction:row;align-items:baseline;gap:16px;margin-bottom:32px}
}
@media(max-width:800px){
  .poster-ruler{display:none}
  .poster-grid{display:flex;flex-direction:column;min-height:0;border-top:0}
  .poster-art{aspect-ratio:.5;min-height:0;border-bottom:var(--p-rule)}
  .poster-title,.poster-lede,.poster-cta{border-left:0;padding-left:0;padding-right:0;width:100%}
  .poster-title{padding-top:28px;padding-bottom:20px}
  .poster-cta{min-height:64px}
  .poster .principles{grid-template-columns:1fr}
  .poster .principles article{border-left:0;border-top:var(--p-rule);padding-left:0}
  .poster .principles article:first-child{border-top:0}
}

/* Light supporting type in the hero. */
.poster .poster-ruler,.poster .hero-lede,.poster .poster-cta .launch-button{font-weight:300}
.poster .hero-lede{color:var(--b-muted)}

/* ---------- Page rhythm: colour-blocked sections, alternating sides, shapes that straddle the joins ---------- */
:root{--p-night:#1d2620}
@media(prefers-color-scheme:dark){:root{--p-night:#0b110e}}

.poster .company-section,.poster .company-footer{position:relative}
.poster #approach,.poster #about{border-top:0}

/* 02 Approach: saffron block, label mirrored to the right. */
.poster #approach{background:var(--p-saffron);
  --b-bg:var(--p-saffron);--b-ink:#1d2620;--b-muted:#4a4220;--b-signal:#1d2620;--b-signal-text:#8f2a10;--b-on-signal:#e8a020;color:var(--b-ink)}
.poster #approach>.company-eyebrow{grid-column:10/13;grid-row:1;align-items:flex-end;text-align:right}
.poster #approach>:not(.company-eyebrow){grid-column:1/10}
.poster #approach .principles article{border-color:#1d2620}

/* 03 About: night block, paper type. */
.poster #about{background:var(--p-night);
  --b-bg:var(--p-night);--b-ink:#e7dcc3;--b-muted:#b8b29a;--b-panel:#26332b;--b-well:#17201b;--b-signal:var(--p-saffron);--b-signal-text:var(--p-saffron);--b-on-signal:#1d2620;color:var(--b-ink)}
.poster #about p{color:var(--b-muted)}
.poster #about .founder-signature{color:var(--b-ink)}

/* Footer: tomato block. */
.poster .company-footer{background:var(--p-red);border-top:0;--b-ink:#1d2620;--b-muted:#3b2a20;color:#1d2620}
.poster .company-footer small,.poster .company-footer a,.poster .company-footer span{color:#1d2620}

/* Shapes that straddle each join and overprint both blocks. */
.poster #approach::before,.poster #about::before{content:"";position:absolute;z-index:2;pointer-events:none}
.poster #approach::before{top:0;left:58%;width:clamp(110px,14vw,210px);aspect-ratio:1;border-radius:50%;background:var(--p-red);mix-blend-mode:multiply;translate:0 -50%}
.poster #about::before{top:0;right:clamp(24px,5vw,88px);width:clamp(150px,19vw,280px);aspect-ratio:2/1;border-radius:999px 999px 0 0;background:repeating-radial-gradient(circle at 50% 100%,#1d2620 0 2.5px,transparent 2.5px 10px);translate:0 -100%}

@supports(animation-timeline:view()){
  @keyframes p-drift-a{from{translate:0 -85%}to{translate:0 -30%}}
  @keyframes p-drift-b{from{translate:0 -60%}to{translate:0 -100%}}
  .poster #approach::before{animation:p-drift-a linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
  .poster #about::before{animation:p-drift-b linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
}

@media(max-width:900px){
  .poster #approach>.company-eyebrow{text-align:left;align-items:baseline}
  .poster #approach>:not(.company-eyebrow){grid-column:auto}
}
@media(max-width:600px){.poster #approach::before{width:84px;left:auto;right:24px}.poster #about::before{width:130px}}