/* Griffons Den — members app
   Palette and fonts taken from griffonsden.com; see docs/brand.md.
   Mobile-first: base styles target a ~380px phone, min-width queries widen from there. */

:root {
  --gold:      #d2ac2a;
  --gold-dim:  #a8871d;
  --gold-soft: #e6c95f;      /* headings on very dark ground */
  --red-deep:  #741112;
  --red-dark:  #720001;
  --crimson:   #d60039;
  --black:     #000000;
  --cream:     #faf6f5;
  --white:     #ffffff;
  --teal:      #82c0c7;

  /* v0.8 §3.14: dark scheme matching griffonsden.com. The page ground is near
     black, section bands are dark red, headings and links are gold. Everything
     below is checked against WCAG AA on the ground it actually sits on. */
  /* v0.9 §3.14: the ground is the site's own maroon, taken from the live CSS
     (#720001 on the home sections), with the griffon emblem as a faint fixed
     watermark behind the content, as the site does on its inner pages. */
  --ground:    #720001;      /* page background — the site's maroon */
  --ground-dk: #4a0708;      /* the darker end of the same family */
  --panel:     rgba(0,0,0,.30);   /* cards and tables: the ground, sunk */
  --panel-2:   rgba(0,0,0,.44);   /* inputs, raised rows */
  --band:      #4a0708;
  --topbar:    #d2ac2a;      /* the site's gold top bar */
  --topbar-ink:#741112;      /* its dark red text */
  --ink:       #f2ece6;      /* body text on the maroon — 10.4:1 */
  --muted:     #d8c9bf;      /* secondary text — 7.6:1 */
  --rule:      rgba(210,172,42,.28);
  --sunk:      rgba(0,0,0,.22);

  --display: "Metal Mania", "Papyrus", fantasy;
  --serif:   "Marcellus SC", Georgia, "Times New Roman", serif;
  --body:    "Montserrat", Helvetica, Arial, "Lucida Grande", sans-serif;

  --tap: 44px;                 /* minimum tap target */
  --main-top: 20px;            /* main's top padding; heroes cancel it exactly */
  --pad: 16px;                 /* page gutter on a phone */
  --content: 1080px;           /* the width of the centred content column */
  /* v0.11 §3.14: a hero runs edge to edge, but its words keep the body's own
     side margin. This is that margin measured from the viewport, so it lines up
     with the content column on desktop and falls back to the gutter on a phone. */
  --hero-pad: max(var(--pad), calc(50vw - var(--content) / 2 + var(--pad)));
  --radius: 10px;              /* the site rounds its content rows at 10px */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--body);
  font-size: 16px;             /* the site uses 14px; 16px avoids iOS zoom-on-focus */
  line-height: 1.6;
  color: var(--ink);
  background: var(--ground);
  overflow-wrap: break-word;
}

/* The watermark: the griffon-and-sword emblem, large and faint, fixed behind
   the page exactly as the site sets it — cover, centred at the top, no repeat,
   under a dark wash so body text keeps its contrast. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(28, 2, 2, .82), rgba(28, 2, 2, .88)),
    url("/img/emblem-watermark.png");
  background-size: auto, min(760px, 130%);
  background-position: center, center 8%;
  background-repeat: no-repeat, no-repeat;
  pointer-events: none;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.15; margin: 0 0 .5em; }
h1 { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--gold); letter-spacing: .01em; }
h2 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; color: var(--gold); }
/* Metal Mania stops being legible at sub-heading sizes — see docs/brand.md */
h3 { font-family: var(--serif); font-size: 1.05rem; color: var(--gold-soft); }
h4 { font-family: var(--serif); font-size: .95rem; color: var(--ink); }

p { margin: 0 0 1em; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold-soft); }

small { font-size: .8125rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125em; background: var(--sunk); color: var(--ink); padding: .1em .35em; border-radius: 4px; }
img { max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

/* ---------- top bar, header and menu (v0.9 §3.14) ------------------------
   Reproduces griffonsden.com's chrome: a full-width gold bar carrying the phone
   number and email in the site's dark red, then a black header with the square
   emblem on the left and a menu button on the right. Unlike the site, the button
   is present at every width and there is no horizontal row of links. */

.topbar {
  background: var(--topbar);
  color: var(--topbar-ink);
  font-size: .875rem;
  padding: 6px var(--pad);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 22px;
  text-align: center;
}
.topbar a {
  color: var(--topbar-ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
}
.topbar a:hover { color: #4a0708; text-decoration: underline; }
.topbar svg { width: 14px; height: 14px; fill: currentColor; flex: none; }

.masthead {
  background: #000;
  padding: 10px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 12px;
  position: relative;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.25rem;
  line-height: 1;
  min-height: var(--tap);
}
.wordmark img { width: 56px; height: 56px; display: block; }
/* The emblem already carries the name, so the word is for screen readers and
   wide screens only. */
.wordmark span { display: none; }

.menu-toggle {
  background: none;
  border: 0;
  color: var(--gold);
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 8px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 6px;
}
.menu-toggle:hover { background: rgba(210,172,42,.14); }
.menu-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.menu-toggle .label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* The panel. Hidden by default; opened by the checkbox that precedes it, so it
   works with no JavaScript at all. */
.menu-state { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.menu-panel {
  display: none;
  background: #0b0b0b;
  border-top: 1px solid rgba(210,172,42,.35);
  /* It sits inside the header now, so it wraps onto its own line and pulls back
     the header's own padding to stay full width — the same panel as before. */
  width: calc(100% + var(--pad) * 2);
  margin: 10px calc(var(--pad) * -1) -10px;
}
.menu-state:checked ~ .masthead .menu-panel { display: block; }
.menu-panel ul { list-style: none; margin: 0; padding: 6px 0 10px; }
.menu-panel a, .menu-panel .link {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 10px var(--pad);
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .04em;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(210,172,42,.14);
  text-align: left;
  cursor: pointer;
}
.menu-panel a:hover, .menu-panel .link:hover { background: rgba(210,172,42,.12); color: var(--gold-soft); }
.menu-panel a.current { color: #fff; background: rgba(210,172,42,.2); }
.menu-panel form { margin: 0; }

@media (min-width: 700px) {
  .wordmark span { display: inline; font-size: 1.5rem; }
}

/* ---------- section headings, the site's pattern -------------------------
   A small gold letter-spaced eyebrow over a white Montserrat headline whose
   last word is bold — "GRIFFONS DEN / WEEKLY **SCHEDULE**". */

.eyebrow {
  font-family: var(--serif);
  font-size: .8125rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 .35em;
}
.headline {
  font-family: var(--body);
  font-weight: 300;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: .01em;
  line-height: 1.05;
  font-size: clamp(1.9rem, 8vw, 3rem);
  margin: 0 0 .6em;
}
.headline b { font-weight: 800; display: block; }

/* The site's divider: a gold rule with a diamond at each end. */
.rule {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(210,172,42,.55) 12%, rgba(210,172,42,.55) 88%, transparent);
  margin: 30px 0;
  position: relative;
  overflow: visible;
}
.rule::before, .rule::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: translateY(-50%) rotate(45deg);
}
.rule::before { left: 0; }
.rule::after { right: 0; }

/* ---------- hero and photographs (v0.9 §3.14) ----------------------------
   The hero is a full-bleed image with the title over it — no border, no frame,
   no box. Content sections sit directly on the maroon ground. */

.hero {
  position: relative;
  margin: 0 0 26px;
  padding: 54px var(--hero-pad) 46px;
  background-color: var(--ground-dk);
  background-image: url("/img/den-table-800.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,2,2,.86) 0%, rgba(12,2,2,.76) 45%, rgba(12,2,2,.90) 100%);
}
.hero > * { position: relative; }
/* Over a photograph the eyebrow is small gold text, so it takes the lighter
   gold to stay above AA rather than only AA-large. Measured in docs/brand.md. */
.hero .eyebrow, .pagehead .eyebrow { color: var(--gold-soft); }
/* Only the home hero uses the fantasy display face, and only for its title. */
.hero .hero-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: none;
  color: var(--gold);
  font-size: clamp(2.1rem, 9vw, 4rem);
  line-height: 1.05;
  margin: 0 0 .35em;
  letter-spacing: .01em;
}
.hero .lede { color: var(--ink); max-width: 46ch; margin-bottom: 0; }

/* A photograph behind a page heading, same treatment, shallower. */
.pagehead {
  position: relative;
  margin: 0 0 26px;
  padding: 40px var(--hero-pad) 34px;
  background-color: var(--ground-dk);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 0;
}
.pagehead::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,2,2,.86) 0%, rgba(12,2,2,.78) 45%, rgba(12,2,2,.90) 100%);
}
.pagehead > * { position: relative; }
.pagehead .lede { color: var(--ink); margin-bottom: 0; }

.band-table { background-image: url("/img/den-table-800.jpg"); }
.band-shelves { background-image: url("/img/den-shelves-800.jpg"); }
.band-room  { background-image: url("/img/den-room-800.jpg"); }

/* v0.11 §3.14: edge to edge at every width, not merely to the edge of the
   centred column. The side margins pull the band out of main to the viewport's
   own edges; --hero-pad puts the words back on the content margin inside it. */
.hero, .pagehead, .bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
/* …but the words inside a bled band keep the body's own side margin (§ fix 6). */
.bleed > * { padding-left: 0; padding-right: 0; }

/* ---------- layout ---/* ---------- layout ------------------------------------------------------ */

main {
  max-width: 1080px;
  width: 100%;
  margin: 0 auto;
  padding: var(--main-top) var(--pad) 48px;
  flex: 1 0 auto;
}
/* A full-bleed hero or page head starts flush against the header — no dead
   strip of ground between the two. It pulls back exactly the padding main
   applies, so the two can never drift apart. */
main > .hero:first-child,
main > section:first-child > .hero:first-child,
main > section:first-child > .pagehead:first-child,
main > .pagehead:first-child { margin-top: calc(var(--main-top) * -1); }

section { margin: 0 0 32px; }
section:last-child { margin-bottom: 0; }

.narrow, .prose { max-width: 62ch; }
.lede { font-size: 1.05rem; color: var(--muted); }
.fine { font-size: .8125rem; color: var(--muted); }
.opt { font-size: .8125rem; color: var(--muted); font-weight: 400; }
.crumb { font-size: .875rem; margin-bottom: .5em; }
.empty { color: var(--muted); font-style: italic; }

.prose h2 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: .5em; }

/* ---------- the contract pages ------------------------------------------
   /terms and /gm-agreement are rendered from the owner's Markdown in docs/.
   The document supplies the structure; this only makes it read as a contract:
   numbered sections that are easy to find, and inline code for the
   [PLACEHOLDER]s that are still to be filled in. */

.banner {
  background: var(--gold);
  color: var(--red-deep);
  font-family: var(--serif);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 0 0 24px;
}
.contract { max-width: 68ch; }
/* Each numbered section is a landing point, so give it room and the gold of a
   heading — but in the serif, not the display face: seventeen sections of
   Metal Mania reads as a poster rather than a contract. */
.contract h2 {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--gold);
  font-size: 1.3rem;
  letter-spacing: .02em;
  margin: 2em 0 .5em;
}
.contract h3 {
  font-family: var(--serif);
  color: var(--gold-soft);
  font-size: 1.05rem;
  letter-spacing: .02em;
  margin: 1.6em 0 .4em;
}
.contract h2:first-of-type, .contract h3:first-of-type { margin-top: 1em; }
.contract p { margin: 0 0 .9em; }
.contract hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; }
/* A placeholder still to be settled: it should look unfinished on the page,
   because it is. */
.contract code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
  background: var(--sunk);
  border: 1px dashed var(--rule);
  border-radius: 4px;
  padding: 1px 5px;
  overflow-wrap: anywhere;
}
.contract blockquote {
  margin: 1em 0;
  padding-left: 14px;
  border-left: 3px solid var(--rule);
  color: var(--muted);
}
/* Tables come through the app's own .grid treatment — labelled cards on a
   phone, a real table above 820px — so nothing has to scroll sideways. A table
   with no header row is a list of label/value pairs, not a grid of data, so its
   first column reads as the label instead. */
.md-table { margin: 1.2em 0; }
.md-table.is-keyvalue td:first-child {
  font-family: var(--serif);
  color: var(--gold-soft);
}
.md-table.is-keyvalue td { display: block; padding: 4px 0; }

/* Stacked by default; side by side once there is room. */
.cols, .split { display: grid; gap: 20px; }
.row { display: grid; gap: 12px; }

/* ---------- hero and pricing -------------------------------------------- */

.schedule-head { margin-bottom: 20px; }
.schedule-head h1 { margin-bottom: .2em; }
.schedule-head .lede { margin-bottom: 0; }



.tables h2, .pricing h2 { font-size: 1.6rem; }

.ladder { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 10px; }
.ladder li {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0 10px;
}
.ladder .when { font-family: var(--serif); color: var(--gold-soft); }
.ladder .amount { font-size: 1.25rem; font-weight: 700; }
.ladder .per { grid-column: 1 / -1; font-size: .8125rem; color: var(--muted); }

/* ---------- Game Masters (spec §3.12) ------------------------------------ */

.gm-list { display: grid; gap: 18px; }
.gm-card {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px;
  display: grid;
  gap: 14px;
}
.gm-card h2 { margin-bottom: .2em; }
.gm-card h3 { margin-top: .8em; }
.gm-inline { margin-top: 20px; }
.gm-systems { color: var(--muted); font-family: var(--serif); font-size: .9rem; margin-bottom: .6em; }
.gm-links a { margin-right: .2em; }

.gm-photo {
  width: 112px;
  height: 112px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--gold);
  display: block;
}
.gm-photo-empty {
  background: var(--panel-2) url("/griffons-den-logo-240.png") center / 60% no-repeat;
  opacity: .5;
}
.gm-photo-edit { display: grid; gap: 14px; align-items: start; }
.gm-link-row { align-items: end; }

@media (min-width: 600px) {
  .gm-card { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
  .gm-photo-edit { grid-template-columns: 112px minmax(0, 1fr); }
  .gm-link-row { grid-template-columns: 1fr 2fr; }
}

/* ---------- seasons and one-shots ---------------------------------------- */

.offers { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 14px; }
.offers li {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--teal);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.offers h3 { margin-bottom: .25em; }
.offers .meta { font-size: .875rem; color: var(--muted); margin-bottom: .5em; }
.offers .offer-price { font-weight: 700; margin-bottom: .75em; }
.offers .offer-price small { font-weight: 400; color: var(--muted); font-family: var(--serif); margin-left: .4em; }

/* ---------- buttons and forms ------------------------------------------- */

.button, button, input[type="submit"] {
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: .04em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 10px 20px;
  background: var(--red-deep);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.button:hover, button:hover, input[type="submit"]:hover { background: #8d1516; color: var(--gold-soft); }
.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

button.primary, .button.primary { font-size: 1.05rem; width: 100%; }
button.small, .button.small { min-height: var(--tap); padding: 6px 16px; font-size: .875rem; }
button.danger, .button.danger { background: var(--crimson); border-color: var(--crimson); color: var(--white); }
button.danger:hover { background: #a80030; border-color: #a80030; }

/* Text-only buttons that sit inside prose or table cells. */
button.link {
  background: none;
  border: 0;
  color: var(--gold);
  padding: 0 10px;
  font-family: var(--body);
  font-size: .9rem;
  text-decoration: underline;
  min-height: var(--tap);
}
main button.link { color: var(--gold); font-family: var(--serif); }
main button.link:hover { color: var(--gold-soft); background: none; }

.stack { display: grid; gap: 14px; align-content: start; }
.stack h2, .stack h3, .stack h4 { margin-bottom: 0; }

label {
  display: block;
  font-family: var(--serif);
  font-size: .9rem;
  color: var(--gold-soft);
}
label.check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--body);
  color: var(--ink);
  min-height: var(--tap);
}
label.check input { width: 22px; height: 22px; margin: 0; flex: none; }

input, select, textarea {
  font-family: var(--body);
  font-size: 16px;             /* keeps iOS from zooming the viewport on focus */
  width: 100%;
  min-height: var(--tap);
  margin-top: 4px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
input::placeholder, textarea::placeholder { color: #8d8177; }
/* The browser's own date/time pickers default to a dark glyph on dark. */
input[type="date"], input[type="time"] { color-scheme: dark; }
textarea { min-height: 96px; line-height: 1.5; }
input[type="checkbox"] { width: auto; min-height: 0; }

.inline { display: inline; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.inline-form input { margin-top: 0; flex: 1 1 8rem; min-width: 0; }
.inline-form button { flex: none; }
.narrow-form { max-width: 34rem; }

details {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0 14px;
  margin-bottom: 14px;
}
details[open] { padding-bottom: 14px; }
summary {
  font-family: var(--serif);
  color: var(--gold-soft);
  cursor: pointer;
  padding: 12px 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
details .stack { margin-top: 4px; }

/* ---------- landing band (spec §3.13) ------------------------------------
   One slim band under the menu, above the tables. Mobile stacks it; from 600px
   the sign-in button sits at the right. */

.memberband {
  background: rgba(0,0,0,.34);
  border-bottom: 1px solid rgba(210,172,42,.3);
  padding: 10px var(--pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}
.memberband p {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .95rem;
}
.memberband .button { flex: none; }

@media (min-width: 600px) {
  .memberband { justify-content: space-between; padding: 10px var(--pad); }
}

/* ---------- notices ----------------------------------------------------- */

.ribbon, .flash {
  padding: 12px var(--pad);
  font-size: .9rem;
  text-align: center;
}
.ribbon { background: var(--gold); color: var(--red-deep); font-family: var(--serif); }
.flash { border-radius: var(--radius); text-align: left; margin: 0 var(--pad) 16px; }
main .flash { margin-left: 0; margin-right: 0; }
.flash-ok    { background: #e7f3e9; color: #1d4427; border: 1px solid #b9d9c1; }
.flash-error { background: #fdeaef; color: #7a0322; border: 1px solid #f3bfcd; }
.flash-warn  { background: #fdf3dd; color: #6b4c05; border: 1px solid #ecd9a2; }

/* ---------- tables: cards on a phone, a real grid on a wide screen ------- */

/* On a phone the rows are cards, so the table stops doing table layout
   entirely — otherwise a long unbreakable cell value (an email address) sets a
   min-content width the card layout cannot shrink below. */
.grid { width: 100%; border-collapse: collapse; margin-bottom: 1em; display: block; }
.grid tbody { display: block; }

/* Phone layout. Each row becomes a card; each cell shows its column name from
   the data-label attribute in the template. Nothing is shrunk to fit. */
.grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.grid tr {
  display: block;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.grid td {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  border: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.grid td::before {
  content: attr(data-label);
  font-family: var(--serif);
  font-size: .8125rem;
  color: var(--muted);
}
/* Cells with no column name (action buttons) span the card. */
.grid td[data-label=""] { display: block; padding-top: 10px; }
.grid td[data-label=""]::before { content: none; }
.grid td:empty { display: none; }

.grid td.night { font-family: var(--serif); color: var(--gold-soft); }
.grid td.name a { font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); }
/* A <small> inside a cell is its own grid item, so keep it in the value column
   under the value rather than letting it fall under the label. */
/* nowrap suits a short session time; longer notes must wrap or they set the
   card's minimum width and push the page sideways. */
.grid td small { grid-column: 2; display: block; color: var(--muted); }
.grid td.night small { white-space: nowrap; }

.grid tr.is-full { border-left-color: var(--rule); }
.grid tr.is-full td.seats { color: var(--muted); }
.grid tr.is-today { border-left-color: var(--crimson); }
.grid tr.status-delivered { border-left-color: var(--teal); }
.grid tr.status-flex, .grid tr.status-cancelled_credit { border-left-color: var(--crimson); }
.grid tr.status-closure, .grid tr.status-ended, .grid tr.status-cancelled { border-left-color: var(--rule); }
.grid tr.status-past_due { border-left-color: var(--crimson); }
.grid tr.status-paused { border-left-color: var(--muted); }

.grid td.empty { display: block; }
.grid td.empty::before { content: none; }

/* A totals row (the GM pay run) is part of the same stack on a phone and a
   footer row on a wide screen; it reads as a summary either way. */
.grid tfoot { display: block; }
.grid tfoot tr.total { border-left-color: var(--gold-soft); background: var(--panel-2); }

/* A feed address to copy: its own box, wrapping anywhere, so it can be selected
   in one gesture rather than picked out of a sentence. */
.copybox {
  background: var(--panel-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin: 0 0 1em;
  overflow-wrap: anywhere;
}
.copybox code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9375rem; }
.howto li { margin-bottom: .5em; }

/* Label text that only a screen reader needs. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* A row that carries a nested list rather than a field/value pair — the seats
   held by one member — is not laid out as a labelled cell: the fixed label
   column left too little for a date input and pushed the page wider than the
   viewport. */
tr.seatlist td { display: block; }
tr.seatlist td::before { content: none; }

/* A form control in a card cell must not set the cell's minimum width — a
   <select> carries an intrinsic one that pushed the page 3px wide at 320. */
.grid td select, .grid td input, .grid td button { max-width: 100%; min-width: 0; }

/* ---------- lists ------------------------------------------------------- */

.plain { list-style: none; margin: 0 0 1em; padding: 0; }
.plain li { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.plain li:last-child { border-bottom: 0; }
.plain.small { font-size: .875rem; }

.dates { list-style: none; margin: 0 0 1em; padding: 0; }
.dates li {
  padding: 8px 12px;
  border-left: 3px solid var(--gold);
  background: var(--panel);
  border-radius: 0 6px 6px 0;
  margin-bottom: 6px;
}
.dates li.status-closure { border-left-color: var(--rule); color: var(--muted); }
.dates li.status-flex,
.dates li.status-cancelled_credit { border-left-color: var(--crimson); color: var(--muted); text-decoration: line-through; }
.dates li.status-rescheduled { border-left-color: var(--teal); }

.roster { list-style: none; margin: 0; padding: 0; }
.roster li { border-bottom: 1px solid var(--rule); }
.roster li:last-child { border-bottom: 0; }

/* ---------- cards, seats, tallies --------------------------------------- */

.seat, .join {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 16px var(--pad);
  margin-bottom: 20px;
}
.seat > header { border-bottom: 1px solid var(--rule); margin-bottom: 14px; padding-bottom: 10px; }
.seat > header h2 { margin-bottom: .2em; }
.seat > header p { margin-bottom: .5em; color: var(--muted); font-size: .9rem; }
.seat.status-past_due { border-left: 4px solid var(--crimson); }
.seat.status-paused { border-left: 4px solid var(--muted); }
.seat.status-active { border-left: 4px solid var(--gold); }

.pill {
  display: inline-block;
  font-family: var(--serif);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--sunk);
  color: var(--gold-soft);
  border: 1px solid var(--rule);
}
.status-past_due .pill { background: #fdeaef; color: #7a0322; border-color: #f3bfcd; }
.status-active .pill { background: #f6efd8; color: #6b4c05; border-color: #ecd9a2; }

.big { font-size: 1.6rem; font-weight: 700; margin-bottom: .2em; }
.big small { font-size: .875rem; font-weight: 400; color: var(--muted); }
.price { font-size: 1.35rem; font-weight: 700; }
.price small { display: block; font-size: .8125rem; font-weight: 400; color: var(--muted); line-height: 1.5; }
.recap { background: var(--sunk); border-radius: 8px; padding: 12px 14px; font-size: .9375rem; }

.tallies { display: grid; gap: 12px; margin-bottom: 24px; }
.tally {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: grid;
  gap: 2px;
}
.tally strong { font-size: 1.5rem; font-family: var(--serif); color: var(--gold); line-height: 1.2; }
.tally span { font-size: .8125rem; color: var(--muted); }

.weeknav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}
.weeknav h2 { font-size: 1.05rem; font-family: var(--serif); margin: 0; text-align: center; }
.weeknav a { min-height: var(--tap); display: inline-flex; align-items: center; font-size: .9rem; }

/* ---------- admin sub-navigation ---------------------------------------- */

/* The admin tabs wrap rather than scroll sideways: with eight of them a hidden
   scroll hides half the sections on a phone, and a scroll container was also
   pushing the page's own scroll width past the viewport. */
.subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
  padding-bottom: 4px;
}
.subnav a {
  flex: 0 1 auto;
  font-family: var(--serif);
  font-size: .875rem;
  text-decoration: none;
  color: var(--gold);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0 14px;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.subnav a.current { background: var(--red-deep); color: var(--gold); border-color: var(--red-deep); }

.onramp {
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-top: 18px;
}
.onramp h2 { font-size: 1.15rem; }
.onramp details { background: var(--panel); }

/* ---------- schedule ----------------------------------------------------- */

.viewswitch { display: flex; gap: 6px; margin-bottom: 16px; }
.viewswitch a {
  flex: 1;
  font-family: var(--serif);
  font-size: .9rem;
  text-align: center;
  text-decoration: none;
  color: var(--gold);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.viewswitch a.current { background: var(--red-deep); color: var(--gold); border-color: var(--red-deep); }

.legend { font-size: .8125rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.key { width: 14px; height: 14px; border-radius: 3px; display: inline-block; vertical-align: -2px; margin-right: 2px; }
.key-mine { background: var(--gold); }
.key-off { background: var(--crimson); }
.key-closed { background: var(--rule); border: 1px solid var(--muted); }

.days { display: grid; gap: 12px; }
.day {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0;
}
.day.is-today { border-left: 4px solid var(--crimson); }
.day.is-closed { background: var(--sunk); }
.day h3 { font-size: .9rem; margin-bottom: .4em; color: var(--gold-soft); }

.evs { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule); }
.ev:first-child { border-top: 0; }
.ev-time { font-family: var(--serif); font-size: .8125rem; color: var(--muted); }
.ev-body a { font-weight: 600; display: inline-flex; align-items: center; min-height: 30px; }
.ev-body small { display: block; font-size: .75rem; color: var(--muted); }
.ev.is-mine { border-left: 4px solid var(--gold); padding-left: 8px; margin-left: -12px; }
.ev.is-off .ev-body > a { text-decoration: line-through; color: var(--muted); }

.tag {
  display: inline-block;
  font-family: var(--serif);
  font-style: normal;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  white-space: nowrap;
}
.tag-off { background: #fdeaef; color: #7a0322; }
.tag-closed { background: var(--sunk); color: var(--muted); }
.tag-mine { background: #f6efd8; color: #6b4c05; }
.tag-alt { background: #e8f2f3; color: #245c63; }
.tag-room { background: var(--sunk); color: var(--gold-soft); border: 1px solid var(--rule); }
.key-room { font-family: var(--serif); font-size: .7rem; background: var(--sunk); border: 1px solid var(--rule); border-radius: 3px; padding: 1px 5px; color: var(--gold-soft); }

/* Room badge inside a month-grid cell: short, so the title still fits. */
.mroom {
  font-family: var(--serif);
  font-size: .62rem;
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0 3px;
  margin-right: 3px;
  color: var(--gold-soft);
}

/* Month grid: scrolls sideways on a phone rather than crushing seven columns. */
.monthgrid { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1em; }
.monthhead, .monthrow { display: grid; grid-template-columns: repeat(7, minmax(92px, 1fr)); gap: 4px; min-width: 644px; }
.monthhead { margin-bottom: 4px; }
.monthhead span { font-family: var(--serif); font-size: .75rem; color: var(--muted); text-align: center; }
.monthrow { margin-bottom: 4px; }
.mcell {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px;
  min-height: 74px;
}
.mcell.is-blank { background: transparent; border-color: transparent; }
.mcell.is-closed { background: var(--sunk); }
.mcell.is-today { border-color: var(--crimson); border-width: 2px; }
.mday { font-family: var(--serif); font-size: .75rem; color: var(--muted); display: block; }
.mcell.is-blank { background: transparent; border-color: transparent; }
.mev {
  display: block;
  font-size: .7rem;
  line-height: 1.3;
  padding: 2px 4px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mev.is-mine { background: #f6efd8; border-left: 3px solid var(--gold); }
.mev.is-off { text-decoration: line-through; color: var(--muted); }

.subscribe { margin-top: 32px; border-top: 1px solid var(--rule); padding-top: 20px; }
.subscribe code { word-break: break-all; }

@media (min-width: 820px) {
  .viewswitch { justify-content: flex-start; }
  .viewswitch a { flex: 0 0 auto; padding: 0 22px; }
  .monthhead, .monthrow { min-width: 0; }
}

/* ---------- footer ------------------------------------------------------ */

.colophon {
  background: rgba(0,0,0,.34);
  color: rgba(255, 255, 255, .85);
  padding: 28px var(--pad) 32px;
  font-size: .875rem;
  display: grid;
  gap: 18px;
  border-top: 1px solid rgba(210,172,42,.3);
}
.colophon .inner { max-width: 1080px; margin: 0 auto; width: 100%; display: grid; gap: 18px; }
.colophon h2 {
  font-family: var(--serif);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .6em;
}
.colophon a { color: var(--gold); }
.colophon a:hover { color: var(--white); }
.colophon p { margin-bottom: .4em; }
.colophon a { min-height: var(--tap); display: inline-flex; align-items: center; }
.colophon .legal { border-top: 1px solid rgba(210, 172, 42, .3); padding-top: 16px; }
.colophon .legal a { margin-right: .35em; min-height: 0; display: inline; }
.colophon .parking { color: rgba(255, 255, 255, .7); }

/* ---------- 600px: two-up cards, side-by-side form rows ----------------- */

@media (min-width: 600px) {
  :root { --pad: 24px; }

  .masthead { padding: 12px var(--pad); }

  h1 { font-size: 2.4rem; }

  .tallies { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .offers { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ladder { grid-template-columns: repeat(3, 1fr); }
  .ladder li { grid-template-columns: 1fr; }
  /* minmax(0,…) so a track can shrink below a date input's intrinsic width
     instead of pushing the form wider than the page. */
  .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .colophon .inner { grid-template-columns: 1fr 1fr; }
  .colophon .legal { grid-column: 1 / -1; }
  button.primary, .button.primary { width: auto; justify-self: start; }
}

/* ---------- 820px: real tables, two-column pages ------------------------ */

@media (min-width: 820px) {
  .hero, .band-table { background-image: url("/img/den-table.jpg"); }
  .band-shelves { background-image: url("/img/den-shelves.jpg"); }
  .band-room  { background-image: url("/img/den-room.jpg"); }
  .hero { padding: 84px var(--hero-pad) 72px; }
  .pagehead { padding: 58px var(--hero-pad) 48px; }

  .grid { display: table; }
  .grid tbody { display: table-row-group; }
  .grid thead { position: static; width: auto; height: auto; clip: auto; }
  .grid thead th {
    text-align: left;
    font-family: var(--serif);
    font-size: .8125rem;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 400;
    padding: 8px 12px;
    border-bottom: 2px solid var(--gold);
    white-space: nowrap;
  }
  .grid tr {
    display: table-row;
    background: var(--panel);
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .grid tbody tr { border-bottom: 1px solid var(--rule); }
  .grid tbody tr:hover { background: var(--sunk); }
  .grid td {
    display: table-cell;
    padding: 12px;
    vertical-align: middle;
    border-bottom: 1px solid var(--rule);
    overflow-wrap: normal;
  }
  .grid td.name a { display: inline; min-height: 0; }
  .grid td::before { content: none; }
  .grid td[data-label=""] { display: table-cell; padding: 12px; }
  .grid td:empty { display: table-cell; }
  .grid td.night small { display: block; margin-left: 0; }
  .grid tfoot { display: table-footer-group; }
  .md-table.is-keyvalue td { display: table-cell; padding: 10px 12px; }
  .md-table.is-keyvalue td:first-child { width: 34%; }
  /* The card accent stripe becomes a left border on the first cell. */
  .grid tbody tr.is-full td:first-child { box-shadow: inset 3px 0 0 var(--rule); }
  .grid tbody tr.is-today td:first-child,
  .grid tbody tr.status-flex td:first-child,
  .grid tbody tr.status-past_due td:first-child,
  .grid tbody tr.status-cancelled_credit td:first-child { box-shadow: inset 3px 0 0 var(--crimson); }
  .grid tbody tr.status-delivered td:first-child { box-shadow: inset 3px 0 0 var(--teal); }

  .split { grid-template-columns: 1.4fr 1fr; align-items: start; gap: 32px; }
  .cols { grid-template-columns: 1fr 1fr; }
  .cols.wide { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .seat .cols { gap: 24px; }
  .colophon .inner { grid-template-columns: 2fr 1fr 1fr; }
}

/* ---------- 900px: the menu becomes a row of links ----------------------
   v0.11 §3.14. At tablet width and up the panel stops being a panel: it is a
   horizontal row of gold Metal Mania links on the right of the black header,
   as griffonsden.com has. The button and the drop-down panel are the phone
   arrangement only. Same markup, same links, one nav in the a11y tree at a
   time — whichever one is not displayed is display:none. */

@media (min-width: 900px) {
  .masthead { flex-wrap: nowrap; }
  .menu-toggle { display: none; }

  .menu-panel {
    display: block;            /* always open; the checkbox is irrelevant here */
    width: auto;
    margin: 0 0 0 auto;
    background: none;
    border-top: 0;
  }
  .menu-panel ul {
    display: flex;
    align-items: center;
    /* Seven links and the wordmark fit on one line at 900px with room to spare,
       but wrap rather than overflow the page if they ever don't — a fallback
       font with wider metrics, or another link. */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
  }
  .menu-panel a, .menu-panel .link {
    width: auto;
    min-height: 40px;
    /* Tight at the breakpoint itself: with the wordmark reading "The Griffons
       Den" the seven signed-in links are 23px too wide for 900px at the roomier
       spacing, and would wrap the header onto two lines. Restored below. */
    padding: 6px 9px;
    font-family: var(--display);
    font-size: 1.2rem;
    letter-spacing: .02em;
    /* A button does not inherit line-height, so say it: otherwise "Sign out"
       sits two pixels off the row of anchors beside it. */
    line-height: 33px;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    white-space: nowrap;
  }
  .menu-panel a:hover, .menu-panel .link:hover { background: none; color: var(--gold-soft); }
  /* The panel marks the current page with a filled row; a row of links wants a
     rule under the word instead. */
  .menu-panel a.current {
    background: none;
    color: #fff;
    border-bottom-color: var(--gold);
  }
}

@media (min-width: 1000px) {
  .seat details .cols { grid-template-columns: repeat(3, 1fr); }
  /* Room again for the nav's normal spacing. */
  .menu-panel a, .menu-panel .link { padding: 6px 12px; }
}

/* Respect a reduced-motion preference (nothing here animates, but hover
   transitions may be added later). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}