/* The Insulin Resistance: the one stylesheet (written by build/build_site.py from the approved mockups). */
/* The Insulin Resistance, site tokens (Home mockup r3).
   Brand system: IR brand guide v3 round 3 + decision log (palette 10/24, type 10/24, loud word 10/25).
   Names follow the starting code (projects/insulinresistance-site/styles.css) so the build is a port.
   Method only from .claude_design_dna.md (4px space scale, measure, contrast). */

/* ---- Fonts (self-hosted; licenses beside them in fonts/) ---- */
@font-face { font-family: "IR Text"; src: url("/fonts/IMFellEnglish-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* Fell's 1 reads as I: digits come from EB Garamond (guide p18) */
@font-face { font-family: "IR Text"; src: url("/fonts/EBGaramond-digits.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0030-0039; }
@font-face { font-family: "IR Caps"; src: url("/fonts/IMFellEnglishSC-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
/* digits in small-caps lines: EB Garamond, scaled to sit at small-cap height */
@font-face { font-family: "IR Caps"; src: url("/fonts/EBGaramond-digits.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0030-0039; size-adjust: 76%; }
@font-face { font-family: "IR Loud"; src: url("/fonts/Ultra-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IR Typed"; src: url("/fonts/CourierPrime-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IR Typed"; src: url("/fonts/CourierPrime-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* neutrals: the base */
  --paper: #eeeadf;
  --ink: #1a1916;
  /* house color: menu, bands, links */
  /* deep orange: hand marks only, never text, never a surface */
  --deep-orange: #e8570f;
  /* mint: fill only (bottom-band variant 3) */
  --mint: #82d8d5;
  /* the five label colors: only on their own tags */
  --label-history: #9d6cff;
  --label-evidence: #17a673;
  --label-toolkit: #284aa6;
  --label-lived: #ff48b0;
  --label-position: #1a1916;

  --font-text: "IR Text", Georgia, "Times New Roman", serif;
  --font-caps: "IR Caps", Georgia, serif;          /* real small caps, lowercase input */
  --font-loud: "IR Loud", Georgia, serif;          /* one loud word or figure per screen */
  --font-typed: "IR Typed", "Courier New", ui-monospace, monospace;

  /* type: Fell has a small x-height, so its text size runs a step above a sans */
  --fs-typed-xs: 0.75rem;   /* image credits */
  --fs-typed-sm: 0.875rem;  /* footer, tile meta */
  --fs-typed: 1rem;         /* typed lines */
  --fs-caps: 1.125rem;      /* nav, small-caps kickers */
  --fs-text: 1.25rem;       /* sentences */
  --fs-lead: 1.5rem;        /* founder line */
  --fs-hero-loud: 2.75rem;  /* the hero's Ultra loud word, phone */
  --fs-loud: 3.5rem;        /* Ultra figure, phone */

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --measure: 34em;          /* Fell at 22px: about 62 characters */
  --container: 75rem;
  --gutter: var(--space-4);
  --rule-strong: 2px;       /* the handbill double rule: 2px + 1px, 4px apart */
  --rule-fine: 1px;
}

@media (min-width: 48rem) {
  :root {
    --fs-text: 1.375rem;
    --fs-lead: 1.75rem;
    --fs-hero-loud: 4rem;
    --fs-loud: 4.5rem;
    --gutter: var(--space-7);
  }
}

/* About mockup r1 (2026-10-26) uses this file from days-r7 unchanged, plus section 6 at the end.
   The Insulin Resistance, Home mockup r6 (Andrew 10/26 on r5: one steady menu bar, no orange slip, a shorter pink block beside wider About words, drawn LinkedIn and Instagram icons). Built on r4 (Andrew 10/26 on r3: some black back, the brand's mic leads rather than an archival face, the mic composed on its pink, tears more like real paper).
   Order (DNA §7): primitives, components, composites, page. Tokens live in tokens.css.
 */

/* =========================== 1. Primitives =========================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  line-height: 1.5;
  font-kerning: normal;
}
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }

a { color: var(--ink); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.on-dark :focus-visible { outline-color: var(--paper); }

/* The site grid. Phone/tablet: one content column between gutters, with named full-bleed edges.
   Laptop (section 4): 12 columns with spans. */
.grid {
  display: grid;
  grid-template-columns: [full-start] var(--gutter) [content-start] minmax(0, 1fr) [content-end] var(--gutter) [full-end];
}
.grid > * { grid-column: content; }

/* Type roles (guide p18) */
.caps {           /* Fell SC: real small caps from lowercase input, tracked open */
  font-family: var(--font-caps);
  font-size: var(--fs-caps);
  text-transform: lowercase;
  letter-spacing: 0.24em;
  line-height: 1.2;
}
.typed { font-family: var(--font-typed); font-size: var(--fs-typed); letter-spacing: 0.01em; line-height: 1.5; }
.loud { font-family: var(--font-loud); font-weight: 400; line-height: 1; }

/* =========================== 2. Micro-components =========================== */

/* The handbill frame: 2px rule, 1px rule 4px inside it (guide: double-rule frame) */
.frame { position: relative; border: var(--rule-strong) solid var(--ink); }
.frame::after { content: ""; position: absolute; inset: var(--space-1); border: var(--rule-fine) solid var(--ink); pointer-events: none; }

/* Full-width double rule (2px over 1px, 4px apart): handbill furniture */
.double-rule { height: var(--space-2); border-block: var(--rule-strong) solid currentColor; border-block-end-width: var(--rule-fine); }

/* Hand marks: the posts' own generators, deep orange */
.hit { position: relative; display: inline-block; white-space: nowrap; }
.hit .mk {
  position: absolute; left: -2%; width: 104%; top: 100%; height: 0.36em;
  overflow: visible; fill: none; stroke: var(--deep-orange); stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.hit .mk--circle { left: -24%; top: -18%; width: 148%; height: 136%; }

/* Typed link with an arrow: the one way the page says "go there" */
.go { font-family: var(--font-typed); font-size: var(--fs-typed); letter-spacing: 0.01em; text-underline-offset: 0.3em; display: inline-flex; align-items: center; min-height: 2.75rem; }

/* =========================== 3. Composites =========================== */

/* ---- Menu bar ---- */
.menubar { position: sticky; top: 0; z-index: 20; background: var(--paper); align-items: center; padding-block: var(--space-5) 0; row-gap: var(--space-4); }   /* r7 (Andrew: menu "looks a little cramped"): more air above and below the mark. Stays on screen while the page scrolls */
/* r7: the header's height, so anchors land under it (Andrew: the menu always reachable, "like the abcdynamics page"; behavior only) */
:root { --head-h: 6rem; }   /* phone and tablet: 96px = 24 + 48 mark + 16 + 8 rule */
html { scroll-padding-top: var(--head-h); }
.menubar__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.brand { display: flex; align-items: center; min-width: 2.75rem; min-height: 2.75rem; line-height: 0; }
.brand .lockup { display: none; }
.brand .mark { width: auto; height: var(--space-7); }   /* the mark alone, 48px tall (min 32) */
.nav { display: none; }
.nav ul { display: flex; align-items: baseline; gap: var(--space-6); }
.nav a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.nav .follow { display: flex; align-items: center; gap: var(--space-4); }
.ico { width: 1.15em; height: 1.15em; flex: none; }
.nav .follow a, .menu-panel a { gap: var(--space-2); }
.nav .follow-label { color: var(--ink); }
/* Nav digits: the small-caps lines take EB Garamond digits (Fell's 1 reads as I), which set lighter than Fell's inky caps;
   a hairline stroke in the text's own color brings the "30" up to the letters' weight. */
.caps .fig { -webkit-text-stroke: 0.035em currentColor; paint-order: stroke fill; }

.menu-btn {
  font-family: var(--font-caps); font-size: var(--fs-caps); text-transform: lowercase; letter-spacing: 0.24em;
  color: var(--paper); background: var(--ink); border: 0; min-height: 2.75rem; padding: 0 var(--space-4);
  cursor: pointer;
}
.menubar-rule { grid-column: full; }

/* Phone menu: a paper sheet that drops over the page from under the header rule, same face and colors as the laptop nav */
.menu-panel { display: none; }
.menubar.is-open .menu-panel {
  grid-column: full; display: block; position: absolute; z-index: 10; top: 100%; left: 0; right: 0;
  min-height: 100vh;   /* the sheet covers everything below the header: no half-cut content under it */
  background: var(--paper); color: var(--ink);
  padding: var(--space-5) var(--gutter) var(--space-6);
}
.menu-panel ul { display: grid; gap: var(--space-1); }
.menu-panel a { color: var(--ink); text-decoration: none; display: flex; align-items: center; min-height: 2.75rem; }
.menu-panel .follow-label { color: var(--ink); padding-block: var(--space-4) var(--space-1); }

/* ---- Hero: the handbill ---- */
.bill {
  display: grid; justify-items: center; text-align: center; gap: var(--space-5);
  padding: var(--space-7) var(--space-4) var(--space-6);
  margin-block: var(--space-6);
}
.bill h1 { display: grid; justify-items: center; gap: var(--space-3); font-weight: 400; }
.bill h1 .caps { font-size: var(--fs-caps); letter-spacing: 0.3em; margin-inline-end: -0.3em; text-wrap: balance; line-height: 1.5; }
.bill h1 .loud { font-size: var(--fs-hero-loud); letter-spacing: -0.005em; margin-block-end: var(--space-5); }
.bill .intro { max-width: var(--measure); text-wrap: pretty; }
.bill .dateline .nb { white-space: nowrap; }
.bill .dateline { display: inline-flex; align-items: flex-end; flex-wrap: wrap; justify-content: center; column-gap: var(--space-2); min-height: 2.75rem; font-size: var(--fs-typed-sm); color: var(--ink); text-decoration: none; padding-block-end: var(--space-1); border-block-end: var(--rule-fine) solid var(--ink); }
/* ---- Torn blocks: ::after is the flat fill, ::before a thin lighter paper-core lip just outside the tear (tears.css).
   No grit or speckle on any fill. --fiber is the system-v1 posts' torn-paper core. ---- */
:root { --fiber: #f7f5ef; }
.torn { position: relative; isolation: isolate; }
.torn::before, .torn::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.torn::before { background: var(--fiber); }
.torn::after { background: var(--fill); }
.torn--img::after { display: none; }            /* the picture itself is the fill */
.torn--img > .fill { display: block; width: 100%; height: auto; }
.tear-mint { --fill: var(--mint); }             /* mint: fill only */
.tear-foot { --fill: var(--ink); }
.tear-pink { --fill: var(--label-lived); }      /* Lived experience */
main { overflow-x: clip; }                       /* bleeds stop at the page edge: no sideways scroll */

/* ---- Hero (r5, Andrew): a black field from the menu bar's rule down; the grille crop flush to the left page edge;
   the handbill card on the black at right, paper inside its double-rule frame. Colorway: paper-on-ink, because the
   crop's own ink ground then becomes the field (ink-on-paper would read as a second paper card on the black). ---- */
.hero { background: var(--ink); padding-block: 0 var(--space-7); }
.grille-block { grid-column: full; grid-row: 1; position: relative; height: 12.5rem; clip-path: inset(0 0 calc(var(--space-7) + var(--space-2)) 0); }   /* phone: capped at 200px tall, above the card; the strip the card overlaps is clipped so no knob peeks out beside it */
.grille-block > .fill { position: absolute; inset: var(--space-4) auto auto 0; width: auto; height: 100%; max-width: none; }   /* phone: dropped 16px so the knob sits behind the card; the clip meets the card's paper margin exactly */   /* the head bleeds off the left and bottom edges; its own ink ground merges with the field */
.bill { position: relative; z-index: 2; background: var(--paper); color: var(--ink); align-content: center; grid-row: 2; margin-block: calc(-1 * var(--space-7)) 0; }   /* phone: the card overlaps the grille's foot */
.hero .bill a { color: var(--ink); }
.hero .bill { box-shadow: 0 0 0 var(--space-2) var(--paper); }   /* a paper margin outside the double rule, so both rules read on the black */

/* ---- 30 Days of Diabetes: the circled 30 sits across the mint panel's torn top edge ---- */
.series__head { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--space-3) var(--space-6); text-align: center; font-weight: 400; }
.series__head .loud { font-size: var(--fs-series-loud); }
.series__head .caps { font-size: var(--fs-lead); letter-spacing: 0.3em; margin-inline-end: -0.3em; }
/* r7 (Andrew: "move the blue up so the 30 days is on the blue"): the whole heading sits on the mint; the panel's top padding
   clears the 30's hand ring (it rises about 18% of the figure's size above it) with mint to spare */
.series { padding-block: var(--space-8); --fs-series-loud: calc(var(--fs-hero-loud) * 1.35); }
.panel { padding: calc(var(--space-7) + 0.2 * var(--fs-series-loud)) var(--space-4) var(--space-7); display: grid; row-gap: var(--space-7); }
.panel a { color: var(--ink); }

/* State A: the series seal on a paper bill, inside a narrower mint panel */
.state-a .panel { justify-self: center; width: min(100%, 40rem); }
.soon { background: var(--paper); color: var(--ink); display: grid; justify-items: center; text-align: center; gap: var(--space-5); padding: var(--space-7) var(--space-5); justify-self: center; width: min(100%, 24rem); }
.soon .seal { width: 17rem; max-width: 100%; height: auto; }   /* 272px box = 227px seal art (art is 83.5% of the file's box); min 192 */
.soon p { font-size: var(--fs-lead); line-height: 1.3; }

/* State B: the posts, straight on the mint. Real equal items, so auto-fit is right here (DNA §5). */
.posts { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.post a { display: grid; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.post img, .post .stand { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.post .stand { background: var(--paper); display: grid; place-items: center; }
.post .stand img { width: min(17rem, 92%); aspect-ratio: auto; height: auto; }   /* box 272px max; seal art = 83.5% of the box */
/* r7 (Andrew: no line around things on hover): a post lifts 3px on hover; keyboard focus keeps its ring via :focus-visible */
.post img, .post .stand { transition: translate 120ms ease; }
.post a:hover img, .post a:hover .stand { translate: 0 -3px; }
.post .when { font-family: var(--font-typed); font-size: var(--fs-typed-sm); line-height: 1.5; letter-spacing: 0.02em; }
.series__all { justify-self: end; }

/* ---- About, with the Lived experience moment: the mic composed inside its own pink block ---- */
.closing { padding-block: var(--space-6) var(--space-9); row-gap: var(--space-6); }
/* r6: the pink block is landscape and short; the mic is whole and centered in it, scaled to the block's height */
/* r6b (critic): the mic's ring spans about three quarters of the block's height; the stand runs past the bottom torn edge onto the paper.
   The ring is the top 66% of the cut-out, so the picture is 113% of the block's height, starting 12% down. */
/* r7c, option B "Snug" (Andrew's pick from pink-mic-options): the pink trimmed close around the mic, 300:440 as on the sheet;
   the mic fills it and its stand rests on the bottom torn edge. Phone: the same shape at 368px tall, centered. */
.lived { position: relative; justify-self: center; width: auto; height: 23rem; aspect-ratio: 300 / 440; margin-block-end: var(--space-2); }
.lived .cutout { position: absolute; left: 50%; bottom: var(--space-2); height: 92%; width: auto; max-width: none; translate: -50% 0; }   /* r7b: the whole mic inside the pink, upright and centered; the stand's cut end rests on the bottom torn edge so it reads as running out of frame */
.words { display: grid; gap: var(--space-7); align-content: start; }
.about, .follow-block { display: grid; gap: var(--space-3); align-content: start; }
.closing h2.caps { display: flex; align-items: center; min-height: 2.75rem; }
.about .founder { max-width: var(--measure); text-wrap: pretty; }
.about .founder + .founder { margin-block-start: calc(-1 * var(--space-1)); }   /* the closing sentence on its own line, kept close to the first */
/* Follow: two matching tags, a fine ink rule around an icon and a name, all in the caps face */
.social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* r6b: the posts' label-tag shape (clipped corners, inner rule), reversed to an ink outline on paper.
   The link itself is paper (so its text measurably sits on paper); behind its content: ::before the ink shape,
   ::after the paper fill 1px inside it, .tag-rule the inner rule 4px inside. */
.social a { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-5) 0 var(--space-4); color: var(--ink); text-decoration: none; background: var(--paper);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px); }
.social a::before, .social a::after, .social .tag-rule { content: ""; position: absolute; pointer-events: none; }
.social a::before { inset: 0; z-index: -3; background: var(--ink); }
.social a::after { inset: 1px; z-index: -2; background: var(--paper);
  clip-path: polygon(7.4px 0, calc(100% - 7.4px) 0, 100% 7.4px, 100% calc(100% - 7.4px), calc(100% - 7.4px) 100%, 7.4px 100%, 0 calc(100% - 7.4px), 0 7.4px); }
.social .tag-rule { inset: 4px; z-index: -1; border: 1px solid var(--ink); opacity: .75;
  clip-path: polygon(5.7px 0, calc(100% - 5.7px) 0, 100% 5.7px, 100% calc(100% - 5.7px), calc(100% - 5.7px) 100%, 5.7px 100%, 0 calc(100% - 5.7px), 0 5.7px); }
.social a, .social a::after, .social .tag-rule { transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease; }
.social a:hover { color: var(--paper); }                      /* hover: the tag fills with ink, paper type */
.social a:hover::after { background: var(--ink); }
.social a:hover .tag-rule { border-color: var(--paper); }
.social a:focus-visible { outline: none; }                    /* the tag clips its own edges, so the keyboard ring is drawn on its list item */
.social li:has(a:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }
.footer { color: var(--paper); padding-block: var(--space-8) var(--space-7); }   /* black moment 2: an ink band torn along its top */
.footer__in { display: grid; gap: var(--space-2); background: var(--ink); }   /* same ink as the torn band; gives the text a measurable ground */
.footer p { font-family: var(--font-typed); font-size: var(--fs-typed-sm); line-height: 1.5; }
.footer .credits { font-size: var(--fs-typed-xs); max-width: 72ch; }

/* =========================== 4. Page: tablet and laptop =========================== */
@media (min-width: 48rem) {
  .bill .dateline { font-size: var(--fs-typed); }
  .bill { padding-inline: var(--space-6); }
  .bill h1 .caps { font-size: var(--fs-text); }
}

@media (min-width: 64rem) {
  .grid {
    grid-template-columns:
      [full-start] minmax(var(--space-4), 1fr)
      [content-start] repeat(12, minmax(0, calc((var(--container) - 11 * var(--space-6)) / 12)))
      [content-end] minmax(var(--space-4), 1fr) [full-end];
    column-gap: var(--space-6);
  }
  /* r6: one bar, the same at the top and when scrolled. No script, no transition. The lockup's art box at its
     356px minimum (112px tall); its 2E clear space (22px) is kept below it by the gap to the rule. */
  /* r7 (Andrew: "the menu is not stuck so it can always be clicked"): one bar, sticky from page load, never changing size.
     No transition on laptop and tablet. The lockup's art box at its 356px minimum (112px tall) with tight padding: 128px in all. */
  :root { --head-h: 10.5rem; }   /* 168px: 24 + the 112px lockup + 24 + the 8px double rule (Andrew 10/26: "more space" above and below the logo) */
  .menubar { padding-block: var(--space-5) 0; row-gap: var(--space-5); }
  .brand .mark { display: none; }
  .brand .lockup { display: block; width: 22.25rem; height: auto; aspect-ratio: 1268 / 400; }
  .menu-btn, .menu-panel, .menubar.is-open .menu-panel { display: none; }
  .nav { display: block; }

  /* Hero: the grille from the left page edge across 8 columns (its right side runs under the card);
     the card on columns 7-12, sitting on the black */
  .hero { padding-block: 0; }
  .hero .bill { box-shadow: 0 0 0 var(--space-3) var(--paper); }
  /* r7 (Andrew: "the black on top of the page looks disjointed"): the grille is clipped to the band, so the black is one field
     with one straight bottom edge; the picture sits flush with the block again (the 16px drop is for phones only) */
  .grille-block { grid-column: full-start / 8; grid-row: 1; height: auto; align-self: stretch; clip-path: inset(0); }
  .grille-block > .fill { inset: 0 auto 0 0; }
  .bill { grid-column: 8 / content-end; grid-row: 1; margin-block: var(--space-8); padding: var(--space-6) var(--space-7); gap: var(--space-4); }

  .posts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-6); }
  .panel { padding-inline: var(--space-7); }
  .panel { padding-block-start: 5rem; }   /* 80px: about 48px of mint above the 30's ring, past the deepest tear */

  /* About row (r6, Andrew: "looks like two weird columns"): one composed row. The pink block on columns 1-5,
     the words on 6-12 across a single gutter; tops on one line, the block as tall as the words. */
  .closing { align-items: stretch; }
  .lived { grid-column: content-start / span 5; grid-row: 1; height: 27.5rem; align-self: start; justify-self: center; margin-block-end: 0; }   /* 300 x 440px, centered in columns 1-5 as on the sheet */   /* r7: 440px tall at the same 481px width, near square */
  .closing .words { grid-column: 7 / content-end; grid-row: 1; gap: var(--space-6); padding-block: var(--space-2); }
  .follow-block { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-5); }
}

/* Phones (and phones held sideways): the bar slides away while scrolling down and comes straight back on any scroll up
   (a few lines of script toggle .is-away). Never while the menu is open. Reduced motion: no slide, it just goes and comes. */
@media (max-width: 47.99rem), (max-height: 35.99rem) {
  .menubar { transition: transform 0.25s ease; }
  .menubar.is-away:not(.is-open) { transform: translateY(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .menubar, .post img, .post .stand { transition: none; }
}

/* =========================== 5. Page: 30 Days of Diabetes (days-r2) ===========================
   Structure from A24 (the newest post featured big, its number huge; the rest in ruled week sections) and Instrument
   (a row of filter chips). Everything visible is our own system. */
[hidden] { display: none !important; }

/* the page you are on: ink, with the posts' hand-drawn underline in deep orange (a hand mark, as under "day off.") */
.nav a[aria-current="page"], .menu-panel a[aria-current="page"] { color: var(--ink); position: relative; }
a[aria-current="page"] .mk { position: absolute; left: -2%; width: 104%; bottom: 0.35rem; height: 0.5rem; overflow: visible;
  fill: none; stroke: var(--deep-orange); stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.nav a[aria-current="page"]:hover { text-decoration: none; }

/* ---- The label tag, as on the posts: typed caps on the label's color, clipped corners, inner rule ---- */
.tag { position: relative; display: inline-flex; align-items: center; align-self: start; justify-self: start;
  font-family: var(--font-typed); font-weight: 700; font-size: var(--fs-typed-xs); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--space-2) var(--space-3); white-space: nowrap; background: var(--lb); color: var(--lt);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.tag::after { content: ""; position: absolute; inset: 3px; border: 1px solid currentColor; opacity: .75; pointer-events: none;
  clip-path: polygon(4.5px 0, calc(100% - 4.5px) 0, 100% 4.5px, 100% calc(100% - 4.5px), calc(100% - 4.5px) 100%, 4.5px 100%, 0 calc(100% - 4.5px), 0 4.5px); }
.tag--blank { visibility: hidden; }
.tag--blank::before { content: "x"; }   /* keeps the row height so every cover starts on one line */
.t-history { --lb: var(--label-history); --lt: var(--ink); }
.t-evidence { --lb: var(--label-evidence); --lt: var(--ink); }
.t-toolkit { --lb: var(--label-toolkit); --lt: var(--paper); }
.t-lived { --lb: var(--label-lived); --lt: var(--ink); }
.t-position { --lb: var(--label-position); --lt: var(--paper); }

/* ---- The masthead (r5): anchored to the page grid, not centered. Circled 30 + DAYS OF DIABETES at left, the month in
   Courier at right on the same baseline, then the handbill's full-width double rule. ---- */
.days .series { padding-block: var(--space-4) var(--space-5); }   /* r6: the shorter text gives height back; masthead, mint and control air unchanged */
.band { display: grid; row-gap: var(--space-4); }
.mast { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-6); }
.mast .series__head { justify-content: start; text-align: start; }
.mast .series__head .loud { margin-inline-start: calc(0.37 * var(--fs-series-loud)); }   /* the hand circle hangs 0.37 of the 30 left of its box (measured); this puts the circle, not the figure, on the grid edge */
.band__date { font-size: var(--fs-typed); letter-spacing: 0.08em; }
.mast-rule { color: var(--ink); }   /* the system double rule (2px over 1px), as under the header */

/* ---- The work, on mint as on Home ---- */
.work .panel { padding: var(--space-8) var(--space-4) var(--space-9); row-gap: 0; }   /* r5: a substantial panel, not a strip */
.days .work { padding-block-end: var(--space-7); }

/* ---- The Latest tag: the posts' own label tag, reversed (paper type on ink), pinned at a tilt over the newest cover's
   top-right corner and hanging past its edge. No circle: the covers already carry the hand-drawn circle. ---- */
.days .post a { position: relative; }
.latest { position: absolute; top: calc(-1 * var(--space-3)); right: calc(-1 * var(--space-3)); z-index: 2; rotate: 6deg; pointer-events: none; }
.latest__tag { position: relative; display: block; background: var(--ink); color: var(--paper);
  font-family: var(--font-typed); font-weight: 700; font-size: var(--fs-typed-sm); line-height: 1; letter-spacing: 0.14em; text-transform: uppercase;
  padding: var(--space-3) var(--space-4);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.latest__tag::after { content: ""; position: absolute; inset: 3px; border: 1px solid var(--paper); opacity: .75;
  clip-path: polygon(4.5px 0, calc(100% - 4.5px) 0, 100% 4.5px, 100% calc(100% - 4.5px), calc(100% - 4.5px) 100%, 4.5px 100%, 0 calc(100% - 4.5px), 0 4.5px); }
.post a:hover .latest { translate: 0 -3px; transition: translate 120ms ease; }

/* the seal stand-in: a card in the row, on the covers' own aged paper (the posts' paper-aged ground, cropped to 4:5) */
.days .post .stand { background: var(--paper) url(/assets/posts/paper-aged.jpg) center / cover; box-shadow: none; }

/* ---- Filter chips (Instrument's row) in the tag's own shape: outline + type in the label color; pressed = filled ---- */
.filters { padding-block: 0 var(--space-8); display: flex;   /* r5: clear air so the tilted Latest tag never sits near a control */
  flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); }
.flat { margin-block-start: var(--space-2); }

/* ---- Sort (r4): paired with the label chips but its own voice. A "Sort" spaced-caps label, then two tags in Fell
   (the sentence face, not the chips' typed caps), ink outline only; the pressed one fills with ink. ---- */
.sort { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sort__label { font-size: var(--fs-typed-sm); letter-spacing: 0.3em; margin-inline-end: calc(var(--space-1) - 0.3em); }
/* r4b (critic): one joined two-part toggle in the chips' tag shape and height. The ink outline is the toggle's own fill
   showing through a 1.5px gap; each half is clipped to its outer corners; the pressed half fills with ink. Labels in Fell
   spaced small caps, as in the nav; the label chips stay Courier caps. */
.toggle { display: inline-flex;   /* the ink edge is drawn around both clipped halves by the filter, so no fractional padding */
  filter: drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink)) drop-shadow(0 -1.5px 0 var(--ink)); }
.sorter { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-3); border: 0; cursor: pointer;
  background: var(--paper); color: var(--ink); font-size: var(--fs-caps); letter-spacing: 0.14em; white-space: nowrap; }
@media (min-width: 48rem) { .sorter { letter-spacing: 0.24em; } }
.sorter:first-child { box-shadow: inset -1.5px 0 0 var(--ink); }   /* the joint between the halves */
.sorter:first-child { clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.sorter:last-child { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
.sorter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.sorter:not([aria-pressed="true"]):hover { text-decoration: underline; text-underline-offset: 0.3em; }
.sorter:focus-visible { outline: none; text-decoration: underline; text-underline-offset: 0.3em; }   /* the clip would cut an outline */
.sort:has(.sorter:focus-visible) .toggle-ring { outline: 2px solid var(--ink); outline-offset: 4px; }
.toggle-ring { display: inline-flex; }

/* ---- About (r6, approved option B): one lead paragraph under the masthead's double rule, its left edge on the page grid
   with the circle and the rule. Fell at the lead step (one above the sentence size), ragged right, about 60 characters a line. ---- */
.band__about { max-width: 60ch; font-family: var(--font-text); font-size: var(--fs-lead); line-height: 1.3; text-align: start;   /* 24-28px lead: the DNA line-height law (24px and up: 1.05-1.30); Fell's small x-height keeps 1.3 open */
  text-wrap: pretty; }
.ref-2017 { }   /* placeholder hook: becomes a link when Andrew picks where the 2017 posts live */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
.chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 var(--space-4);
  border: 0; cursor: pointer; background: var(--paper); color: var(--lb);
  font-family: var(--font-typed); font-weight: 700; font-size: var(--fs-typed-sm); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.chip::before, .chip::after, .chip .tag-rule { content: ""; position: absolute; pointer-events: none; }
.chip::before { inset: 0; z-index: -3; background: var(--lb); }   /* the outer edge */
.chip::after { inset: 1.5px; z-index: -2; background: var(--paper);
  clip-path: polygon(5.4px 0, calc(100% - 5.4px) 0, 100% 5.4px, 100% calc(100% - 5.4px), calc(100% - 5.4px) 100%, 5.4px 100%, 0 calc(100% - 5.4px), 0 5.4px); }
.chip .tag-rule { inset: 4px; z-index: -1; border: 1px solid var(--lb);   /* the tag's inner rule, 3px in as on .tag */
  clip-path: polygon(4.5px 0, calc(100% - 4.5px) 0, 100% 4.5px, 100% calc(100% - 4.5px), calc(100% - 4.5px) 100%, 4.5px 100%, 0 calc(100% - 4.5px), 0 4.5px); }
.chip[data-filter="lived"] { color: var(--ink); }   /* pink type on paper is too faint to read; the outline stays pink */
.chip[aria-pressed="true"] { background: var(--lb); color: var(--lt); }
.chip[aria-pressed="true"]::after { background: var(--lb); }
.chip[aria-pressed="true"] .tag-rule { border-color: var(--lt); opacity: .75; }
.chip:not([aria-pressed="true"]):hover::after { inset: 2.5px; }
.chip:focus-visible { outline: none; }
.chips li:has(.chip:focus-visible) { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ---- Week sections (A24's "In theaters" rows): a fine ink rule, the week at left, its dates at right ---- */
.week { padding-block-end: var(--space-7); }
.week:last-child { padding-block-end: var(--space-2); }   /* the panel's own bottom padding closes the last week */
.week__bar { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  border-block-start: var(--rule-fine) solid var(--ink); padding-block-start: var(--space-3); margin-block-end: var(--space-5); }
.week__bar h2 { font-size: var(--fs-lead); font-weight: 400; }
.week__dates { font-family: var(--font-typed); font-size: var(--fs-typed-sm); }
.days .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
.days .post a { gap: var(--space-2); }
.days .post .when { font-size: var(--fs-typed-xs); }
.days .flat .post:first-child:nth-last-child(odd) { grid-column: 1 / -1; }   /* phone, odd count: the newest leads full width, the rest two-up */

.days .closing { padding-block: var(--space-2) var(--space-7); }
.state-a .days .follow-block { justify-self: center; }   /* State A: on the centered panel's axis */
.days .follow-block { row-gap: var(--space-3); }

@media (min-width: 48rem) {
  .days .post .when { font-size: var(--fs-typed-sm); }
  .days .flat .post:first-child:nth-last-child(odd) { grid-column: auto; }
  .latest { right: calc(-1 * var(--space-5)); }
  .days .posts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .days .follow-block { grid-template-columns: auto 1fr; align-items: center; column-gap: var(--space-5); }
}
@media (min-width: 64rem) {
  .days .posts { gap: var(--space-7) var(--space-6); }
}
@media (min-width: 80rem) {
  .days .posts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* r6 critic note: phone lead one notch down so the mint edge reaches the first screen */
@media (max-width: 599px) { .band__about { font-size: 1.375rem; } }

/* =========================== 6. Page: About (about-r1) ===========================
   The name on paper, the person on pink. Masthead in the 30 Days setting (loud word at left on the page grid, full-width
   double rule); the About paragraph as the standfirst under it, flush left, the same lead setting as the series paragraph.
   Then one torn pink block (pink = Lived experience) holding the mark in ink and the founder line set in ink on the pink.
   No orange except the nav's hand underline for the page you are on. ---- */
.aboutpage { --fs-series-loud: calc(var(--fs-hero-loud) * 1.35); }
.aboutpage .intro { padding-block: var(--space-6) var(--space-8); }
/* critic r1: the loud tier is the paragraph's own first sentence, set as Home's hero tiers (spaced caps over one Ultra phrase with
   the hand underline). Ultra at the hero's loud size, a step under the 30, so the phrase's mass stays at or below the 30's. */
.about__head { display: grid; justify-items: start; row-gap: var(--space-3); font-weight: 400; }
.about__head .caps { font-size: var(--fs-lead); letter-spacing: 0.3em; margin-inline-end: -0.3em; }   /* as DAYS OF DIABETES */
.about__head .loud { font-size: var(--fs-hero-loud); letter-spacing: -0.005em; margin-block-end: var(--space-3); }   /* room for the underline */
.aboutpage .mast { min-height: 0; }
.person { padding-block: 0 var(--space-8); }
.pinkblock { display: grid; gap: var(--space-6); justify-items: start; padding: var(--space-8) var(--space-5) var(--space-5); color: var(--ink); }   /* phone: words, then the mic standing on the bottom torn edge (critic r1) */
.pinkblock__mark { width: auto; height: 10rem; order: 2; justify-self: center; }   /* phone: 160px tall (art box), centered under the words */
.pinkblock__words { display: grid; gap: var(--space-3); }
.pinkblock .founder { font-family: var(--font-text); font-size: var(--fs-lead); line-height: 1.3; max-width: 34ch; text-wrap: pretty; }   /* same lead size as the paragraph above: one size of sentence on the page */
.aboutpage .closing { padding-block: 0 var(--space-8); }
@media (max-width: 599px) { .pinkblock .founder { font-size: 1.375rem; } .about__head .loud { font-size: 2.25rem; } }   /* phone: 36px keeps "two meanings." on one line inside 358px (measured about 9 font-sizes wide) */

@media (min-width: 64rem) {
  .aboutpage .intro { padding-block: var(--space-6) var(--space-8); }
  /* the pink spans the 12 columns; inside it the page grid carries on (subgrid): the mark on columns 2-4, the words on 6-11 */
  /* the mark stands on the pink's bottom torn edge (Andrew's 'Snug' pick on Home: the stand resting on the bottom edge); the words sit level with its head */
  .pinkblock { grid-template-columns: subgrid; align-items: center; padding: var(--space-7) 0 var(--space-5); }
  .pinkblock__mark { grid-column: 2 / span 3; grid-row: 1; order: 0; justify-self: center; height: 22rem; align-self: end; }   /* 352px tall, about 195px wide, centered on its 3 columns */
  .pinkblock__words { padding-block-end: var(--space-7); }
  .pinkblock__words { grid-column: 6 / span 6; grid-row: 1; }
  .pinkblock .founder { max-width: none; }
  .aboutpage .closing { padding-block: 0 var(--space-9); }
}

/* ---- Torn edges r2 (written by build/build_site.py; tiles in /assets/tears/). Each torn block holds <span class="tear">:
   ::before = the paper core (white, feathered fibers), ::after = the colored sheet; the span's soft shadow seats the sheet. ---- */
.torn::before, .torn::after { content: none; }
.tear-pinkabout { --fill: var(--label-lived); }
.torn > .tear { position: absolute; inset: 0; grid-area: auto; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 1.5px 1.5px rgb(26 25 22 / .2)) drop-shadow(0 .5px .4px rgb(26 25 22 / .16)); }
.torn > .tear::before, .torn > .tear::after { content: ""; position: absolute; inset: 0; mask-composite: intersect; }
.torn > .tear::before { background: var(--fiber); }
.torn > .tear::after { background: var(--fill); }
.tear-mint > .tear::before { mask-image: url(/assets/tears/t16-core.svg), url(/assets/tears/r9-core.svg), url(/assets/tears/b10-core.svg), url(/assets/tears/l9-core.svg); mask-size: 1000px 100%, 100% 640px, 1000px 100%, 100% 640px; mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; mask-position: 0px 0, 0 -90px, 0px 0, 0 -500px; }
.tear-mint > .tear::after { mask-image: url(/assets/tears/t16-fill.svg), url(/assets/tears/r9-fill.svg), url(/assets/tears/b10-fill.svg), url(/assets/tears/l9-fill.svg); mask-size: 1000px 100%, 100% 640px, 1000px 100%, 100% 640px; mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; mask-position: 0px 0, 0 -90px, 0px 0, 0 -500px; }
.tear-foot > .tear::before { mask-image: url(/assets/tears/t12-core.svg); mask-size: 1000px 100%; mask-repeat: repeat-x; mask-position: -370px 0; }
.tear-foot > .tear::after { mask-image: url(/assets/tears/t12-fill.svg); mask-size: 1000px 100%; mask-repeat: repeat-x; mask-position: -370px 0; }
.tear-pink > .tear::before { mask-image: url(/assets/tears/t10-core.svg), url(/assets/tears/r9-core.svg), url(/assets/tears/b11-core.svg), url(/assets/tears/l9-core.svg); mask-size: 1000px 100%, 100% 640px, 1000px 100%, 100% 640px; mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; mask-position: 0px 0, 0 -210px, 0px 0, 0 -40px; }
.tear-pink > .tear::after { mask-image: url(/assets/tears/t10-fill.svg), url(/assets/tears/r9-fill.svg), url(/assets/tears/b11-fill.svg), url(/assets/tears/l9-fill.svg); mask-size: 1000px 100%, 100% 640px, 1000px 100%, 100% 640px; mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; mask-position: 0px 0, 0 -210px, 0px 0, 0 -40px; }
.tear-pinkabout > .tear::before { mask-image: url(/assets/tears/t12-core.svg), url(/assets/tears/r9-core.svg), url(/assets/tears/b11-core.svg), url(/assets/tears/l9-core.svg); mask-size: 1000px 100%, 100% 640px, 1000px 100%, 100% 640px; mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; mask-position: -620px 0, 0 -455px, -530px 0, 0 -330px; }
.tear-pinkabout > .tear::after { mask-image: url(/assets/tears/t12-fill.svg), url(/assets/tears/r9-fill.svg), url(/assets/tears/b11-fill.svg), url(/assets/tears/l9-fill.svg); mask-size: 1000px 100%, 100% 640px, 1000px 100%, 100% 640px; mask-repeat: repeat-x, repeat-y, repeat-x, repeat-y; mask-position: -620px 0, 0 -455px, -530px 0, 0 -330px; }
.tear-hero > .tear::before { mask-image: url(/assets/tears/b11-core.svg); mask-size: 1000px 100%; mask-repeat: repeat-x; mask-position: -260px 0; }
.tear-hero > .tear::after { mask-image: url(/assets/tears/b11-fill.svg); mask-size: 1000px 100%; mask-repeat: repeat-x; mask-position: -260px 0; }

/* =========================== 7. Site build additions ===========================
   Chips take their colors from classes, not inline styles (the site's CSP allows no inline style). */
.chip.t-all { --lb: var(--ink); --lt: var(--paper); }
/* 404: the 30 Days masthead setting with the figure in place of the series name */
/* 404 (critic fix): the Follow row as on every page; the 404 block centered in the paper between the header and the Follow row */
.notfound { display: flex; flex-direction: column; }
.notfound .intro { flex: 1 0 auto; align-content: center; padding-block: var(--space-8); }
.notfound .closing { padding-block: 0 var(--space-8); }
.notfound { --fs-series-loud: calc(var(--fs-hero-loud) * 1.35); }
.nf__head { font-weight: 400; }
.mast .nf__head .loud { font-size: var(--fs-series-loud); margin-inline-start: calc(0.533 * var(--fs-series-loud)); }   /* the ring hangs 24% of the figure's width to its left; "404" is wider than "30" (measured), so this puts the ring on the grid edge */
/* a short page: the torn footer still sits at the bottom of the window */
body.page-404 { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.page-404 > main { flex: 1 0 auto; }

/* ---- Andrew 10/26 site review ---- */
/* About: the mic stands inside the pink, its base one tear depth above the deepest point of the torn bottom edge
   (b11 tile: deepest 12.5px; 24px of padding leaves about 11px of pink under the base). Rule edited in place above. */
/* About and 30 Days: the lead runs the full content width, margin to margin, at the same size (Andrew 10/26, both pages). */
.band__about { max-width: none; }
/* About masthead: one line, one face. "The name has two meanings." in Ultra, sentence case; the hand underline under
   "two meanings." only. Laptop: sized to the content width (Ultra sets the line at 18.09em; the content width is
   100vw - 6rem from 64rem up), capped at the hero's loud size. Phone and tablet: it wraps between "has" and "two". */
.about__head .loud { display: block; }
@media (min-width: 64rem) { .about__head .loud { font-size: min(var(--fs-hero-loud), calc((100vw - 6rem) / 18.6)); } }
/* Chips: violet and jade type on paper read too faint (as pink did), so their idle type is ink; the outline keeps the color */
.chip[data-filter="history"], .chip[data-filter="evidence"] { color: var(--ink); }
/* About, the two meanings (Andrew 10/26: "I like B but the text needs to be centered in the rectangles/boxes. and I would
   put the circled 1 and circled 2 on them"): two framed paper panels, equal columns and equal height on laptop, stacked on
   phone; inside, the circled numeral over its sentence, centered as one group like the Home card, at the card's text size
   and leading. The closing sentence runs full width below, flush left, at the lead size. */
.meanings { display: grid; gap: var(--space-5); }
.meaning { display: grid; justify-items: center; align-content: center; text-align: center; gap: var(--space-5);
  padding: var(--space-7) var(--space-4) var(--space-6); background: var(--paper); }
.meaning p { font-size: var(--fs-text); line-height: 1.5; max-width: var(--measure); text-wrap: pretty; }
.meaning__num { font-size: 3rem; line-height: 1; width: 1em; text-align: center; }
.meaning__num .mk--circle { left: -22%; top: -16%; width: 144%; height: 132%; }
.meanings__close { margin-block-start: var(--space-2); }
@media (min-width: 64rem) {
  .meanings { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .meaning { padding: var(--space-7) var(--space-7) var(--space-7); }
  .meanings__close { grid-column: 1 / -1; }
}
/* Mint sheets tear on all four sides now (Andrew 10/26: "why is the torn paper look on the mint only on the top and bottom?").
   The side tears reach up to 11.5px in, so side padding that was 16px goes to 24px to keep content clear: Home's panel
   on phone and tablet (laptop keeps its 48px), the 30 Days panel at every width (chips, sort toggle, posts). */
@media (max-width: 63.999rem) { .panel { padding-inline: var(--space-5); } }
.work .panel { padding-inline: var(--space-5); }
/* Home: the black hero is ripped black paper, straight under the menu's double rule and torn along its bottom, below
   the grille mic and the card, with paper beneath (Andrew 10/26: "under the microphone and day off card section").
   Laptop: the grille runs to the hero's bottom, so it carries the same tear mask as the hero's fill (same tile, same
   offset). Phone: the grille sits above the card, clear of the tear, so it keeps its own clip. */
.tear-hero { --fill: var(--ink); }
.hero.torn { background: none; }
@media (min-width: 64rem) {
  .hero .grille-block { mask-image: url(/assets/tears/b11-fill.svg); mask-size: 1000px 100%; mask-repeat: repeat-x; mask-position: -260px 0; }
}