/* Layout: one column of bands. Text-led hero over a layered ridge-line horizon, then a 1/2/3-column tee grid where each card sits on its own terrain colour. */
:root {
  --bg: #eef1ea;          /* lichen */
  --surface: #f8faf5;
  --fg: #1f281b;          /* forest ink, the shop's own icon colour */
  --muted: #56624f;
  --line: #d3dacb;
  --accent: #2f5a32;      /* pine */
  --accent-fg: #f4f7f0;
  --glow: #c98a1b;        /* sword glow, used sparingly */
  --ridge-1: #c9d5bf;
  --ridge-2: #9fb393;
  --ridge-3: #5f7a56;
  --ridge-4: #2f4a2c;
  --c-fg: #eef3ea;        /* text on the dark collection band, both themes */
  --c-muted: #c7d4bf;

  --t-waterfall: linear-gradient(160deg, #cfe3c4, #8fb98a);
  --t-summit:    linear-gradient(160deg, #e3ecf2, #a9c2d3);
  --t-lunar:     linear-gradient(160deg, #d9dbe6, #9fa3bb);
  --t-sea:       linear-gradient(160deg, #cfe5e3, #86b7b4);
  --t-volcano:   linear-gradient(160deg, #f0d6c8, #d39a80);
  --t-sunset:    linear-gradient(160deg, #f5dfbf, #e0a971);

  --font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-label: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter-l: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --wrap: 72rem;
  --radius: 14px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11170f; --surface: #182016; --fg: #e5ebdf; --muted: #a3b09b; --line: #2b3627;
    --accent: #a9d18a; --accent-fg: #11170f; --glow: #f0b94a;
    --ridge-1: #1c2719; --ridge-2: #24331f; --ridge-3: #2f4429; --ridge-4: #3b5733;
    --t-waterfall: linear-gradient(160deg, #24382a, #17251b);
    --t-summit:    linear-gradient(160deg, #263442, #18212b);
    --t-lunar:     linear-gradient(160deg, #272a3b, #171926);
    --t-sea:       linear-gradient(160deg, #1f3a3a, #132525);
    --t-volcano:   linear-gradient(160deg, #3d241b, #251510);
    --t-sunset:    linear-gradient(160deg, #3f2e1a, #261b0f);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #11170f; --surface: #182016; --fg: #e5ebdf; --muted: #a3b09b; --line: #2b3627;
  --accent: #a9d18a; --accent-fg: #11170f; --glow: #f0b94a;
  --ridge-1: #1c2719; --ridge-2: #24331f; --ridge-3: #2f4429; --ridge-4: #3b5733;
  --t-waterfall: linear-gradient(160deg, #24382a, #17251b);
  --t-summit:    linear-gradient(160deg, #263442, #18212b);
  --t-lunar:     linear-gradient(160deg, #272a3b, #171926);
  --t-sea:       linear-gradient(160deg, #1f3a3a, #132525);
  --t-volcano:   linear-gradient(160deg, #3d241b, #251510);
  --t-sunset:    linear-gradient(160deg, #3f2e1a, #261b0f);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--glow); outline-offset: 3px; border-radius: 6px; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}
.label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Top bar */
.top { padding-block: 1.1rem; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { font-family: var(--font-display); font-size: 1.2rem; text-decoration: none; }
.brand span { color: var(--glow); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 44px; padding: 0.7rem 1.25rem;
  border-radius: 999px; border: 1.5px solid var(--accent);
  font-weight: 600; font-size: 0.95rem; text-decoration: none;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn-solid { background: var(--accent); color: var(--accent-fg); }
.btn-solid:hover { transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--accent); color: var(--accent-fg); }
.btn .arrow { font-family: var(--font-label); }

/* Hero */
.hero { padding-block: 2.5rem 0; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 7vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 .eyebrow { display: block; margin-bottom: 0.9rem; font-size: 0.75rem; line-height: 1.4; letter-spacing: 0.08em; }
.hero p { max-width: 38rem; margin: 0 0 1.6rem; color: var(--muted); font-size: 1.1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.hero .ship { margin: 1rem 0 0; font-size: 0.75rem; color: var(--muted); }

.hero-grid { display: grid; gap: 2rem; align-items: center; }
.hero-text { min-width: 0; }
.hero-photo { margin: 0; display: grid; gap: 0.5rem; max-width: 30rem; }
.hero-photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.2fr 1fr; gap: 3rem; } .hero-photo { justify-self: end; } }

/* Layered ridge line */
.horizon { position: relative; height: clamp(90px, 16vw, 170px); margin-top: 2.5rem; overflow: hidden; }
.horizon i { position: absolute; inset: 0; display: block; }
.horizon i:nth-child(1) { background: var(--ridge-1); clip-path: polygon(0 55%, 12% 30%, 24% 48%, 38% 18%, 52% 42%, 66% 22%, 80% 46%, 92% 28%, 100% 40%, 100% 100%, 0 100%); }
.horizon i:nth-child(2) { background: var(--ridge-2); clip-path: polygon(0 70%, 10% 52%, 22% 66%, 34% 44%, 48% 64%, 60% 46%, 74% 68%, 88% 50%, 100% 62%, 100% 100%, 0 100%); }
.horizon i:nth-child(3) { background: var(--ridge-3); clip-path: polygon(0 82%, 16% 68%, 30% 80%, 44% 64%, 58% 78%, 72% 66%, 86% 80%, 100% 70%, 100% 100%, 0 100%); }
.horizon i:nth-child(4) { background: var(--ridge-4); clip-path: polygon(0 92%, 20% 84%, 40% 94%, 60% 86%, 80% 94%, 100% 88%, 100% 100%, 0 100%); }
.horizon b {
  position: absolute; width: clamp(34px, 5vw, 56px); aspect-ratio: 1; border-radius: 50%;
  left: 68%; top: 6%; background: var(--glow); opacity: .85;
}

/* Collection */
.collection { background: var(--ridge-4); color: var(--c-fg); padding-block: 0 3.5rem; }
.collection-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; padding-block: 0.5rem 1.75rem; }
.collection-head h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 4vw, 2.4rem); margin: 0; line-height: 1.1; }
.collection-head .label { color: var(--c-muted); }

.grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.tee {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--surface); color: var(--fg);
  border-radius: var(--radius); overflow: hidden;
}
.tee-art { position: relative; aspect-ratio: 1 / 1; max-width: 100%; display: block; }
.tee-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tee-art:hover img { transform: scale(1.03); }
.tee-art .fallback {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  font-family: var(--font-display); font-size: 1.4rem; color: var(--fg); opacity: .55; z-index: 0; padding: 1rem;
}
.tee-art img { position: relative; z-index: 1; color: transparent; }  /* hides alt text if an image fails, the terrain tile shows instead */
.t-waterfall { background: var(--t-waterfall); }
.t-summit { background: var(--t-summit); }
.t-lunar { background: var(--t-lunar); }
.t-sea { background: var(--t-sea); }
.t-volcano { background: var(--t-volcano); }
.t-sunset { background: var(--t-sunset); }

.tee-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.2rem 1.25rem; flex: 1; }
.tee-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; margin: 0; text-wrap: balance; }
.tee-body p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.tee-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.price { font-family: var(--font-label); font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Details */
.details { padding-block: 3.5rem; }
.details h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 1.5rem; line-height: 1.15; }
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.5rem 2rem; margin: 0; }
.specs div { min-width: 0; border-top: 1px solid var(--line); padding-top: 0.9rem; }
.specs dt { font-family: var(--font-label); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.specs dd { margin: 0.3rem 0 0; font-size: 1rem; }

/* Closing */
.closing { padding-block: 0 4rem; }
.closing .card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
}
.closing h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 3.5vw, 1.9rem); margin: 0; max-width: 22ch; line-height: 1.2; }

footer { padding-block: 0 2.5rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; color: var(--muted); font-size: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }