/* Kauai Beer Company — kauaibeer.com
 *
 * Hand-written, no build step, no framework (PLAN.md §Decisions). Everything
 * needed to render the two pages is in this one file; there is nothing to
 * compile and nothing to install. If you are reading this in 2031 and want to
 * change something, edit it and reload.
 *
 * PALETTE comes from the merchandise, which is the only surviving colour
 * reference for the brand: the shield sticker is white-on-purple, the diecut
 * chicken sign is purple-and-gold. Purple leads, gold is a single accent rule.
 *
 * The two logo PNGs in the archive are WHITE artwork on transparency — they
 * were drawn for a dark header bar and disappear on a light one. That is why
 * the masthead and footer are plum and the page between them is warm paper.
 */

:root {
  --plum:      #2e1b3f;  /* masthead + footer ground; the white logo needs it */
  --plum-deep: #241531;
  --paper:     #fbf8f4;
  --card:      #ffffff;
  --ink:       #2a2233;  /* near-black, biased violet so it agrees with plum */
  --body:      #443b4e;
  --muted:     #7a7085;
  --rule:      #e6e0e9;
  --accent:    #5c2d91;  /* shield sticker purple */
  --accent-lt: #b28ce0;
  --gold:      #e9b924;  /* chicken sign gold */

  --measure: 34rem;      /* ~65 characters of running text */
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  background: var(--plum);
  border-bottom: 3px solid var(--gold);
}

/* Keep this bar thin. The wordmark PNG is 350x175 — a 2:1 lockup — so its
 * rendered height is half whatever width it is given, and the bar's height is
 * essentially that plus the padding. At 230px wide it stood ~166px tall and
 * pushed the photograph down the page; at 150px it is ~105px. Change the width
 * here and the bar resizes with it; there is no separate height to keep in sync. */
.masthead-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: .85rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
}

.masthead a { color: #fff; }

.wordmark { display: inline-block; }

/* The wordmark is a bitmap, not type — there is no font-weight to reach for.
 * It is white line art on transparency, though, which means its strokes can be
 * dilated: each drop-shadow is a zero-offset white blur, and stacking them
 * builds up a halo tight enough to read as extra weight rather than as a glow.
 * Two passes at 0.6px is the point where it looks drawn heavier and not yet
 * smeared. Dial the count or the radius to taste; delete the filter to go back
 * to the asset as shipped. The real fix, if this ever isn't enough, is the
 * original brand artwork Justin believes is retrievable from a third party
 * (PLAN.md §Findings) — a vector would just be set heavier and be done. */
.wordmark img {
  width: 168px;
  filter: drop-shadow(0 0 .6px #fff) drop-shadow(0 0 .6px #fff);
}

.nav {
  display: flex;
  gap: 1.5rem;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.nav a {
  color: #e4d8f0;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--gold);
}

/* -------------------------------------------------------------------- hero */

.hero { background: var(--plum-deep); }

/* The hero is the straight-on facade shot, 1280x669 (1.91:1) — the largest
 * variant of it that Mopro ever served, so it is the ceiling.
 *
 * HEIGHT: 30rem on a tall screen, 60vh on a short one so a laptop still lands
 * the top of the post above the fold rather than a full screen of building.
 * (Briefly cut to 22rem, then restored — the thing crowding the photograph was
 * the masthead above it, not the photograph's own height.)
 *
 * CROP: biased UP (30% rather than the default 50%) because the subject sits
 * high — a centred crop cuts the rooster shield off the parapet, which is the
 * one piece of brand mark in the photograph. The percentage is proportional, so
 * it survives the height changing; retune it only if the hero itself is
 * swapped. On narrow viewports the whole frame fits and nothing is cropped. */
.hero img {
  width: 100%;
  max-height: min(30rem, 60vh);
  object-fit: cover;
  object-position: center 30%;
}

/* ----------------------------------------------------------------- content */

.page {
  max-width: 60rem;
  margin: 0 auto;
  padding: 3.5rem 1.25rem 4.5rem;
}

.column {
  max-width: var(--measure);
  margin: 0 auto;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); font-weight: 600; }
h2 { font-size: 1.15rem; font-weight: 600; }

/* The dateline above the closure post. It is a date, not a decoration — the
 * post is a dated notice and readers need to know when it was written. */
.dateline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .6rem;
}

.gold-rule {
  width: 3rem;
  height: 3px;
  background: var(--gold);
  margin: 1.5rem 0 2rem;
  border: 0;
}

.post p { margin: 0 0 1.4rem; }
.post p:last-child { margin-bottom: 0; }

/* The three-bullet "last notes" block, set apart from the running prose. */
.notes {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
}
.notes li { margin-bottom: .5rem; }

.hashtags {
  color: var(--muted);
  font-size: .95rem;
}

/* Call-through to the store. One button, because there is one thing to do. */
.cta {
  display: inline-block;
  margin-top: 2.5rem;
  padding: .8rem 1.6rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 2px;
}
.cta:hover { background: var(--ink); color: #fff; }

/* ------------------------------------------------------------------- store */

.ordering {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  border-radius: 2px;
  padding: 1.5rem 1.5rem 1.6rem;
  margin: 2rem 0 3rem;
}
.ordering h2 { margin-bottom: .6rem; }
.ordering p { margin: 0 0 .8rem; }
.ordering p:last-child { margin-bottom: 0; }

.items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 2.5rem 2rem;
}

.item { display: flex; flex-direction: column; gap: .7rem; }

.item figure {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.item figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.item-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.price {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

.sale {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .45rem;
  background: var(--gold);
  color: var(--plum);
  border-radius: 2px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* What is physically left of a configurable item. Deliberately a plain
 * statement and NOT a dropdown — every one of these is down to a single
 * colour and one or two sizes, and a picker would imply choice that does
 * not exist and invite orders we cannot fill (PLAN.md §Store page). */
.remaining {
  margin: 0;
  font-size: .85rem;
  color: var(--accent);
}
.remaining strong {
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .68rem;
  color: var(--muted);
  display: block;
}

.item p.desc { margin: 0; font-size: .95rem; }

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

.footer {
  background: var(--plum);
  color: #cbbcd9;
  border-top: 3px solid var(--gold);
  font-size: .9rem;
}

.footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: center;
  text-align: center;
}

.footer a { color: #fff; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
}

.footer-mark img { width: 64px; opacity: .85; }

.copyright { color: #9b8bab; font-size: .82rem; }

/* -------------------------------------------------------------------- dark
 * The masthead and footer are already dark in both themes; what changes is
 * the paper between them. Kept token-level so nothing below has to know. */

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191122;
    --card:  #221830;
    --ink:   #f3eef8;
    --body:  #cdc3d9;
    --muted: #968aa6;
    --rule:  #362a47;
    --accent: var(--accent-lt);
  }
  .cta { color: #1b1129; }
  .cta:hover { background: var(--gold); color: #1b1129; }
  .ordering { border-color: #362a47; border-left-color: var(--gold); }
}

:root[data-theme="dark"] {
  --paper: #191122;
  --card:  #221830;
  --ink:   #f3eef8;
  --body:  #cdc3d9;
  --muted: #968aa6;
  --rule:  #362a47;
  --accent: var(--accent-lt);
}
:root[data-theme="dark"] .cta { color: #1b1129; }
:root[data-theme="dark"] .cta:hover { background: var(--gold); color: #1b1129; }

:root[data-theme="light"] {
  --paper: #fbf8f4;
  --card:  #ffffff;
  --ink:   #2a2233;
  --body:  #443b4e;
  --muted: #7a7085;
  --rule:  #e6e0e9;
  --accent: #5c2d91;
}
:root[data-theme="light"] .cta { color: #fff; }
:root[data-theme="light"] .cta:hover { background: var(--ink); color: #fff; }