/* ==========================================================================
   Goatz Cafe site styles: "ink display / vintage-modern notebook"
   Palette from moodboard: cream, charcoal, near-black, black, orange, sage.
   ========================================================================== */
:root {
  --cream: #f5deb3;
  --paper: #efe5cf;        /* page + notebook sheet */
  --panel: #e7d7b5;        /* card fill */
  --charcoal: #2a2a2a;
  --near-black: #1a1a1a;
  --black: #0b0b0b;
  --orange: #ff6a3d;
  --sage: #6b8f62;

  --b-thick: 4px solid var(--black);
  --b-thin: 2px solid var(--black);
  --shadow: 8px 8px 0 var(--black);

  --f-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;
  --maxw: 1340px;
  --tab-w: 172px;
  --ease: 90ms cubic-bezier(.2, .7, .3, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

body {
  font-family: var(--f-mono);
  font-size: 15px;
  line-height: 1.6;
  color: var(--black);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
a { color: inherit; }
code { background: var(--black); color: var(--cream); padding: 0 .35em; font-size: .92em; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--orange); color: var(--black); padding: .5rem 1rem; z-index: 100; font-weight: 700; }
.skip:focus { left: 1rem; top: 1rem; }
.wrap { max-width: var(--maxw); 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; }
.noscript-nav { padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-weight: 700; }

/* ---------- system ticker (animated status indicator) ---------- */
.sysbar { background: var(--black); color: var(--cream); font-size: .75rem; letter-spacing: .08em; border-bottom: 2px solid var(--orange); }
.sysbar .wrap { display: flex; gap: 1.5rem; justify-content: space-between; padding-top: .35rem; padding-bottom: .35rem; overflow: hidden; white-space: nowrap; }
.sysbar b { color: var(--orange); font-weight: 700; }
.blink { animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   NOTEBOOK: tabs on the left edge + the page sheet
   ========================================================================== */
.book { max-width: var(--maxw); margin: 2rem auto 0; padding: 0 1.25rem 0 .5rem; display: grid; grid-template-columns: var(--tab-w) minmax(0, 1fr); align-items: start; }
.tabs { position: sticky; top: 1.25rem; z-index: 3; padding-top: 5.5rem; }
.tab-list { list-style: none; display: grid; gap: 8px; }
.tab {
  position: relative; display: flex; align-items: center; gap: .6rem;
  height: 50px; padding: 0 .9rem 0 1rem;
  margin-left: 14px; margin-right: 0;
  border: var(--b-thick); border-right: 0; border-radius: 12px 0 0 12px;
  box-shadow: -4px 4px 0 var(--black);
  text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  transition: margin var(--ease), background-color var(--ease), color var(--ease);
}
.tab-num { font-family: var(--f-display); font-size: 1.35rem; letter-spacing: .04em; line-height: 1; }
.tab-cream    { background: var(--cream);    color: var(--black); }
.tab-orange   { background: var(--orange);   color: var(--black); }
.tab-sage     { background: var(--sage);     color: var(--black); }
.tab-charcoal { background: var(--charcoal); color: var(--cream); }
.tab-black    { background: var(--black);    color: var(--cream); }
.tab-black .tab-num { color: var(--orange); }
.tab:hover, .tab:focus-visible { margin-left: 6px; }
.tab:focus-visible { outline-offset: -7px; }
/* Active tab: pulled forward and fused to the sheet (covers the sheet's border) */
.tab.is-active { padding-left: 1.6rem; margin-left: 0; margin-right: -4px; background: var(--paper); color: var(--black); box-shadow: -6px 6px 0 var(--black); z-index: 2; }
.tab.is-active::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 6px; border-radius: 3px; background: var(--tab-c, var(--orange)); border: 1px solid var(--black); }
.tab.is-active .tab-num { color: var(--orange); -webkit-text-stroke: .6px var(--black); }
.tab-cream.is-active { --tab-c: var(--cream); }  .tab-sage.is-active { --tab-c: var(--sage); }
.tab-charcoal.is-active { --tab-c: var(--charcoal); } .tab-black.is-active { --tab-c: var(--black); }

.sheet { position: relative; z-index: 1; min-width: 0; background: var(--paper); border: var(--b-thick); box-shadow: 10px 10px 0 var(--black); padding: 1.5rem 2.25rem 3rem; min-height: 640px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-bottom: 1rem; border-bottom: 2px dashed var(--black); margin-bottom: 2rem; }
.brand { font-family: var(--f-display); font-size: 2rem; letter-spacing: .12em; line-height: 1; text-decoration: none; border: var(--b-thin); padding: .35rem .8rem .2rem; background: var(--panel); box-shadow: 4px 4px 0 var(--black); white-space: nowrap; }
.brand small { font-family: var(--f-mono); font-size: .7rem; letter-spacing: .1em; margin-left: .4rem; vertical-align: middle; }

/* ---------- page title ---------- */
.page-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(3rem, 7vw, 5.5rem); line-height: .9; letter-spacing: .03em; margin-bottom: .75rem; }
.page-title .num { color: var(--orange); -webkit-text-stroke: 2px var(--black); paint-order: stroke fill; margin-right: .3rem; }
.page-intro { max-width: 68ch; margin-bottom: 2rem; }

/* ---------- generic building blocks ---------- */
.section { margin-top: 3rem; }
.section-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; border-bottom: var(--b-thick); padding-bottom: .4rem; }
.section-head h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: .06em; line-height: 1; }
.section-head h2 .num { color: var(--orange); -webkit-text-stroke: 1px var(--black); margin-right: .35rem; }
.section-head .label { margin-left: auto; }
.label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

.panel, .card { background: var(--panel); border: var(--b-thick); box-shadow: var(--shadow); }
.card { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.card-title { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; letter-spacing: .04em; line-height: 1.05; }
.panel-head { background: var(--black); color: var(--cream); padding: .5rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; font-size: .78rem; font-weight: 700; letter-spacing: .12em; }
.panel-head .dots::before { content: "● ● ●"; color: var(--orange); letter-spacing: .2em; }
.panel-body { padding: 1.25rem; }

.tag { display: inline-block; width: fit-content; font-size: .68rem; font-weight: 700; letter-spacing: .12em; padding: .15rem .5rem; border: 2px solid var(--black); background: var(--black); color: var(--cream); text-transform: uppercase; line-height: 1.5; }
.tag-orange { background: var(--orange); color: var(--black); }
.tag-sage { background: var(--sage); color: var(--black); }
.tag-cream { background: var(--cream); color: var(--black); }

.draft-banner { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; background: repeating-linear-gradient(-45deg, var(--orange) 0 14px, var(--black) 14px 28px); border: var(--b-thick); padding: .6rem; margin-bottom: 2rem; }
.draft-banner p { background: var(--cream); border: var(--b-thin); padding: .35rem .75rem; font-size: .82rem; font-weight: 700; letter-spacing: .04em; }

/* ==========================================================================
   PRESS SYSTEM: one consistent hover/press for everything clickable.
   Rest: shadow at --sh. Hover: lifts 2px up-left, shadow grows 2px (the shadow's
   far corner stays put). Active: presses down fully onto its shadow.
   ========================================================================== */
.press {
  --sh: 5px; --sc: var(--black);
  box-shadow: var(--sh) var(--sh) 0 var(--sc);
  transform: translate(0, 0);
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease), color var(--ease);
  will-change: transform;
}
.press:hover, .press:focus-visible { transform: translate(-2px, -2px); box-shadow: calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0 var(--sc); }
.press:active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--sc); transition-duration: 40ms; }
/* Touch screens: no sticky hover lift, just the press. */
@media (hover: none) {
  .press:hover { transform: none; box-shadow: var(--sh) var(--sh) 0 var(--sc); }
  .press:active { transform: translate(var(--sh), var(--sh)); box-shadow: 0 0 0 var(--sc); }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--f-display); font-size: 1.35rem; line-height: 1; letter-spacing: .08em; text-decoration: none; padding: .62rem 1.2rem .5rem; border: var(--b-thin); cursor: pointer; width: fit-content; }
.btn-dark { background: var(--black); color: var(--cream); --sc: var(--orange); }
.btn-dark:hover, .btn-dark:focus-visible { color: var(--orange); }
.btn-cream { background: var(--cream); color: var(--black); }
.btn-cream:hover, .btn-cream:focus-visible { background: var(--orange); }

.grid { display: grid; gap: 1.75rem; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- hero (overview) ---------- */
.hero-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.75rem; }
.hero-main { display: flex; flex-direction: column; }
.hero-title { font-family: var(--f-display); font-weight: 400; font-size: clamp(3.4rem, 7.5vw, 7.4rem); line-height: .86; letter-spacing: .02em; padding: 1.5rem 1.5rem 1rem; border-bottom: var(--b-thick); }
.hero-title .accent { color: var(--orange); -webkit-text-stroke: 2px var(--black); paint-order: stroke fill; }
.hero-sub { padding: 1.25rem 1.5rem 1.5rem; display: grid; gap: 1.1rem; }
.hero-sub p { max-width: 58ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

.terminal { background: var(--near-black); color: var(--cream); border: var(--b-thick); box-shadow: 8px 8px 0 var(--orange); display: flex; flex-direction: column; }
.terminal .panel-head { background: var(--cream); color: var(--black); border-bottom: var(--b-thin); }
.terminal .panel-head .dots::before { color: var(--black); }
.term-body { padding: 1.25rem; display: grid; gap: .9rem; font-size: .85rem; flex: 1; align-content: start;
  background-image: repeating-linear-gradient(0deg, transparent 0 23px, rgba(245,222,179,.06) 23px 24px); }
.term-row { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px dashed rgba(245,222,179,.35); padding-bottom: .4rem; }
.term-row dt { color: var(--orange); font-weight: 700; }
.term-row dd { text-align: right; }
.ok { color: #9cc28f; }
.ip-box { border: 2px solid var(--cream); display: flex; align-items: stretch; margin-top: .25rem; }
.ip-box code { flex: 1; background: transparent; font-size: 1.05rem; padding: .6rem .75rem; display: flex; align-items: center; overflow-wrap: anywhere; }
.ip-box button { font: 700 .8rem var(--f-mono); letter-spacing: .1em; background: var(--orange); color: var(--black); border: 0; border-left: 2px solid var(--cream); padding: 0 1rem; cursor: pointer; min-width: 7.5rem; transition: background-color var(--ease); }
.ip-box button:hover { background: var(--cream); }
.ip-box button:active { background: #e0c999; }
.prompt::before { content: "> "; color: var(--orange); }

/* ---------- teaser cards (moodboard colour tiles) ---------- */
.module { --sh: 8px; padding: 0; gap: 0; text-decoration: none; }
.module-face { min-height: 120px; display: flex; align-items: center; justify-content: center; font-family: var(--f-display); font-size: clamp(2rem, 2.8vw, 2.7rem); letter-spacing: .1em; line-height: 1; padding-top: .2rem; border-bottom: var(--b-thick); }
.module-body { padding: 1rem 1.15rem 1.15rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.module-body p { font-size: .82rem; flex: 1; }
.module-go { font-size: .75rem; font-weight: 700; letter-spacing: .12em; }
.module:hover .module-go, .module:focus-visible .module-go { color: #b23a12; }
.face-charcoal { background: var(--charcoal); color: var(--cream); }
.face-orange { background: var(--orange); color: var(--black); }
.face-sage { background: var(--sage); color: var(--black); }
.face-black { background: var(--black); color: var(--orange); }
.face-cream { background: var(--cream); color: var(--black); }

/* ---------- info ---------- */
.steps { counter-reset: step; list-style: none; }
.step { position: relative; padding-top: 2.75rem; }
.step::before { counter-increment: step; content: "0" counter(step); position: absolute; top: -4px; left: -4px; background: var(--black); color: var(--orange); font-family: var(--f-display); font-size: 1.6rem; padding: .1rem .7rem 0; letter-spacing: .06em; }
.stat-table { border: var(--b-thick); box-shadow: var(--shadow); background: var(--panel); }
.stat-table div { display: grid; grid-template-columns: 11rem 1fr; border-bottom: var(--b-thin); }
.stat-table div:last-child { border-bottom: 0; }
.stat-table dt { background: var(--black); color: var(--orange); font-weight: 700; font-size: .78rem; letter-spacing: .1em; padding: .65rem 1rem; }
.stat-table dd { padding: .65rem 1rem; font-size: .9rem; }
.feature-list { list-style: none; display: grid; gap: .45rem; font-size: .88rem; }
.feature-list li { padding-left: 1.3rem; position: relative; }
.feature-list li::before { content: "■"; position: absolute; left: 0; color: var(--orange); font-size: .7rem; top: .25rem; -webkit-text-stroke: .5px var(--black); }

/* ---------- rules ---------- */
.rules { list-style: none; counter-reset: rule; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; }
.rule { counter-increment: rule; display: grid; grid-template-columns: 3.5rem 1fr; background: var(--panel); border: var(--b-thick); box-shadow: 6px 6px 0 var(--black); }
.rule::before { content: counter(rule, decimal-leading-zero); display: flex; align-items: center; justify-content: center; background: var(--black); color: var(--cream); font-family: var(--f-display); font-size: 1.6rem; padding-top: .15rem; }
.rule div { padding: .9rem 1.1rem; font-size: .88rem; }
.rule strong { display: block; font-size: .95rem; letter-spacing: .03em; margin-bottom: .15rem; }
.support { margin-top: 2.5rem; }
.ticket { background: var(--cream); }
.ticket-sensitive { background: var(--panel); border-left-width: 12px; border-left-color: var(--sage); }

/* ---------- events ---------- */
.event-date { font-family: var(--f-display); font-size: 3rem; line-height: .9; }
.timeline { list-style: none; border-left: var(--b-thick); margin-left: .6rem; display: grid; gap: 1.1rem; padding: .25rem 0 .25rem 1.5rem; }
.timeline li { position: relative; font-size: .86rem; }
.timeline li::before { content: ""; position: absolute; left: calc(-1.5rem - 12px); top: .3rem; width: 16px; height: 16px; background: var(--orange); border: var(--b-thin); }
.timeline li.done::before { background: var(--sage); }
.timeline li.todo::before { background: var(--cream); }

/* ---------- vote ---------- */
.vote-list { list-style: none; }
.vote-card p { font-size: .85rem; flex: 1; }

/* ---------- showcase (blueprint tiles) ---------- */
.gallery { grid-template-columns: repeat(3, minmax(0,1fr)); }
.tile { margin: 0; padding: 0; gap: 0; }
.tile-img { aspect-ratio: 16/10; border-bottom: var(--b-thick); display: grid; place-items: center; position: relative; font-family: var(--f-display); font-size: 1.6rem; letter-spacing: .14em;
  background-color: var(--near-black); color: var(--cream);
  background-image: linear-gradient(rgba(245,222,179,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(245,222,179,.12) 1px, transparent 1px);
  background-size: 22px 22px; }
.tile-img::after { content: "[ IMG ]"; position: absolute; right: .6rem; bottom: .4rem; font: 700 .65rem var(--f-mono); letter-spacing: .12em; color: var(--orange); }
.tile:nth-child(3n+2) .tile-img { background-color: var(--charcoal); }
.tile:nth-child(4n) .tile-img { background-color: #33452f; }
.tile figcaption { padding: .8rem 1rem; font-size: .8rem; display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }

/* ---------- lore / team / store ---------- */
.lore-card { border-style: dashed; }
.lore-card .card-title::before { content: "§ "; color: var(--orange); }
.member { align-items: flex-start; }
.avatar { width: 72px; height: 72px; border: var(--b-thin); background: var(--charcoal); color: var(--cream); display: grid; place-items: center; font-family: var(--f-display); font-size: 1.6rem;
  background-image: linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25% 50%, rgba(255,255,255,.06) 50% 75%, transparent 75%); background-size: 12px 12px; }
.member p { font-size: .82rem; }
.store { position: relative; overflow: hidden; }
.store-stamp { position: absolute; top: 2.6rem; right: -3.4rem; transform: rotate(35deg); background: var(--orange); color: var(--black); font-weight: 700; letter-spacing: .14em; font-size: .78rem; padding: .3rem 4rem; border-block: var(--b-thin); }
.store-item { border-style: dashed; box-shadow: none; }
.price { font-family: var(--f-display); font-size: 1.6rem; }
.lead { max-width: 64ch; margin-bottom: 1.5rem; }

/* ---------- footer ---------- */
.site-footer { margin-top: 4rem; background: var(--black); color: var(--cream); border-top: 6px solid var(--orange); padding: 2.5rem 0 1.5rem; font-size: .82rem; }
.foot-grid { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 2rem; }
.foot-brand { font-family: var(--f-display); font-size: 2.6rem; letter-spacing: .1em; line-height: 1; }
.foot-copy { margin-top: .6rem; max-width: 44ch; }
.site-footer h2 { color: var(--orange); font-size: .75rem; letter-spacing: .14em; margin-bottom: .5rem; }
.site-footer ul { list-style: none; display: grid; gap: .25rem; }
.foot-links { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: 1.5rem !important; }
.site-footer a:hover { color: var(--orange); }
.disclaimer { margin-top: 2rem; border-top: 1px dashed rgba(245,222,179,.4); padding-top: 1rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .75rem; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1180px) {
  .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hero-grid { grid-template-columns: 1fr; }
}

/* Tablet/phone: tabs become a scrollable strip along the top edge of the sheet */
@media (max-width: 900px) {
  .book { display: block; margin-top: 1.25rem; padding: 0 1rem; }
  .tabs { position: relative; top: auto; padding: 8px 4px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
          box-shadow: inset 0 -4px 0 var(--black); }      /* this inset line is the sheet's top edge */
  .tabs::-webkit-scrollbar { display: none; }
  .tab-list { display: flex; gap: 6px; width: max-content; padding-right: 1rem; }
  .tab { height: 44px; margin: 0 0 4px; padding: 0 .8rem; border: var(--b-thick); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: none; font-size: .74rem; transform: translateY(6px); transition: transform var(--ease); }
  .tab:hover, .tab:focus-visible { margin: 0 0 4px; transform: translateY(2px); }
  .tab.is-active { margin: 0; height: 48px; transform: none; box-shadow: none; }
  .tab.is-active::before { left: 8px; right: 8px; top: 5px; bottom: auto; width: auto; height: 5px; }
  .tab-num { font-size: 1.1rem; }
  .sheet { border-top: 0; padding: 1.25rem 1.25rem 2.5rem; box-shadow: 6px 6px 0 var(--black); min-height: 0; }
  .g2, .g3, .rules { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > :first-child { grid-column: 1 / -1; }
  .foot-links { grid-template-columns: repeat(2, auto); }
}
@media (max-width: 560px) {
  body { font-size: 14px; }
  .wrap { padding: 0 1rem; }
  .book { padding: 0 .75rem; }
  .sheet { padding: 1rem 1rem 2rem; }
  .grid { gap: 1.25rem; }
  .panel, .card { box-shadow: 5px 5px 0 var(--black); }
  .module { --sh: 5px; }
  .hero-title { padding: 1.1rem 1rem .8rem; }
  .hero-sub, .panel-body, .term-body { padding: 1rem; }
  .brand { font-size: 1.6rem; }
  .brand small, .sysbar .hide-sm, .sheet-head .hide-sm { display: none; }
  .section-head .label { margin-left: 0; }
  .ip-box { flex-direction: column; }
  .ip-box button { border-left: 0; border-top: 2px solid var(--cream); padding: .65rem; }
  .modules, .gallery, .g4.team-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
  .g4 { grid-template-columns: 1fr; }
  .module-face { min-height: 78px; font-size: 1.55rem; letter-spacing: .06em; }
  .module-body { padding: .7rem .75rem .8rem; }
  .module-body p { display: none; }
  .tile-img { font-size: 1.1rem; }
  .tile figcaption { padding: .5rem .6rem; font-size: .7rem; }
  .tile figcaption span { display: none; }
  .team-grid .card { padding: .9rem; }
  .team-grid .card-title { font-size: 1.35rem; }
  .avatar { width: 52px; height: 52px; font-size: 1.2rem; }
  .stat-table div { grid-template-columns: 1fr; }
  .stat-table dt { padding: .4rem .8rem; }
  .stat-table dd { padding: .5rem .8rem; }
  .store-stamp { display: none; }
  .rule { grid-template-columns: 2.75rem 1fr; }
}

/* ==========================================================================
   SHOWCASE: albums → album view (zoom-from-tile) → lightbox
   ========================================================================== */
.no-scroll { overflow: hidden; }
.albums { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.album-cell { display: flex; min-width: 0; }
.album {
  --sh: 8px; width: 100%; display: flex; flex-direction: column; text-align: left; cursor: pointer;
  font: inherit; color: var(--black); background: var(--panel); border: var(--b-thick); padding: 0;
}
.album-cover { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: var(--b-thick); background: var(--near-black); }
.album-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.album:hover .album-cover img, .album:focus-visible .album-cover img { transform: scale(1.04); }
.album-meta { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; flex: 1; }
.album-title { font-family: var(--f-display); font-size: 1.9rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; }
.album-blurb { font-size: .8rem; line-height: 1.5; }
.album-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: auto; padding-top: .3rem; }
.album-go { font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
.album:hover .album-go, .album:focus-visible .album-go { color: #b23a12; }

/* blueprint placeholder + ink stamp */
.blueprint {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .6rem;
  background-color: var(--near-black); color: var(--cream);
  background-image: linear-gradient(rgba(245,222,179,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(245,222,179,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* varied cover tints so the grid doesn't look flat */
.album-cell:nth-child(5n+2) .blueprint { background-color: var(--charcoal); }
.album-cell:nth-child(5n+3) .blueprint { background-color: #33452f; }   /* deep sage */
.album-cell:nth-child(5n+4) .blueprint { background-color: #3a2a22; }   /* burnt umber */
.album-cell:nth-child(5n)   .blueprint { background-color: #22303a; }   /* ink blue */
.bp-name { font-family: var(--f-display); font-size: 1.5rem; letter-spacing: .14em; }
.stamp {
  display: inline-block; font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .16em; line-height: 1;
  color: var(--orange); border: 3px solid var(--orange); padding: .35rem .6rem .2rem; transform: rotate(-7deg);
  background: rgba(11,11,11,.55); box-shadow: inset 0 0 0 2px rgba(11,11,11,.6);
}

/* album view */
.album-view { position: fixed; inset: 0; z-index: 200; padding: 3vh 3vw; display: flex; align-items: center; }
.album-view[hidden], .lightbox[hidden] { display: none; }
.album-backdrop { position: absolute; inset: 0; background: rgba(11,11,11,.75); }
.album-panel { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; overflow: hidden;
  background-color: var(--paper); border: var(--b-thick); box-shadow: 10px 10px 0 var(--orange); transform-origin: 0 0; max-height: 100%; }
.album-panel .panel-head { flex: none; }
.icon-btn { font: 700 1rem var(--f-mono); width: 2.25rem; height: 2rem; background: var(--orange); color: var(--black); border: 2px solid var(--cream); cursor: pointer; }
.icon-btn:hover { background: var(--cream); }
.album-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.album-inner { padding: 1.5rem 2rem 2.5rem; }
.album-top { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 2px dashed var(--black); }
.album-top .page-title { margin-bottom: .25rem; }
.photo-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.photo { --sh: 6px; display: block; width: 100%; padding: 0; text-align: left; font: inherit; color: var(--black); cursor: zoom-in; background: var(--panel); border: var(--b-thick); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--b-thin); }
.photo-cap { display: block; padding: .55rem .75rem; font-size: .8rem; }
.photo-cap b { background: var(--black); color: var(--orange); padding: 0 .3rem; margin-right: .3rem; }
.placeholder-grid .blueprint { position: relative; aspect-ratio: 4 / 3; border: var(--b-thick); opacity: .85; }
.empty-album { position: relative; }
.empty-note { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center; }
.empty-note .stamp { font-size: 2.2rem; background: var(--black); }
.empty-note p { background: var(--cream); border: var(--b-thin); padding: .5rem .9rem; max-width: 46ch; font-size: .85rem; box-shadow: 4px 4px 0 var(--black); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 300; display: grid; grid-template-rows: auto minmax(0, 1fr); background: rgba(11,11,11,.97); color: var(--cream); touch-action: none; }
.lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1.25rem; border-bottom: 2px solid var(--orange); }
.lb-count { color: var(--orange); }
.lb-close { font: 700 .8rem var(--f-mono); letter-spacing: .1em; background: var(--orange); color: var(--black); border: 2px solid var(--cream); padding: .45rem .8rem; cursor: pointer; }
.lb-close:hover { background: var(--cream); }
.lb-stage { margin: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.25rem 6rem 1.5rem; }
.lb-img { display: block; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain;
  border: 4px solid var(--cream); box-shadow: 8px 8px 0 var(--orange); background: var(--black); user-select: none; -webkit-user-drag: none; }
.lb-cap { margin-top: 1rem; font-size: .9rem; letter-spacing: .04em; text-align: center; }
.lb-nav { position: absolute; top: 50%; width: 3.25rem; height: 4rem; margin-top: -2rem; font-family: var(--f-display); font-size: 2.6rem; line-height: 1;
  background: var(--cream); color: var(--black); border: var(--b-thick); box-shadow: 5px 5px 0 var(--orange); cursor: pointer; transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease); }
.lb-nav:hover { background: var(--orange); }
.lb-nav:active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--orange); }
.lb-prev { left: 1.25rem; } .lb-next { right: 1.25rem; }

/* overview teaser with a real photo */
.face-photo { position: relative; overflow: hidden; padding: 0; }
.face-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.face-photo span { position: relative; background: var(--black); color: var(--cream); padding: .25rem .6rem .1rem; border: 2px solid var(--cream); }

@media (max-width: 1180px) { .albums { gap: 1.25rem; } }
@media (max-width: 900px) { .albums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-stage { padding: 1rem 1rem 6rem; }
  .lb-img { max-height: calc(100dvh - 200px); }
  .lb-nav { top: auto; bottom: 1.25rem; margin-top: 0; }
}
@media (max-width: 560px) {
  .albums { gap: 1rem; }
  .album { --sh: 5px; }
  .album-meta { padding: .6rem .7rem .75rem; }
  .album-title { font-size: 1.45rem; }
  .album .label, .album-go, .album-blurb { display: none; }
  .bp-name { font-size: 1.1rem; }
  .stamp { font-size: .9rem; }
  .album-view { padding: .5rem; }
  .album-panel { box-shadow: 5px 5px 0 var(--orange); }
  .album-inner { padding: 1rem 1rem 2rem; }
  .photo-grid { gap: 1rem; }
  .photo { --sh: 4px; }
  .photo-cap { font-size: .72rem; padding: .4rem .5rem; }
  .placeholder-grid { grid-template-columns: 1fr; }
  .empty-note .stamp { font-size: 1.6rem; }
  .lb-bar { padding: .6rem .75rem; }
  .lb-count { font-size: .62rem; }
}

/* team: framed mugshot photo slot */
.mug { position: relative; margin: 0 0 .35rem; width: 100%; aspect-ratio: 1 / 1; border: var(--b-thick); background: var(--cream); box-shadow: 5px 5px 0 var(--black); overflow: hidden; }
.mug img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mug .blueprint { background-color: var(--charcoal); }
.mug-plate { position: absolute; left: 0; bottom: 0; background: var(--black); color: var(--orange); font-size: .66rem; font-weight: 700; letter-spacing: .14em; padding: .2rem .5rem; border-top: 2px solid var(--black); }
@media (max-width: 560px) { .mug-plate { font-size: .55rem; } .mug .stamp { font-size: .75rem; } }
/* 2-column showcase: centre a lone last tile instead of leaving a gap */
@media (max-width: 900px) {
  .albums .album-cell:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .625rem); }
}
@media (max-width: 560px) {
  .albums .album-cell:last-child:nth-child(odd) { width: calc(50% - .5rem); }
}

/* ==========================================================================
   TEAM v2: staff ladder + crew sub-roles
   ========================================================================== */
.tag-black { background: var(--black); color: var(--cream); }
.ladder { list-style: none; counter-reset: none; }
.ladder .member { position: relative; }
.rank-step { position: absolute; top: -4px; right: -4px; background: var(--black); color: var(--orange); font-size: .62rem; font-weight: 700; letter-spacing: .14em; padding: .2rem .5rem; z-index: 1; }
.ladder .member + .member::before { content: "▸"; position: absolute; left: calc(-1.75rem / 2 - .5rem); top: 40%; width: 1rem; text-align: center; font-size: 1.1rem; color: var(--black); }
.crew-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.crew-group { border: var(--b-thin); border-top: 8px solid var(--grp, var(--charcoal)); background: rgba(231,215,181,.45); padding: .9rem; box-shadow: 4px 4px 0 var(--black); }
.crew-charcoal { --grp: var(--charcoal); } .crew-sage { --grp: var(--sage); } .crew-orange { --grp: var(--orange); }
.crew-group-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; margin-bottom: .75rem; border-bottom: 2px dashed var(--black); padding-bottom: .3rem; }
.crew-list { list-style: none; display: grid; gap: .8rem; }
.crew-plate { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .75rem; align-items: start; background: var(--panel); border: var(--b-thin); padding: .6rem; box-shadow: 3px 3px 0 var(--black); }
.crew-mug.blueprint { position: relative; width: 64px; height: 64px; border: var(--b-thin); background-color: var(--charcoal); background-size: 10px 10px; }
.crew-mug .stamp { font-size: .55rem; letter-spacing: .08em; border-width: 2px; padding: .2rem .25rem .1rem; }
.tag-crew { background: var(--cream); color: var(--black); font-size: .6rem; }
.crew-name { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .04em; line-height: 1.05; margin: .25rem 0 .15rem; }
.crew-plate p { font-size: .76rem; line-height: 1.45; }

/* ==========================================================================
   SUPPORTERS
   ========================================================================== */
.thanks-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.5rem; align-items: center; }
.thanks-big { font-family: var(--f-display); font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: .9; letter-spacing: .03em; }
.thanks-body p + p, .thanks-body .note { margin-top: .75rem; }
.thanks-body .btn { margin-top: 1.1rem; }
.note { background: var(--cream); border: var(--b-thin); border-left: 10px solid var(--sage); padding: .6rem .8rem; font-size: .85rem; }
.tier { margin-top: 1.5rem; border: var(--b-thick); box-shadow: var(--shadow); background: var(--panel); }
.tier-head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: var(--b-thick); background: var(--tier, var(--cream)); }
.tier-orange { --tier: var(--orange); } .tier-sage { --tier: var(--sage); } .tier-cream { --tier: var(--cream); }
.tier-head .tag { background: var(--black); color: var(--cream); }
.tier-head .label { margin-left: auto; }
.name-wall { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; padding: 1rem; }
.tier-orange .name-wall, .tier-sage .name-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.slot { border: 2px dashed var(--black); padding: .5rem .7rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-align: center; background: var(--paper); opacity: .8; }
.tier-orange .slot { font-size: .9rem; padding: .8rem; border-style: solid; box-shadow: 3px 3px 0 var(--black); opacity: 1; }

/* ==========================================================================
   EVENTS: next-event banner, calendar, agenda, detail panel
   ========================================================================== */
.next-event { --sh: 6px; --sc: var(--orange); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; text-decoration: none;
  background: var(--black); color: var(--cream); border: var(--b-thick); padding: .8rem 1.1rem; margin-bottom: 2rem; }
.next-event[hidden] { display: none; }
.ne-label { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--orange); white-space: nowrap; }
.ne-main { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; min-width: 0; }
.ne-title { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; letter-spacing: .05em; line-height: 1; }
.ne-when { font-size: .78rem; opacity: .85; }
.ne-count { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; }
.ne-clock { font-size: .85rem; letter-spacing: .06em; white-space: nowrap; }
.ne-clock b { font-family: var(--f-display); font-weight: 400; font-size: 1.9rem; color: var(--orange); margin-left: .3rem; }
.ne-go { font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.next-event:hover .ne-go, .next-event:focus-visible .ne-go { color: var(--orange); }

.calendar { box-shadow: 10px 10px 0 var(--black); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: var(--black); color: var(--cream); padding: .65rem .8rem; border-bottom: var(--b-thick); }
.cal-label { font-family: var(--f-display); font-weight: 400; font-size: 2.4rem; letter-spacing: .12em; line-height: 1; padding-top: .15rem; }
.cal-head-right { display: flex; gap: .5rem; }
.cal-btn { font: 700 .78rem var(--f-mono); letter-spacing: .1em; background: var(--cream); color: var(--black); border: 2px solid var(--cream); padding: .5rem .8rem; cursor: pointer;
  box-shadow: 3px 3px 0 var(--orange); transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease); }
.cal-btn:hover, .cal-btn:focus-visible { background: var(--orange); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--orange); }
.cal-btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--orange); }
.cal-today { background: var(--black); color: var(--orange); border-color: var(--orange); }
.cal-grid { padding: 1rem; display: grid; gap: .6rem;
  background-image: linear-gradient(rgba(11,11,11,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,11,.06) 1px, transparent 1px); background-size: 20px 20px; }
.cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .6rem; }
.cal-dow-cell { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-align: center; background: var(--black); color: var(--cream); padding: .3rem 0; }
.cal-dow-cell.is-weekend { color: var(--orange); }
.cal-cell-wrap { display: flex; min-width: 0; }
.cal-cell { position: relative; width: 100%; min-height: 104px; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; text-align: left; padding: .4rem .45rem .5rem;
  font: inherit; color: var(--black); background: var(--paper); border: var(--b-thin); box-shadow: 3px 3px 0 var(--black); cursor: pointer;
  transition: transform var(--ease), box-shadow var(--ease), background-color var(--ease); }
.cal-cell:hover, .cal-cell:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--black); background: var(--cream); }
.cal-cell:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--black); }
.cal-cell.is-weekend { background: #e9dcc0; }
.cal-cell.is-out { opacity: .45; box-shadow: none; border-style: dashed; }
.cal-num { font-family: var(--f-display); font-size: 1.55rem; line-height: 1; letter-spacing: .03em; }
.cal-cell.is-today { background: var(--cream); box-shadow: 4px 4px 0 var(--orange); border: 3px solid var(--orange); }
.cal-cell.is-today .cal-num { background: var(--orange); color: var(--black); border: 2px solid var(--black); width: fit-content; padding: .1rem .35rem 0; }
.today-flag { position: absolute; top: .45rem; right: .4rem; font-size: .58rem; font-weight: 700; letter-spacing: .12em; background: var(--black); color: var(--orange); padding: .05rem .3rem; }
.cal-chips { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.chip { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; line-height: 1.25; padding: .2rem .35rem; border: 2px solid var(--black); box-shadow: 2px 2px 0 var(--black); overflow: hidden; }
.chip-text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-orange { background: var(--orange); color: var(--black); } .chip-sage { background: var(--sage); color: var(--black); }
.chip-cream { background: var(--cream); color: var(--black); } .chip-charcoal { background: var(--charcoal); color: var(--cream); }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; padding: .7rem 1rem; border-top: 2px dashed var(--black); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; }
.chip-dot { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--black); }
.is-today-dot { background: var(--cream); border-color: var(--orange); border-width: 3px; }

.agenda-list { list-style: none; display: grid; gap: 1rem; }
.agenda-item { --sh: 5px; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; text-align: left; font: inherit; color: var(--black);
  background: var(--panel); border: var(--b-thick); padding: .7rem 1rem; cursor: pointer; }
.agenda-date { display: flex; flex-direction: column; align-items: center; background: var(--black); color: var(--orange); padding: .3rem .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; }
.agenda-date b { font-family: var(--f-display); font-weight: 400; font-size: 2rem; line-height: 1; color: var(--cream); }
.agenda-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.agenda-title { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: .04em; line-height: 1; }
.agenda-meta { font-size: .8rem; }
.agenda-go { font-weight: 700; }
.agenda-empty { font-size: .88rem; display: block; }
.link-btn { font: inherit; font-weight: 700; background: none; border: 0; padding: 0; color: var(--black); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; cursor: pointer; }

.event-view .album-panel { max-width: 640px; }
.ev-inner { display: grid; gap: 1.1rem; }
.ev-back { margin-bottom: .25rem; }
.ev-detail { display: grid; gap: .8rem; }
.ev-title { font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0; }
.ev-stats div { grid-template-columns: 8rem 1fr; }
.ev-desc { font-size: .95rem; background: var(--cream); border: var(--b-thin); border-left: 10px solid var(--orange); padding: .7rem .9rem; }
.ev-sep { border: 0; border-top: 2px dashed var(--black); margin: .5rem 0; }
.ev-empty { display: grid; gap: 1rem; justify-items: start; }
.ev-empty .stamp { color: var(--black); border-color: var(--black); background: var(--cream); font-size: 1.4rem; }

@media (max-width: 1180px) {
  .crew-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ladder .member + .member::before { display: none; }
}
@media (max-width: 900px) {
  .thanks-body { grid-template-columns: 1fr; }
  .cal-cell { min-height: 84px; }
  .chip { font-size: .6rem; }
  .next-event { grid-template-columns: 1fr; gap: .6rem; }
  .ne-count { align-items: flex-start; }
}
@media (max-width: 640px) {
  .crew-groups { grid-template-columns: 1fr; }
  /* compact calendar: dots instead of chips */
  .cal-grid { padding: .5rem; gap: .3rem; }
  .cal-row { gap: .3rem; }
  .cal-dow-cell { font-size: .58rem; letter-spacing: .04em; }
  .cal-cell { min-height: 46px; padding: .25rem .2rem; align-items: center; gap: .2rem; box-shadow: 2px 2px 0 var(--black); border-width: 2px; }
  .cal-cell:hover, .cal-cell:focus-visible { transform: none; box-shadow: 2px 2px 0 var(--black); }
  .cal-num { font-size: 1.15rem; }
  .cal-cell.is-today { border-width: 2px; box-shadow: 2px 2px 0 var(--orange); }
  .cal-cell.is-today .cal-num { padding: .05rem .2rem 0; border-width: 1px; }
  .today-flag { display: none; }
  .cal-chips { flex-direction: row; justify-content: center; }
  .chip { width: 10px; height: 10px; padding: 0; border-width: 2px; box-shadow: none; border-radius: 50%; }
  .chip-text { display: none; }
  .cal-head { flex-wrap: wrap; padding: .5rem; gap: .4rem; }
  .cal-label { order: -1; width: 100%; text-align: center; font-size: 2rem; }
  .cal-head > .cal-btn, .cal-head-right { flex: 1; }
  .cal-head-right .cal-btn { flex: 1; }
  .cal-btn { padding: .5rem .4rem; font-size: .72rem; }
  .cal-legend { padding: .6rem .6rem; font-size: .64rem; gap: .4rem .8rem; }
  .ne-title { font-size: 1.6rem; }
  .ne-clock b { font-size: 1.5rem; }
  .agenda-item { gap: .7rem; padding: .6rem .7rem; }
  .agenda-title { font-size: 1.35rem; }
  .ev-stats div { grid-template-columns: 1fr; }
}
/* lone last overview card in a 2-col layout: centre it */
@media (max-width: 900px) { .g3.modules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) and (min-width: 561px) {
  .modules > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .875rem); }
}
@media (max-width: 560px) {
  .modules > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - .5rem); }
}
.ne-note { font-size: .6rem; letter-spacing: .1em; opacity: .75; }
@media (max-width: 560px) {
  .name-wall, .tier-orange .name-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .7rem; }
  .slot { font-size: .62rem; letter-spacing: .02em; padding: .45rem .3rem; }
  .tier-orange .slot { font-size: .66rem; padding: .6rem .3rem; }
  .tier-head { padding: .6rem .7rem; gap: .5rem; }
  .tier-head .label { margin-left: 0; }
}
.crew-photo { display: block; width: 64px; height: 64px; border: var(--b-thin); background: #fff; overflow: hidden; }
.crew-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   STORE: product cards + product popup
   ========================================================================== */
.store-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.25rem; align-items: center; padding-right: 3rem; }
.store-facts { list-style: none; display: grid; gap: .4rem; font-size: .85rem; }
.store-facts li { padding-left: 1.3rem; position: relative; }
.store-facts li::before { content: "■"; position: absolute; left: 0; top: .2rem; font-size: .7rem; color: var(--orange); -webkit-text-stroke: .5px var(--black); }
.products { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.products > li { display: flex; min-width: 0; }
.product { --sh: 8px; width: 100%; display: flex; flex-direction: column; gap: .6rem; text-align: left; font: inherit; color: var(--black);
  background: var(--panel); border: var(--b-thick); padding: 1rem; cursor: pointer; }
.product-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.icon-frame { position: relative; display: block; width: 96px; height: 96px; flex: none; border: var(--b-thick); background: var(--near-black); box-shadow: 4px 4px 0 var(--black); overflow: hidden; }
.icon-frame.is-big { width: 128px; height: 128px; }
.icon-frame img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; background: var(--cream); }
.icon-frame .blueprint { background-size: 12px 12px; }
.icon-label { font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: var(--orange); border: 2px dashed var(--orange); padding: .15rem .4rem; }
.product-code { opacity: .7; }
.product-name { font-family: var(--f-display); font-size: 2rem; line-height: 1; letter-spacing: .04em; text-transform: uppercase; margin-top: .3rem; }
.product-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.product-price { font-family: var(--f-display); font-size: 1.8rem; line-height: 1; }
.product-view { margin-top: auto; align-self: flex-start; font-family: var(--f-display); font-size: 1.15rem; letter-spacing: .08em; line-height: 1;
  background: var(--black); color: var(--cream); border: var(--b-thin); padding: .5rem .9rem .4rem; box-shadow: 4px 4px 0 var(--orange); transition: color var(--ease); }
.product:hover .product-view, .product:focus-visible .product-view { color: var(--orange); }
.product:hover .icon-frame .blueprint, .product:focus-visible .icon-frame .blueprint { background-color: var(--charcoal); }

.store-view .album-panel { max-width: 680px; }
.pv-inner { display: grid; gap: 1.1rem; }
.pv-back { margin-bottom: .2rem; }
.pv-top { display: flex; gap: 1.25rem; align-items: center; }
.pv-id { display: grid; gap: .45rem; min-width: 0; }
.pv-title { font-size: clamp(2.4rem, 5vw, 3.4rem); margin: 0; }
.pv-price { font-family: var(--f-display); font-size: 2.2rem; line-height: 1; }
.pv-price .label { font-family: var(--f-mono); font-size: .65rem; vertical-align: middle; margin-left: .3rem; opacity: .75; }
.pv-note { font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.pv-cmds { display: grid; gap: .45rem; }
.cmd-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.cmd { display: inline-block; background: var(--black); color: var(--orange); border: 2px solid var(--black); padding: .25rem .6rem; font-size: .9rem; font-weight: 700; box-shadow: 3px 3px 0 var(--sage); }
.claim { background: var(--panel); border: var(--b-thin); border-left: 10px solid var(--sage); padding: .75rem .9rem; display: grid; gap: .3rem; font-size: .88rem; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.pv-tbc { opacity: .75; }
.pv-tbc.flash { animation: tbcflash .9s steps(2) 2; color: #b23a12; opacity: 1; }
@keyframes tbcflash { 50% { background: var(--orange); color: var(--black); } }

@media (max-width: 1180px) { .products { gap: 1.25rem; } }
@media (max-width: 900px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-intro { grid-template-columns: 1fr; padding-right: 1.25rem; }
}
@media (max-width: 560px) {
  .products { gap: 1rem; }
  .product { --sh: 5px; padding: .7rem; gap: .45rem; }
  .icon-frame { width: 64px; height: 64px; border-width: 3px; box-shadow: 3px 3px 0 var(--black); }
  .icon-frame.is-big { width: 88px; height: 88px; }
  .icon-label { font-size: .55rem; letter-spacing: .1em; padding: .1rem .25rem; }
  .product-code { display: none; }
  .product-name { font-size: 1.45rem; }
  .product-price { font-size: 1.4rem; }
  .product-row .tag { font-size: .56rem; letter-spacing: .06em; padding: .1rem .3rem; }
  .product-view { font-size: 1rem; padding: .4rem .7rem .3rem; }
  .pv-top { gap: .9rem; }
  .pv-actions .btn { width: 100%; }
}

/* VIP featured pack card */
.products > li.is-featured { grid-column: 1 / -1; }
.product-featured { --sc: var(--orange); display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.5rem; row-gap: .55rem; align-items: start;
  background: var(--cream); padding: 1.25rem 1.5rem; position: relative; overflow: hidden;
  background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255,106,61,.07) 22px 44px); }
.product-featured > .product-top { grid-row: 1 / span 6; flex-direction: column; align-items: flex-start; }
.product-featured > :not(.product-top) { grid-column: 2; }
.product-featured .icon-frame { width: 128px; height: 128px; box-shadow: 5px 5px 0 var(--orange); }
.product-featured .product-code { opacity: 1; background: var(--orange); color: var(--black); padding: .1rem .4rem; border: 2px solid var(--black); }
.product-featured .product-name { font-size: clamp(2.4rem, 4vw, 3.2rem); margin-top: 0; }
.product-featured .product-row { justify-content: flex-start; gap: 1rem; }
.product-featured .product-price small { font-family: var(--f-mono); font-size: .7rem; margin-left: .2rem; }
.product-blurb { font-size: .88rem; max-width: 60ch; }
.inc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.inc-chip { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--paper); border: 2px solid var(--black); padding: .15rem .5rem; box-shadow: 2px 2px 0 var(--black); }
.inc-chip::before { content: "✓ "; color: #3f6236; }
.pv-includes { display: grid; gap: .5rem; }
.inc-list { list-style: none; display: grid; gap: .5rem; }
.inc-list li { display: grid; grid-template-columns: 9.5rem 1fr auto; gap: .75rem; align-items: center; background: var(--panel); border: var(--b-thin); padding: .5rem .7rem; font-size: .8rem; }
.inc-list b { font-family: var(--f-display); font-weight: 400; font-size: 1.25rem; letter-spacing: .04em; line-height: 1; }
.inc-list b::before { content: "✓ "; color: #3f6236; font-family: var(--f-mono); font-size: .9rem; }
.inc-cmds { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; }
.inc-cmds .cmd { font-size: .72rem; padding: .1rem .4rem; box-shadow: 2px 2px 0 var(--sage); }
@media (max-width: 560px) {
  .product-featured { grid-template-columns: 1fr; padding: .9rem; }
  .product-featured > .product-top { grid-row: auto; flex-direction: row; align-items: center; }
  .product-featured > :not(.product-top) { grid-column: 1; }
  .product-featured .icon-frame { width: 72px; height: 72px; }
  .inc-chip { font-size: .6rem; }
  .inc-list li { grid-template-columns: 1fr; gap: .3rem; }
  .inc-cmds { justify-content: flex-start; }
}
.product-featured .product-view { justify-self: start; }
@media (min-width: 901px) { .store-intro { padding-right: 7.5rem; } }
.caps { text-transform: uppercase; }
.also-works { font-size: .75rem; opacity: .8; margin-top: .4rem; overflow-wrap: anywhere; }
.also-works code { font-size: inherit; }
.also-row dt { font-size: .75rem; }