/* WinePretz
   Bold move: her paint is the interface. The masthead, the newsletter
   button and the five tabs are her brushwork; everything else stays plain
   (one serif, cream paper, one wine accent). */

:root {
  --paper: #faf3da; /* the background she asked for */
  --ink: #2b1219; /* wine-black text, like the Roman's oxblood */
  --muted: #75605f; /* 5.2:1 on paper */
  --wine: #8a1c4c; /* from the painted "newsletter" */
  --serif: "Crimson Pro", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --gutter: clamp(16px, 4vw, 48px);
  --wrap: 1040px;
  color-scheme: light;
}

/* Dark mode keeps the paper on purpose. The drawings are ink and paint on
   paper (black ink lines vanish on a dark page), and the brief sets the
   background to #FAF3DA. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #faf3da;
    --ink: #2b1219;
    --muted: #75605f;
    --wine: #8a1c4c;
  }
}

:root[data-theme="dark"] {
  --paper: #faf3da;
  --ink: #2b1219;
  --muted: #75605f;
  --wine: #8a1c4c;
}

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

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

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

a {
  color: var(--wine);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3 {
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

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

.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  font-size: 1rem;
}

.skip:focus {
  top: 12px;
}

/* ---------- masthead: glass left, logo centre, newsletter top right ---------- */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "glass logo news";
  align-items: center;
  min-height: clamp(380px, 36vw, 540px);
  padding: clamp(20px, 2.2vw, 34px) var(--gutter) 0;
}

.masthead__glass {
  grid-area: glass;
  justify-self: start;
  align-self: center;
  padding-left: clamp(0px, 3.5vw, 64px);
}

.masthead__glass-img {
  display: block;
  width: auto;
  height: clamp(170px, 24vw, 360px);
}

.masthead__logo {
  grid-area: logo;
  margin: 0;
  justify-self: center;
}

.masthead__logo a {
  display: block;
}

.masthead__logo-img {
  display: block;
  width: clamp(240px, 44vw, 640px);
  height: auto;
}

.masthead__news {
  grid-area: news;
  justify-self: end;
  align-self: start;
  padding: 4px 0;
}

.masthead__news img {
  display: block;
  width: clamp(110px, 14vw, 196px);
  height: auto;
  transition: transform 0.25s ease;
}

.masthead__news:hover img,
.masthead__news:focus-visible img {
  transform: rotate(-3deg) scale(1.04);
}

@media (max-width: 599px) {
  .masthead {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "news news"
      "glass logo";
    min-height: 0;
    row-gap: 6px;
    padding-top: 14px;
  }

  .masthead__glass {
    padding-left: 0;
  }

  .masthead__glass-img {
    height: 112px;
  }

  .masthead__logo-img {
    width: min(60vw, 280px);
  }

  .masthead__news img {
    width: 100px;
  }
}

/* ---------- painted tabs ---------- */

/* All four tabs stay on one row at every width (the logo is the way home,
   so there is no Home tab). Side by side the four paintings are 8.75
   heights wide, so each tab's height is the free width divided by 8.85
   (a little spare), up to 60px. */
.tabs {
  --tab-gap: clamp(8px, 2.8vw, 52px);
  --tab-pad: var(--gutter);
}

.tabs ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: var(--tab-gap);
  margin: 0;
  padding: clamp(14px, 2vw, 28px) var(--tab-pad) clamp(36px, 5vw, 64px);
  list-style: none;
}

.tabs a {
  position: relative;
  display: block;
  padding: 8px 2px 14px;
}

.tabs img {
  display: block;
  width: auto;
  height: min(60px, calc((100vw - 2 * var(--tab-pad) - 3 * var(--tab-gap) - 16px) / 8.85));
  transition: transform 0.25s ease;
}

.tabs a:hover img,
.tabs a:focus-visible img {
  transform: rotate(-3deg) translateY(-2px);
}

/* The current tab gets a pen squiggle, drawn like her ink lines. */
.tabs a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -2px;
  height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5c9-5 17-5 26-1s17 5 26 0 17-6 27-1 16 5 25 1 8-3 10-3' fill='none' stroke='%232b1219' stroke-width='2.6' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")
    center / 100% 100% no-repeat;
}

/* Phones: tighter gaps, so the paintings stay as big as they can. */
@media (max-width: 599px) {
  .tabs {
    --tab-gap: 6px;
    --tab-pad: 12px;
  }
}

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

.wrap {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.meta {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.meta a {
  color: inherit;
}

.more {
  font-weight: 600;
}

/* ---------- home ---------- */

.lead {
  max-width: 780px;
  margin: 0 0 clamp(56px, 8vw, 96px);
}

.today {
  max-width: 780px;
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: clamp(1.9rem, 1.15rem + 2.5vw, 3rem);
  font-weight: 300;
  line-height: 1.12;
  text-wrap: balance;
}

.feature__title {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.12;
}

.feature__title a,
.item__title a,
.note-card__title a,
.note-row__title a {
  color: inherit;
  text-decoration: none;
}

.feature__title a:hover,
.item__title a:hover,
.note-card__title a:hover,
.note-row__title a:hover {
  color: var(--wine);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.feature__dek {
  margin: 0 0 10px;
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
  line-height: 1.3;
}

.feature__excerpt {
  max-width: 62ch;
  margin: 26px 0 8px;
}

.feature p:last-child {
  margin: 0;
}

.columns {
  display: grid;
  gap: 56px;
}

@media (min-width: 900px) {
  .columns {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 88px;
  }
}

.feed > h2,
.side h2,
.pairings h2,
.post__signup h2,
.post__more h2 {
  margin: 0 0 22px;
  font-size: 1.6rem;
  font-weight: 600;
}

.item {
  margin: 0 0 38px;
}

.item__title {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.7rem);
  line-height: 1.18;
}

.item__dek {
  margin: 0 0 6px;
}

.side {
  font-size: 1.125rem;
}

.side__block {
  margin: 0 0 48px;
}

.side h2 {
  margin-bottom: 10px;
  font-size: 1.4rem;
}

.side p {
  margin: 0;
}

.plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain li {
  margin: 0 0 12px;
  line-height: 1.3;
}

/* ---------- tasting notes (emailed in, filled in by the Worker) ---------- */

.notes {
  max-width: 780px;
  margin: 0 0 clamp(56px, 8vw, 96px);
}

.notes > h2 {
  margin: 0 0 22px;
  font-size: 1.6rem;
  font-weight: 600;
}

.note-card {
  margin: 0 0 40px;
}

/* Up to three photos side by side at one shared height. Each photo grows
   by its own width-to-height ratio (--ar), so none is cropped much, and
   the row is never taller than 460px (--r is the ratios added up). */
.note-strip {
  display: flex;
  gap: 8px;
  width: min(100%, calc(460px * var(--r) + 16px));
  margin: 0 0 20px;
}

.note-strip img {
  display: block;
  flex: var(--ar) 1 0;
  width: 0;
  min-width: 0;
  height: auto;
  aspect-ratio: var(--ar);
  object-fit: cover;
}

.note-card__title {
  margin: 0 0 10px;
  font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  line-height: 1.12;
}

.note-card__excerpt {
  max-width: 62ch;
  margin: 0 0 8px;
}

.note-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

/* The photo sits on the right, as in a newsletter archive, so the titles
   line up whether or not a note has a photo. */
.note-row {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 22px;
}

.note-row__thumb {
  flex: none;
  order: 2;
}

.note-row__thumb img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: cover;
}

.note-row__title {
  margin: 0 0 4px;
  font-size: clamp(1.3rem, 1.2rem + 0.4vw, 1.5rem);
  line-height: 1.2;
}

.note-row__excerpt {
  margin: 0 0 4px;
}

.notes-all {
  max-width: 720px;
}

.notes-all .note-row {
  margin-bottom: 34px;
}

/* A note's own page */
.note__hero {
  margin: 0 0 32px;
}

/* Full column width, but a tall portrait photo stops at 80% of the screen. */
.note__hero img,
.note__photos img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
}

.note__photos {
  display: grid;
  gap: 16px;
  margin: 36px 0 0;
}

/* Lines like "Nose: lemon, wet stone" become a small list of fields. */
.tasting {
  display: grid;
  gap: 6px;
  margin: 0 0 1.2em;
}

.tasting div {
  display: grid;
  grid-template-columns: minmax(84px, 8.5rem) minmax(0, 1fr);
  gap: 14px;
}

.tasting dt {
  color: var(--wine);
  font-weight: 600;
}

.tasting dd {
  margin: 0;
}

/* ---------- sign-up form (a real form, so it gets a border) ---------- */

.signup {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.signup input {
  flex: 1 1 170px;
  min-width: 0;
  padding: 10px 16px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
}

.signup input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.signup button {
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--wine);
  color: var(--paper);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}

.signup button:hover {
  background: var(--ink);
}

.signup__note {
  flex-basis: 100%;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.35;
}

.signup__note:empty {
  display: none;
}

/* ---------- section pages ---------- */

h1 {
  margin: 0 0 14px;
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.05;
}

.lede {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem);
  line-height: 1.38;
}

.section__head {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  margin: 0 0 clamp(48px, 7vw, 88px);
}

@media (min-width: 760px) {
  .section__head--art {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.art {
  margin: 0;
}

.art img {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
}

.feed--narrow {
  max-width: 720px;
}

.pairings {
  max-width: 860px;
  margin: 0 0 clamp(56px, 8vw, 96px);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.125rem;
  line-height: 1.35;
}

th,
td {
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--muted);
  text-align: left;
  vertical-align: top;
}

thead th {
  padding-top: 0;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 600;
}

tbody th {
  font-weight: 600;
}

@media (max-width: 640px) {
  thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  table,
  tbody,
  tr,
  th,
  td {
    display: block;
  }

  tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--muted);
  }

  th,
  td {
    padding: 0;
    border: 0;
  }

  td::before {
    content: attr(data-label) ": ";
    color: var(--muted);
  }
}

.episodes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note {
  margin: 8px 0 0;
}

/* ---------- about ---------- */

.about {
  display: grid;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

@media (min-width: 760px) {
  .about {
    grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  }
}

.ring {
  position: relative;
  display: grid;
  place-items: center;
  width: min(86vw, 440px);
  aspect-ratio: 1554 / 1540;
  margin: 0 auto;
}

.ring__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ring__text {
  position: relative;
  max-width: 60%;
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.3rem);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
}

/* ---------- posts ---------- */

.prose {
  max-width: 66ch;
}

.prose p,
.prose li {
  margin: 0 0 1em;
}

.prose h2 {
  margin: 1.6em 0 0.45em;
  font-size: 1.6rem;
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin: 0 0 1.2em;
  padding-left: 1.3em;
}

.prose li {
  margin-bottom: 0.6em;
  padding-left: 0.2em;
}

.post {
  max-width: calc(720px + 2 * var(--gutter));
}

.post__head {
  margin: 0 0 36px;
}

.post__head h1 {
  font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.25rem);
  line-height: 1.08;
}

.post__dek {
  margin: 0 0 14px;
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.55rem);
  line-height: 1.32;
}

.post__signup {
  margin: clamp(56px, 8vw, 88px) 0;
}

.post__signup p {
  margin: 0;
}

.post__signup h2 {
  margin-bottom: 8px;
}

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

.site-footer {
  margin-top: clamp(80px, 11vw, 150px);
  padding: 0 0 48px;
}

.site-footer__inner {
  display: grid;
  gap: 36px;
}

@media (min-width: 900px) {
  .site-footer__inner {
    grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
    align-items: end;
  }

  .site-footer__links {
    justify-content: flex-end;
  }
}

.site-footer h2 {
  margin: 0 0 6px;
  font-size: 1.75rem;
}

.site-footer p {
  margin: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 1.125rem;
}

.site-footer__links a {
  color: var(--ink);
}

.site-footer__fine {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 1rem;
}

/* ---------- newsletter dialog ---------- */

.nl {
  width: min(92vw, 460px);
  padding: 30px 28px 32px;
  border: 0;
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(43, 18, 25, 0.28);
}

.nl::backdrop {
  background: rgba(43, 18, 25, 0.45);
}

.nl p {
  margin: 0;
}

.nl__close {
  position: absolute;
  top: 8px;
  right: 10px;
}

.nl__close button {
  padding: 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 1rem;
  text-decoration: underline;
  cursor: pointer;
}

.nl__title {
  margin: 6px 0 14px;
}

.nl__title img {
  display: block;
  width: 260px;
  height: auto;
}

/* ---------- the bear & fish ---------- */

.bear {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--r, 0deg)) scale(0.88);
  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}

.bear.is-in {
  opacity: 1;
  transform: rotate(var(--r, 0deg)) scale(1);
}

.bear-slot {
  height: 0;
}

/* ---------- wine spilled by the cursor glass (js/site.js) ---------- */

.spill {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bear-slot.is-used {
  height: var(--slot-h, 0);
}

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

@media print {
  .tabs,
  .bear,
  .signup,
  .site-footer__links {
    display: none;
  }
}