/* Fairly Connected — the frame. v1 tokens are provisional; swap the values, never the names. */

:root{
  --fc-paper:#F6F1E7;
  --fc-paper-2:#EDE5D6;
  --fc-ink:#1E1A16;
  --fc-ink-2:#4A443C;
  --fc-smoke:#7A7369;
  --fc-line:#D9D0BF;
  --fc-ember:#D9622B;
  /* Ember is a fine colour and a poor one to set 12-15px type in: white on it is 3.6:1 and it is
     3.3:1 on paper, both under AA. This is the same hue taken down far enough to read. Use it for
     small ember-coloured text and for any badge with white on it; keep --fc-ember for fills. */
  --fc-ember-deep:#A6461D;
  --fc-gold:#E7B84A;
  --fc-moss:#5E7A4B;
  --fc-white:#FFFDF9;

  --fc-font-head:'Bricolage Grotesque','Helvetica Neue',Arial,sans-serif;
  --fc-font-body:'Source Sans 3','Helvetica Neue',Arial,sans-serif;

  --fc-radius:14px;
  --fc-radius-sm:8px;
  --fc-shadow:0 1px 2px rgba(30,26,22,.06),0 8px 24px -12px rgba(30,26,22,.18);
  --fc-max:720px;
}

/* A member's page sets these three. Everything else is the frame. */
.fc-page{
  --page-bg:var(--fc-paper);
  --page-accent:var(--fc-ember);
  --page-ink:var(--fc-ink);
  --page-ink-2:var(--fc-ink-2);
  --page-card:var(--fc-white);
  --page-line:var(--fc-line);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fc-paper);color:var(--fc-ink);font-family:var(--fc-font-body);font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--fc-font-head);line-height:1.1;margin:0;letter-spacing:-.01em}
button{font:inherit}

.fc-page{background:var(--page-bg);color:var(--page-ink);min-height:100dvh}

/* ---------- textures (the YB pattern idea, FC-flavored) ---------- */
.fc-page[data-texture="dots"] .fc-banner::after{
  background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1.2px);background-size:14px 14px}
.fc-page[data-texture="grain"] .fc-banner::after{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");opacity:.5}
.fc-page[data-texture="lines"] .fc-banner::after{
  background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.10) 0 2px,transparent 2px 10px)}

/* ---------- top bar (the FC frame — not the member's) ---------- */
.fc-bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:var(--fc-ink);color:var(--fc-paper);font-family:var(--fc-font-head);font-size:15px}
.fc-bar a{text-decoration:none;opacity:.9}
.fc-bar a:hover{opacity:1}
.fc-bar .fc-wordmark{font-weight:700;letter-spacing:.01em}
.fc-bar .fc-wordmark span{color:var(--fc-gold)}
.fc-bar nav{display:flex;gap:14px}
/* On a phone the bar keeps the last TWO: the post and your page. Keeping only the last one meant
   a neighbor on a phone had no door to their own mail — the wordmark already goes to /today. */
@media (max-width:480px){.fc-bar nav a:not(:nth-last-child(-n+2)){display:none}}
@media (max-width:380px){.fc-bar{gap:8px;padding-left:12px;padding-right:12px}.fc-bar nav{gap:10px}}

/* ---------- header ---------- */
/* An illustrated window banner (a woodcut view or photo clipped to a hand-drawn frame) held this
   slot from 2026-09-15's second pass through that day's fourth pass. Retired 2026-09-15 evening,
   Dave's call — two art layers had to stay pixel-aligned with each other AND the avatar sitting
   on top of them, on every breakpoint/theme/photo, and it kept slipping (phone screenshot in
   STATUS.md: the avatar crashing into the frame's corner). Header is now avatar/name/tags/actions
   only; "right now" sits under it with no art — see fc-sill below and fc_sill() in render.php. */
/* sill: what is current, straight on the page, right under the header */
.fc-sill{padding:2px 0 6px}
.fc-sill-note{padding:10px 0 4px}
.fc-sill-label{display:block;font-family:var(--fc-font-head);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--page-ink-2);margin-bottom:6px}
.fc-sill-note p{margin:0;font-size:19px;line-height:1.45;max-width:58ch}
.fc-sill-date{display:block;margin-top:6px;font-family:var(--fc-font-head);font-size:14px;color:var(--page-ink-2)}
.fc-banner{display:none}
.fc-banner::after{content:none}
.fc-head{max-width:var(--fc-max);margin:0 auto;padding:28px 16px 8px}
.fc-avatar{width:104px;height:104px;border-radius:50%;border:4px solid var(--page-bg);background:var(--page-card);overflow:hidden;box-shadow:var(--fc-shadow)}
.fc-avatar img{width:100%;height:100%;object-fit:cover}
.fc-avatar.fc-avatar--square{border-radius:var(--fc-radius)}
.fc-name{margin-top:10px;font-size:clamp(30px,7vw,42px);font-weight:800}
.fc-tagline{margin:4px 0 0;font-size:19px;color:var(--page-ink-2)}
/* The porch light: the keeper's own switch, rendered near the name (fc_porch_light(), 0022).
   Reuses .fc-art's paper card + multiply blend so the woodcut sits right on any page's colors. */
.fc-porch-light{display:flex;align-items:center;gap:10px;margin-top:10px}
.fc-porch-light .fc-art{padding:3px}
.fc-porch-light-line{font-family:var(--fc-font-head);font-size:15px;font-weight:600;color:var(--page-ink-2)}
.fc-porch-light--on .fc-porch-light-line{color:var(--page-ink)}
.fc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.fc-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-family:var(--fc-font-head);font-size:14px;font-weight:600;
  background:var(--page-card);border:1px solid var(--page-line);color:var(--page-ink)}
.fc-tag--accent{background:var(--page-accent);border-color:var(--page-accent);color:var(--page-accent-ink)}
.fc-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.fc-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;border:2px solid var(--page-accent);
  background:var(--page-accent);color:var(--page-accent-ink);font-family:var(--fc-font-head);font-weight:700;font-size:16px;text-decoration:none;cursor:pointer}
.fc-btn--ghost{background:transparent;color:var(--page-ink)}

/* ---------- blocks ---------- */
.fc-blocks{max-width:var(--fc-max);margin:0 auto;padding:12px 16px 32px;display:grid;gap:14px}
.fc-block{background:var(--page-card);border:1px solid var(--page-line);border-radius:var(--fc-radius);padding:18px 18px 16px;box-shadow:var(--fc-shadow)}
.fc-block h2{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--page-accent);margin-bottom:10px}
.fc-block p{margin:0 0 .6em}
.fc-block p:last-child{margin-bottom:0}
.fc-block--now{border-left:6px solid var(--page-accent)}
.fc-block--now .fc-now-date{font-family:var(--fc-font-head);font-size:14px;color:var(--page-ink-2)}

.fc-links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fc-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:var(--fc-radius-sm);
  background:var(--page-bg);border:1px solid var(--page-line);text-decoration:none;font-weight:600}
.fc-links a small{font-weight:400;color:var(--page-ink-2)}
.fc-links a::after{content:"→";color:var(--page-accent)}

.fc-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fc-photos img{aspect-ratio:1;object-fit:cover;border-radius:var(--fc-radius-sm);width:100%}
.fc-photos .fc-photo--wide{grid-column:span 2}

.fc-hours{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;margin:0}
.fc-hours dt{font-weight:700;font-family:var(--fc-font-head)}
.fc-hours dd{margin:0;color:var(--page-ink-2)}
.fc-where{margin-top:12px;padding-top:12px;border-top:1px dashed var(--page-line)}

.fc-embed{position:relative;aspect-ratio:16/9;border-radius:var(--fc-radius-sm);overflow:hidden;background:var(--fc-ink)}
.fc-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}


/* ---------- rooms ----------
   A page is a few rooms. Each opens only when it holds something; the porch is always there.
   Illustration sits on a paper card and multiplies onto it, so the opaque cream of the woodcut
   disappears whatever the neighbor's own colors are — gold on ink included. */
.fc-rooms{gap:22px}
.fc-art{display:inline-grid;place-items:center;flex:none;background:var(--fc-paper);border-radius:var(--fc-radius);
  box-shadow:var(--fc-shadow);padding:6px;border:1px solid rgba(30,26,22,.08)}
.fc-art img{mix-blend-mode:multiply;border-radius:calc(var(--fc-radius) - 4px)}
.fc-room{display:grid;gap:12px}
.fc-room-head{display:flex;align-items:center;gap:14px}
.fc-room-head h2{font-size:22px;font-weight:800;line-height:1.1}
.fc-room-head small{display:block;margin-top:3px;font-family:var(--fc-font-head);font-size:14px;color:var(--page-ink-2)}
.fc-room-body{display:grid;gap:12px}
.fc-room--porch{grid-template-columns:auto 1fr;align-items:center;gap:16px;padding:6px 0 2px}
.fc-porch-line{margin:0;font-family:var(--fc-font-head);font-size:18px;font-weight:600;line-height:1.4;color:var(--page-ink);text-wrap:pretty}
@media (max-width:420px){.fc-room--porch{gap:12px}.fc-room--porch .fc-art img{width:88px;height:88px}.fc-porch-line{font-size:16px}
  .fc-room-head .fc-art img{width:72px;height:72px}}
.fc-wall-head,.fc-fridge-head{align-items:center;gap:12px}
.fc-wall-head>div,.fc-fridge-head>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;flex:1;min-width:0}
.fc-wall-head .fc-art,.fc-fridge-head .fc-art{padding:4px}

/* De-blocking, 2026-09-15. A room holds its words directly; the card-inside-a-card is gone.
   The room head is quieter, the neighbor's own heading is a small running head, and blocks in the
   same room are separated by a hairline, not a box. Tappable things (links) keep their rows. */
.fc-rooms{gap:30px;padding-top:8px}
.fc-room-head{gap:12px}
.fc-room-head h2{font-size:19px;font-weight:700;letter-spacing:0}
.fc-room-head small{font-size:13px;margin-top:2px}
.fc-room-head .fc-art{padding:4px}
.fc-room-head .fc-art img{width:72px;height:72px}
.fc-room-body{gap:0;padding-left:4px}
.fc-rooms .fc-block{background:none;border:0;border-radius:0;box-shadow:none;padding:14px 0 18px;border-top:1px solid var(--page-line)}
.fc-rooms .fc-block:last-child{padding-bottom:6px}
.fc-rooms .fc-block h2{font-size:12px;letter-spacing:.1em;color:var(--page-ink-2);margin-bottom:8px}
.fc-rooms .fc-block--now{border-left:0}
.fc-rooms .fc-block--now p{font-size:19px;line-height:1.45;max-width:58ch}
.fc-rooms .fc-block--about p{max-width:62ch}
.fc-rooms .fc-links a{background:none;border-color:var(--page-line);padding:10px 4px 10px 0}
.fc-rooms .fc-links a:hover{border-color:var(--page-accent)}
.fc-room--porch{padding:10px 0 0}
.fc-wall-head h2,.fc-fridge-head h2{font-size:19px;font-weight:700}

/* ---------- the shelf: a plank with things on it ---------- */
/* The plank art has 19% of empty canvas each side, so it is drawn at 161% and the sides are clipped;
   the board's top surface sits 33% down the art, which is where the objects stand. */
.fc-plank-room{position:relative;margin:44px 0 0;clip-path:inset(-160px 0 0 0)}
.fc-plank{display:block;width:161%;max-width:none;height:auto;margin-left:-30.5%}
.fc-room--shelf .fc-room-body{margin-top:-34px} /* the plank art carries empty height under its brackets */
.fc-plank-objects{position:absolute;left:3%;right:3%;bottom:66.5%;display:flex;align-items:flex-end;justify-content:flex-start;gap:2.5%;z-index:1}
.fc-obj{position:relative;display:block;flex:0 1 auto;width:clamp(52px,13%,104px);text-decoration:none;color:inherit}
.fc-obj img{width:100%;height:auto;display:block;transition:transform .15s ease}
.fc-obj:hover img,.fc-obj:focus-visible img{transform:translateY(-4px)}
.fc-obj--plant{width:clamp(48px,11%,90px);margin-left:auto;transform:translateY(13%)} /* the pot sits on the plank; the trailing leaf hangs over the front edge */
.fc-obj-label{position:absolute;left:50%;bottom:-1.6em;transform:translateX(-50%);white-space:nowrap;font-family:var(--fc-font-head);font-size:12px;color:var(--page-ink-2);opacity:0;transition:opacity .15s}
.fc-obj:hover .fc-obj-label,.fc-obj:focus-visible .fc-obj-label{opacity:1}
.fc-obj--photos .fc-obj-photo{position:absolute;left:22%;top:16%;width:56%;height:66%;object-fit:cover;z-index:-1}
.fc-obj--photos{isolation:isolate}
@media (prefers-reduced-motion:reduce){.fc-obj img,.fc-obj-label{transition:none}}
.fc-room--shelf .fc-room-body{margin-top:6px}

/* ---------- the fridge: a door with magnets ---------- */
.fc-fridge-door{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 16px;
  width:min(100%,460px);margin:0 auto;padding:13% 18% 15% 18%;
  /* fc-fridge-door-v2 (2026-09-15) has real alpha outside the drawn door — no clip-path guess
     needed anymore; a cream rectangle on an ink page was the whole reason v1 needed one */
  background:var(--door) center/100% 100% no-repeat;border:0;border-radius:0}
.fc-magnet{padding:22px 12px 12px}
.fc-magnet-pin{position:absolute;top:-16px;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:0;background:none;box-shadow:none;transform:rotate(calc(var(--tilt,0deg) * -1))}
.fc-fridge-door:has(> :only-child){grid-template-columns:1fr;justify-items:center}
.fc-fridge-door:has(> :only-child) .fc-magnet{max-width:220px}
@media (max-width:480px){.fc-fridge-door{grid-template-columns:1fr;justify-items:center;padding:15% 19% 17% 19%}.fc-magnet{max-width:230px;width:100%}}

/* ---------- the wall ---------- */
.fc-wall{max-width:var(--fc-max);margin:0 auto;padding:0 16px 40px}
.fc-wall-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:12px}
.fc-wall-head small{flex-basis:100%}
@media (min-width:560px){.fc-wall-head small{flex-basis:auto}}
.fc-wall-head h2{font-size:24px;font-weight:800}
.fc-wall-head small{color:var(--page-ink-2);font-family:var(--fc-font-head)}
.fc-note{background:var(--page-card);border:1px solid var(--page-line);border-radius:var(--fc-radius);padding:14px 16px;margin-bottom:10px;box-shadow:var(--fc-shadow)}
.fc-note-by{display:flex;justify-content:space-between;gap:10px;font-family:var(--fc-font-head);font-size:14px;margin-bottom:6px}
.fc-note-by b{font-weight:700}
.fc-note-by time{color:var(--page-ink-2);font-weight:500}
.fc-note p{margin:0}
.fc-note--pending{opacity:.65;border-style:dashed}
.fc-wall-form{display:grid;gap:8px;margin-top:6px}
.fc-wall-form textarea{width:100%;min-height:88px;padding:12px 14px;border-radius:var(--fc-radius-sm);border:1px solid var(--page-line);background:var(--page-card);color:var(--page-ink);font:inherit;resize:vertical}
.fc-wall-form .fc-hint{font-size:14px;color:var(--page-ink-2)}
.fc-wall-empty{color:var(--page-ink-2);padding:12px 0}

/* ---------- footer (the FC frame) ---------- */
.fc-foot{background:var(--fc-ink);color:var(--fc-paper);padding:28px 16px 36px;font-family:var(--fc-font-head)}
.fc-foot-in{max-width:var(--fc-max);margin:0 auto;display:grid;gap:10px;font-size:15px}
.fc-foot a{color:var(--fc-gold);text-decoration:none}
.fc-foot .fc-foot-line{font-size:22px;font-weight:800}
.fc-foot .fc-foot-region{opacity:.75}

/* ---------- utilities ---------- */
.fc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:no-preference){.fc-btn{transition:transform .12s ease}.fc-btn:active{transform:scale(.98)}}
@media (min-width:720px){.fc-blocks{padding-top:16px}}

/* ---------- the front page (/today) ---------- */
.fc-today-in{max-width:var(--fc-max);margin:0 auto;padding:18px 16px}
.fc-today-hero{background:var(--fc-ink);color:var(--fc-paper);padding:22px 0 26px;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:14px 14px}
.fc-today-hero h1{font-size:clamp(32px,7vw,48px);font-weight:800;color:var(--fc-gold)}
.fc-today-hero p{margin:8px 0 0;font-size:18px;opacity:.9;max-width:52ch}
.fc-today-hero .fc-actions{margin-top:14px}
.fc-today-hero .fc-btn{--page-accent:var(--fc-ember);--page-accent-ink:#FFFDF9}
.fc-today-hero .fc-btn--ghost{color:var(--fc-paper);border-color:var(--fc-paper)}
.fc-sec-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:12px}
.fc-sec-head h2{font-size:24px;font-weight:800}
.fc-sec-head small{color:var(--fc-smoke);font-family:var(--fc-font-head)}
.fc-sec-head small a{color:var(--fc-ember);text-decoration:none;font-weight:700}
/* The picks grid. With two weeks of days stacked up, cards have to be small enough that a day
   reads as a block rather than a scroll. Vertical cards, as many across as the screen allows.
   The picks break out wider than the reading column on purpose: prose wants a narrow measure,
   a grid of cards wants room. */
.fc-picks{display:grid;gap:12px;grid-template-columns:1fr;align-items:start}
@media (min-width:560px){.fc-picks{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}}
.fc-pick{background:var(--fc-white);border:1px solid var(--fc-line);border-radius:var(--fc-radius);overflow:hidden;box-shadow:var(--fc-shadow);display:grid;min-width:0}
/* A grid item's default min-width is auto, which means ONE unbreakable string — a long URL where a
   headline should be — sets the whole track's minimum and shoves the row off the page. It did
   exactly that on the live front page 2026-09-14. Nothing a neighbor can type may decide how wide
   this grid is: every box gets min-width:0, and any field that can hold a URL breaks anywhere.
   align-items:start above is the other half — without it every card stretches to the tallest in
   the row and the short ones fill with a slab of empty. */
.fc-pick > *{min-width:0}
.fc-pick h3,.fc-pick h3 a,.fc-pick-host,.fc-pick p,.fc-said{overflow-wrap:anywhere}
.fc-pick img{width:100%;aspect-ratio:2/1;object-fit:cover}
.fc-pick-body{padding:12px 13px 13px}
.fc-pick-meta{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:7px;font-size:12px}
.fc-pick-host{color:var(--fc-smoke);font-family:var(--fc-font-head)}
.fc-pick h3{font-size:17px;font-weight:800;line-height:1.2}
.fc-pick h3 a{text-decoration:none}
.fc-pick h3 a:hover{color:var(--fc-ember)}
.fc-pick p{margin:7px 0 0;font-size:14px;line-height:1.45;color:var(--fc-ink-2)}
.fc-pick-by{margin-top:9px;font-family:var(--fc-font-head);font-size:13px;color:var(--fc-smoke)}
.fc-pick--local{border-left:5px solid var(--fc-ember)}

.fc-events{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fc-events a{display:grid;gap:2px;padding:12px 14px;border-radius:var(--fc-radius-sm);background:var(--fc-white);border:1px solid var(--fc-line);text-decoration:none}
.fc-ev-when{font-family:var(--fc-font-head);font-weight:700;color:var(--fc-ember);font-size:14px}
.fc-ev-title{font-weight:700;font-size:18px}
.fc-ev-where{color:var(--fc-smoke);font-size:15px}
.fc-pagegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.fc-pagecard{display:grid;grid-template-rows:56px 1fr;background:var(--fc-white);border:1px solid var(--fc-line);border-radius:var(--fc-radius);overflow:hidden;text-decoration:none;box-shadow:var(--fc-shadow)}
.fc-pagecard-band{background:var(--page-accent)}
.fc-pagecard-body{display:grid;gap:4px;padding:12px 14px 14px}
.fc-pagecard-body b{font-family:var(--fc-font-head);font-size:18px}
.fc-pagecard-body span{color:var(--fc-ink-2);font-size:15px}
.fc-pagecard-body small{color:var(--fc-smoke);font-family:var(--fc-font-head)}
.fc-digest{background:var(--fc-paper-2);border-radius:var(--fc-radius);margin:12px auto 36px;padding:22px 20px}
.fc-digest h2{font-size:24px;font-weight:800}
.fc-digest p{margin:6px 0 14px;color:var(--fc-ink-2)}
.fc-digest .fc-btn{--page-accent:var(--fc-ember);--page-accent-ink:#FFFDF9}
.fc-404{padding:60px 16px 80px}
.fc-404 h1{font-size:40px;font-weight:800}
.fc-404 a{color:var(--fc-ember)}

/* --- picks: category color, and a card that never looks broken without a picture --- */
.fc-pick{border-left:5px solid var(--cat,var(--fc-smoke))}
.fc-pick--local{border-left-width:5px}
.fc-pick-art{display:block;position:relative;background:var(--cat,var(--fc-smoke));aspect-ratio:2/1;text-decoration:none}
.fc-pick-art img{display:block;width:100%;height:100%;object-fit:cover}
/* No picture: a quiet tint of the category color, its mark, and its name. Reads as designed,
   not as a hole — and it doesn't shout louder than the cards that do have a photograph. */
.fc-pick-art--blank{display:grid;place-items:center;align-content:center;gap:6px;
  background:color-mix(in srgb,var(--cat,var(--fc-smoke)) 14%,var(--fc-white));
  border-right:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 28%,transparent)}
.fc-pick-art--blank span{font-size:30px;line-height:1}
.fc-pick-art--blank b{font-family:var(--fc-font-head);font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--cat,var(--fc-smoke));opacity:.85}
.fc-pick-host{margin-left:auto}
.fc-tag--away{background:transparent;border:1px dashed var(--fc-line);color:var(--fc-smoke)}
.fc-tag--cat{background:var(--cat,var(--fc-smoke));color:#fff;border-color:transparent}
.fc-said{margin:12px 0 0;padding:10px 14px;border-left:3px solid var(--cat,var(--fc-smoke));
  background:rgba(30,26,22,.04);border-radius:0 8px 8px 0;font-size:17px;line-height:1.45}
.fc-said cite{display:block;margin-top:6px;font-style:normal;font-family:var(--fc-font-head);
  font-size:14px;color:var(--fc-smoke)}
.fc-disclose{margin-top:10px;font-size:13px;color:var(--fc-smoke)}
/* Cards stack: art on top, words under. The side-by-side layout is the hero's alone now.
   grid-template-rows keeps the art at its own height and lets the words take the rest, so a card
   in a tall row grows instead of hiding its last line under overflow:hidden. */
.fc-pick{grid-template-rows:auto 1fr}
.fc-pick .fc-pick-art{aspect-ratio:16/9}
/* On a phone a 2:1 color block for a card with no photo is just scroll. Keep it a band. */
@media (max-width:639px){
  .fc-pick-art--blank{aspect-ratio:auto;min-height:0;grid-auto-flow:column;gap:10px;padding:10px 14px;
    justify-content:start;border-right:0;
    border-bottom:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 28%,transparent)}
  .fc-pick-art--blank span{font-size:22px}
}

/* --- the day's top pick --- */
/* It spans the row so the eye starts there, but it is a wider card now, not a billboard. Two
   weeks of billboards is a scroll, and scroll is the thing this place is against. */
.fc-pick--hero{grid-column:1 / -1}
@media (min-width:1040px){.fc-pick--hero{grid-column:span 2}}
.fc-pick--hero .fc-pick-art{aspect-ratio:16/9;border-bottom:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 28%,transparent)}
.fc-pick--hero .fc-pick-body{padding:14px 16px 15px}
.fc-pick--hero h3{font-size:21px;line-height:1.15}
.fc-pick--hero p{font-size:15px}
@media (min-width:640px){
  /* side by side, so it needs ONE row — without this it keeps the stacked card's second row and
     leaves a band of empty white under the picture */
  .fc-pick--hero{grid-template-columns:minmax(0,300px) 1fr;grid-template-rows:auto}
  .fc-pick--hero .fc-pick-art{aspect-ratio:auto;height:100%;min-height:170px;
    border-bottom:0;border-right:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 28%,transparent)}
  .fc-pick--hero .fc-pick-art--blank{aspect-ratio:auto}
  .fc-pick--hero h3{font-size:24px}
  .fc-pick--hero .fc-pick-body{padding:16px 20px 18px}
}
.fc-pick--hero .fc-pick-art--blank span{font-size:42px}
.fc-pick--hero .fc-pick-art--blank b{font-size:13px}

/* --- the explaining pages: /how and /data --- */
.fc-doc-in{max-width:680px;padding-bottom:40px}
.fc-doc-in h2{font-family:var(--fc-font-head);font-size:24px;margin:32px 0 10px;line-height:1.15}
.fc-doc-in h2:first-child{margin-top:8px}
.fc-doc-in p{margin:0 0 12px;font-size:17px;line-height:1.6}
.fc-doc-list{margin:0 0 12px;padding-left:20px}
.fc-doc-list li{margin-bottom:8px;font-size:17px;line-height:1.55}
.fc-doc-note{color:var(--fc-smoke);font-size:15px}
.fc-mono{font-family:ui-monospace,Menlo,monospace;font-size:.92em;background:rgba(30,26,22,.06);
  padding:2px 6px;border-radius:5px;overflow-wrap:anywhere}
.fc-shelves{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.fc-shelf{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--cat);color:#fff;font-size:14px;line-height:1.3}

/* Category chips: solid color + white text failed on the lighter shelves (gold was ~1.8:1, ember
   ~4.0:1 — both under AA for 14px). A tint of the category color with ink on top reads at 12:1+
   for every one of the nine, keeps the color coding, and sits quieter next to a photograph.
   The band down the side of the card still carries the full-strength color. */
.fc-tag--cat, .fc-shelf{
  background:color-mix(in srgb,var(--cat,var(--fc-smoke)) 16%,var(--fc-white));
  color:var(--fc-ink);
  border:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 42%,transparent);
  font-weight:600}

/* ---- /join — the morning post list ------------------------------------- */
.fc-join-form{display:flex;flex-direction:column;gap:6px;max-width:26rem;margin:18px 0 14px}
.fc-join-form label{font-family:var(--fc-font-head);font-size:14px;font-weight:700}
.fc-join-form label span{font-weight:500;color:var(--fc-smoke)}
.fc-join-form input{padding:11px 14px;border-radius:var(--fc-radius);border:1px solid var(--page-line);
  background:var(--page-card);color:var(--page-ink);font:inherit;font-size:16px}
.fc-join-form input:focus-visible{outline:2px solid var(--fc-ember);outline-offset:1px}
.fc-join-form input+label{margin-top:8px}
.fc-join-form .fc-btn{align-self:flex-start;margin-top:14px;--page-accent:var(--fc-ember);--page-accent-ink:#FFFDF9}
/* honeypot: off-screen, never announced, never tab-stopped. A person cannot fill this in. */
.fc-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fc-flash{background:var(--page-card);border:1px solid var(--fc-ember);border-left-width:4px;
  border-radius:var(--fc-radius);padding:12px 15px;margin:16px 0;box-shadow:var(--fc-shadow)}

/* ---- day dividers on the front page ------------------------------------ */
.fc-daybreak{display:flex;align-items:center;gap:14px;margin:34px 0 18px}
.fc-daybreak::before,.fc-daybreak::after{content:"";flex:1;height:1px;background:var(--page-line)}
.fc-daybreak span{font-family:var(--fc-font-head);font-size:14px;font-weight:700;letter-spacing:.02em;
  color:var(--fc-smoke);white-space:nowrap}
.fc-older{margin-top:26px;font-size:13px;color:var(--fc-smoke);text-align:center}

/* The picks section runs wider than the prose around it. The heading, the dividers and the
   footnote stay lined up with the cards, so the whole block reads as one thing. */
.fc-picks-wide{max-width:min(1180px, 100% - 32px)}
@media (max-width:679px){.fc-picks-wide{max-width:none}}

/* On a phone the ordinary cards go compact: a small square of art on the left, the words beside
   it. Nine full-width pictures is a scroll, and a fortnight of days makes it nine every time.
   The day's top pick keeps its big picture — that is what marks it as the top pick. */
@media (max-width:559px){
  .fc-pick:not(.fc-pick--hero){grid-template-columns:96px 1fr;grid-template-rows:auto}
  /* no aspect-ratio here: with height:100% it would force the width to match a tall row and
     the thumbnail would spill straight over the words */
  .fc-pick:not(.fc-pick--hero) .fc-pick-art{aspect-ratio:auto;height:100%;min-height:96px;
    border-bottom:0;border-right:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 28%,transparent)}
  .fc-pick:not(.fc-pick--hero) .fc-pick-art--blank{aspect-ratio:auto;grid-auto-flow:row;gap:4px;
    padding:6px;justify-content:center;align-content:center;
    border-right:1px solid color-mix(in srgb,var(--cat,var(--fc-smoke)) 28%,transparent);border-bottom:0}
  .fc-pick:not(.fc-pick--hero) .fc-pick-art--blank span{font-size:24px}
  .fc-pick:not(.fc-pick--hero) .fc-pick-art--blank b{font-size:10px;line-height:1.1}
  .fc-pick:not(.fc-pick--hero) .fc-pick-body{padding:10px 12px}
  .fc-pick:not(.fc-pick--hero) h3{font-size:16px}
  .fc-pick:not(.fc-pick--hero) p{font-size:13px;margin-top:5px}
  .fc-pick:not(.fc-pick--hero) .fc-said{font-size:13px}
}

/* ---- the calendar ------------------------------------------------------- */
.fc-daybreak--cal{margin:28px 0 12px}
.fc-daybreak--cal span{color:var(--page-ink)}
.fc-evs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fc-ev{background:var(--page-card);border:1px solid var(--page-line);border-left:4px solid var(--fc-ember);
  border-radius:var(--fc-radius);padding:11px 14px;box-shadow:var(--fc-shadow)}
.fc-ev-main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;text-decoration:none}
.fc-ev-time{font-family:var(--fc-font-head);font-weight:700;font-size:14px;color:var(--fc-ember);
  min-width:6.5rem}
.fc-ev-title{font-family:var(--fc-font-head);font-weight:700;font-size:17px;line-height:1.25;
  color:var(--page-ink)}
.fc-ev-main:hover .fc-ev-title{color:var(--fc-ember)}
.fc-ev-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;padding-left:6.5rem;
  font-size:13px;color:var(--fc-smoke)}
@media (max-width:559px){
  .fc-ev-time{min-width:0}
  .fc-ev-meta{padding-left:0}
}
.fc-ev-kicker{margin:0 0 8px;font-size:14px}
.fc-ev-kicker a{color:inherit;opacity:.85}
.fc-ev-when{font-family:var(--fc-font-head);font-weight:700}
.fc-ev-art{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:var(--fc-radius);
  border:1px solid var(--page-line);margin-bottom:18px}
.fc-ev-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 18px;
  padding:14px 16px;background:var(--page-card);border:1px solid var(--page-line);
  border-radius:var(--fc-radius)}
.fc-ev-facts dt{font-family:var(--fc-font-head);font-size:13px;font-weight:700;color:var(--fc-smoke);
  letter-spacing:.02em}
.fc-ev-facts dd{margin:0}
.fc-ev-body p{margin:0 0 12px}

/* ---------------------------------------------------------------- the wall (step 7)
   A note waiting on its look reads as waiting, not as missing — the person who wrote it can see it
   sitting there. Nothing here is drawn differently for a stranger; wall.js just adds the controls
   for whoever owns the page. */
.fc-note--flagged{opacity:.7;border-style:dashed;border-color:var(--fc-ember)}
.fc-note--hidden{opacity:.5}
.fc-note-yours{font-family:var(--fc-font-head);font-size:12px;font-weight:700;color:var(--page-accent);
  border:1px solid currentColor;border-radius:999px;padding:1px 8px;margin-left:auto}
.fc-note-by{align-items:center}
.fc-note-do{display:flex;gap:8px;margin-top:10px}
.fc-note-do button{font:600 13px/1 var(--fc-font-head);color:var(--page-ink-2);background:none;
  border:1px solid var(--page-line);border-radius:999px;padding:6px 12px;cursor:pointer}
.fc-note-do button:hover{color:var(--page-ink);border-color:var(--page-ink)}
.fc-wall-do{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fc-wall-msg{font-family:var(--fc-font-head);font-size:14px;color:var(--fc-smoke)}
.fc-wall-msg--ok{color:var(--fc-moss)}
.fc-wall-msg--bad{color:var(--fc-ember)}
.fc-wall-owner{margin-top:12px;font-family:var(--fc-font-head);font-size:14px;color:var(--fc-smoke)}
.fc-wall-owner label{display:flex;align-items:center;gap:8px;cursor:pointer}

/* ---------------------------------------------------------------- the fridge
   Letters the owner kept and both sides agreed to show. It is meant to look like a fridge door:
   crooked, overlapping, held on with whatever magnet was to hand. Not a testimonial wall. */
.fc-fridge{max-width:var(--fc-max);margin:0 auto;padding:8px 16px 28px}
.fc-fridge-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin-bottom:14px}
.fc-fridge-head h2{font-size:24px;font-weight:800}
.fc-fridge-head small{color:var(--fc-smoke);font-family:var(--fc-font-head);flex-basis:100%}
@media (min-width:560px){.fc-fridge-head small{flex-basis:auto}}
.fc-magnet{position:relative;background:var(--fc-white);color:var(--fc-ink);border-radius:2px;
  padding:26px 12px 12px;margin-top:14px;box-shadow:0 1px 1px rgba(30,26,22,.12),0 10px 20px -14px rgba(30,26,22,.5);
  transform:rotate(var(--tilt,0deg));transition:transform .15s ease}
.fc-magnet:hover{transform:rotate(0deg)}
.fc-magnet-body{margin:0;font-size:15px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:8;-webkit-box-orient:vertical;overflow:hidden}
.fc-magnet footer{display:flex;flex-wrap:wrap;gap:2px 10px;justify-content:space-between;
  margin-top:10px;font-family:var(--fc-font-head);font-size:12px;color:var(--fc-smoke)}
.fc-magnet-from{font-weight:700;color:var(--fc-ink-2)}
.fc-magnet-mark{font-style:italic}
/* the pin is magnet art now — see the fridge-door block above */
@media (prefers-reduced-motion:reduce){.fc-magnet,.fc-magnet:hover{transition:none}}

/* ---------- the campfire ---------- */
/* Three states, and they have to look different from across the room. Laid is warm and waiting;
   lit is the only place on this site that gets to glow; out is ash — legible, quiet, finished. */
.fc-fire{padding-top:6px;padding-bottom:6px}
.fc-fire-card{position:relative;overflow:hidden;border-radius:var(--fc-radius);
  border:1px solid var(--fc-line);background:var(--fc-white);padding:20px 18px 18px}
.fc-fire-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--fc-smoke)}

.fc-fire--laid .fc-fire-card{background:linear-gradient(180deg,#FDF6E8,var(--fc-white) 190px);border-color:#E3D2AE}
.fc-fire--laid .fc-fire-card::before{background:linear-gradient(90deg,var(--fc-gold),var(--fc-ember))}
.fc-fire--lit .fc-fire-card{background:var(--fc-ink);color:var(--fc-paper);border-color:#3A2F25}
.fc-fire--lit .fc-fire-card::before{background:linear-gradient(90deg,var(--fc-ember),var(--fc-gold),var(--fc-ember))}
.fc-fire--out .fc-fire-card{background:var(--fc-paper-2);border-color:var(--fc-line)}
.fc-fire--out .fc-fire-card::before{background:var(--fc-line)}
.fc-fire--called_off .fc-fire-card{background:var(--fc-paper-2)}
.fc-fire--called_off .fc-fire-card::before{background:var(--fc-smoke)}

.fc-fire-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin-bottom:8px}
.fc-fire-badge{font-family:var(--fc-font-head);font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--fc-ink);color:var(--fc-paper)}
.fc-fire--laid .fc-fire-badge{background:var(--fc-ember-deep);color:var(--fc-white)}
.fc-fire--lit .fc-fire-badge{background:var(--fc-gold);color:var(--fc-ink)}
.fc-fire--out .fc-fire-badge,.fc-fire--called_off .fc-fire-badge{background:var(--fc-smoke);color:var(--fc-white)}
.fc-fire-when{font-family:var(--fc-font-head);font-weight:700;font-size:15px;color:var(--fc-ink-2)}
.fc-fire-when i{font-style:normal;color:var(--fc-ember-deep);font-weight:800}
.fc-fire--lit .fc-fire-when{color:var(--fc-paper-2)}
.fc-fire--lit .fc-fire-when i{color:var(--fc-gold)}

.fc-fire-title{font-size:27px;font-weight:800;line-height:1.08;margin:0 0 4px}
.fc-fire-title a{text-decoration:none}
.fc-fire-title a:hover{color:var(--fc-ember)}
.fc-fire--lit .fc-fire-title a:hover{color:var(--fc-gold)}
.fc-fire-topic{margin:0 0 10px;font-size:18px;color:var(--fc-ink-2)}
.fc-fire--lit .fc-fire-topic{color:var(--fc-paper-2)}
.fc-fire-blurb{margin:0 0 12px;color:var(--fc-ink-2)}
.fc-fire-where{margin:0 0 6px;font-size:15px;color:var(--fc-ink-2)}
.fc-fire--lit .fc-fire-where{color:#B9AE9E}
.fc-fire-off{margin:8px 0;color:var(--fc-ink-2)}
.fc-fire-live{margin:0 0 14px;font-family:var(--fc-font-head);font-weight:700;color:var(--fc-ember-deep)}
.fc-fire-count{margin:10px 0 8px;font-family:var(--fc-font-head);font-weight:700;font-size:16px}
.fc-fire--lit .fc-fire-count{color:var(--fc-gold)}
.fc-fire-note{font-size:14px;color:var(--fc-ink-2)}

.fc-fire-faces{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
.fc-fire-face{font-family:var(--fc-font-head);font-size:14px;font-weight:600;text-decoration:none;
  padding:3px 10px;border-radius:999px;border:1px solid var(--fc-line);background:var(--fc-paper);color:var(--fc-ink-2)}
.fc-fire-face--more{color:var(--fc-ink-2);border-style:dashed}
.fc-fire--lit .fc-fire-face{background:#2A231C;border-color:#3E342A;color:var(--fc-paper-2)}

.fc-fire-do{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:14px}
.fc-fire-do .fc-btn{--page-accent:var(--fc-ember);--page-accent-ink:var(--fc-white)}
.fc-fire--lit .fc-fire-do .fc-btn{--page-accent:var(--fc-gold);--page-accent-ink:var(--fc-ink)}
.fc-fire--lit .fc-fire-do .fc-btn--ghost{color:var(--fc-paper)}
.fc-link-quiet{font-family:var(--fc-font-head);font-size:14px;font-weight:700;color:var(--fc-ink-2);text-decoration:none}
.fc-link-quiet:hover{color:var(--fc-ember-deep)}
.fc-fire--lit .fc-link-quiet{color:#B9AE9E}

.fc-fire-embed{margin:4px 0 14px;background:#120F0C;border-radius:var(--fc-radius-sm);overflow:hidden}
/* The iframe paints its own background before the video loads, which flashed a light grey slab in
   the middle of the dark lit card on a slow signal. */
.fc-fire-embed iframe{background:#120F0C}
.fc-fire-hero .fc-fire-top{margin-bottom:10px}
/* The detail hero is dark in every state, so anything that inherits an ink colour has to be
   overridden here — when and topic were 1.80:1 dark-on-dark until this existed. */
.fc-fire-hero .fc-fire-when{color:var(--fc-paper-2)}
.fc-fire-hero .fc-fire-when i{color:var(--fc-gold)}
.fc-fire-hero .fc-fire-topic{color:var(--fc-paper-2)}
.fc-fire-hero .fc-fire-badge{background:var(--fc-white);color:var(--fc-ink)}
.fc-fire-hero.fc-fire--laid .fc-fire-badge{background:var(--fc-ember-deep);color:var(--fc-white)}
.fc-fire-hero.fc-fire--lit .fc-fire-badge{background:var(--fc-gold);color:var(--fc-ink)}
.fc-fire-who{margin-top:22px;padding-top:18px;border-top:1px solid var(--fc-line)}
.fc-fire-who h2{font-size:22px;font-weight:800;margin-bottom:4px}

@media (min-width:700px){
  .fc-fire-card{padding:26px 26px 22px}
  .fc-fire-title{font-size:32px}
}

/* ---------- the directory ---------- */
.fc-dir-tools{padding-top:6px;padding-bottom:0}
.fc-dir-tools input{width:100%;padding:12px 14px;border-radius:999px;border:1px solid var(--fc-line);
  background:var(--fc-white);font:inherit;color:var(--fc-ink)}
.fc-dir-tools input:focus{outline:2px solid var(--fc-ember-deep);outline-offset:1px}
.fc-dir-tools input::placeholder{color:var(--fc-smoke)}
.fc-dir-none{color:var(--fc-smoke);padding:12px 0}
/* A name is the thing people scan for, so it gets to be the biggest thing on the card. */
.fc-dir-card .fc-pagecard-body b{font-size:18px}
.fc-dir-card .fc-pagecard-body small{color:var(--fc-ink-2)}

/* Woodcut front-page draft, 2026-09-14. Scoped to Today: neighbors keep their page themes.
   Derrick's starting points: these tokens, fc-hero-chairs-v1-*.webp, and the heading face. */
.fc-woodcut{
  --fc-front-paper:#F7F1E6;--fc-front-ink:#29231D;--fc-front-muted:#61564A;
  --fc-front-rule:#C9BEAC;--fc-front-accent:#A13F17;--fc-front-head:'Fraunces',Georgia,serif;
  --page-bg:var(--fc-front-paper);--page-ink:var(--fc-front-ink);--fc-max:1120px;
  --page-accent:var(--fc-front-accent);--page-accent-ink:#FFFDF9;
  background:var(--fc-front-paper);color:var(--fc-front-ink);
}
.fc-woodcut h1,.fc-woodcut h2,.fc-woodcut h3{font-family:var(--fc-front-head);font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.fc-woodcut a:focus-visible{outline:3px solid #285B74;outline-offset:5px}
.fc-woodcut a:hover{text-decoration:underline;text-underline-offset:5px}
.fc-woodcut .fc-bar{position:relative;max-width:1120px;margin:auto;padding:25px 24px 23px;background:transparent;color:var(--fc-front-ink);border-bottom:1px solid var(--fc-front-rule);gap:24px}
.fc-woodcut .fc-wordmark{font-family:var(--fc-front-head);font-size:28px;letter-spacing:-.05em;opacity:1;white-space:nowrap}
.fc-woodcut .fc-bar nav{flex-wrap:wrap;gap:8px 23px;font-family:var(--fc-font-body);font-size:16px}
.fc-woodcut .fc-bar nav a{min-height:32px;display:inline-flex;align-items:center;opacity:1}
.fc-woodcut .fc-bar nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--fc-front-accent);text-underline-offset:6px}
.fc-woodcut .fc-today-in{padding:40px 24px;max-width:1120px}
.fc-woodcut .fc-today-hero{padding:0;background:transparent;color:inherit}
.fc-woodcut .fc-welcome{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr);align-items:center;gap:24px;padding-top:56px;padding-bottom:52px}
.fc-woodcut .fc-eyebrow{font:600 12px/1.5 var(--fc-font-body);text-transform:uppercase;letter-spacing:.14em;color:var(--fc-front-muted);margin:0 0 14px;opacity:1}
.fc-woodcut .fc-welcome h1{font-size:clamp(54px,6.6vw,88px);line-height:1.01;color:var(--fc-front-ink);margin:0 0 25px}
.fc-woodcut .fc-welcome p{opacity:1;max-width:43ch;font-size:18px;line-height:1.55}
.fc-woodcut .fc-welcome .fc-eyebrow{font-size:12px;margin-bottom:24px;max-width:none}
.fc-woodcut .fc-welcome .fc-welcome-line{font-family:var(--fc-front-head);font-size:25px;line-height:1.3;letter-spacing:-.02em;margin-bottom:12px}
.fc-woodcut .fc-welcome .fc-welcome-small{font-size:14px;color:var(--fc-front-muted);margin-top:23px}
.fc-woodcut .fc-welcome-art{min-width:0;mix-blend-mode:multiply;align-self:stretch;display:flex;align-items:center}
.fc-woodcut .fc-welcome-art img{width:100%;height:100%;max-height:430px;object-fit:cover;object-position:center bottom}
.fc-woodcut .fc-btn{font-family:var(--fc-font-body);font-size:16px;font-weight:600;border-radius:3px;padding:12px 18px;background:var(--fc-front-accent);border-color:var(--fc-front-accent);color:#FFFDF9;min-height:48px}
.fc-woodcut .fc-btn--ghost{background:transparent;color:var(--fc-front-ink);border:1px solid var(--fc-front-muted)}
.fc-woodcut .fc-actions{align-items:center;gap:12px;margin-top:24px}
.fc-woodcut .fc-text-link{font-size:16px;line-height:1.5;font-weight:600;color:var(--fc-front-accent);text-underline-offset:5px;display:inline-block;padding:8px 0}
.fc-woodcut .fc-sec-head{gap:16px;align-items:end;margin:0 0 20px}
.fc-woodcut .fc-sec-head h2,.fc-woodcut .fc-participate h2{font-size:clamp(30px,3.5vw,43px);line-height:1.15}
.fc-woodcut .fc-sec-head .fc-eyebrow{margin-bottom:7px}
.fc-woodcut .fc-review-label,.fc-woodcut .fc-edition{font-size:14px;color:var(--fc-front-muted)}
.fc-woodcut .fc-picks-wide{border-top:1px solid var(--fc-front-rule);margin-top:0}
.fc-woodcut .fc-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.fc-woodcut .fc-pick{display:flex;flex-direction:column;grid-column:auto;border:0;border-top:3px solid var(--cat);border-radius:0;background:transparent;box-shadow:none;min-width:0;overflow-wrap:anywhere;overflow:visible}
.fc-woodcut .fc-pick--hero{grid-column:auto;display:flex;grid-template-columns:none}
.fc-woodcut .fc-pick-art{width:100%;aspect-ratio:16/10;height:auto;min-height:0;border:0;margin:16px 0 0;border-radius:2px;overflow:hidden}
.fc-woodcut .fc-pick-art img{width:100%;height:100%;object-fit:cover}
.fc-woodcut .fc-pick-body{padding:19px 0 0;min-width:0}
.fc-woodcut .fc-pick h3,.fc-woodcut .fc-pick--hero h3{font-size:27px;line-height:1.16;margin:14px 0 12px}
.fc-woodcut .fc-pick h3 a{text-decoration:none}
.fc-woodcut .fc-pick h3 a:hover{text-decoration:underline}
.fc-woodcut .fc-pick p{font-size:17px;line-height:1.55;margin:0 0 12px;color:var(--fc-front-ink)}
.fc-woodcut .fc-pick-meta{display:flex;align-items:center;gap:5px 10px;flex-wrap:wrap;min-width:0}
.fc-woodcut .fc-pick .fc-tag{font:600 12px/1.5 var(--fc-font-body);letter-spacing:.03em;border:0;background:transparent;border-radius:0;padding:0;color:var(--fc-front-muted)}
.fc-woodcut .fc-pick .fc-tag--cat{color:var(--fc-front-ink)}
.fc-woodcut .fc-pick-host{font-size:12px;color:var(--fc-front-muted);flex-basis:100%;text-align:left;margin:0;overflow-wrap:anywhere}
.fc-woodcut .fc-said{border-left:2px solid var(--fc-front-rule);background:transparent;border-radius:0;margin:18px 0 0;padding:0 0 0 13px}
.fc-woodcut .fc-said cite,.fc-woodcut .fc-pick-by{color:var(--fc-front-muted);font-size:14px}
.fc-woodcut .fc-daybreak{margin:28px 0 20px;color:var(--fc-front-muted);font:600 13px/1.4 var(--fc-font-body);display:flex;align-items:center;gap:15px}
.fc-woodcut .fc-daybreak::before,.fc-woodcut .fc-daybreak::after{content:'';height:1px;background:var(--fc-front-rule);flex:1}
.fc-woodcut .fc-disclose{font-size:14px;line-height:1.6;color:var(--fc-front-muted);padding:0;margin-top:25px;max-width:80ch}
.fc-woodcut .fc-calendar,.fc-woodcut .fc-participate{border-top:1px solid var(--fc-front-rule)}
.fc-woodcut .fc-events{margin:0;padding:0;list-style:none}
.fc-woodcut .fc-events li{border-bottom:1px solid var(--fc-front-rule)}
.fc-woodcut .fc-events a{display:grid;grid-template-columns:180px 1fr;gap:3px 24px;padding:20px 0;text-decoration:none;background:none;border:0;border-radius:0}
.fc-woodcut .fc-ev-when{grid-row:span 2;font-size:16px;color:var(--fc-front-accent);font-weight:600}
.fc-woodcut .fc-ev-title{font:700 23px/1.2 var(--fc-front-head)}
.fc-woodcut .fc-ev-where{font-size:15px;color:var(--fc-front-muted)}
.fc-woodcut .fc-wall-empty{color:var(--fc-front-muted)}
.fc-woodcut .fc-participate{display:grid;grid-template-columns:1fr 1.2fr;gap:40px;align-items:center;margin-top:16px;margin-bottom:20px}
.fc-woodcut .fc-participate p{max-width:55ch}
.fc-woodcut .fc-digest{background:transparent;border-radius:0;border-top:1px solid var(--fc-front-rule);margin:0 auto;padding:40px 24px}
.fc-woodcut .fc-digest h2{font-size:clamp(30px,3.5vw,43px);line-height:1.15;font-weight:700}
.fc-woodcut .fc-digest p{color:var(--fc-front-ink);font-size:18px;line-height:1.55;max-width:55ch;margin:0 0 22px}
.fc-woodcut .fc-digest .fc-eyebrow{margin-bottom:7px}
.fc-woodcut .fc-foot{background:var(--fc-front-ink);padding:34px 24px;color:var(--fc-front-paper)}
.fc-woodcut .fc-foot-in{max-width:1072px;display:flex;justify-content:space-between;gap:30px;font-family:var(--fc-font-body)}
.fc-woodcut .fc-foot-line{font:700 26px/1.2 var(--fc-front-head);margin:0}
.fc-woodcut .fc-foot p{margin:8px 0}
.fc-woodcut .fc-foot .fc-foot-region{opacity:1;color:#DDD2C0;font-size:14px}
.fc-woodcut .fc-fire-wrap{max-width:1120px}
.fc-woodcut .fc-fire{border-radius:3px;box-shadow:none}
.fc-woodcut .fc-fire-title{font-family:var(--fc-front-head)}
.fc-woodcut .fc-preview-note{background:#E9E0D0;color:#453B30;text-align:center;padding:8px 16px;font-size:12px;line-height:1.5}
.fc-woodcut .fc-invitation-note{background:#E9E0D0;margin-bottom:40px;border-left:3px solid var(--fc-front-accent)}
.fc-woodcut .fc-invitation-note h2{font-size:34px}
.fc-woodcut .fc-invitation-note p{max-width:70ch}
.fc-skip{position:absolute;left:16px;top:-100px;z-index:20;padding:12px;background:#FFFDF9;color:#29231D}
.fc-skip:focus{top:10px}
@media(max-width:800px){
 .fc-woodcut .fc-bar{align-items:flex-start;flex-direction:column;gap:14px;padding:20px 24px}
 .fc-woodcut .fc-welcome{grid-template-columns:1fr 1fr;gap:0 28px;padding-top:36px;padding-bottom:32px}
 .fc-woodcut .fc-welcome-art img{max-height:340px}
 .fc-woodcut .fc-welcome h1{font-size:60px}
 .fc-woodcut .fc-picks{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
 .fc-woodcut .fc-bar{padding:18px 20px 14px}
 .fc-woodcut .fc-wordmark{font-size:26px}
 .fc-woodcut .fc-bar nav{gap:5px 17px;width:100%;font-size:15px}
 .fc-woodcut .fc-bar nav a{min-height:40px}
 .fc-woodcut .fc-today-in{padding:30px 20px}
 .fc-woodcut .fc-welcome{grid-template-columns:1fr;gap:4px}
 .fc-woodcut .fc-welcome h1{font-size:62px;margin-bottom:18px}
 .fc-woodcut .fc-welcome .fc-eyebrow{font-size:11px;margin-bottom:18px}
 /* the phone gets the square campfire, whole, instead of the wide one with both outer chairs cropped off */
 .fc-woodcut .fc-welcome-art{height:auto;margin:6px auto 0;max-width:300px;justify-content:center}
 .fc-woodcut .fc-welcome-art img{height:auto;width:100%;max-height:300px;object-fit:contain;object-position:center}
 .fc-woodcut .fc-welcome .fc-welcome-small{margin-top:18px}
 .fc-woodcut .fc-picks{grid-template-columns:minmax(0,1fr);gap:28px}
 .fc-woodcut .fc-pick h3,.fc-woodcut .fc-pick--hero h3{font-size:29px}
 .fc-woodcut .fc-sec-head{align-items:flex-start;gap:8px}
 .fc-woodcut .fc-events a{grid-template-columns:minmax(0,1fr);gap:7px}
 .fc-woodcut .fc-ev-when{grid-row:auto}
 .fc-woodcut .fc-participate{grid-template-columns:1fr;gap:12px}
 .fc-woodcut .fc-participate h2 br{display:none}
 .fc-woodcut .fc-foot-in{flex-direction:column;gap:18px}
}

.fc-woodcut .fc-fire-card{border-radius:3px}
.fc-woodcut .fc-fire--lit .fc-btn--ghost{color:var(--fc-paper);border-color:var(--fc-gold)}
.fc-woodcut dialog{max-width:520px;width:calc(100% - 32px);padding:28px;border:1px solid #61564A;background:#F7F1E6;color:#29231D}
.fc-woodcut dialog::backdrop{background:rgba(30,26,22,.5)}

/* ---------------------------------------------------------------- the board (2026-09-15)
   Chet's layout, 04-assets/mockups/ (Paper and Ink). Board-only classes so the woodcut/today
   overrides above never leak in — this page uses the plain .fc-today-hero/.fc-today-in shell. */
.fc-board-eyebrow{font-family:var(--fc-font-head);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fc-ember);margin:0 0 6px}
.fc-board-hero p{opacity:1;color:var(--fc-paper-2)}
.fc-board-tabs{display:flex;flex-wrap:wrap;gap:6px;padding-top:16px;padding-bottom:4px}
.fc-board-tabs a{padding:8px 14px;border-radius:999px;font-family:var(--fc-font-head);font-size:14px;
  font-weight:700;text-decoration:none;color:var(--fc-ink-2);border:1px solid transparent}
.fc-board-tabs a[aria-selected="true"]{background:var(--fc-ember);color:#FFFDF9}
.fc-board-tabs a[aria-selected="false"]:hover{border-color:var(--fc-line)}

/* the board's surface — visual pass 2026-09-16, ported from Chet's board-visual-revision (Dave
   approved 2026-09-16; see 04-assets/mockups/board-visual-revision/, previews board-{paper|ink}-
   390.png, note FC-board-visual-revision-note-2026-09-16.md). Full-bleed like .fc-today-hero
   above it; .fc-board-list inside stays a plain .fc-today-in-width column, same as before — only
   the background and the posters on it changed. Brand colors (ember/gold/paper/ink) stay the
   live tokens; the wood-grain/cork recipe below is texture only, not brand palette, so it's
   written as its own values the same way the fridge-door and shelf-plank textures are. */
.fc-board-surface{position:relative;padding:22px 0 26px;
  background-color:#b98357;
  background-image:radial-gradient(circle at 17% 13%,#7d5137 0 1px,transparent 1.4px),
    radial-gradient(circle at 72% 60%,#d4a47a 0 1px,transparent 1.2px),
    repeating-linear-gradient(7deg,transparent 0 8px,rgba(91,56,34,.08) 9px 10px),
    linear-gradient(100deg,#b77b50,#c9986c 47%,#a96f4d);
  background-size:17px 19px,23px 27px,auto,auto;
  border-top:7px solid #765039;border-bottom:7px solid #765039;
  box-shadow:inset 0 0 0 3px #d0a174,inset 0 0 28px rgba(77,42,31,.4)}
.fc-board-label{display:flex;justify-content:space-between;margin:0 0 28px;color:#fff6e8;
  font-family:var(--fc-font-head);font-size:10px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;text-shadow:0 1px 2px rgba(62,38,29,.55)}
.fc-board-list{display:block;padding-top:0}
.fc-board-surface .fc-wall-empty{background:rgba(255,248,233,.92);color:#4a382c;padding:14px 16px;
  text-align:center;box-shadow:2px 5px 9px rgba(60,30,24,.28)}

/* one poster: a separate tacked-up piece, not a card in a list. Cream stays cream in both themes
   on purpose (Chet's note: "posters stay legible cream paper on the darker board rather than
   turning the woodcuts into cutouts") — only .fc-board-surface above darkens for Ink. */
.fc-poster{position:relative;width:92%;margin:0 auto 26px;color:var(--fc-ink);
  background-color:#fffaf0;
  background-image:radial-gradient(rgba(79,53,32,.06) .7px,transparent .8px),
    linear-gradient(105deg,#fffaf0,#f5ead6);
  background-size:7px 7px,auto;
  box-shadow:2px 7px 12px rgba(60,30,24,.42),-1px 2px 2px rgba(60,30,24,.22);
  clip-path:polygon(.6% 0%,99.4% .8%,100% 99%,.3% 100%);
  transform:rotate(.6deg);
  padding:17px 18px 14px;overflow-wrap:anywhere}
.fc-poster::after{content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid rgba(74,49,30,.14);clip-path:inherit}
.fc-poster:not(.fc-poster--pin):nth-of-type(3n+2){clip-path:polygon(0% .6%,99.7% 0%,99.2% 99.4%,.5% 100%);transform:rotate(-.9deg)}
.fc-poster:not(.fc-poster--pin):nth-of-type(3n){clip-path:polygon(1% 0%,100% .5%,99.5% 99.6%,0% 99.2%);transform:rotate(.35deg)}
.fc-poster--pin{width:94%;padding:19px 18px 14px;border:2px solid var(--fc-ember);
  transform:rotate(-.5deg);clip-path:polygon(.4% 1.5%,99.2% 0,100% 97.5%,1.1% 100%)}
.fc-poster--pin .fc-poster-title{padding-right:34px}
.fc-poster-link{display:block;color:inherit;text-decoration:none}
.fc-poster-kicker{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--fc-font-head);
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fc-ember)}
.fc-poster-title{font-size:21px;font-weight:800;margin:0 0 6px;line-height:1.2}
.fc-poster-body{margin:0;font-size:15px;line-height:1.5;color:var(--fc-ink-2)}
.fc-poster-meta{margin-top:12px;padding-top:10px;border-top:1px solid rgba(74,49,30,.18);
  font-family:var(--fc-font-head);font-size:13px;color:#6c6257}
.fc-poster-cal{display:inline-block;margin-top:8px;font-family:var(--fc-font-head);font-weight:700;
  font-size:14px;color:var(--fc-ember);text-decoration:none}
.fc-poster-cal:hover{text-decoration:underline}

/* a picture-bearing poster leads with the picture — large, full width, not a thumbnail after the
   kicker. fc_poster_image() (board.php) still decides whether there is one at all and where it
   comes from; this only changes where it sits and how big. */
.fc-poster--picture{width:96%;padding:10px 10px 15px;clip-path:polygon(1% 0,99.5% .8%,98.8% 99.3%,0 98.4%)}
.fc-poster-art{display:block;position:relative;margin:0 0 11px;border:1px solid #5f4734;
  overflow:hidden;background:#e9dfca;border-radius:0}
.fc-poster-art img{display:block;width:100%;height:182px;object-fit:cover;filter:sepia(.08) contrast(1.04)}
.fc-poster-cap{position:absolute;right:7px;bottom:6px;padding:4px 8px;background:rgba(255,248,233,.92);
  color:#4a382c;font:700 10px var(--fc-font-body);letter-spacing:.03em;transform:rotate(-1deg)}

/* the tack/magnet — reuses the exact fc-magnet-* assets the fridge already serves (fc_fridge(),
   render.php), so this is the same brand-bucket convention, not a new one. */
.fc-tack{position:absolute;z-index:3;object-fit:contain;pointer-events:none;
  filter:drop-shadow(1px 3px 2px rgba(58,33,29,.4))}
.fc-tack--cardinal{width:46px;height:52px;right:11px;top:-24px;transform:rotate(6deg)}
.fc-tack--round{width:32px;height:32px;left:calc(50% - 16px);top:-15px}
.fc-tack--square{width:30px;height:30px;right:27px;top:-14px;transform:rotate(5deg)}
.fc-tack--stamp{width:38px;height:38px;right:23px;top:-16px;transform:rotate(7deg)}

.fc-board-older{display:block;width:91%;margin:6px auto 2px;padding:14px;
  background:rgba(255,248,233,.92);border:1px solid #5e4028;
  font-family:var(--fc-font-head);font-weight:700;color:var(--fc-ember);
  text-decoration:none;transform:rotate(-.25deg);box-shadow:2px 5px 9px rgba(60,30,24,.32)}
.fc-board-add{padding-top:24px;padding-bottom:8px}

.fc-poster-by{margin:18px 0 4px;font-family:var(--fc-font-head);font-size:14px}
.fc-poster-by a{color:var(--fc-ember);text-decoration:none;font-weight:700}
.fc-report{margin-top:22px}
.fc-report a{color:var(--fc-smoke);font-size:14px;text-decoration:underline}
.fc-report-form{margin-top:8px;display:grid;gap:8px;max-width:420px}
.fc-report-form label{display:grid;gap:4px;font-size:14px}
.fc-report-form textarea,.fc-report-form select{border:1px solid var(--fc-line);border-radius:var(--fc-radius-sm);padding:8px 10px;
  font:inherit;resize:vertical;min-height:64px}
.fc-report-form select{min-height:auto}
.fc-report-form .fc-row{display:flex;align-items:center;gap:14px}
.fc-btn--small{padding:7px 14px;font-size:14px}
.fc-report-done{margin-top:8px;font-family:var(--fc-font-head);font-size:14px;color:var(--fc-moss)}
@media (max-width:420px){
  .fc-board-hero h1{font-size:34px}
  .fc-poster{width:94%;padding:14px 15px 12px}
  .fc-poster--picture{padding:9px 9px 13px}
  .fc-poster-title{font-size:19px}
  .fc-poster-art img{height:160px}
  .fc-board-tabs{gap:5px}
  .fc-board-tabs a{padding:7px 11px;font-size:13px}
}