/* ==========================================================================
   The sibling one-pager, in Trimmy's poster system.

   Plimsoll and flare-dart are separate projects with separate repositories,
   and they are deployed separately. They share this stylesheet by copy rather
   than by import, because a subdomain that cannot render without fetching CSS
   from a different subdomain is a dependency nobody asked for.

   One knob per site: --site-accent. Everything else is the poster vocabulary
   already in use on trimmy.xyz, so the three read as a family.
   ========================================================================== */

@import url("./poster-tokens.css");

:root{
  --site-accent:var(--poster-violet);
  --site-accent-2:var(--poster-mint);
  --font-mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{background:var(--poster-ink)}
body{
  margin:0;
  background:var(--poster-ink);
  color:var(--poster-paper);
  font-family:var(--poster-body);
  font-size:1rem;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%}
.container{width:100%;max-width:74rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,4rem)}

.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
.skip{
  position:fixed;top:.75rem;left:.75rem;z-index:200;padding:.75rem 1rem;
  background:var(--poster-amber);color:var(--poster-ink);
  border:3px solid var(--poster-ink);transform:translateY(-180%);
  text-decoration:none;font-weight:700;
}
.skip:focus{transform:translateY(0)}

/* ---- shared poster vocabulary ------------------------------------------- */
.poster-grid-dark{
  background-color:var(--poster-ink);
  background-image:linear-gradient(rgba(246,243,236,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(246,243,236,.045) 1px,transparent 1px);
  background-size:5.5rem 5.5rem;
}
.poster-grid-light{
  background-color:var(--poster-paper);
  color:var(--poster-ink);
  background-image:linear-gradient(rgba(25,25,24,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(25,25,24,.055) 1px,transparent 1px);
  background-size:5.5rem 5.5rem;
}
.kicker{
  margin:0 0 1.25rem;font-size:.78rem;font-weight:700;letter-spacing:.18em;
  line-height:1.2;text-transform:uppercase;color:var(--poster-muted);
}
.poster-block{
  display:inline-block;position:relative;padding:.02em .09em .055em;
  color:var(--poster-ink);background:var(--site-accent);
  border:3px solid var(--poster-ink);line-height:.86;
  box-shadow:.065em .075em 0 var(--poster-ink);
}
.poster-block--amber{background:var(--poster-amber);transform:rotate(-.7deg)}
.poster-block--red{background:var(--poster-red);color:var(--poster-paper);transform:rotate(.5deg)}
.poster-block--mint{background:var(--poster-mint);transform:rotate(.5deg)}
.poster-outline{color:transparent;-webkit-text-stroke:.025em var(--poster-paper);paint-order:stroke fill}

h1,h2,h3.display{
  font-family:var(--poster-display);font-weight:400;letter-spacing:-.01em;
  text-transform:uppercase;text-wrap:balance;margin:0;
}
h1{font-size:clamp(2.5rem,5.05vw,4.5rem);line-height:.9}
h2{font-size:clamp(2.5rem,4.9vw,4.2rem);line-height:.92}

.btn{
  display:inline-flex;min-height:3rem;align-items:center;justify-content:center;
  gap:.7rem;padding:.75rem 1.15rem .8rem;
  border:3px solid var(--poster-ink);border-radius:.45rem;
  color:var(--poster-ink);background:var(--poster-amber);
  font-size:.84rem;font-weight:700;letter-spacing:.055em;line-height:1;
  text-decoration:none;text-transform:uppercase;
  box-shadow:.34rem .38rem 0 var(--poster-ink);cursor:pointer;
  transition:transform 110ms var(--poster-ease),box-shadow 110ms var(--poster-ease);
}
.btn--accent{background:var(--site-accent)}
.btn--ink{background:var(--poster-ink);color:var(--poster-paper);
          border-color:var(--poster-paper);box-shadow:.34rem .38rem 0 var(--site-accent)}
.btn:active{transform:translate(.18rem,.2rem);box-shadow:.14rem .16rem 0 var(--poster-ink)}
.btn:focus-visible{outline:3px solid var(--poster-paper);outline-offset:4px}
.link{
  display:inline-flex;min-height:2.75rem;align-items:center;gap:.5rem;
  color:inherit;font-weight:700;text-underline-offset:.35rem;text-decoration-thickness:2px;
}
.link:focus-visible{outline:3px solid currentColor;outline-offset:4px}

/* ---- header ------------------------------------------------------------- */
.site-header{position:absolute;left:0;right:0;top:0;z-index:100;
             background:transparent;border:0;backdrop-filter:none}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:5.25rem}
.brand{display:inline-flex;align-items:center;gap:.65rem;color:var(--poster-paper);text-decoration:none}
.brand svg{display:block;flex:none}
.brand b{font-size:1.12rem;font-weight:700;letter-spacing:-.02em}
.nav__end{display:flex;align-items:center;gap:1.4rem}
.nav__end a{color:var(--poster-muted);font-size:.8rem;font-weight:600;text-decoration:none}
.nav__end a:hover{color:var(--poster-paper)}
.nav__end a:focus-visible{outline:3px solid var(--poster-amber);outline-offset:4px}
.nav__end .btn{min-height:2.6rem;padding:.5rem .9rem;font-size:.72rem;box-shadow:.22rem .25rem 0 var(--poster-ink)}

/* ---- hero --------------------------------------------------------------- */
.hero{position:relative;padding:9rem 0 5rem;overflow:hidden}
.hero::before{
  content:"";position:absolute;z-index:0;
  left:var(--glow-x,62%);top:var(--glow-y,44%);
  width:44rem;height:24rem;transform:translate(-50%,-50%) rotate(-6deg);
  background:radial-gradient(ellipse,color-mix(in srgb,var(--site-accent) 24%,transparent),transparent 70%);
  filter:blur(1rem);pointer-events:none;
}
.hero__grid{position:relative;z-index:1;display:grid;gap:3rem;align-items:center}
@media (min-width:64rem){.hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}}
.hero p.lede{margin:1.75rem 0 0;max-width:32rem;color:var(--poster-paper-2);font-size:1.15rem;line-height:1.55}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2rem}
.hero__actions .btn{flex:1 1 12rem;max-width:15rem}

/* The hero artefact: a real output from the tool, not a mockup. */
.card{
  min-width:0;padding:1.35rem;background:var(--poster-paper);color:var(--poster-ink);
  border:4px solid var(--poster-ink);border-radius:1.4rem;
  box-shadow:.85rem .95rem 0 var(--site-accent);
}
.card__bar{
  display:flex;align-items:center;gap:.45rem;margin:-1.35rem -1.35rem 1.1rem;
  padding:.8rem 1.1rem;background:var(--poster-paper-deep);
  border-bottom:3px solid var(--poster-ink);border-radius:1rem 1rem 0 0;
}
.card__bar i{width:.66rem;aspect-ratio:1;border:2px solid var(--poster-ink);border-radius:50%;background:var(--poster-red)}
.card__bar i:nth-child(2){background:var(--poster-amber)}
.card__bar i:nth-child(3){background:var(--poster-mint)}
.card__bar p{margin:0 0 0 .35rem;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.card pre{margin:0;font:400 .78rem/1.7 var(--font-mono);white-space:pre;overflow-x:auto}
.card .stamp{
  display:inline-block;margin-bottom:.9rem;padding:.35rem .7rem;
  background:var(--poster-red);color:var(--poster-paper);
  border:2px solid var(--poster-ink);border-radius:.3rem;
  font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.card .stamp--ok{background:var(--poster-mint);color:var(--poster-ink)}
.card dl{display:grid;grid-template-columns:auto 1fr;gap:.4rem .9rem;margin:1rem 0 0;font-size:.84rem}
.card dt{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--poster-ink-muted)}
.card dd{margin:0;font-family:var(--font-mono);overflow-wrap:anywhere}

/* ---- sections ----------------------------------------------------------- */
.slab{position:relative;padding-block:clamp(4.5rem,8vw,7rem);overflow:hidden}
.slab--dark{background:var(--poster-charcoal);color:var(--poster-paper);
            background-image:linear-gradient(rgba(246,243,236,.03) 1px,transparent 1px),
                             linear-gradient(90deg,rgba(246,243,236,.03) 1px,transparent 1px);
            background-size:5.5rem 5.5rem}
.slab--light{border-top:3px solid var(--poster-ink)}
.slab__head{display:grid;gap:1.75rem;margin-bottom:3rem}
@media (min-width:64rem){
  .slab__head{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);align-items:end;gap:3rem}
  .slab__head>p{justify-self:end;max-width:26rem}
}
.slab__head>p{margin:0;font-size:1rem;line-height:1.6}
.slab--light .slab__head>p{color:var(--poster-copy-dark)}
.slab--dark .slab__head>p{color:var(--poster-paper-2)}

.prose{max-width:44rem}
.prose p{margin:0 0 1.1rem}
.slab--light .prose p{color:var(--poster-copy-dark)}
.slab--dark .prose p{color:var(--poster-paper-2)}
.prose strong,.prose b{color:inherit;font-weight:700}
.slab--light .prose strong{color:var(--poster-ink)}
.slab--dark .prose strong{color:var(--poster-paper)}
.prose a{color:inherit;font-weight:600}

/* ---- cards -------------------------------------------------------------- */
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.tile{
  display:flex;min-width:0;flex-direction:column;gap:.6rem;padding:1.35rem;
  background:var(--poster-paper);color:var(--poster-ink);
  border:3px solid var(--poster-ink);border-radius:1rem;
  box-shadow:.45rem .5rem 0 var(--poster-ink);
  transition:transform 140ms var(--poster-ease),box-shadow 140ms var(--poster-ease);
}
.slab--dark .tile{box-shadow:.45rem .5rem 0 var(--site-accent)}
.tile__tag{
  width:max-content;padding:.28rem .58rem;background:var(--poster-ink);color:var(--poster-paper);
  border-radius:.3rem;font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.tile h3{margin:0;font-size:1.1rem;font-weight:700;line-height:1.25;text-wrap:pretty}
.tile p{margin:0;font-size:.88rem;line-height:1.55;color:var(--poster-copy-dark)}
.tile code{font-family:var(--font-mono);font-size:.85em;background:var(--poster-paper-cell);
           border:1px solid var(--poster-paper-deep);border-radius:.25rem;padding:.06em .32em}

/* ---- tables ------------------------------------------------------------- */
.tablewrap{overflow-x:auto;border:3px solid var(--poster-ink);border-radius:1rem;
           box-shadow:.5rem .55rem 0 var(--site-accent);background:var(--poster-paper)}
table{width:100%;border-collapse:collapse;color:var(--poster-ink);font-size:.9rem}
caption{text-align:left;padding:1rem 1.15rem;font-size:.7rem;font-weight:700;
        letter-spacing:.14em;text-transform:uppercase;background:var(--poster-paper-deep);
        border-bottom:3px solid var(--poster-ink)}
th,td{padding:.8rem 1.15rem;text-align:left;border-bottom:2px solid var(--poster-paper-deep);
      vertical-align:top}
th{font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
   color:var(--poster-ink-muted);background:var(--poster-paper-cell)}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;text-align:right;font-family:var(--font-mono)}
tr.is-bad td{background:color-mix(in srgb,var(--poster-red) 16%,transparent)}
tr.is-bad td:first-child{box-shadow:inset .28rem 0 0 var(--poster-red)}
tr.is-ok td{background:color-mix(in srgb,var(--poster-mint) 22%,transparent)}
td a,th a{color:var(--poster-violet-dark);font-family:var(--font-mono);font-size:.9em}

/* ---- code --------------------------------------------------------------- */
pre.code{
  margin:0 0 1.25rem;padding:1.2rem 1.35rem;overflow-x:auto;
  background:var(--poster-ink);color:var(--poster-paper);
  border:3px solid var(--poster-ink);border-radius:.9rem;
  box-shadow:.5rem .55rem 0 var(--site-accent);
  font:400 .84rem/1.7 var(--font-mono);
}
pre.code b{color:var(--poster-amber);font-weight:400}
pre.code i{color:var(--poster-muted);font-style:normal}
pre.code em{color:var(--site-accent-2);font-style:normal}
.slab--dark pre.code{border-color:var(--poster-paper)}

/* ---- figures ------------------------------------------------------------ */
figure.fig{margin:0}
/* The diagrams are portrait. Left to fill a 74rem container they would
   be taller than any screen, so they are capped and centred. */
figure.fig{max-width:38rem;margin-inline:auto}
figure.fig a{display:block;text-decoration:none}
figure.fig figcaption b{display:block;margin-bottom:.2rem}
figure.fig img{
  display:block;width:100%;height:auto;background:var(--poster-paper);
  border:3px solid var(--poster-ink);border-radius:1rem;
  box-shadow:.5rem .55rem 0 var(--site-accent);
}
figure.fig figcaption{margin-top:.9rem;font-size:.82rem;line-height:1.5}
.slab--light figure.fig figcaption{color:var(--poster-ink-muted)}
.slab--dark figure.fig figcaption{color:var(--poster-muted)}

/* ---- callout ------------------------------------------------------------ */
.callout{
  padding:1.2rem 1.35rem;border-radius:.9rem;
  background:var(--poster-paper-cell);color:var(--poster-ink);
  border:3px solid var(--poster-ink);border-left-width:.7rem;
  border-left-color:var(--site-accent);
}
.callout--warn{border-left-color:var(--poster-red)}
.callout p{margin:0 0 .7rem;color:var(--poster-copy-dark)}
.callout p:last-child{margin:0}
.callout strong{color:var(--poster-ink)}

/* ---- the family strip --------------------------------------------------- */
.family{padding-block:clamp(4rem,7vw,6rem);background:var(--poster-ink)}
.family__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.family__card{
  --fam:var(--poster-amber);
  display:flex;min-width:0;flex-direction:column;gap:.5rem;padding:1.3rem;
  background:var(--poster-paper-cell);color:var(--poster-ink);text-decoration:none;
  border:3px solid var(--poster-ink);border-radius:.9rem;box-shadow:.35rem .4rem 0 var(--fam);
  transition:transform 130ms var(--poster-ease),box-shadow 130ms var(--poster-ease);
}
.family__card--plimsoll{--fam:var(--poster-violet)}
.family__card--flaredart{--fam:var(--poster-blue)}
.family__card small{font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--poster-ink-muted)}
.family__card h3{margin:0;font-family:var(--poster-display);font-weight:400;font-size:1.7rem;line-height:1;text-transform:uppercase}
.family__card p{margin:0;font-size:.86rem;line-height:1.5;color:var(--poster-copy-dark)}
.family__card span{margin-top:auto;padding-top:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.family__card span b{display:inline-block;transition:transform 130ms var(--poster-ease)}
.family__card[aria-current="page"]{background:var(--fam);box-shadow:.35rem .4rem 0 var(--poster-paper)}
.family__card:focus-visible{outline:3px solid var(--poster-paper);outline-offset:4px}

/* ---- footer ------------------------------------------------------------- */
.site-footer{background:var(--poster-paper);color:var(--poster-ink);
             padding:3rem 0 2rem;border-top:3px solid var(--poster-ink)}
.site-footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;
                  padding-top:1.5rem;margin-top:2rem;border-top:2px solid rgba(25,25,24,.2);
                  font-size:.78rem;color:var(--poster-ink-muted-2)}
.site-footer a{color:var(--poster-ink)}
.site-footer nav ul{display:flex;flex-wrap:wrap;gap:1.25rem;list-style:none;margin:0;padding:0}
.site-footer nav a{font-size:.85rem;text-decoration:none;font-weight:600}
.site-footer nav a:hover{text-decoration:underline;text-underline-offset:.25rem}

@media (hover:hover){
  .btn:hover{transform:translate(-.1rem,-.1rem);box-shadow:.46rem .5rem 0 var(--poster-ink)}
  .btn--ink:hover{box-shadow:.46rem .5rem 0 var(--site-accent)}
  .tile:hover{transform:translate(-.12rem,-.14rem);box-shadow:.6rem .66rem 0 var(--poster-ink)}
  .slab--dark .tile:hover{box-shadow:.6rem .66rem 0 var(--site-accent)}
  .family__card:hover{transform:translate(-.12rem,-.14rem);box-shadow:.5rem .56rem 0 var(--fam)}
  .family__card:hover span b{transform:translate(.18rem,-.18rem)}
  .link:hover{color:var(--site-accent)}
  .site-footer .link:hover{color:var(--poster-violet-dark)}
}

@media (max-width:47.9375rem){
  .hero{padding-top:7rem}
  .card{padding:1rem}
  .card__bar{margin:-1rem -1rem 1rem}
  .slab__head{margin-bottom:2.2rem}
  .hero__actions .btn{flex:1 1 100%;max-width:none}
  th,td{padding:.65rem .8rem}
}

/* ---- motion ------------------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translate3d(0,1.8rem,0)}to{opacity:1;transform:none}}
.motion-ready [data-reveal]{
  opacity:0;transform:translate3d(0,1.75rem,0);
  transition:opacity 620ms var(--poster-ease) var(--reveal-delay,0ms),
             transform 720ms var(--poster-ease) var(--reveal-delay,0ms);
}
.motion-ready [data-reveal].is-in{opacity:1;transform:none}
.motion-ready [data-reveal] .poster-block{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 700ms var(--poster-ease) calc(var(--reveal-delay,0ms) + 200ms);
}
.motion-ready [data-reveal].is-in .poster-block{clip-path:inset(0 -.2em 0 0)}
.motion-ready .hero h1{animation:rise 780ms var(--poster-ease) 100ms both}
.motion-ready .hero .kicker{animation:rise 600ms var(--poster-ease) both}
.motion-ready .hero .lede,.motion-ready .hero__actions{animation:rise 700ms var(--poster-ease) 300ms both}
.motion-ready .hero .card{animation:rise 860ms var(--poster-ease) 200ms both}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0ms!important;transition-duration:0ms!important;
                       scroll-behavior:auto!important}
}