/* ============================================================
   TIPSY — high tech + low intervention = happy wines
   Design system: the hangtag, on screen.
   One ground (paper), one ink, one red. Mono speaks, serif tells.
   No build step. No external requests. Self-hosted fonts.
   ============================================================ */

/* ---------- 1. Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Rubik Mono One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/rubik-mono-one-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/fraunces-italic-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
}
/* Teko — the CARMA wordmark face (variable 300–700, latin subset) */
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/teko-latin.woff2") format("woff2");
}

/* ---------- 2. Design tokens ---------- */
:root {
  --paper: #f9e3e7;   /* lab rosé, lightened — softer blush ground */
  --ink:   #2b2c78;   /* ultramarine — violet-blue print ink */
  --red:   #d24e35;   /* coral-deep accent, warmer against the pink */
  --rule:  color-mix(in srgb, var(--ink) 45%, transparent);

  --font-display: "Rubik Mono One", "Arial Black", sans-serif;
  --font-body: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fraunces axis presets */
  --wonk: "SOFT" 40, "WONK" 1;
  --wonk-hi: "SOFT" 70, "WONK" 1;

  --maxw: 1040px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-pad: clamp(3.5rem, 9vw, 7rem);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-variation-settings: var(--wonk);
  font-size: clamp(1.02rem, 0.5vw + 0.94rem, 1.18rem);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

::selection { background: var(--red); color: var(--paper); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: 0.08;
  mix-blend-mode: multiply;
}

/* visually hidden but available to assistive tech / SEO */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 9999;
  background: var(--ink); color: var(--paper); padding: 0.6rem 1rem;
  font-family: var(--font-mono);
}
.skip:focus { left: 0; }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

section { position: relative; padding-block: var(--section-pad); }
section + section { border-top: 1px dotted var(--rule); }

.kicker {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin: 0 0 1.6rem;
  color: var(--red);
}
.kicker::before { content: "★"; font-size: 0.9em; }

.star { color: var(--red); }

/* ---------- 5. Typography ---------- */
h1, h2, h3 { margin: 0; font-weight: 400; }

/* Display type: white fill + black 3D stacked shadow, like DATA on the tag */
.extrude {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 0.95;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;   /* stroke behind fill — keeps counters intact */
  text-shadow:
    2px 2px 0 var(--ink), 4px 4px 0 var(--ink),
    6px 6px 0 var(--ink), 8px 8px 0 var(--ink);
  letter-spacing: 0.01em;
}

.prose p { max-width: 62ch; margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
em { font-style: italic; }

.lede {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  line-height: 1.4;
  max-width: 44ch;
  font-variation-settings: var(--wonk-hi);
}

/* Pull quote — the serif moment */
.pull {
  font-variation-settings: var(--wonk-hi);
  font-weight: 550;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.25;
  max-width: 24ch;
  margin: 0 0 2rem;
  text-wrap: balance;
}

/* Footnote references */
sup { font-size: 0.68em; }
sup a { color: var(--red); font-family: var(--font-mono); text-decoration: none; }
sup a:hover, sup a:focus-visible { text-decoration: underline; }

/* ---------- 6. Dotted-leader spec rows (the hangtag component) ---------- */
.specblock { font-family: var(--font-mono); font-size: 0.88rem; max-width: 640px; }
.specrow { display: flex; align-items: baseline; gap: 0.7em; padding: 0.42em 0; }
.specrow b {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.specrow .dots {
  flex: 1;
  border-bottom: 2px dotted var(--rule);
  transform: translateY(-0.28em);
  min-width: 2ch;
}
.specrow span { text-align: right; }

/* ---------- 7. Hero — the illustration is the header, the headline is the menu ---------- */
.hero {
  position: relative;
  min-height: min(100vh, 56.25vw + 12rem); /* keep the full scene in view */
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: 0;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 70% 100%;   /* keep the sensor tower + vine rows in frame */
  pointer-events: none;
}
.hero__logo {
  position: absolute; top: 1.2rem; left: var(--gutter); z-index: 2;
  width: clamp(48px, 5.5vw, 66px);
  display: block;
  text-decoration: none;
}
.hero__logo img { width: 100%; height: auto; }
.hero__menu {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.9rem, 2.4vw, 1.6rem);
  padding: clamp(6rem, 16vh, 11rem) var(--gutter) 0;
  max-width: var(--maxw); margin-inline: auto; width: 100%;
}
.hero__menu a {
  font-size: clamp(1.25rem, 5.4vw, 3.9rem);
  text-decoration: none;
  transition: transform 0.15s ease;
}
.hero__menu a:hover,
.hero__menu a:focus-visible { transform: translate(-2px, -2px); }

/* culture toggle — pause control for the live background (WCAG 2.2.2) */
.culture {
  position: absolute; left: var(--gutter); bottom: 1rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none; border: none; color: var(--ink);
  opacity: 0.65; cursor: pointer; padding: 0.4rem 0;
}
.culture:hover, .culture:focus-visible { opacity: 1; }

/* a section that hosts the Game of Life canvas behind its content */
.life-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.has-life > .wrap { position: relative; z-index: 1; }

/* ---------- 9. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.3rem;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn:hover, .btn:focus-visible { background: var(--paper); color: var(--ink); }

/* ---------- 10. Ticker ---------- */
.ticker-wrap {
  overflow: hidden; white-space: nowrap;
  border-block: 2px solid var(--ink);
  padding-block: 0.55rem;
  background: #fff;
}
.ticker { display: inline-block; padding-left: 100%; animation: marquee 36s linear infinite; }
.ticker span {
  font-family: var(--font-mono);
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0 1.6rem;
}
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.ticker-wrap:hover .ticker { animation-play-state: paused; }

/* ---------- 10b. "What we measure" — disclosure + parameters table
   (stacked hard-shadow cells, from the Tipsy Parameters pen) ---------- */
.measure-details { margin-top: 2.5rem; }
.measure-details summary {
  list-style: none;
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 0.95rem; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  padding: 0.75rem 1.3rem;
  background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink);
}
.measure-details summary::-webkit-details-marker { display: none; }
.measure-details summary::after { content: "↓"; color: var(--red); background: none; }
.measure-details[open] summary::after { content: "↑"; }
.measure-details summary:hover,
.measure-details summary:focus-visible { background: var(--paper); color: var(--ink); }

.measure-scroll { overflow-x: auto; padding: 10px 4px 22px; margin-top: 1.2rem; -webkit-overflow-scrolling: touch; }
.measure {
  border-collapse: separate;
  border-spacing: 14px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  min-width: 640px;
}
.measure th, .measure td {
  background: var(--paper);
  color: var(--ink);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--ink), 4px 4px 0 var(--ink), 6px 6px 0 var(--ink),
              8px 8px 0 var(--ink), 10px 10px 0 var(--ink);
  transition: background 0.18s, color 0.18s;
}
.measure th { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.05em; }
.measure td:first-child { font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; font-size: 0.8rem; }
.measure tbody tr:hover td { background: var(--ink); color: var(--paper); }

/* ---------- 11. Low intervention bits ---------- */
/* Grape heaven as the section background — white type over the night sky */
.sec--grape {
  background: url("../img/grape-heaven-sky.jpg") center / cover no-repeat;
  border-top: none;
  color: #fff;
  text-shadow: 0 1px 3px rgba(15, 20, 60, 0.35);
  min-height: 60vh;
}
.sec--grape .kicker,
.sec--grape .star,
.sec--grape sup a { color: #ffb09b; }   /* cloud coral — red is too dark on blue */
.sec--grape .prose p { max-width: 54ch; }
.sec--grape__caption {
  position: absolute; right: var(--gutter); bottom: 1rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; opacity: 0.9;
}

.stamp {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2rem;
}

/* ---------- 12. Happy Wines — bottle cards ---------- */
.wines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 3rem;
}
.wine-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  cursor: pointer;
  background: none; border: none; font: inherit; color: inherit;
}
.wine-card__bottle {
  height: 300px; width: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}
.wine-card:hover .wine-card__bottle,
.wine-card:focus-visible .wine-card__bottle { transform: translateY(-8px) rotate(-2deg); }
.wine-card__name {
  margin-top: 1.1rem;
  white-space: nowrap;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 2.55rem;
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: #fff;
  -webkit-text-stroke: 2px var(--ink);
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 var(--ink), 4px 4px 0 var(--ink),
    6px 6px 0 var(--ink);
}
/* CARMA wordmark is set in Teko, like on the label */
.wine-card__name--teko {
  font-family: "Teko", var(--font-display);
  font-weight: 700;
  font-size: 3rem;
  line-height: 0.8;
  -webkit-text-stroke: 3px var(--ink);
}
.wine-card__meta {
  font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.8; margin-top: 1.1rem;
}
.wine-card__tag {
  margin-top: 0.9rem;
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  border-bottom: 2px dotted var(--rule);
  padding-bottom: 0.15rem;
}

/* ---------- 13. Tech-sheet modal (the hangtag itself) ---------- */
.modal {
  position: fixed; inset: 0; z-index: 500;
  display: none;
  padding: clamp(1rem, 4vw, 3rem);
  overflow-y: auto;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
}
.modal.is-open { display: grid; place-items: start center; }
.sheet {
  position: relative;
  width: min(640px, 100%);
  /* the tech sheet IS the printed hangtag — it keeps print colours
     regardless of the site scheme (locally re-scoped tokens) */
  --paper: #f7f2e8;
  --ink: #17150e;
  --red: #b5443c;
  --rule: color-mix(in srgb, var(--ink) 45%, transparent);
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: clamp(1.5rem, 4vw, 2.8rem);
}
.sheet__close {
  position: absolute; top: 0.8rem; right: 0.8rem;
  width: 2.4rem; height: 2.4rem;
  background: var(--ink); color: var(--paper); border: none;
  font-family: var(--font-mono); font-size: 1.1rem; cursor: pointer;
}
.sheet__name {
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  margin-bottom: 1rem;
}
/* CARMA wordmark is set in Teko, not Rubik */
.sheet__name--teko {
  font-family: "Teko", var(--font-display);
  font-weight: 700;
  font-size: clamp(3.2rem, 10vw, 5rem);
  line-height: 0.85;
  letter-spacing: 0.01em;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
}
.sheet__tagline {
  font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.8;
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 1.1rem; margin-bottom: 1.4rem;
}
.sheet__story { font-variation-settings: var(--wonk); font-size: 0.98rem; }
.sheet__story p { margin: 0 0 0.9rem; }
.sheet__ht {
  margin-top: 1.6rem; padding-top: 1.2rem;
  border-top: 1px dotted var(--rule);
}
.sheet__ht h4 {
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 0.85rem; margin: 0 0 0.6rem;
}
.sheet__ht h4 .lo { text-transform: lowercase; letter-spacing: 0.02em; }
.sheet__ht p { margin: 0; font-size: 0.95rem; }
.sheet .specblock { margin-top: 1.6rem; max-width: none; font-size: 0.82rem; }
.sheet__foot {
  margin-top: 1.8rem; padding-top: 1rem;
  border-top: 1px dotted var(--rule);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; opacity: 0.8;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}

/* ---------- 14. Footer (contact lives here) ---------- */
.foot {
  border-top: 2px solid var(--ink);
  padding-block: clamp(2.5rem, 6vw, 4rem) 2rem;
}
.foot__row {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 2rem 5rem;
}
.foot__mail { flex: 0 0 auto; text-align: right; margin-left: auto; }
.foot__contact {
  margin: 0;
  font-family: var(--font-body);
  font-variation-settings: var(--wonk-hi);
  font-weight: 500;
  font-size: clamp(1.4rem, 3.4vw, 2.2rem);
  line-height: 1.2;
  max-width: 24ch;
}
.foot__contact a {
  text-decoration: none;
  border-bottom: 3px solid var(--red);
  overflow-wrap: anywhere;
}
.no-social {
  font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em;
  text-transform: uppercase; opacity: 0.75; margin-top: 1.4rem;
}
.no-social s { text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.foot__notes { flex: 1 1 20rem; max-width: 34rem; padding-block: 0; text-align: left; }
.foot__notes h2 {
  font-family: var(--font-mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--red);
  margin: 0 0 0.7rem;
}
.foot__notes ol {
  list-style: decimal; margin: 0; padding-left: 1.4rem;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.55;
  opacity: 0.85; display: grid; gap: 0.55rem;
}
.foot__notes li::marker { color: var(--red); }
.foot__notes li em { font-style: italic; }
.foot__notes a { text-decoration: none; color: var(--red); margin-left: 0.35em; }
.foot__notes a:hover, .foot__notes a:focus-visible { text-decoration: underline; }
/* jumping to a note flashes it briefly, then fades — so it doesn't sit highlighted */
.foot__notes li:target { border-radius: 4px; animation: note-flash 2.4s ease-out forwards; }
@keyframes note-flash {
  from { background: color-mix(in srgb, var(--red) 20%, transparent); }
  to   { background: transparent; }
}
.no-social .op { color: var(--red); font-weight: 700; }

/* ---------- 15. Motion prefs ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  /* no fade available, so keep a soft static locate-highlight */
  .foot__notes li:target { background: color-mix(in srgb, var(--red) 12%, transparent); }
}

/* ---------- 17. Print — the tech sheet is the hangtag, so let it print ---------- */
.sheet__print { margin-top: 1.6rem; }
@media print {
  body.sheet-open > *:not(#sheet-modal) { display: none !important; }
  body.sheet-open .grain { display: none !important; }
  body.sheet-open { background: #fff; overflow: visible !important; }
  body.sheet-open .modal {
    position: static; display: block; padding: 0;
    background: none; overflow: visible;
  }
  body.sheet-open .sheet {
    width: 100%; border: 2px solid #000; box-shadow: none;
  }
  body.sheet-open .sheet__close,
  body.sheet-open .sheet__print { display: none !important; }
}