/* Index Card Catalog — antjanus.com redesign 045
   The site is a card cabinet: drawers are the nav, guide cards open sections,
   every article is a typed 3x5 catalog card with a call number and tracings. */

:root {
  --desk: #e8dec8;
  --desk-2: #dccfb2;
  --card: #fcf8ec;
  --card-edge: #d4c6a6;
  --ink: #1f1c17;
  --ink-soft: #4b4337;
  --red-ink: #a12f28;
  --rule-red: #c0473c;
  --rule-blue: rgba(54, 79, 106, 0.13);
  --link: #2c4763;
  --link-hover: #7a241f;
  --stamp-blue: #2f4f73;
  --oak: #6d4526;
  --oak-dark: #452a15;
  --oak-light: #8e5e35;
  --brass: #caa250;
  --brass-dark: #7d5f22;
  --label: #f6efd9;
  --code-bg: #2a251e;
  --code-ink: #f1e8d4;
  --code-dim: #c9b893;
  --focus: #1c55b0;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 6px 16px -8px rgba(60, 40, 10, 0.35);
  --lift: 0 2px 0 rgba(0, 0, 0, 0.06), 0 18px 30px -14px rgba(60, 40, 10, 0.5);

  --g-ai: #364f6a;
  --g-garden: #43603a;
  --g-tools: #7d5a17;
  --g-fiction: #7a2e2a;
  --g-projects: #5f4a2e;
  --g-patterns: #3e4f5c;
  --g-about: #574066;

  --f-display: "Special Elite", "Courier New", monospace;
  --f-type: "Courier Prime", "Courier New", Courier, monospace;
  --f-pencil: "Caveat", "Comic Sans MS", cursive;
  --wrap: 1240px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --desk: #14110d;
    --desk-2: #1c1813;
    --card: #25211b;
    --card-edge: #3b342a;
    --ink: #efe6d2;
    --ink-soft: #c2b59d;
    --red-ink: #ee9488;
    --rule-red: #a4493f;
    --rule-blue: rgba(157, 187, 224, 0.09);
    --link: #a9c6ea;
    --link-hover: #f3b0a6;
    --stamp-blue: #9dbde6;
    --oak: #3b2715;
    --oak-dark: #22160b;
    --oak-light: #543820;
    --brass: #b8913f;
    --brass-dark: #6d5220;
    --label: #e9dfc6;
    --code-bg: #0e0c09;
    --code-ink: #efe6d2;
    --code-dim: #bfae8c;
    --focus: #ffcf6e;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 18px -8px rgba(0, 0, 0, 0.8);
    --lift: 0 2px 0 rgba(0, 0, 0, 0.4), 0 20px 30px -12px rgba(0, 0, 0, 0.9);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --desk: #14110d;
  --desk-2: #1c1813;
  --card: #25211b;
  --card-edge: #3b342a;
  --ink: #efe6d2;
  --ink-soft: #c2b59d;
  --red-ink: #ee9488;
  --rule-red: #a4493f;
  --rule-blue: rgba(157, 187, 224, 0.09);
  --link: #a9c6ea;
  --link-hover: #f3b0a6;
  --stamp-blue: #9dbde6;
  --oak: #3b2715;
  --oak-dark: #22160b;
  --oak-light: #543820;
  --brass: #b8913f;
  --brass-dark: #6d5220;
  --label: #e9dfc6;
  --code-bg: #0e0c09;
  --code-ink: #efe6d2;
  --code-dim: #bfae8c;
  --focus: #ffcf6e;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 18px -8px rgba(0, 0, 0, 0.8);
  --lift: 0 2px 0 rgba(0, 0, 0, 0.4), 0 20px 30px -12px rgba(0, 0, 0, 0.9);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  background-color: var(--desk);
  background-image:
    url("assets/paper-grain.png"),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.18), transparent 50%);
  color: var(--ink);
  font-family: var(--f-type);
  font-size: 1.125rem;
  line-height: 1.65;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; line-height: 1.15; margin: 0; letter-spacing: -0.005em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--card); color: var(--ink); padding: 0.6rem 1rem; z-index: 50; }
.skip:focus { top: 1rem; }
.pencil { font-family: var(--f-pencil); font-size: 1.45rem; line-height: 1.2; color: var(--stamp-blue); }
.muted { color: var(--ink-soft); }
.mono-s { font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; }

/* ───────────── Cabinet (header + drawer nav) ───────────── */
.cabinet {
  background:
    url("assets/oak-grain.jpg") center/cover,
    repeating-linear-gradient(92deg, rgba(0,0,0,0.07) 0 2px, transparent 2px 9px, rgba(255,255,255,0.04) 9px 11px, transparent 11px 23px),
    linear-gradient(180deg, var(--oak-light), var(--oak) 40%, var(--oak-dark));
  background-blend-mode: multiply, normal, normal;
  border-bottom: 6px solid var(--oak-dark);
  box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  color: var(--label);
}
.cabinet-top { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; padding-bottom: 0.9rem; flex-wrap: wrap; }
.plate {
  display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink);
  background: linear-gradient(180deg, #f0d88f, var(--brass) 45%, var(--brass-dark));
  padding: 0.3rem; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.5);
}
.plate:hover { color: var(--ink); }
.plate-inner { display: flex; align-items: center; gap: 0.6rem; background: #f6efd9; padding: 0.3rem 0.8rem 0.3rem 0.45rem; border-radius: 2px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.35); color: #1f1c17; }
.plate svg { width: 34px; height: 34px; flex: none; }
.plate-name { font-family: var(--f-display); font-size: 1.35rem; line-height: 1; display: block; }
.plate-sub { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; display: block; color: #4b4337; }
.cabinet-tools { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.search { display: flex; }
.search input {
  font: inherit; font-size: 1rem; width: 15rem; max-width: 52vw; padding: 0.45rem 0.7rem; border: 0; border-radius: 3px 0 0 3px;
  background: #f6efd9; color: #1f1c17; box-shadow: inset 0 2px 4px rgba(0,0,0,0.35);
}
.search input::placeholder { color: #5a5042; }
.search button, .lamp {
  font: inherit; font-size: 0.9375rem; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0 0.9rem;
  border: 0; color: #1f1c17; background: linear-gradient(180deg, #f0d88f, var(--brass) 55%, var(--brass-dark));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.45);
}
.search input { min-height: 44px; }
.search button { border-radius: 0 3px 3px 0; }
.lamp { border-radius: 3px; display: inline-flex; align-items: center; gap: 0.45rem; }
.lamp svg { width: 20px; height: 20px; }
.search button:hover, .lamp:hover { filter: brightness(1.08); }
.search button:active, .lamp:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgba(0,0,0,0.4); }

.drawers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.7rem; padding-bottom: 1.1rem; }
.drawer-front {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  padding: 0.75rem 0.5rem 0.7rem; text-decoration: none; color: #1f1c17; border-radius: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(0,0,0,0.12)), var(--oak);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25), inset 3px 3px 0 rgba(255,255,255,0.08), inset -3px -3px 0 rgba(0,0,0,0.25), 0 2px 0 rgba(0,0,0,0.35);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.label-holder {
  width: 100%; max-width: 11rem; padding: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #f0d88f, var(--brass) 50%, var(--brass-dark));
  box-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.label-paper { display: block; background: var(--label); padding: 0.2rem 0.4rem 0.25rem; text-align: center; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); border-radius: 1px; }
.dno { display: block; font-size: 0.8125rem; color: #7a241f; letter-spacing: 0.06em; font-weight: 700; }
.dname { display: block; font-family: var(--f-display); font-size: 1.15rem; line-height: 1.15; color: #1f1c17; }
.pull {
  width: 44%; max-width: 5rem; height: 0.85rem; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, var(--brass-dark), #f0d88f 60%, var(--brass));
  box-shadow: 0 2px 3px rgba(0,0,0,0.55);
}
.drawer-front:hover { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25), inset 3px 3px 0 rgba(255,255,255,0.1), inset -3px -3px 0 rgba(0,0,0,0.25), 0 6px 10px -2px rgba(0,0,0,0.55); }
.drawer-front[aria-current="page"] {
  transform: translateY(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(0,0,0,0.05)), var(--oak-light);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.25), 0 10px 0 -2px var(--oak-dark), 0 16px 18px -6px rgba(0,0,0,0.7);
}
.drawer-front[aria-current="page"] .label-paper { background: #fffaf0; outline: 2px solid var(--rule-red); outline-offset: -4px; }

@media (max-width: 860px) {
  .drawers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
  .pull { height: 0.6rem; }
  .drawer-front { padding: 0.55rem 0.35rem 0.5rem; gap: 0.35rem; }
  .drawer-front[aria-current="page"] { transform: translateY(4px); }
  .cabinet-tools { margin-left: 0; width: 100%; }
  .search { flex: 1; }
  .search input { width: 100%; max-width: none; flex: 1; }
}
@media (max-width: 420px) {
  .dname { font-size: 1rem; }
  .lamp-text { display: none; }
}

/* ───────────── Page scaffolding ───────────── */
main { display: block; padding: 2.5rem 0 4rem; }
.section { margin-top: 4.5rem; }
.section:first-child { margin-top: 0; }
.crumbs { font-size: 0.9375rem; margin-bottom: 1rem; color: var(--ink-soft); }
.crumbs a { color: var(--link); }

/* Page header = oversized main-entry card */
.entry {
  position: relative; background: var(--card); border: 1px solid var(--card-edge); border-radius: 4px;
  box-shadow: var(--shadow);
  padding: 0 clamp(1.1rem, 3vw, 2.6rem) 3rem;
}
.entry::after, .icard::after {
  content: ""; position: absolute; left: 50%; bottom: 0.75rem; width: 0.9rem; height: 0.9rem; transform: translateX(-50%);
  border-radius: 50%; background: var(--desk); box-shadow: inset 0 2px 3px rgba(0,0,0,0.4);
}
.entry-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  min-height: 4.6rem; padding: 1rem 0 0.55rem; border-bottom: 2px solid var(--rule-red); margin-bottom: 1.6rem;
}
.entry-grid { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.5rem; }
.callno { font-weight: 700; line-height: 1.35; font-size: 1.0625rem; color: var(--ink); white-space: pre-line; }
.callno-lg { font-size: 1.25rem; }
.heading-line { font-weight: 700; font-size: 1.0625rem; }
.entry h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); margin-bottom: 1rem; }
.lede { font-size: 1.3rem; line-height: 1.55; max-width: 44ch; }
.collation { color: var(--ink-soft); }
.tracings { color: var(--ink-soft); font-size: 1rem; margin-top: 1.4rem; }
.tracings a { color: inherit; }
@media (max-width: 700px) {
  .entry-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .callno { white-space: normal; }
}

/* Stamps */
.stamp {
  display: inline-block; font-family: var(--f-type); font-weight: 700; font-size: 0.875rem; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.35rem 0.55rem 0.3rem;
  border: 2px solid currentColor; border-radius: 3px; color: var(--red-ink); transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px currentColor; opacity: 0.92; white-space: nowrap;
}
.stamp.blue { color: var(--stamp-blue); transform: rotate(2deg); }
.stamp.flat { transform: none; }
.datestamp { font-weight: 700; color: var(--stamp-blue); letter-spacing: 0.04em; font-size: 0.9375rem; white-space: nowrap; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.5rem; margin-top: 1.6rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.55rem 1.25rem;
  font: inherit; font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--card); border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 3px 3px 0 var(--rule-red); transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn:hover { color: var(--card); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--rule-red); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--rule-red); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn-ghost:hover { color: var(--ink); box-shadow: 3px 3px 0 var(--rule-red); }
.link-2 { font-weight: 700; color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--rule-red); min-height: 44px; display: inline-flex; align-items: center; }
.link-3 { color: var(--ink-soft); min-height: 44px; display: inline-flex; align-items: center; }

/* ───────────── Guide cards (section dividers) ───────────── */
.guide {
  --g: var(--g-ai); --tab-x: 0%;
  position: relative; margin-top: 2.4rem; background: var(--g); color: #fbf5e6;
  border-radius: 0 6px 4px 4px; padding: 1.35rem clamp(1rem, 3vw, 2rem) 1.3rem;
  box-shadow: var(--shadow);
  background-image: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 60%);
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 2rem;
}
.guide.tab-2 { --tab-x: calc(33% - 3rem); border-radius: 6px 6px 4px 4px; }
.guide.tab-3 { --tab-x: calc(66% - 6rem); border-radius: 6px 6px 4px 4px; }
.guide-tab {
  position: absolute; bottom: 100%; left: var(--tab-x); background: var(--g); color: #fbf5e6;
  padding: 0.35rem 1.1rem 0.2rem; border-radius: 8px 8px 0 0; font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.08em;
  white-space: nowrap;
}
.guide h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); color: #fffaf0; }
.guide p { margin: 0.25rem 0 0; font-size: 1.0625rem; color: #f1e7d2; }
.guide-text { flex: 1 1 22rem; }
.guide a { color: #fffaf0; font-weight: 700; text-decoration-color: rgba(255,250,240,0.7); min-height: 44px; display: inline-flex; align-items: center; }
.guide a:hover { color: #fff; text-decoration-color: #fff; }
.guide :focus-visible { outline-color: #ffe7a8; }
.g-ai { --g: var(--g-ai); } .g-garden { --g: var(--g-garden); } .g-tools { --g: var(--g-tools); }
.g-fiction { --g: var(--g-fiction); } .g-projects { --g: var(--g-projects); } .g-patterns { --g: var(--g-patterns); } .g-about { --g: var(--g-about); }
@media (max-width: 700px) { .guide.tab-2, .guide.tab-3 { --tab-x: 0%; border-radius: 0 6px 4px 4px; } }

/* Drawer interior that holds cards */
.tray {
  margin-top: 0.9rem; padding: clamp(0.9rem, 2vw, 1.4rem); border-radius: 4px;
  background: var(--desk-2);
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(0,0,0,0.06);
}
.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); }
.cards.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.cards.four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

/* ───────────── The index card ───────────── */
.icard {
  --icard-desk: var(--desk-2);
  position: relative; display: flex; flex-direction: column;
  aspect-ratio: 5 / 3; min-width: 0;
  background: var(--card); border: 1px solid var(--card-edge); border-radius: 3px;
  padding: 0 1.1rem 2.3rem; box-shadow: var(--shadow);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.tray .icard::after { background: var(--desk-2); }
.icard:hover, .icard:focus-within { transform: translateY(-6px); box-shadow: var(--lift); }
.icard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  min-height: 3.05rem; border-bottom: 1.5px solid var(--rule-red); padding: 0.45rem 0 0.35rem; margin-bottom: 0.7rem;
}
.icard-callno { font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.02em; }
.icard-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; flex: 1; }
.icard h3 { font-family: var(--f-type); font-weight: 700; font-size: 1.1875rem; line-height: 1.35; }
.icard h3 a { color: var(--ink); text-decoration: none; }
.icard h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.icard h3 a:hover { text-decoration: underline; }
.icard h3 a:focus-visible { outline: none; }
.icard:has(h3 a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.icard-imprint { color: var(--ink-soft); font-size: 0.9375rem; margin: 0.15rem 0 0.4rem; }
.icard-desc { font-size: 1.0625rem; line-height: 1.6; margin: 0.2rem 0 0.5rem; text-indent: 1.5em; }
.icard .tracings { margin-top: auto; font-size: 0.9375rem; padding-top: 0.4rem; }
.icard .stamp { position: relative; z-index: 0; }
.icard-photo { margin: 0.1rem 0 0.7rem; border: 1px solid var(--card-edge); background: var(--desk-2); aspect-ratio: 2 / 1; overflow: hidden; }
.icard-photo img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.18) saturate(0.9); }
.icard-ext { position: relative; z-index: 2; }
.icard.onorder { background-color: transparent; border: 2px dashed var(--card-edge); box-shadow: none; }
.icard.onorder:hover { transform: none; box-shadow: none; }
.icard.dark { background: var(--g-fiction); color: #fbf5e6; border-color: transparent; background-image: none; }
.icard.dark .icard-head { border-bottom-color: rgba(255,245,230,0.6); }
.icard.dark h3 a, .icard.dark p, .icard.dark .tracings { color: #fbf5e6; }
.icard.dark::after { background: var(--desk-2); }
.icard.compact { aspect-ratio: auto; min-height: 11rem; }

/* Shelf-list ledger rows */
.shelflist { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--card-edge); border-radius: 3px; box-shadow: var(--shadow); }
.shelflist li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0.3rem 1.3rem; padding: 1rem 1.2rem; border-top: 1px solid var(--rule-blue); align-items: baseline; }
.shelflist li:first-child { border-top: 0; }
.shelflist .callno { font-size: 0.9375rem; }
.shelflist a { font-weight: 700; color: var(--ink); }
.shelflist a:hover { color: var(--link-hover); }
.shelflist p { margin: 0.2rem 0 0; color: var(--ink-soft); font-size: 1rem; }
.shelflist-head { background: var(--ink); color: var(--card); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.shelflist-head li { border: 0; padding: 0.55rem 1.2rem; }
@media (max-width: 700px) {
  .shelflist li { grid-template-columns: 1fr; }
  .shelflist-head { display: none; }
}

/* Classification schedule table */
.schedule { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow); font-size: 1rem; }
.schedule caption { text-align: left; font-family: var(--f-display); font-size: 1.6rem; padding-bottom: 0.6rem; }
.schedule th, .schedule td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid var(--rule-blue); vertical-align: top; }
.schedule thead th { border-bottom: 2px solid var(--rule-red); font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.schedule td:first-child { font-weight: 700; white-space: nowrap; }
.schedule a { font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* Photo clipped to a card */
.clipped {
  position: relative; background: #fbf8f1; padding: 0.7rem 0.7rem 2.8rem; box-shadow: var(--lift);
  transform: rotate(1.8deg); max-width: 100%;
}
.clipped img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #cfc3a8; filter: sepia(0.12) contrast(1.02); }
.clipped figcaption { position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.4rem; font-family: var(--f-pencil); font-size: 1.45rem; color: #2f4f73; line-height: 1.2; }
.paperclip { position: absolute; top: -1.6rem; left: 1.6rem; width: 26px; height: 74px; z-index: 2; }
.clipped.left { transform: rotate(-2deg); }
.clipped.wide img { aspect-ratio: auto; height: auto; object-fit: contain; }

/* Hero layout */
.hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.hero .clipped { margin-top: 2.5rem; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero .clipped { max-width: 17rem; margin: 1rem auto 0; }
}
.statfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--card-edge); margin: 1.4rem 0 0; max-width: 34rem; }
.statfields div { padding: 0.6rem 0.8rem; border-left: 1px solid var(--card-edge); }
.statfields div:first-child { border-left: 0; }
.statfields dt { font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.statfields dd { margin: 0; font-family: var(--f-display); font-size: 2rem; line-height: 1.1; }

/* Generic panels */
.panel { position: relative; background: var(--card); border: 1px solid var(--card-edge); border-radius: 3px; box-shadow: var(--shadow); padding: 1.4rem 1.5rem 1.6rem; }
.panel h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.panel-dark { background: var(--g-fiction); color: #fbf5e6; border-color: transparent; }
.panel-dark a:not(.btn) { color: #fffaf0; }
.panel-dark .btn { background: #fbf5e6; color: #1f1c17; border-color: #fbf5e6; box-shadow: 3px 3px 0 #1f1c17; }
.panel-dark .btn:hover { color: #1f1c17; }
.rows3 { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.linklist { list-style: none; padding: 0; margin: 0; }
.linklist li { border-top: 1px dashed var(--card-edge); }
.linklist li:first-child { border-top: 0; }
.linklist a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; min-height: 44px; font-weight: 700; color: var(--ink); text-decoration: none; }
.linklist a:hover span:first-child { text-decoration: underline; }
.linklist .muted { font-weight: 400; }

/* Reference slip (consulting strip) */
.slip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; justify-content: space-between;
  background: #f3e3b3; color: #1f1c17; border: 1px solid #d9c07a; padding: 1rem 1.4rem; border-radius: 2px;
  box-shadow: var(--shadow); transform: rotate(-0.4deg);
}
.slip p { margin: 0; font-size: 1.125rem; }
.slip .btn { background: #1f1c17; color: #f3e3b3; border-color: #1f1c17; }
:root[data-theme="dark"] .slip { background: #3a3120; color: #f3e3b3; border-color: #5c4c2a; }
:root[data-theme="dark"] .slip .btn { background: #f3e3b3; color: #1f1c17; border-color: #f3e3b3; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .slip { background: #3a3120; color: #f3e3b3; border-color: #5c4c2a; }
  :root:not([data-theme="light"]) .slip .btn { background: #f3e3b3; color: #1f1c17; border-color: #f3e3b3; }
}

/* Subject heading filters */
.subjects { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.6rem; }
.chip {
  font: inherit; font-size: 1rem; min-height: 44px; padding: 0.3rem 0.9rem; cursor: pointer;
  background: var(--card); color: var(--ink); border: 1.5px solid var(--card-edge); border-radius: 2px;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chip[aria-pressed="true"]::before { content: "✓ "; }
.filter-status { color: var(--ink-soft); font-size: 1rem; min-height: 1.6em; }
.empty-card { display: none; text-align: center; padding: 2rem; background: var(--card); border: 2px dashed var(--card-edge); }
.empty-card.show { display: block; }
[hidden] { display: none !important; }

/* ───────────── Article ───────────── */
.progress { position: fixed; top: 0; left: 0; height: 4px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--rule-red); z-index: 40; }
.article-layout { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; margin-top: 2.5rem; align-items: start; }
.toc { position: sticky; top: 1.5rem; }
.toc .panel { padding: 0 1.1rem 1.1rem; }
.toc-title { display: block; border-bottom: 1.5px solid var(--rule-red); padding: 0.7rem 0 0.4rem; margin-bottom: 0.4rem; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: grid; grid-template-columns: 2.3rem 1fr; padding: 0.35rem 0; font-size: 1rem; color: var(--ink-soft); text-decoration: none; line-height: 1.4; }
.toc a::before { content: "§" counter(toc); color: var(--red-ink); font-weight: 700; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.toc a[aria-current="true"] { color: var(--ink); font-weight: 700; }
.toc-mobile { display: none; }
.toc .pencil { margin: 0.8rem 0 0; font-size: 1.3rem; }
@media (max-width: 1060px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .toc { display: none; }
  .toc-mobile { display: block; }
  .toc-mobile summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
  .toc-mobile.toc .panel, .toc-mobile .panel { padding: 0.3rem 1.1rem 0.9rem; }
  .toc-mobile ol { margin: 0; padding-left: 1.5rem; }
  .toc-mobile a { display: block; padding: 0.35rem 0; min-height: 44px; }
}

.sheet {
  background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow);
  padding: clamp(1.4rem, 4vw, 3.2rem) clamp(1.1rem, 5vw, 4rem) 3rem; position: relative;
  background-image: linear-gradient(90deg, transparent calc(clamp(1.1rem, 5vw, 4rem) - 1rem), rgba(192, 71, 60, 0.35) calc(clamp(1.1rem, 5vw, 4rem) - 1rem), rgba(192, 71, 60, 0.35) calc(clamp(1.1rem, 5vw, 4rem) - 1rem + 1px), transparent 0);
}
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.2em; }
.prose p { margin-bottom: 0; }
.codecard pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; color: inherit; }
.prose h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-top: 2.6em; padding-bottom: 0.35rem; border-bottom: 1.5px solid var(--rule-red); scroll-margin-top: 1.5rem; }
.prose h2 .secno { color: var(--red-ink); margin-right: 0.5rem; font-size: 0.7em; }
.prose ol, .prose ul { padding-left: 2rem; }
.prose li + li { margin-top: 0.35rem; }
.prose code { background: var(--desk-2); padding: 0.05em 0.3em; border-radius: 2px; font-size: 0.95em; }
.prose a { color: var(--link); }
.prose em { font-style: italic; }

.codecard { margin: 1.8em 0; border-radius: 3px; overflow: hidden; background: var(--code-bg); box-shadow: var(--shadow); max-width: 100%; }
.codecard-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.3rem 0.4rem 0.3rem 1rem; border-bottom: 1.5px solid var(--rule-red); color: var(--code-dim); font-size: 0.875rem; letter-spacing: 0.1em; }
.codecard pre { margin: 0; padding: 1.1rem 1.2rem 1.3rem; overflow-x: auto; color: var(--code-ink); font-family: var(--f-type); font-size: 0.9375rem; line-height: 1.6; tab-size: 2; }
.codecard .c { color: var(--code-dim); font-style: italic; }
.copy {
  font: inherit; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer; min-height: 40px; min-width: 44px; padding: 0 0.8rem;
  background: transparent; color: var(--code-ink); border: 1.5px solid var(--code-dim); border-radius: 2px;
}
.copy:hover { background: rgba(255,255,255,0.08); }
.copy.done { color: #9fe0b8; border-color: #9fe0b8; }

.note-card { position: relative; background: var(--desk-2); border-left: 4px solid var(--stamp-blue); padding: 1rem 1.2rem; }
.note-card .stamp { margin-bottom: 0.6rem; }
.why { position: relative; padding: 0.9rem 1.2rem 1rem 1.2rem; border: 1.5px dashed var(--stamp-blue); border-radius: 2px; transform: rotate(-0.3deg); }
.why-label { display: block; font-family: var(--f-pencil); font-size: 1.7rem; color: var(--stamp-blue); line-height: 1; margin-bottom: 0.3rem; }
.query {
  position: relative; background: #f3e3b3; color: #1f1c17; padding: 0.9rem 1.2rem 1rem; border: 1px solid #d9c07a;
  box-shadow: var(--shadow);
}
.query-label { display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: 1px solid #b89a4a; margin-bottom: 0.5rem; padding-bottom: 0.3rem; color: #6b2a22; }
:root[data-theme="dark"] .query { background: #3a3120; color: #f3e3b3; border-color: #5c4c2a; }
:root[data-theme="dark"] .query-label { color: #f3b0a6; border-color: #7d6636; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .query { background: #3a3120; color: #f3e3b3; border-color: #5c4c2a; }
  :root:not([data-theme="light"]) .query-label { color: #f3b0a6; border-color: #7d6636; }
}
.filed { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 3rem; padding-top: 1rem; border-top: 1.5px solid var(--rule-red); }
.filed a { border: 1.5px solid var(--card-edge); padding: 0.35rem 0.7rem; text-decoration: none; color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.filed a:hover { border-color: var(--ink); }
.share { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.borrower { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; }
.borrower form { display: grid; gap: 0.7rem; }
.field-line { display: grid; gap: 0.2rem; }
.field-line label { font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; }
.field-line input[type="email"] {
  font: inherit; min-height: 48px; background: transparent; color: var(--ink); border: 0; border-bottom: 2px solid var(--ink);
  padding: 0.3rem 0.1rem; border-radius: 0;
}
.field-line input::placeholder { color: var(--ink-soft); }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 1rem; }
.consent input { width: 22px; height: 22px; margin-top: 0.2rem; accent-color: var(--rule-red); flex: none; }
.form-msg { min-height: 1.6em; font-weight: 700; color: var(--stamp-blue); margin: 0; }
.form-msg.err { color: var(--red-ink); }
@media (max-width: 800px) { .borrower { grid-template-columns: 1fr; } }

/* ───────────── About bits ───────────── */
.duecard { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow); padding: 0 1.2rem 1.4rem; }
.duecard-title { text-align: center; font-family: var(--f-display); font-size: 1.8rem; padding: 0.8rem 0 0.4rem; border-bottom: 2px solid var(--rule-red); }
.duetable { width: 100%; border-collapse: collapse; font-size: 1rem; }
.duetable th { text-align: left; font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 0.6rem; border-bottom: 1px solid var(--ink); }
.duetable td { padding: 0.6rem; border-bottom: 1px solid var(--rule-blue); vertical-align: top; }
.duetable td:first-child { color: var(--stamp-blue); font-weight: 700; white-space: nowrap; }
.duetable tr:nth-child(odd) td:first-child { color: var(--red-ink); }
.phases { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 1.4rem; }
.phases ul { padding-left: 1.2rem; margin: 0.5rem 0 0; font-size: 1rem; }
.phases li + li { margin-top: 0.4rem; }
details.history > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.5rem 1.2rem;
  font-weight: 700; background: var(--ink); color: var(--card); border-radius: 3px; box-shadow: 3px 3px 0 var(--rule-red);
}
details.history > summary::-webkit-details-marker { display: none; }
details.history[open] > summary::after { content: " — hide"; }
.proverbs { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); counter-reset: prov; }
.proverb { counter-increment: prov; background: var(--card); border: 1px solid var(--card-edge); padding: 0.4rem 1rem 1.3rem; box-shadow: var(--shadow); }
.proverb::before { content: "Proverb " counter(prov); display: block; border-bottom: 1.5px solid var(--rule-red); padding-bottom: 0.3rem; margin-bottom: 0.7rem; font-weight: 700; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-ink); }
.proverb p { font-family: var(--f-display); font-size: 1.35rem; line-height: 1.35; margin: 0; }
.proverb:nth-child(2n) { transform: rotate(0.8deg); } .proverb:nth-child(3n) { transform: rotate(-0.7deg); }
.authority dt { font-weight: 700; margin-top: 0.6rem; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.authority dd { margin: 0.1rem 0 0; }
.authority ul { margin: 0.2rem 0 0; padding-left: 1.2rem; font-size: 1rem; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* ───────────── Patterns ───────────── */
.searchbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: end; margin-top: 1rem; }
.searchbar label { font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }
.searchbar input, .searchbar select {
  font: inherit; font-size: 1.0625rem; min-height: 48px; width: 100%; padding: 0.4rem 0.8rem; background: var(--card); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 2px;
}
@media (max-width: 640px) { .searchbar { grid-template-columns: 1fr; } }
.guide-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 1.4rem; border-bottom: 3px solid var(--ink); padding: 0 0.3rem; }
.guide-tabs button {
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; min-height: 44px; padding: 0.35rem 1rem 0.25rem;
  border: 1.5px solid var(--card-edge); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--desk-2); color: var(--ink-soft);
}
.guide-tabs button:hover { color: var(--ink); }
.guide-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.results-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin: 1rem 0; }
.textbtn { font: inherit; background: none; border: 0; color: var(--link); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 0.3rem; }
.threeways { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 1rem; }
.threeways .panel h3 { font-family: var(--f-type); font-weight: 700; font-size: 1.2rem; }

.panes { background: var(--card); border: 1px solid var(--card-edge); box-shadow: var(--shadow); margin-top: 2rem; }
.panes-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 0.6rem; padding: 0.8rem 1rem 0; border-bottom: 3px solid var(--ink); background: var(--desk-2); }
.panes-bar [role="tablist"] { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.panes-bar [role="tab"] {
  font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; min-height: 44px; padding: 0.3rem 1rem 0.2rem;
  border: 1.5px solid var(--card-edge); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--card); color: var(--ink-soft);
}
.panes-bar [role="tab"][aria-selected="true"] { background: var(--ink); color: var(--card); border-color: var(--ink); }
.pane-tools { display: flex; gap: 0.5rem; padding-bottom: 0.5rem; }
.pane-tools .copy { color: var(--ink); border-color: var(--ink); background: var(--card); min-height: 44px; }
.pane-tools .copy.done { color: #1c6e52; border-color: #1c6e52; }
[role="tabpanel"] { padding: 1.4rem; }
[role="tabpanel"] pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.9375rem; line-height: 1.6; background: var(--code-bg); color: var(--code-ink); padding: 1.1rem; border-radius: 2px; max-height: 32rem; overflow: auto; }
.pane-note { font-size: 1rem; color: var(--ink-soft); }
.usecases { columns: 2 16rem; padding-left: 1.3rem; }
.usecases li { break-inside: avoid; margin-bottom: 0.3rem; }

/* The live pattern preview (Hairline stat strip) — uses the pattern library's own tokens */
.stage {
  --ground: #eef0f3; --surface: #ffffff; --surface-2: #f5f7f9; --border: #d2d8e0; --ink: #161b22; --dim: #56606e; --accent: #364f6a; --radius: 10px;
  background: var(--ground); color: var(--ink); padding: 1.4rem; border-radius: 4px; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.5;
  container-type: inline-size;
}
:root[data-theme="dark"] .stage { --ground: #10141a; --surface: #191f27; --surface-2: #202834; --border: #2c3743; --ink: #e6ecf3; --dim: #97a4b4; --accent: #6f92bd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage { --ground: #10141a; --surface: #191f27; --surface-2: #202834; --border: #2c3743; --ink: #e6ecf3; --dim: #97a4b4; --accent: #6f92bd; } }
.stage :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.hss-caption { margin: 0 0 0.6rem; color: var(--dim); }
.hss-strip { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; grid-template-columns: 1fr; margin-bottom: 1.6rem; }
@container (min-width: 21rem) { .hss-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 42rem) { .hss-strip.four { grid-template-columns: repeat(4, minmax(0, 1fr)); } .hss-strip.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 54rem) { .hss-strip.five { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.hss-tile { background: var(--surface); padding: 0.85rem 1rem; display: grid; gap: 0.15rem; min-width: 0; text-align: left; font: inherit; color: inherit; border: 0; }
button.hss-tile { cursor: pointer; }
button.hss-tile:hover { background: var(--surface-2); }
.hss-tile[aria-pressed="true"] { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); box-shadow: inset 0 -3px 0 var(--accent); }
.hss-label { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dim); overflow-wrap: anywhere; }
.hss-figure { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.hss-figure.none { color: var(--dim); font-weight: 400; }
.hss-sub { font-size: 0.875rem; color: var(--dim); }
.hss-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.hss-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 1rem; border-top: 1px solid var(--border); }
.hss-list li:first-child { border-top: 0; }
.hss-list .st { color: var(--dim); white-space: nowrap; }
.hss-status { margin: 0.6rem 0 0; color: var(--dim); }

/* ───────────── Footer (cabinet plinth) ───────────── */
.plinth {
  margin-top: 5rem; color: var(--label);
  background:
    url("assets/oak-grain.jpg") center/cover,
    repeating-linear-gradient(90deg, rgba(0,0,0,0.08) 0 2px, transparent 2px 11px, rgba(255,255,255,0.03) 11px 13px, transparent 13px 29px),
    linear-gradient(180deg, var(--oak), var(--oak-dark));
  background-blend-mode: multiply, normal, normal;
  border-top: 8px solid var(--oak-dark);
  padding: 2.5rem 0 1.5rem;
}
.plinth-card { background: var(--card); color: var(--ink); border-radius: 3px; padding: 0 1.4rem 1.6rem; box-shadow: var(--lift); }
.plinth-card .icard-head { margin-bottom: 1.2rem; }
.plinth-grid { display: grid; gap: 1.6rem 2rem; grid-template-columns: 1.3fr 1fr 1fr 1.5fr; }
@media (max-width: 960px) { .plinth-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .plinth-grid { grid-template-columns: 1fr; } }
.plinth h2 { font-family: var(--f-type); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.4rem; color: var(--red-ink); }
.plinth ul { list-style: none; padding: 0; margin: 0; }
.plinth li a { display: inline-flex; min-height: 40px; align-items: center; color: var(--ink); }
.plinth .mini-form { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.plinth .mini-form input { flex: 1 1 10rem; min-height: 44px; font: inherit; font-size: 1rem; padding: 0.3rem 0.6rem; background: transparent; color: var(--ink); border: 0; border-bottom: 2px solid var(--ink); }
.plinth .mini-form .btn { min-height: 44px; font-size: 1rem; }
.plinth-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 1.2rem; font-size: 0.9375rem; color: #eadfc6; }
.plinth-bottom a { color: #f6efd9; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .icard:hover, .icard:focus-within, .drawer-front:hover { transform: none; }
}
.span-2 { grid-column: span 2; }
@media (max-width: 900px) { .span-2 { grid-column: auto; } }
.icard-head { flex-wrap: wrap; }
.icard-head .datestamp { white-space: normal; text-align: right; }