/* ==========================================================================
   APOTHECARY — one page. Loaded on a/apothecary.html.

   Founder, 2026-09-26: the page is Annie's Claude artifact, shell excepted.
   A shelf of amber and cobalt glass, the name on a ruled label, and the
   record set as a dispensary sets a preparation: the formula card with its
   dotted leaders, the specification table, the prescription, a sheet of
   labels (one per rule), the dosage table and two jars. Italiana for the
   label capitals, Frank Ruhl for the running text; cobalt for what is ours,
   amber for what is period. The shell (rail, top bar, community drawer) is
   never restyled: every rule here is scoped to .ap-hero or .ap-rec.
   ========================================================================== */
@font-face {
  font-family: "ItalianaX";
  src: url("fonts/italiana.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "FrankRuhlX";
  src: url("fonts/frank-ruhl.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-display: swap;
}

.ap-page {
  --ap-amber: #7A4A12; --ap-amber-d: #5C370C; --ap-cobalt: #1F3E8C;
  --ap-label: #F4EFE2; --ap-ink: #2B2416; --ap-sage: #9A8B6A; --ap-olive: #6A5E44;
  --ap-paper: #FBF7EC; --ap-cobalt-wash: #eef0f6;
  --ap-display: "ItalianaX", "Didot", serif;
  --ap-serif: "FrankRuhlX", Georgia, serif;
}
.ap-page main { background: var(--ap-paper); color: var(--ap-ink); }
.ap-hero, .ap-rec { font: 400 18px/1.6 var(--ap-serif); color: var(--ap-ink); font-synthesis: weight style; }
.ap-hero a, .ap-rec a { color: var(--ap-cobalt); text-underline-offset: 3px; }
.ap-hero a:hover, .ap-rec a:hover { color: var(--ap-amber); }
.ap-hero :focus-visible, .ap-rec :focus-visible { outline: 2px solid var(--ap-cobalt); outline-offset: 4px; }
.ap-hero .ap-cap, .ap-rec .ap-cap { font-family: var(--ap-display); font-weight: 400; text-transform: uppercase; letter-spacing: .18em; }
.ap-rec .ap-rule2 { border-top: 1px solid var(--ap-ink); border-bottom: 1px solid var(--ap-ink); height: 4px; }

/* ---- hero: the shelf ---- */
.ap-shelf { position: relative; background: radial-gradient(90% 70% at 50% 30%, #3a2a12 0%, #1b140a 70%); padding: clamp(40px, 6vw, 90px) 16px 0; overflow: hidden; }
.ap-shelf::after { content: ""; display: block; height: 28px; background: linear-gradient(#5b4424, #2e2211); margin: 0 -16px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .5) inset; }
.ap-bottles { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 3vw, 40px); max-width: 1100px; margin: 0 auto; }
.ap-bottle { position: relative; flex: 0 0 auto; }
.ap-b-main { width: min(520px, 78vw); }
.ap-b-side { width: min(170px, 20vw); }
.ap-b-side.ap-b-small { width: min(120px, 14vw); }
.ap-bottle svg { display: block; width: 100%; height: auto; }
.ap-cork { fill: #8b6a45; }
.ap-label { container-type: inline-size; position: absolute; left: 12%; right: 12%; top: 40%; background: var(--ap-label); color: var(--ap-ink); padding: clamp(10px, 2vw, 22px); text-align: center;
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  box-shadow: inset 0 0 0 3px var(--ap-label), inset 0 0 0 4px var(--ap-ink), inset 0 0 0 7px var(--ap-label), inset 0 0 0 8px var(--ap-ink); }
.ap-label .ap-no { font-family: var(--ap-display); text-transform: uppercase; font-size: clamp(12px, 1.3vw, 13px); letter-spacing: .3em; color: var(--ap-olive); }
.ap-label h1 { margin: .1em 0 0; font-family: var(--ap-display); font-weight: 400; font-size: clamp(20px, 9cqw, 60px); white-space: nowrap; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ap-ink); }
.ap-label .ap-sprig { width: 52%; margin: 6px auto 0; display: block; color: var(--ap-amber-d); }
.ap-label .ap-measure { display: flex; align-items: baseline; justify-content: center; gap: .4em; margin: 8px 0 4px; border-top: 1px solid var(--ap-ink); border-bottom: 1px solid var(--ap-ink); padding: 4px 0; }
.ap-label .ap-measure b { font-weight: 800; font-size: clamp(26px, 5vw, 52px); line-height: 1; color: var(--ap-amber); }
.ap-label .ap-measure span { font-style: italic; font-size: clamp(13px, 1.6vw, 18px); }
.ap-label .ap-ingr { font-size: clamp(12px, 1.4vw, 14px); line-height: 1.35; margin: 0; }

/* ---- the record ---- */
.ap-rec { position: relative; }
.ap-wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }
.ap-intro { padding: 56px 20px; text-align: center; }
.ap-intro .ap-lead { font-family: var(--ap-display); font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; max-width: 26ch; margin: 0 auto; letter-spacing: .02em; }

/* the formula card */
.ap-formula { max-width: 720px; margin: 0 auto; background: var(--ap-label); padding: 28px clamp(18px, 4vw, 40px); box-shadow: inset 0 0 0 1px var(--ap-ink), inset 0 0 0 5px var(--ap-label), inset 0 0 0 6px var(--ap-ink); }
.ap-formula h2 { margin: 0 0 12px; text-align: center; font-family: var(--ap-display); font-weight: 400; font-size: 26px; letter-spacing: .3em; text-transform: uppercase; color: var(--ap-ink); }
.ap-formula dl { margin: 0; }
.ap-formula dl > div { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; }
.ap-formula dt { font-variant: small-caps; letter-spacing: .06em; font-weight: 500; white-space: nowrap; }
.ap-formula .ap-dots { flex: 1; border-bottom: 2px dotted var(--ap-sage); transform: translateY(-5px); min-width: 20px; }
.ap-formula dd { margin: 0; text-align: right; font-weight: 600; color: var(--ap-amber-d); }

/* sections and their monogram heads */
.ap-rec .ap-s { margin: clamp(80px, 10vw, 130px) 0; }
.ap-mono-h { text-align: center; margin-bottom: 34px; }
.ap-rec .ap-mono-h h2 { margin: 6px 0; font-family: var(--ap-display); font-weight: 400; font-size: clamp(34px, 5.5vw, 62px); line-height: 1.05; letter-spacing: .12em; text-transform: uppercase; color: var(--ap-ink); }
.ap-mono-h .ap-rule2 { max-width: 420px; margin: 0 auto; }
.ap-mono-h p { margin: 10px 0 0; font-style: italic; color: var(--ap-olive); }
.ap-quiet { text-align: center; font-style: italic; color: var(--ap-olive); }

/* carries: the specification table */
.ap-spec { width: 100%; border-collapse: collapse; }
.ap-spec th, .ap-spec td { padding: 14px 10px; border-bottom: 1px solid var(--ap-sage); text-align: left; vertical-align: top; }
.ap-spec tr:first-child th, .ap-spec tr:first-child td { border-top: 2px solid var(--ap-ink); }
.ap-spec tr:last-child th, .ap-spec tr:last-child td { border-bottom: 2px solid var(--ap-ink); }
.ap-spec th { width: 34%; font-weight: 500; }
.ap-rec .ap-spec th a { color: var(--ap-ink); font-variant: small-caps; letter-spacing: .06em; font-size: 20px; }
.ap-rec .ap-spec th a:hover { color: var(--ap-amber); }
.ap-spec .ap-carry { display: block; font-size: 14px; font-style: italic; color: var(--ap-amber); }
.ap-spec .ap-none { color: var(--ap-olive); font-style: italic; }
.ap-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.ap-rec .ap-tags a { border: 1px solid var(--ap-ink); padding: 2px 10px; text-decoration: none; color: var(--ap-ink); font-variant: small-caps; letter-spacing: .06em; }
.ap-rec .ap-tags a:hover { background: var(--ap-ink); color: var(--ap-label); }
.ap-vials { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 14px; margin-top: 4px; }
.ap-vial { text-align: center; font-size: 12px; font-family: ui-monospace, Menlo, monospace; color: var(--ap-olive); }
.ap-vial i { display: block; height: 84px; margin: 0 auto 6px; width: 34px; border: 2px solid var(--ap-ink); border-top-width: 8px; border-radius: 0 0 17px 17px; background: linear-gradient(to top, var(--c) 0 72%, rgba(255, 255, 255, .35) 72%); box-shadow: inset 6px 0 0 rgba(255, 255, 255, .25); }
.ap-asbuilt { margin: 6px 0 0; font-style: italic; }
.ap-specimen { font-family: var(--ap-display); font-size: clamp(30px, 4vw, 44px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.1; }
.ap-specimen2 { font-size: 22px; font-weight: 300; }

/* argues: the prescription */
.ap-rx { display: grid; grid-template-columns: auto 1fr; gap: 10px 28px; max-width: 860px; margin: 0 auto; }
.ap-rx .ap-sym { font-family: var(--ap-display); font-size: clamp(80px, 12vw, 150px); line-height: .8; color: var(--ap-amber); }
.ap-rx .ap-big { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.3; font-weight: 300; }
.ap-rx .ap-big strong { font-weight: 700; }
.ap-rx .ap-rest { grid-column: 2; margin: 0; }
.ap-refuse { grid-column: 1 / -1; margin-top: 26px; border: 2px solid var(--ap-cobalt); color: var(--ap-cobalt); padding: 18px 22px; display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: var(--ap-cobalt-wash); }
.ap-refuse b { font-family: var(--ap-display); font-weight: 400; font-size: 26px; letter-spacing: .2em; text-transform: uppercase; }

/* recognise */
.ap-recog { display: grid; grid-template-columns: 1fr minmax(0, 2fr); gap: 40px; align-items: start; }
.ap-fig { margin: 0; color: var(--ap-amber-d); border: 1px solid var(--ap-ink); padding: 14px; background: var(--ap-label); }
.ap-fig__sprig { display: block; width: 100%; height: auto; }
.ap-fig__sprig.ap-mirror { transform: scaleX(-1); }
.ap-fig figcaption { font-size: 13px; font-style: italic; text-align: center; color: var(--ap-olive); margin-top: 8px; }
.ap-recog__text p { margin: 0 0 16px; }
.ap-dx { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.35; border-left: 4px double var(--ap-amber); padding-left: 18px; font-weight: 500; }
.ap-dx em { color: var(--ap-amber); font-style: italic; }
/* the vessels the research documents, in the sprig's engraved line (Design Completion Campaign, 2026-09-29) */
.ap-vessels { margin: 48px 0 0; padding: 26px clamp(14px, 3vw, 28px) 20px; background: var(--ap-label); box-shadow: inset 0 0 0 1px var(--ap-ink), inset 0 0 0 4px var(--ap-label), inset 0 0 0 5px var(--ap-ink); }
.ap-vessels ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.ap-vessels li { display: grid; justify-items: center; align-content: start; gap: 6px; text-align: center; }
.ap-vessels svg { width: 72px; height: auto; color: var(--ap-amber-d); }
.ap-vessels b { font-family: var(--ap-display); font-weight: 400; font-size: 18px; letter-spacing: .18em; text-transform: uppercase; }
.ap-vessels span { font-size: 15px; line-height: 1.45; }
.ap-vessels figcaption { margin-top: 18px; text-align: center; font-size: 15px; font-style: italic; color: var(--ap-olive); }
.ap-vessels .ap-meas { display: inline-block; margin-right: 10px; padding: 2px 0; border-top: 1px solid var(--ap-ink); border-bottom: 1px solid var(--ap-ink); font-style: normal; font-weight: 700; font-size: 14px; letter-spacing: .04em; color: var(--ap-amber); }
@media (max-width: 760px) { .ap-vessels ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* rules as labels */
.ap-labels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; }
.ap-lbl { background: var(--ap-label); padding: 20px 18px 18px; text-align: center; box-shadow: inset 0 0 0 1px var(--ap-ink), inset 0 0 0 4px var(--ap-label), inset 0 0 0 5px var(--ap-ink); clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px); }
.ap-lbl h3 { margin: 0; font-family: var(--ap-display); font-weight: 400; font-size: 28px; letter-spacing: .2em; text-transform: uppercase; color: var(--ap-ink); }
.ap-lbl .ap-meas { margin: 8px 0 10px; padding: 4px 0; border-top: 1px solid var(--ap-ink); border-bottom: 1px solid var(--ap-ink); font-weight: 700; font-size: 15px; letter-spacing: .04em; }
.ap-lbl .ap-meas--o { color: var(--ap-cobalt); }
.ap-lbl .ap-meas--p { color: var(--ap-amber); }
.ap-lbl p { margin: 0; font-size: 16px; line-height: 1.5; text-align: left; }
.ap-lbl .ap-ev { font-style: italic; color: var(--ap-olive); }
.ap-lbl.ap-ctx { background: var(--ap-cobalt-wash); }
.ap-ctxnote { grid-column: 1 / -1; text-align: center; font-style: italic; color: var(--ap-olive); margin: 10px 0 -8px; }

/* behind: the assay and the dosage table */
.ap-behind { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; }
.ap-behind p { margin: 0 0 14px; }
.ap-behind .ap-assay { font-family: var(--ap-display); font-size: 30px; letter-spacing: .1em; color: var(--ap-amber); margin-bottom: 10px; }
.ap-tw { overflow-x: auto; }
.ap-dose { width: 100%; min-width: 440px; border-collapse: collapse; font-size: 16px; }
.ap-dose caption { font-family: var(--ap-display); letter-spacing: .24em; text-transform: uppercase; font-size: 18px; padding-bottom: 8px; }
.ap-dose th, .ap-dose td { padding: 9px 8px; border-bottom: 1px solid var(--ap-sage); text-align: left; }
.ap-dose thead th { border-top: 2px solid var(--ap-ink); border-bottom: 2px solid var(--ap-ink); font-variant: small-caps; font-weight: 600; letter-spacing: .06em; }
.ap-dose tbody tr:last-child * { border-bottom: 2px solid var(--ap-ink); }
.ap-dose td.ap-y { color: var(--ap-amber); font-weight: 700; }
.ap-dose td.ap-n { color: var(--ap-olive); }
.ap-behind .ap-firm { grid-column: 1 / -1; text-align: center; font-style: italic; font-size: 20px; max-width: 46ch; margin: 10px auto 0; }

/* confused: the jars */
.ap-jars { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; }
.ap-rec .ap-jar { width: min(300px, 100%); text-decoration: none; color: var(--ap-ink); display: block; }
.ap-jar svg { display: block; width: 100%; height: auto; }
.ap-jar .ap-tag { margin: -150px 26px 0; position: relative; background: var(--ap-label); padding: 14px; text-align: center; box-shadow: inset 0 0 0 1px var(--ap-ink), inset 0 0 0 4px var(--ap-label), inset 0 0 0 5px var(--ap-ink); }
.ap-jar .ap-tag b { display: block; font-family: var(--ap-display); font-weight: 400; font-size: 24px; letter-spacing: .18em; text-transform: uppercase; }
.ap-jar .ap-tag small { display: block; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--ap-olive); margin-bottom: 6px; }
.ap-jar .ap-tag span { font-size: 15px; line-height: 1.4; display: block; }
.ap-rec .ap-jar:hover { color: var(--ap-ink); }
.ap-jar:hover .ap-tag { background: var(--ap-ink); color: var(--ap-label); }
.ap-jar:hover .ap-tag small { color: var(--ap-sage); }

/* use: the tickets */
.ap-tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ap-rec .ap-ticket { display: block; padding: 24px 26px; background: var(--ap-cobalt); color: var(--ap-label); text-decoration: none; position: relative; clip-path: polygon(0 0, 100% 0, 100% 40%, calc(100% - 14px) 50%, 100% 60%, 100% 100%, 0 100%, 0 60%, 14px 50%, 0 40%); }
.ap-rec .ap-ticket--amber { background: var(--ap-amber); }
.ap-ticket b { display: block; font-family: var(--ap-display); font-weight: 400; font-size: 28px; letter-spacing: .1em; line-height: 1.1; text-transform: uppercase; margin-bottom: 8px; }
.ap-rec .ap-ticket:hover { background: var(--ap-ink); color: var(--ap-label); }
.ap-mach { text-align: center; margin-top: 34px; }
.ap-mach .ap-cap { font-size: 18px; margin: 0 0 8px; color: var(--ap-ink); }
.ap-mach a { display: inline-block; font-family: ui-monospace, Menlo, monospace; font-size: 15px; margin: 0 10px; }

/* the foot of the page */
.ap-pf { margin-top: 100px; background: var(--ap-ink); color: var(--ap-label); padding: 40px 20px; text-align: center; font: 400 18px/1.6 var(--ap-serif); }
.ap-rec .ap-pf a { color: #e7c89a; }
.ap-rec .ap-pf a:hover { color: var(--ap-label); }
.ap-pf .ap-cap { display: block; font-size: 22px; margin-bottom: 10px; color: var(--ap-sage); }

@media (max-width: 760px) {
  .ap-recog, .ap-behind { grid-template-columns: 1fr; }
  .ap-rx { grid-template-columns: 1fr; }
  .ap-rx .ap-rest { grid-column: 1; }
  .ap-rx .ap-sym { font-size: 80px; }
  .ap-spec th { width: auto; display: block; border-bottom: 0 !important; padding-bottom: 0; }
  .ap-spec td { display: block; }
  .ap-b-side { display: none; }
  .ap-b-main { width: 92vw; }
  .ap-label { left: 10%; right: 10%; }
}
@media (prefers-reduced-motion: reduce) { .ap-hero *, .ap-rec * { transition: none !important; animation: none !important; } }

/* QA (2026-09-29): the research-dimension table fits a phone instead of
   scrolling sideways with no cue. */
@media (max-width: 30rem) {
  .ap-dose { min-width: 0; font-size: 15px; }
  .ap-dose th, .ap-dose td { padding: 8px 5px; hyphens: auto; }
  .ap-dose thead th { letter-spacing: .02em; }
}
/* The argument's first sentence no longer opens the record (it was printed
   twice within a screen), so the formula card takes the intro's 56px. */
.ap-rec .ap-wrap > .ap-formula:first-child { margin-top: 56px; }