/* ============================================================
   all in haiku
   ------------------------------------------------------------
   The family palette, inverted. allinword.com and allinprose.com
   run dark: navy ground, cream ink, crimson accent. This site
   reads light, so the same four colors are flipped — cream is
   the ground, navy is the type, crimson stays crimson.

   Header and footer are real dark bands in the family's exact
   --bg, so arriving and leaving feels like the siblings.

   No webfonts. System stacks, same as the rest of the family.
   ============================================================ */

:root{
  /* --- family tokens, unchanged --- */
  /* The haiku site's own red. The family crimson (#c12846) still drives
     links and accents on the reading surface; this one is the brand mark. */
  --haiku-red:#ed6a5a;
  --family-bg:#0a0f20;
  --family-bg-2:#0e1428;
  --family-line:#2a3352;
  --family-ink:#f2efe8;
  --family-dim:#9aa3ba;
  --family-faint:#69728c;
  --accent:#c12846;
  --accent-bright:#e85574;
  --accent-dim:#7a2740;

  /* --- inverted for the reading surface --- */
  --paper:#f2efe8;
  --paper-2:#e9e5db;
  --card:#eeeae0;
  --ink:#0a0f20;
  --dim:#575e73;
  --faint:#8b91a3;
  --rule:#cdc8bb;
  --rule-soft:#dedad0;
  --wash:rgba(193,40,70,.05);

  --serif:"Iowan Old Style","Charter","Palatino Linotype",Palatino,"URW Palladio L",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --num:"Arial Narrow","Roboto Condensed","Helvetica Neue Condensed","Helvetica Neue",system-ui,sans-serif;

  --gutter:clamp(20px,5vw,64px);
  --measure:40rem;
  --frame:84rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto}

a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(193,40,70,.28)}
a:hover{border-bottom-color:currentColor}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px
}

/* ============================================================
   MASTHEAD — one compact line
   ============================================================ */

.band{background:var(--family-bg);color:var(--family-ink)}

/* The footer inverts: red ground, navy type. Cream on this red measures
   about 2.7:1, which is under AA even for display sizes, so the whole
   band swaps to navy rather than carrying the header's palette across. */
.band--foot{
  background:var(--haiku-red);
  color:var(--family-bg);
  --family-ink:#0a0f20;
  /* Alphas chosen for contrast, not feel: 58% measured 2.9:1 on this
     ground, which fails AA for the small uppercase labels it carries.
     82% and 78% clear 4.5:1. */
  --family-dim:rgba(10,15,32,.82);
  --family-faint:rgba(10,15,32,.78);
  --family-line:rgba(10,15,32,.22);
  --accent-bright:#0a0f20;
}
.band-inner{max-width:var(--frame);margin:0 auto;padding:1.05rem var(--gutter)}

.masthead{display:flex;align-items:baseline;gap:1.75rem;flex-wrap:wrap}
.wordmark{
  margin:0;font-size:1.5rem;font-weight:400;line-height:1;letter-spacing:-.01em;
  color:var(--family-ink);white-space:nowrap;
}
.wordmark a{color:inherit;border:0}
.wordmark em{font-style:italic;color:var(--haiku-red)}
.masthead .lede{
  margin:0;color:var(--family-faint);font-size:.9rem;line-height:1.35;
  flex:1 1 auto;white-space:nowrap;
}
.masthead nav{
  margin:0;display:flex;gap:1.3rem;flex-wrap:wrap;
  font-family:var(--sans);font-size:.66rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
}
.masthead nav a{border:0;color:var(--family-dim)}
.masthead nav a:hover,.masthead nav a[aria-current]{color:var(--accent-bright)}
@media (max-width:58rem){
  .masthead .lede{display:none}
}
@media (max-width:44rem){
  .band-inner{padding:.85rem var(--gutter)}
}

/* ============================================================
   SHELL
   ------------------------------------------------------------
   Wide screens get two columns: the haiku stays pinned on the
   left while you read down the conversation on the right. The
   thing being discussed never scrolls away. Below 62rem it
   stacks, haiku first, exactly as it does now on a phone.
   ============================================================ */

.shell{
  max-width:var(--frame);margin:0 auto;
  padding:clamp(1.75rem,4vw,3rem) var(--gutter) 3rem;
  display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;
}
.col-main{min-width:0}

/* ============================================================
   TYPE UTILITIES
   ============================================================ */

.eyebrow{
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:0 0 1rem;
}
.rule-head{display:flex;align-items:center;gap:.85rem}
.rule-head::after{content:"";flex:1;height:1px;background:var(--rule)}
.muted{color:var(--dim)}
.small{font-size:.9rem}

/* ============================================================
   A HAIKU
   ============================================================ */

.haiku{margin:0}
.haiku p{margin:0;font-size:1.22rem;line-height:1.52}

/* ------------------------------------------------------------
   The day's haiku, full width across the top. The fitter sets a
   font-size on this element and the lines inherit it — which is
   why this selector has to outrank `.haiku p` directly above.
   It lost that fight once already and the hero stayed tiny.
   ------------------------------------------------------------ */
.today{margin-bottom:2.75rem}
.haiku.haiku--hero{padding:.75rem 0 .4rem;--fit-max:132;--fit-min:22;max-width:100%;overflow:hidden}
.haiku.haiku--hero p{
  margin:0;font-size:inherit;line-height:1.16;
  letter-spacing:-.028em;white-space:nowrap;
  max-width:100%;
}
/* No wrap at any width. A phone at full bleed needs roughly 15–25px to
   hold a seven-syllable line, which is perfectly readable — the earlier
   exception here was borrowed from the three-column slot case, where
   the arithmetic is completely different. */
@media (max-width:44rem){
  .haiku.haiku--hero{--fit-min:14}
}
@media (max-width:34rem){
  .haiku.haiku--hero{--fit-min:13;letter-spacing:-.02em}
}
.haiku--lead p{font-size:clamp(1.6rem,5vw,2.05rem);line-height:1.4;letter-spacing:-.005em}
.stamp-line{
  font-family:var(--sans);font-size:.68rem;font-weight:500;letter-spacing:.1em;
  color:var(--dim);margin:1rem 0 0;text-transform:uppercase;
}

.entry{padding:1.9rem 0;border-bottom:1px solid var(--rule)}
.entry:first-of-type{border-top:1px solid var(--rule)}
.entry a.perma{border:0;display:block;color:inherit}
.entry a.perma:hover .haiku p{color:var(--accent)}

/* ============================================================
   COMPOSER
   ============================================================ */

.composer{margin:1.25rem 0 0}
.composer .line{
  display:grid;grid-template-columns:2.9rem 1fr;column-gap:.8rem;align-items:start;
  border-bottom:1px solid var(--rule-soft);
}
.composer .line:first-child{border-top:1px solid var(--rule-soft)}
.composer .gauge{
  font-family:var(--num);font-size:.95rem;font-weight:700;letter-spacing:.02em;
  color:var(--faint);text-align:right;padding-top:.78rem;white-space:nowrap;
  transition:color .18s ease;font-variant-numeric:tabular-nums;
}
.composer .gauge .target{color:var(--rule)}
.composer .line[data-state="ok"] .gauge{color:var(--accent)}
.composer .line[data-state="over"] .gauge{color:var(--accent-dim)}
.composer .line:focus-within{background:var(--wash)}
.composer input[type=text]{
  width:100%;border:0;background:transparent;padding:.48rem 0 .3rem;
  font-family:var(--serif);font-size:1.15rem;line-height:1.45;color:var(--ink);
}
.composer input[type=text]::placeholder{color:var(--faint);opacity:.7}
.composer input[type=text]:focus{outline:none}

.breakdown{
  font-family:var(--sans);font-size:.64rem;color:var(--dim);
  padding-bottom:.34rem;display:flex;flex-wrap:wrap;gap:.5rem;
}
.breakdown b{font-weight:400;color:var(--ink)}
.tk sup{font-family:var(--num);color:var(--faint);font-size:.9em;margin-left:.12em}
.tk.amb sup{color:var(--accent);font-weight:700}
.tk.oov{color:var(--accent-dim)}
.tk.oov b{color:var(--accent-dim);border-bottom:1px dotted currentColor}

.byline{margin-top:1rem;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.byline label{
  font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}
.byline input{
  border:0;border-bottom:1px solid var(--rule);background:transparent;
  font-family:var(--serif);font-size:1rem;color:var(--ink);padding:.2rem 0;width:12rem;
}
.byline input:focus{outline:none;border-bottom-color:var(--accent)}

/* --- the verdict, spoken in haiku --- */
.verdict{
  margin:1.15rem 0 1rem;display:grid;grid-template-columns:auto 1fr;
  gap:.9rem;align-items:start;min-height:3.4rem;
}
.stamp{
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:.3rem .55rem;border:1px solid var(--rule);
  color:var(--dim);white-space:nowrap;
}
/* Before anything is typed the stamp has no verdict to give. Without
   this it collapses into a small empty bordered box under the handle,
   which reads as a broken input. */
.stamp:empty{display:none}
.stamp[data-v="pass"]{border-color:var(--accent);color:var(--accent)}
.stamp[data-v="fail"]{border-color:var(--accent-dim);color:var(--accent-dim)}
.note{
  margin:0;font-family:var(--serif);font-style:italic;font-size:.98rem;
  line-height:1.45;color:var(--dim);
}
.note p{display:block;margin:0}

.actions{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:.72rem 1.3rem;border:1px solid var(--accent);
  background:var(--accent);color:var(--paper);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.btn:hover:not(:disabled){background:transparent;color:var(--accent)}
.btn:disabled{border-color:var(--rule);background:transparent;color:var(--faint);cursor:not-allowed}
.btn--quiet{background:transparent;color:var(--dim);border-color:var(--rule)}
.btn--quiet:hover:not(:disabled){background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--link{
  background:none;border:0;border-bottom:1px solid var(--rule);padding:.32rem 0;
  color:var(--dim);font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
}
.btn--link:hover{color:var(--accent);border-color:var(--accent)}
[hidden]{display:none !important}

/* ============================================================
   THREADS
   ============================================================ */

.thread{margin-top:2.75rem}
.comment{padding:1.15rem 0;border-top:1px solid var(--rule-soft)}
.comment .haiku p{font-size:1.08rem;line-height:1.55}
.comment .meta{
  font-family:var(--sans);font-size:.65rem;letter-spacing:.08em;color:var(--dim);
  margin:.55rem 0 0;display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;
}
.comment .meta .who{color:var(--accent);font-weight:600;letter-spacing:.02em}
.comment[data-depth]:not([data-depth="0"]){border-left:2px solid var(--rule-soft);padding-left:1rem}
.comment[data-depth="1"]{margin-left:1.2rem}
.comment[data-depth="2"]{margin-left:2.4rem}
.comment[data-depth="3"]{margin-left:3.4rem}
.comment[data-depth="4"]{margin-left:4.2rem}
.comment[data-depth="5"]{margin-left:4.8rem}
@media (max-width:34rem){
  .comment[data-depth="1"]{margin-left:.6rem}
  .comment[data-depth="2"]{margin-left:1.2rem}
  .comment[data-depth="3"],.comment[data-depth="4"],.comment[data-depth="5"]{margin-left:1.7rem}
}
.closed-note{
  font-family:var(--serif);font-style:italic;font-size:.98rem;color:var(--dim);
  border-left:2px solid var(--rule);padding:.2rem 0 .2rem 1rem;margin-top:1.4rem;
}
.closed-note p{display:block;margin:0}

/* ============================================================
   FACEBOOK — in the footer now, full width
   ============================================================ */

.fb-block{padding-top:1.5rem;margin-top:1.75rem;border-top:1px solid var(--family-line)}
.fb-block .family-label{display:block;margin-bottom:.35rem}
.fb-note{color:var(--family-faint);font-size:.9rem;margin:0 0 1rem;max-width:44ch}

.fb-fallback{
  border:1px solid var(--family-line);padding:1rem;color:var(--family-dim);
  font-size:.9rem;line-height:1.5;max-width:500px;
}

/* ============================================================
   FOOTER — dark band, family nav
   ============================================================ */

footer .band-inner{padding-top:2.25rem;padding-bottom:2.5rem}
.footmark{font-size:1.15rem;color:rgba(10,15,32,.72);margin:0 0 .3rem}
.footmark em{font-style:italic;color:#0a0f20}
.foot-tag{
  font-family:var(--sans);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--family-faint);margin:0 0 1.6rem;
}
/* "Part of" takes its own line via flex-basis, so the three siblings get
   the column's full width instead of the label eating a third of it and
   pushing "all in writing" onto a line by itself. Keeping all three
   matters — they are the family's cross-links, not decoration. */
.family{
  display:flex;gap:1.25rem;flex-wrap:wrap;align-items:baseline;
  justify-content:center;
  padding-top:1.25rem;border-top:1px solid var(--family-line);
}
.family .family-label{flex:0 0 100%;margin-bottom:.15rem}
.family-label{
  font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--family-faint);
}
.family a{color:var(--family-dim);border:0;font-size:1rem}
.family a:hover{color:var(--accent-bright)}

/* ============================================================
   WRITER
   ============================================================ */

.panel{border:1px solid var(--rule);padding:1.5rem;margin-bottom:1.5rem;background:var(--card)}
.panel h2{
  font-family:var(--sans);font-size:.66rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dim);margin:0 0 1.1rem;
}
.field{margin-bottom:1rem}
.field label{
  display:block;font-family:var(--sans);font-size:.63rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.35rem;
}
.field input[type=text],.field input[type=password],.field textarea,.field select{
  width:100%;border:1px solid var(--rule);background:var(--paper);padding:.55rem .7rem;
  font-family:var(--serif);font-size:1rem;color:var(--ink);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent)}
.field .hint{font-size:.82rem;color:var(--dim);margin:.3rem 0 0}
.row{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end}
.row>*{flex:1;min-width:10rem}
.toggle{
  display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.66rem;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);cursor:pointer;
}
.list-item{
  display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;
  padding:.9rem 0;border-top:1px solid var(--rule);flex-wrap:wrap;
}
.list-item .haiku p{font-size:1.02rem}
.pill{
  font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--rule);padding:.15rem .4rem;color:var(--dim);
}
.pill[data-s="published"]{border-color:var(--accent);color:var(--accent)}
.pill[data-s="draft"]{border-color:var(--faint);color:var(--faint)}

/* ============================================================
   MISC
   ============================================================ */

.loading{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);padding:1.5rem 0;
}
.toast{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);
  background:var(--family-bg);color:var(--family-ink);font-family:var(--serif);
  font-style:italic;font-size:.95rem;line-height:1.45;padding:.9rem 1.2rem;
  z-index:50;max-width:min(90vw,24rem);border-left:3px solid var(--accent);
}
.toast p{display:block;margin:0}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ============================================================
   SLOTS
   ------------------------------------------------------------
   Places sit side by side and share the width. On a phone three
   columns would leave ~105px each, which forces a 7px font — so
   below 52rem they become a swipe-snap track instead: still side
   by side, still three lines, one at a time and legible.
   ============================================================ */

.slots{
  display:grid;gap:1rem;margin-top:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(0,1fr));
}
.slots--n1{grid-template-columns:minmax(0,1fr)}
.slots--n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.slots--n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.slots--n4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (max-width:52rem){
  .slots{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:.85rem;padding-bottom:.85rem;margin-left:calc(var(--gutter) * -1);
    margin-right:calc(var(--gutter) * -1);
    padding-left:var(--gutter);padding-right:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .slots>.slot{flex:0 0 min(84vw,22rem);scroll-snap-align:center}
}

.slot{
  border:1px solid var(--rule);background:var(--card);
  padding:1rem 1.1rem 1.1rem;min-width:0;display:flex;flex-direction:column;
}
.slot--open{background:transparent;border-style:dashed;border-color:var(--accent);justify-content:center}

.slot-head{
  display:flex;align-items:baseline;justify-content:flex-end;gap:.75rem;
  margin-bottom:.6rem;flex-wrap:wrap;min-height:1rem;
}
.slot-no{
  font-family:var(--num);font-size:.72rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);
}
.slot--open .slot-no{color:var(--accent)}
.slot-actions{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.slot-actions .btn--link{font-size:.6rem;letter-spacing:.1em}

/* The fitter reads these, then shrinks from max toward min until
   the longest line stops wrapping. */
.slot .haiku{--fit-max:19;--fit-min:11}
.slot .haiku p{line-height:1.5;white-space:nowrap}
.slot .replies{margin-top:.9rem;padding-top:.2rem;border-top:1px solid var(--rule-soft)}
.slot .replies .haiku{--fit-max:15;--fit-min:10}
.slot .comment{padding:.75rem 0;border-top:0}
.slot .comment[data-depth="1"]{
  margin-left:0;border-left:2px solid var(--rule-soft);padding-left:.8rem;
}
.slot .meta{font-size:.6rem;gap:.6rem}

/* ============================================================
   FLAGGED — blurred, never deleted
   ============================================================ */

.comment--flagged .haiku{
  filter:blur(6px);user-select:none;cursor:pointer;
  transition:filter .18s ease;
}
.comment--flagged.is-shown .haiku{filter:none;user-select:auto;cursor:auto}
.flag-note{
  font-family:var(--sans);font-size:.63rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-dim);margin:.5rem 0 0;
  display:flex;gap:.6rem;align-items:center;
}
.flag-note button{
  background:none;border:0;border-bottom:1px solid currentColor;padding:0;
  color:inherit;font:inherit;cursor:pointer;
}

/* ============================================================
   SHARE
   ============================================================ */

.share-menu{
  display:flex;gap:.9rem;flex-wrap:wrap;padding:.6rem 0 .1rem;
  font-family:var(--sans);font-size:.63rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
}
.share-menu a,.share-menu button{
  color:var(--dim);border:0;border-bottom:1px solid var(--rule);
  background:none;padding:.15rem 0;cursor:pointer;font:inherit;
}
.share-menu a:hover,.share-menu button:hover{color:var(--accent);border-color:var(--accent)}

/* ============================================================
   REPORT
   ============================================================ */

.report-form{
  display:flex;gap:.7rem;align-items:center;flex-wrap:wrap;
  padding:.7rem .85rem;margin-top:.6rem;
  border-left:2px solid var(--accent-dim);background:var(--wash);
  font-family:var(--sans);font-size:.66rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
}
.report-form select{
  font-family:var(--serif);font-size:.92rem;font-weight:400;letter-spacing:0;
  text-transform:none;padding:.3rem .4rem;border:1px solid var(--rule);
  background:var(--paper);color:var(--ink);
}
.report-form select:focus{outline:none;border-color:var(--accent)}
.report-form .send{color:var(--accent);border-color:var(--accent)}
.report-row{
  font-family:var(--sans);font-size:.63rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-dim);
}

/* ============================================================
   WRITER — CMS chrome
   ============================================================ */

.panel--alert{border-color:var(--accent);border-left-width:3px}
.panel--alert h3{
  font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .8rem;
}
.panel--settings{padding:0}
.panel--settings summary{
  cursor:pointer;padding:1.25rem 1.5rem;list-style:none;
  display:flex;align-items:center;gap:.6rem;
}
.panel--settings summary::-webkit-details-marker{display:none}
.panel--settings summary::before{
  content:"›";font-family:var(--num);font-size:1.1rem;color:var(--dim);
  transition:transform .15s ease;display:inline-block;
}
.panel--settings[open] summary::before{transform:rotate(90deg)}
.settings-block{padding:1.5rem;border-top:1px solid var(--rule)}
.settings-block h3{
  font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0 0 .9rem;
}
.settings-block .small.muted{margin:-.4rem 0 1rem}
#picker{
  width:100%;border:1px solid var(--rule);background:var(--paper);padding:.55rem .7rem;
  font-family:var(--serif);font-size:1rem;color:var(--ink);
}
#picker:focus{outline:none;border-color:var(--accent)}
#slot-list .list-item .haiku p{font-size:1rem;line-height:1.5}

/* ============================================================
   ARCHIVE — grid, newest top-left, reading order
   ============================================================ */

.roll{
  display:grid;gap:1px;background:var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
  border:1px solid var(--rule);
}
.card{background:var(--paper);min-width:0;position:relative}
.card--star::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--accent);
}
.card .perma{
  display:block;border:0;padding:1.15rem 1.2rem 1rem;height:100%;
  color:inherit;transition:background .15s ease;
}
.card .perma:hover .card-haiku p{color:var(--accent)}
.card .perma:hover{background:var(--card)}
.card-haiku p{
  margin:0;line-height:1.5;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.card .stamp-line{margin:.7rem 0 0;font-size:.62rem}

/* On a phone the grid becomes a swipe track, same as the slots. */
@media (max-width:44rem){
  .roll{
    display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    border:0;background:none;gap:1px;
    margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);
    padding:0 var(--gutter) .85rem;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  }
  .roll>.card{
    flex:0 0 min(72vw,17rem);scroll-snap-align:start;
    border:1px solid var(--rule);
  }
}

/* ============================================================
   FOOTER
   ------------------------------------------------------------
   Facebook's page plugin is capped at 500px by Facebook, not by
   us — data-width above 500 is ignored. So the footer is built
   around it: the iframe holds one column and real content fills
   the rest rather than leaving dead space beside it.
   ============================================================ */

.foot-grid{
  display:grid;gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:56rem){
  .foot-grid{grid-template-columns:minmax(0,1fr) 500px}
}
.foot-col{min-width:0}
.foot-col--fb{max-width:500px}

/* Footer copy is haiku, so it is set as verse — three lines,
   never wrapped into prose. */
.foot-haiku{margin:1rem 0 1.6rem}
.foot-haiku p{margin:0;
  display:block;font-family:var(--serif);font-style:italic;
  font-size:1rem;line-height:1.62;color:var(--family-dim);
}
.foot-col--fb .foot-haiku{margin:.7rem 0 1.1rem}
.foot-col--fb .foot-haiku p{margin:0;font-size:.94rem}

.fb-block{border:0;padding:0;margin:0}
/* Leave this alone. The plugin measures its own container, and anything
   that centres it or its ancestors makes it mis-render — two separate
   rounds of cropping came from exactly that. Full width of its column,
   capped at Facebook's own 500px ceiling, nothing else. */
.fb-page{width:100%;max-width:500px}
.fb-page span,.fb-page iframe{width:100% !important}

/* ============================================================
   GRID HEADER
   ============================================================ */

.grid-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;margin-bottom:.5rem;
}
/* This sat in the same font, weight and colour as the .eyebrow heading
   opposite it, so the two read as a matched pair and neither looked
   clickable. It now takes the site's own link colour and rule, plus an
   arrow — three signals instead of none. */
.grid-all{
  font-family:var(--sans);font-size:.62rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;
  color:var(--accent);border-bottom:1px solid rgba(193,40,70,.35);
}
.grid-all span{letter-spacing:0;margin-left:.15rem}
.grid-all:hover{border-bottom-color:currentColor}
.rule-under{border-top:1px solid var(--rule);margin-bottom:1.5rem}

/* A starred haiku reads as featured without a label: tinted ground,
   a crimson edge, and slightly stronger type. No words — the page
   never explains itself. */
.card--star{background:var(--card)}
.card--star::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--accent);z-index:1;
}
.card--star .card-haiku p{color:var(--ink);font-style:italic}
.card--star .stamp-line{color:var(--accent-dim)}

/* ============================================================
   REPLY OVERFLOW
   ------------------------------------------------------------
   A slot shows a few answers and then stops. Columns in a grid
   share a row height, so one runaway thread would stretch every
   other column beside it — and the page with them.
   ============================================================ */

.slots{align-items:start}

.more-answers{
  display:inline-block;margin-top:.85rem;padding:0;
  background:none;border:0;border-bottom:1px solid var(--rule);
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  cursor:pointer;
}
.more-answers:hover{color:var(--accent);border-bottom-color:var(--accent)}


/* A full-haiku address is long — let the preview wrap instead of
   blowing out the field's row. */
.hint{overflow-wrap:anywhere}
#slug-preview{color:var(--dim)}

/* ============================================================
   HERO CYCLER
   ------------------------------------------------------------
   Deliberately quiet — the haiku is the page, and the arrows
   are a way out of it, not a feature competing with it. They
   sit on the label row so they never eat into the hero's width.
   ============================================================ */

.today-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;margin-bottom:.6rem;
}
.cyc{display:flex;gap:.15rem;flex:0 0 auto}
.cyc-btn{
  background:none;border:0;border-bottom:0;cursor:pointer;
  padding:.15rem .55rem;line-height:1;text-decoration:none;
  font-family:var(--num);font-size:1.05rem;
  color:var(--faint);transition:color .15s ease;
}
.cyc-btn:hover:not(:disabled):not([aria-disabled]){color:var(--accent)}
.cyc-btn:disabled,
.cyc-btn[aria-disabled]{opacity:.25;cursor:default;pointer-events:none}

.perma-link{
  border:0;color:var(--faint);
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
}
.perma-link:hover{color:var(--accent)}

/* Give the swipe zone room to be grabbed without snagging a link,
   and stop the browser claiming horizontal drags for back/forward. */
@media (max-width:44rem){
  .today{touch-action:pan-y}
  .cyc-btn{padding:.35rem .85rem;font-size:1.2rem}
}

/* ============================================================
   WRITER — the haiku picker
   ------------------------------------------------------------
   A filterable list rather than a <select>, which stops being
   usable somewhere around fifty entries.
   ============================================================ */

.pick-list{
  margin-top:.75rem;max-height:19rem;overflow-y:auto;
  border:1px solid var(--rule);
}
.pick-row{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--paper);border:0;border-bottom:1px solid var(--rule-soft);
  padding:.6rem .8rem;font:inherit;color:var(--ink);
}
.pick-row:last-child{border-bottom:0}
.pick-row:hover{background:var(--card)}
.pick-row.is-current{background:var(--card);box-shadow:inset 3px 0 0 var(--accent)}
.pick-haiku{display:block}
.pick-haiku span{
  display:block;font-family:var(--serif);font-size:.95rem;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pick-row{padding:.75rem .85rem}
.pick-list{max-height:26rem}
.pick-meta{
  display:block;margin-top:.15rem;
  font-family:var(--num);font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);
}
.pick-row.is-current .pick-meta{color:var(--accent-dim)}
#pick-filter{
  width:100%;border:1px solid var(--rule);background:var(--paper);
  padding:.55rem .7rem;font-family:var(--serif);font-size:1rem;color:var(--ink);
}
#pick-filter:focus{outline:none;border-color:var(--accent)}

/* ============================================================
   FOOTER LOGO
   ------------------------------------------------------------
   Sits under the family links, filling the left column against
   the Facebook panel. Drops to a modest size on narrow screens
   so it never pushes the iframe off the bottom of the world.
   ============================================================ */

.foot-logo{
  display:block;width:100%;height:auto;
  margin:2rem 0 0;
}
@media (max-width:56rem){
  .foot-logo{margin-top:1.75rem}
}

/* ============================================================
   FOOTER — centred columns
   ============================================================ */

.foot-col{text-align:center}
.foot-haiku{margin-left:auto;margin-right:auto}
.foot-logo{margin-left:auto;margin-right:auto}

/* The plugin's own container is the one thing kept out of it. It measures
   itself, so it gets an explicit reset rather than inheriting the centring,
   and no auto margins — width:100% already fills the column, so the margins
   were never doing anything except giving the plugin something to trip on. */
.fb-page{text-align:left}

/* Narrow screens: three sibling names on one line is about 300px of type,
   so trim the size and the gap rather than letting one drop alone. */
@media (max-width:30rem){
  .family{gap:.9rem}
  .family a{font-size:.92rem}
}
/* iPhone SE and friends: 320px leaves 280px of usable width, and three
   names at .92rem want 290px. One more step down clears it. */
@media (max-width:22rem){
  .family{gap:.7rem}
  .family a{font-size:.85rem}
}

/* ============================================================
   THE RULES MODAL
   ------------------------------------------------------------
   A sheet on a phone, a centred card on a desktop. Height is
   capped and the panel scrolls internally, so a small screen in
   landscape can still reach the button.
   ============================================================ */

.modal{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  padding:var(--gutter);
  background:rgba(10,15,32,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.modal[hidden]{display:none}

.modal-box{
  background:var(--paper);border:1px solid var(--rule);
  border-top:3px solid var(--haiku-red);
  padding:clamp(1.5rem,5vw,2.5rem);
  padding-bottom:0;
  width:100%;max-width:30rem;
  max-height:calc(100dvh - 2 * var(--gutter));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  box-shadow:0 18px 50px rgba(10,15,32,.28);
}

.modal-mark{
  margin:0 0 1.2rem;font-size:1.35rem;line-height:1;
  color:var(--ink);
}
.modal-mark em{font-style:italic;color:var(--haiku-red)}

.modal-verse{margin:0 0 1.15rem}
.modal-verse p{margin:0;
  display:block;font-family:var(--serif);font-size:1.12rem;
  line-height:1.55;color:var(--ink);
}
.modal-verse + .modal-verse{
  padding-top:1.1rem;border-top:1px solid var(--rule-soft);
}

.modal-actions{
  margin-top:1.5rem;position:sticky;bottom:0;
  background:var(--paper);padding:.9rem 0 clamp(1.5rem,5vw,2.5rem);
}
.modal-actions::before{
  content:"";position:absolute;left:0;right:0;top:0;
  height:1px;background:var(--rule-soft);
}
/* The modal wears the brand red, not the reading surface's crimson —
   it is the site introducing itself, so it uses the mark's colour. */
.modal-actions .btn{
  width:100%;
  border-color:var(--haiku-red);background:var(--haiku-red);
  /* Navy, not cream. Cream on this red measures 2.7:1 and fails AA at
     this size — the footer band solved the same problem the same way. */
  color:var(--family-bg);
}
.modal-actions .btn:hover:not(:disabled){
  background:transparent;color:var(--family-bg);border-color:var(--haiku-red);
}

@media (max-width:34rem){
  .modal{padding:1rem}
  .modal-box{max-width:none;max-height:86dvh;padding:1.6rem 1.35rem 0}
  .modal-verse p{margin:0;font-size:1.05rem}
}

/* Landscape on a phone is short: keep it scrollable, not clipped. */
@media (max-height:26rem){
  .modal-box{max-height:92dvh;padding-top:1.25rem;padding-bottom:0}
  .modal-mark{margin-bottom:1rem}
  .modal-verse{margin-bottom:1rem}
  .modal-actions{margin-top:1.25rem}
}

/* ============================================================
   ARCHIVE — one section per month
   ============================================================ */

.months{display:block}
.month + .month{margin-top:2.5rem}

.month-head{
  font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  margin:0 0 .8rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--rule);
}
.month .roll{border:1px solid var(--rule)}

/* On a phone every month is its own swipe track, which is what makes
   "Older" visible: a new month is a new row, not more cards pushed off
   the right-hand edge of an existing one. */
@media (max-width:44rem){
  .month .roll{border:0}
  .month + .month{margin-top:2rem}
  .month-head{
    margin-left:0;position:sticky;top:0;z-index:2;
    background:var(--paper);padding-top:.4rem;
  }
}

/* datetime-local sizes itself oddly in Safari without this */
#pubdate{
  width:100%;border:1px solid var(--rule);background:var(--paper);
  padding:.5rem .6rem;font-family:var(--serif);font-size:.95rem;color:var(--ink);
}
#pubdate:focus{outline:none;border-color:var(--accent)}

/* A dependable way out of the frame. Scrolling inside a cross-origin
   iframe is unreliable on touch — the gesture is usually claimed by the
   page — and nothing outside the frame can change that. */
.fb-out{
  margin:.9rem 0 0;
  font-family:var(--sans);font-size:.62rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
}
.fb-out a{color:var(--family-dim);border-bottom:1px solid var(--family-line)}
.fb-out a:hover{color:var(--family-ink);border-bottom-color:var(--family-ink)}

/* ============================================================
   LATELY — replies across every haiku
   ============================================================ */

#lately .list-item.is-new{
  background:var(--card);
  box-shadow:inset 3px 0 0 var(--accent);
}
.new-dot{
  font-family:var(--sans);font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
#lately .haiku p{font-size:1rem;line-height:1.5}