/* =========================================================
   Harsha Talreja — site styles
   Editorial beauty aesthetic: warm paper, ink, one rose accent.
   ========================================================= */

:root {
  --paper:      #fbf8f5;
  --paper-2:    #f4ede7;
  --paper-3:    #ece2d9;
  --ink:        #17130f;
  --ink-soft:   #5e544c;
  --ink-faint:  #8b8078;
  --rose:       #a8545f;
  --rose-soft:  #f0dcdd;
  --plum:       #4a2d6b;   /* hover for a brand that has its own page */
  --plum-lift:  #7b4fa8;
  --line:       #e7ddd3;
  --white:      #ffffff;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Jost", ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --shell: 1180px;
  --narrow: 720px;
  --radius: 4px;
  --shadow: 0 18px 50px -28px rgba(23, 19, 15, .35);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.005em;
  margin: 0;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }

p { margin: 0 0 1em; }

::selection { background: var(--rose-soft); color: var(--ink); }

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

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

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 24px; }
.shell--narrow { max-width: var(--narrow); }

.icon { flex: none; }

/* ---------- Shared bits ---------- */

.eyebrow {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--rose); font-weight: 500; margin: 0 0 .9rem;
}

.lede {
  font-size: 1.12rem; color: var(--ink-soft); max-width: 58ch; line-height: 1.75;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 999px;
  padding: .82rem 1.7rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover { background: var(--rose); border-color: var(--rose); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--small { padding: .62rem 1.15rem; font-size: .7rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding-bottom: .3rem;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow .icon { transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--rose); border-color: var(--rose); }
.link-arrow:hover .icon { transform: translateX(4px); }

.pill {
  display: inline-block;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 500;
  color: var(--rose); background: var(--rose-soft);
  padding: .28rem .7rem; border-radius: 999px;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pill:hover { background: var(--rose); color: var(--white); }

.dot { color: var(--ink-faint); }

/* =========================================================
   COPIED FROM harshatalreja.com
   The header, home page and footer below are a direct copy of the live
   site. Every number is a value measured off it (Elementor's generated
   post-339 / post-284 / post-11 CSS), so please keep them as they are —
   changing one drifts this away from the original. The blog's own styles
   start again at "Sections" further down and are not part of the copy.
   ========================================================= */

/* ---------- Header ----------
   Full-bleed bar, indented 5% on the left, 2px #F1F1F1 rule underneath.
   Columns 22.048% / 58.143% / 19.475% with a 10px pad, vertically centred.
   ------------------------------------------------------------------ */

/* Sticky, unlike the original — that one scrolls away. Everything else in
   this block is still the original's, and at rest the bar is opaque white
   with its 2px rule, exactly as copied.
   Once the page moves it goes translucent and blurs what passes underneath,
   the hard rule fades out, and a soft gradient takes over below it so the
   bar melts into the page rather than sitting on it as a slab. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 2px solid #f1f1f1;
  padding: 0 0 0 5%;
  transition: background .35s var(--ease), border-color .35s var(--ease),
              backdrop-filter .35s var(--ease);
}

.site-header.is-stuck {
  background: rgba(255, 255, 255, .55);
  border-bottom-color: rgba(241, 241, 241, 0);
}

/* The fade under the bar. Sits outside it, ignores the pointer, and is only
   painted once scrolled. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 100%;
  height: 34px;
  background: linear-gradient(to bottom,
              rgba(255, 255, 255, .85) 0%,
              rgba(255, 255, 255, .55) 45%,
              rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s var(--ease);
}
.site-header.is-stuck::after { opacity: 1; }

/* The blur is what keeps it legible at 55% — without it, fall back to a
   more opaque bar so text never sits on top of a photo unreadably. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck {
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-stuck { background: rgba(255, 255, 255, .92); }
}

.header-container { display: flex; flex-wrap: wrap; }

.header-col { display: flex; }
.header-widget { width: 100%; padding: 10px; align-self: center; }

.header-col--logo   { width: 22.048%; }
.header-col--nav    { width: 58.143%; }
.header-col--social { width: 19.475%; }

.site-logo { display: block; }
.site-logo img { width: 71%; height: auto; }

/* ---------- Header: menu ---------- */

.nav-widget { display: flex; align-items: center; }

.main-nav { flex: 1; }

.nav-menu {
  display: flex; justify-content: center;
  list-style: none; margin: 0; padding: 0;
}

.nav-item { position: relative; }

.nav-link {
  position: relative;
  display: block;
  padding: 13px 20px;
  font-family: "Lato", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-transform: uppercase;
  color: #333;
}

/* The original's underline pointer: a 3px white bar, so it reads as nothing
   on the white bar — the hover is deliberately silent. Kept as measured. */
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #fff;
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.58, .3, .005, 1);
}
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }

/* The original's caret is a 14px Font Awesome glyph in a span padded
   10px 0 10px 10px — 18.75px wide in total. Kept inline so its padding
   cannot grow the row. */
.sub-arrow { padding: 10px 0 10px 10px; }
.sub-arrow::before {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  border: 4.375px solid transparent;
  border-top-color: currentColor;
  border-bottom-width: 0;
  vertical-align: middle;
}

.sub-menu {
  position: absolute; top: 100%; left: 0;
  z-index: 9997;
  min-width: 200px;
  margin: 0; padding: 0;
  list-style: none;
  background: #fff;
  border: 1px solid #f1f1f1;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease;
}
.nav-item.has-children:hover > .sub-menu,
.nav-item.has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; }

.sub-link {
  display: block;
  padding: 13px 20px;
  font-family: "Lora", serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #333;
}
.sub-link:hover { background: #fafafa; }

/* 33px square, 22px glyph — the burger the original shows below 1025px. */
.menu-toggle {
  display: none;
  place-items: center;
  margin-left: auto;
  width: 33px; height: 33px; padding: 5.5px;
  background: rgba(0, 0, 0, .05);
  border: 0; border-radius: 3px;
  color: #494c4f;
  cursor: pointer;
}
.menu-toggle:hover { background: rgba(0, 0, 0, .1); }
.menu-toggle .menu-icon { grid-area: 1 / 1; }
.menu-toggle .menu-icon--close,
.menu-toggle[aria-expanded="true"] .menu-icon--open { display: none; }
.menu-toggle[aria-expanded="true"] .menu-icon--close { display: block; }

/* ---------- Header: Pinterest ---------- */

.social-widget { text-align: center; }

.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;           /* 20px icon + .5em pad, as measured */
  border-radius: 50%;
  background: #101010;
  color: #f8f8f8;
  transition: transform .25s var(--ease);
}
.social-icon:hover { transform: translateY(-2px); }

/* ---------- Header: the burger panel ---------- */

.mobile-nav {
  position: absolute; top: 100%; left: 0; right: 0;
  z-index: 9997;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block;
  padding: 13px 20px;
  font-family: "Lato", sans-serif;
  font-size: 14px; font-weight: 600;
  text-transform: uppercase;
  color: #333;
}
.mobile-nav a:hover { background: rgba(0, 0, 0, .04); }
.mobile-nav a.is-active { background: #101010; color: #fff; }
.mobile-nav ul ul a {
  padding-left: 40px;
  font-family: "Lora", serif;
  font-weight: 500;
  letter-spacing: 2px;
  color: #7a7a7a;
}

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .menu-toggle { display: grid; }
}

@media (max-width: 767px) {
  .header-col--logo   { width: 50%; }
  .header-col--nav    { width: 50%; }
  .header-col--social { width: 100%; }
}

/* ---------- Hero (home page) ----------
   Three stacked sections, each a 1050px boxed container with a 10px column
   pad. The percentages below are all relative to that column, which is what
   keeps the "Hi." sitting over the portrait at every width.
   ------------------------------------------------------------------ */

.hero-container { max-width: 1050px; margin-inline: auto; }
.hero-col { padding: 10px; }
.hero-widget-inner { position: static; }

.hero-widget--photo .hero-widget-inner { padding-top: 15%; text-align: center; }
/* Block, not inline-block: an inline image would add a ~9px descender under
   the photo and push everything below it out of step with the original. */
.hero-widget--photo img { display: block; width: 35%; height: auto; margin-inline: auto; }

.hero-widget--hi .hero-widget-inner { margin-top: -9%; }
.hero-hi {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 200px;
  font-weight: 700;
  line-height: 155px;
  letter-spacing: normal;
  text-align: center;
  color: #222;
  text-shadow: 8px -10px 0 rgba(255, 255, 255, .98);  /* punches it out of the photo */
}

.hero-widget--name { margin-bottom: 20px; }
.hero-name {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 58px;
  letter-spacing: normal;
  text-align: center;
  color: #222;
}

/* ---------- Hero: the flipping role ----------
   The original's rotate-1 effect, keyframes unchanged. One word is in flow
   (.is-visible), the rest are absolute, and the list is given the width of
   the longest word by JS so the line never jumps.
   ------------------------------------------------------------------ */

.fancy-text {
  margin: 0;
  font-family: "Poppins", sans-serif;
  font-size: 60px;
  font-weight: 300;
  line-height: 58px;
  letter-spacing: normal;
  text-align: center;
  color: #101010;
}

.fancy-list {
  display: inline-block;
  position: relative;
  text-align: center;
  perspective: 300px;
}

.fancy-list b {
  display: inline-block;
  position: absolute; left: 0; top: 0;
  width: 100%;
  white-space: nowrap;
  font-weight: 700;
  opacity: 0;
  transform: rotateX(180deg);
  transform-origin: 50% 100%;
}
.fancy-list b.is-visible {
  position: relative;
  opacity: 1;
  transform: rotateX(0deg);
  animation: cd-rotate-1-in 1.2s;
}
.fancy-list b.is-hidden {
  transform: rotateX(180deg);
  animation: cd-rotate-1-out 1.2s;
}

@keyframes cd-rotate-1-in {
  0%   { transform: rotateX(180deg); opacity: 0; }
  35%  { transform: rotateX(120deg); opacity: 0; }
  65%  { opacity: 0; }
  100% { transform: rotateX(360deg); opacity: 1; }
}
@keyframes cd-rotate-1-out {
  0%   { transform: rotateX(0deg);   opacity: 1; }
  35%  { transform: rotateX(-40deg); opacity: 1; }
  65%  { opacity: 0; }
  100% { transform: rotateX(180deg); opacity: 0; }
}

@media (max-width: 1024px) {
  .hero-container { max-width: 1024px; }
}

@media (max-width: 767px) {
  .hero-container { max-width: 767px; }
  .hero-widget--photo img { width: 45%; }
  .hero-widget--hi .hero-widget-inner { margin-top: -20%; }
  .hero-hi { font-size: 80px; }
  .hero-name { font-size: 35px; }
  .hero-widget--name .hero-widget-inner { margin-bottom: -4%; }
  .fancy-text { font-size: 38px; }
  .fancy-list b { font-size: 31px; }
}

/* ---------- Sections ---------- */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding-top: clamp(2rem, 4vw, 3rem); }
.section--featured { background: linear-gradient(180deg, transparent, var(--paper-2) 40%, transparent); }

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}

.page-head {
  padding: clamp(2.8rem, 7vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.page-head h1 { margin-bottom: .8rem; }
.page-head--center { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.page-head--center .lede { margin-inline: auto; }
.page-head--center .eyebrow {
  font-family: var(--serif); font-size: 3rem; letter-spacing: .1em;
}

/* ---------- Featured ---------- */

.featured {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.featured-media {
  display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-3);
}
.featured-media img, .featured-media .card-placeholder {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease);
}
.featured:hover .featured-media img { transform: scale(1.04); }
.featured-body h3 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: .5rem 0 .8rem; }
.featured-body h3 a { background-image: linear-gradient(var(--rose), var(--rose)); background-size: 0 1px;
  background-repeat: no-repeat; background-position: 0 100%; transition: background-size .4s var(--ease); }
.featured-body h3 a:hover { background-size: 100% 1px; }
.featured-excerpt { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* ---------- Cards ---------- */

.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: clamp(1.8rem, 3.5vw, 2.8rem);
}

.card { display: flex; flex-direction: column; }
.card-media {
  display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: var(--radius); background: var(--paper-3); margin-bottom: 1.1rem;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.card:hover .card-media img { transform: scale(1.05); }

.card-placeholder {
  display: grid; place-items: center; width: 100%; height: 100%;
}
.card-placeholder-mark {
  font-family: var(--serif); font-size: 4rem; font-style: italic;
  color: rgba(255, 255, 255, .75);
  text-shadow: 0 2px 20px rgba(23, 19, 15, .12);
}

.card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  font-size: .74rem; letter-spacing: .08em; color: var(--ink-faint);
  margin: 0 0 .7rem;
}
.card-title { font-size: 1.45rem; margin: 0 0 .6rem; }
.card-title a {
  background-image: linear-gradient(var(--rose), var(--rose)); background-size: 0 1px;
  background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease), color .25s var(--ease);
}
.card-title a:hover { background-size: 100% 1px; color: var(--rose); }
.card-excerpt { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1.1rem; flex: 1; }
.card-body .link-arrow { align-self: flex-start; }

/* ---------- Topics ---------- */

/* Six categories, so use divisors of six — auto-fit leaves orphan rows. */
.topic-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.2rem; }
@media (max-width: 1080px) { .topic-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .topic-row { grid-template-columns: repeat(2, 1fr); } }
.topic {
  display: grid; gap: .55rem; padding: 1.3rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.topic:hover { transform: translateY(-4px); border-color: var(--rose-soft); box-shadow: var(--shadow); }
.topic-swatch { display: block; width: 100%; height: 56px; border-radius: 2px; }
.topic-name { font-family: var(--serif); font-size: 1.3rem; }
.topic-count { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- Chips / search ---------- */

.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.chip {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 999px; padding: .45rem .95rem;
  color: var(--ink-soft);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip span { color: var(--ink-faint); margin-left: .3rem; }
.chip:hover, .chip.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip:hover span, .chip.is-active span { color: rgba(251, 248, 245, .6); }

.search {
  display: flex; align-items: center; gap: .6rem;
  max-width: 520px; margin-top: 1.8rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: .3rem .4rem .3rem 1.1rem;
  background: var(--white);
  transition: border-color .25s var(--ease);
}
.search:focus-within { border-color: var(--rose); }
.search .icon { color: var(--ink-faint); }
.search input {
  flex: 1; border: 0; background: none; outline: none;
  font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--ink);
  padding-block: .55rem;
}

/* ---------- Pagination ---------- */

.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3.5rem; }
.page {
  min-width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  font-size: .85rem; color: var(--ink-soft);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.page:hover, .page.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.empty { text-align: center; color: var(--ink-soft); padding: 4rem 0; }
.empty a { color: var(--rose); border-bottom: 1px solid currentColor; }

/* ---------- Post ---------- */

.reading-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 150; pointer-events: none;
}
.reading-progress span {
  display: block; height: 100%; width: 0; background: var(--rose);
  transition: width .1s linear;
}

.post-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.crumbs {
  display: flex; justify-content: center; gap: .5rem;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 1.4rem;
}
.crumbs a:hover { color: var(--rose); }
.post-head h1 { max-width: 20ch; margin-inline: auto; }
.post-meta {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem;
  font-size: .78rem; letter-spacing: .1em; color: var(--ink-faint);
  margin: 1.3rem 0 0;
}

.post-cover {
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
  max-width: 1000px; padding-inline: 24px;
}
.post-cover img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.post-cover--placeholder {
  height: clamp(200px, 32vw, 380px); max-width: 952px;
  border-radius: var(--radius); padding: 0;
}

/* ---------- Prose ---------- */

.prose { font-size: 1.08rem; line-height: 1.85; color: #2b241e; }
.prose > * + * { margin-top: 1.4em; }
.prose h2 {
  font-size: clamp(1.7rem, 3vw, 2.2rem); margin-top: 2.4em; margin-bottom: -.4em;
  padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.prose h3 { font-size: 1.4rem; margin-top: 2em; margin-bottom: -.5em; }
.prose a { color: var(--rose); border-bottom: 1px solid var(--rose-soft); transition: border-color .25s var(--ease); }
.prose a:hover { border-color: var(--rose); }
.prose strong { font-weight: 500; color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--rose); }
.prose img { border-radius: var(--radius); margin-block: 1.8em; }
.prose blockquote {
  margin-inline: 0; padding: .4em 0 .4em 1.6em;
  border-left: 2px solid var(--rose);
  font-family: var(--serif); font-size: 1.4rem; font-style: italic; line-height: 1.5;
  color: var(--ink);
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }
.prose code {
  font-size: .88em; background: var(--paper-2); padding: .15em .4em; border-radius: 3px;
}
.prose pre {
  background: var(--ink); color: #f0e9e2; padding: 1.2rem 1.4rem;
  border-radius: var(--radius); overflow-x: auto; font-size: .88rem; line-height: 1.6;
}
.prose pre code { background: none; padding: 0; color: inherit; }

.post-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 3rem; }
.tag {
  font-size: .72rem; letter-spacing: .1em; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.tag:hover { color: var(--rose); border-color: var(--rose); }

.author-box {
  display: flex; gap: 1.4rem; align-items: flex-start;
  margin-top: 3rem; padding: 1.8rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.author-box img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none; }
.author-name { font-family: var(--serif); font-size: 1.3rem; margin: 0 0 .3rem; }
.author-bio { color: var(--ink-soft); font-size: .95rem; margin-bottom: .9rem; }

/* ---------- About ---------- */

.about-hero {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.about-hero h1 em { font-style: italic; color: var(--rose); }
.about-portrait img { border-radius: 50%; box-shadow: var(--shadow); }

.fact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.2rem; margin: 3.5rem 0;
}
.fact {
  padding: 1.6rem 1.3rem; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.fact p { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.5; }
.fact-num {
  font-family: var(--serif) !important; font-size: 2.6rem !important; color: var(--rose) !important;
  line-height: 1; margin-bottom: .5rem !important;
}
.about-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Forms ---------- */

.contact-grid { display: grid; grid-template-columns: 1.4fr .6fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

.form { display: grid; gap: 1.3rem; }
.field { display: grid; gap: .45rem; }
.field label {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-soft);
}
.optional { text-transform: none; letter-spacing: .02em; color: var(--ink-faint); }
.field input, .field textarea {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .85rem 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px var(--rose-soft);
}
.field [aria-invalid="true"] { border-color: #b4423f; }
.field textarea { resize: vertical; line-height: 1.7; }
.error { color: #b4423f; font-size: .85rem; margin: 0; }
.form-hint { font-size: .8rem; color: var(--ink-faint); margin: 0; }
.form .btn { justify-self: start; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: 1.6rem 1.8rem; border-radius: var(--radius); border: 1px solid var(--line); background: var(--white); }
.notice h2 { font-size: 1.5rem; margin-bottom: .6rem; }
.notice p { margin: 0; color: var(--ink-soft); }
.notice--success { border-color: var(--rose-soft); background: linear-gradient(180deg, var(--rose-soft), var(--white) 70%); }
.notice--error { border-color: #e6bcba; background: #fdf2f1; margin-bottom: 1.5rem; }
.notice--error p { color: #9b3a37; }

.contact-side { display: grid; gap: 1.2rem; }
.side-card { padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.side-card h2 { font-size: 1.25rem; margin-bottom: .6rem; }
.side-card p { font-size: .92rem; color: var(--ink-soft); margin: 0; }
.side-card--muted { background: var(--paper-2); }
.side-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.side-links a {
  display: flex; align-items: center; gap: .6rem;
  font-size: .92rem; color: var(--ink-soft);
  transition: color .25s var(--ease);
}
.side-links a:hover { color: var(--rose); }

/* ---------- Newsletter ---------- */

.newsletter { background: var(--ink); color: var(--paper); padding: clamp(3rem, 7vw, 5rem) 0; }
.newsletter-inner {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.newsletter .eyebrow { color: var(--rose-soft); }
.newsletter h2 { color: var(--paper); }
.newsletter .lede { color: rgba(251, 248, 245, .65); margin-top: 1rem; margin-bottom: 0; }
.newsletter-form { display: grid; gap: .8rem; }
.newsletter-form input {
  width: 100%;
  font-family: var(--sans); font-size: 1rem; font-weight: 300; color: var(--paper);
  background: rgba(251, 248, 245, .07);
  border: 1px solid rgba(251, 248, 245, .18); border-radius: 999px;
  padding: .9rem 1.4rem;
  transition: border-color .25s var(--ease);
}
.newsletter-form input::placeholder { color: rgba(251, 248, 245, .4); }
.newsletter-form input:focus { outline: none; border-color: var(--rose-soft); }
.newsletter-form .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); justify-self: start; }
.newsletter-form .btn:hover { background: var(--rose); border-color: var(--rose); color: var(--paper); }
.newsletter-form .form-hint { color: rgba(251, 248, 245, .4); }

/* ---------- Footer ----------
   Copied from the original: 5% vertical padding, then a 690px block pushed
   down 48px holding the mark (max 200px) and the tagline. See the note at
   the top of the copied section.
   ------------------------------------------------------------------ */

.site-footer { background: #fff; padding: 5% 0; }

/* flow-root, because below 1025px the footer's top padding drops to 0 and
   .footer-inner's 48px top margin would otherwise collapse out through it.
   (The original gets this for free — its container is a flex box.) */
.footer-container { max-width: 1600px; margin-inline: auto; display: flow-root; }

.footer-inner { max-width: 690px; margin: 48px auto 0; }

.footer-mark {
  display: block;
  width: 200px; max-width: 200px; height: auto;
  margin-inline: auto;
}

.footer-tagline {
  margin: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.563em;
  text-transform: uppercase;
  text-align: center;
  color: #ccc;
}

@media (max-width: 1024px) {
  .site-footer { padding: 0 32px 50px; }
  .footer-tagline { font-size: 14px; }
}

@media (max-width: 767px) {
  .site-footer { padding: 0 16px 40px; }
}

/* ---------- Brand page ----------
   A collapsible filter panel beside the results. The panel is <details>
   groups, so it opens and closes without JavaScript; only the filtering
   itself is scripted.
   ------------------------------------------------------------------ */

.brand-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.filter-panel {
  position: sticky;
  top: 92px;                      /* clears the sticky header */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.filter-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.filter-title {
  margin: 0;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink);
}
.filter-clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rose);
}
.filter-clear:hover { text-decoration: underline; }

.filter-group { border-bottom: 1px solid var(--line); }
.filter-group:last-child { border-bottom: 0; }

.filter-group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem 1.15rem;
  font-family: var(--sans);
  font-size: .95rem;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.filter-group > summary::-webkit-details-marker { display: none; }

/* The chevron, rotated when the group is open. */
.filter-group > summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-faint);
  border-bottom: 1.5px solid var(--ink-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .25s var(--ease);
}
.filter-group[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.filter-group > summary:hover { background: var(--paper-2); }

.filter-options { list-style: none; margin: 0; padding: 0 1.15rem 1rem; }

.filter-option {
  display: flex; align-items: center; gap: .6rem;
  padding: .4rem 0;
  font-size: .92rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.filter-option input { accent-color: var(--plum); width: 15px; height: 15px; flex: none; cursor: pointer; }
.filter-option:hover .filter-label { color: var(--ink); }
.filter-label { flex: 1; }
.filter-count { font-size: .72rem; color: var(--ink-faint); }

.brand-section { margin-bottom: clamp(2rem, 5vw, 3rem); }
.brand-section[hidden] { display: none; }

.product-heading {
  margin: 0 0 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 500;
}

/* Three across beside the filter panel, then two, then one. */
.product-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
@media (max-width: 1080px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .product-grid { grid-template-columns: minmax(0, 1fr); } }

.product {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.product:hover { transform: translateY(-4px); border-color: var(--rose-soft); box-shadow: var(--shadow); }
.product[hidden] { display: none; }

/* Fixed square well for every bottle. The image is taken out of flow so a
   portrait shot (some are 1024x1324, others 1024x1024) cannot stretch its
   card taller than the rest of the row. */
.product-media {
  display: block; position: relative;
  aspect-ratio: 1 / 1;
  /* White, because the shop's shots already come on white — a tinted well
     would just draw a frame around them. The placeholder for a product with
     no picture paints over this anyway. */
  background: var(--white);
  overflow: hidden;
}
.product-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* Barely any inset — just enough that the bottle reads as sitting inside
     the card rather than butting against its edge. */
  padding: 1%;
  /* Measured per picture: scale the bottle to a common size, then nudge its
     centre onto the card's centre. See 'image_fit' in content/site.php. */
  transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(var(--zoom, 1));
}
.product-placeholder { position: absolute; inset: 0; display: block; }

.product-body { display: flex; flex-direction: column; gap: .6rem; padding: 1rem 1.1rem 1.2rem; }

.product-name {
  font-family: var(--serif);
  font-size: 1.1rem; line-height: 1.3;
  color: var(--ink);
  /* Hold two lines whatever the name's length, so cards line up across rows
     and not just within one. */
  min-height: 2.6em;
}
a.product-name:hover { color: var(--plum); }

.product-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.product-status,
.product-meta {
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 500;
  padding: .26rem .66rem; border-radius: 999px;
  white-space: nowrap;
}
.status--owned    { color: var(--ink);  background: var(--paper-3); }
.status--wishlist { color: var(--rose); background: var(--rose-soft); }
.product-meta     { color: var(--ink-faint); border: 1px solid var(--line); }

.product .brand-note { margin: 0; font-size: .9rem; }

@media (max-width: 860px) {
  .brand-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel { position: static; }
}

/* ---------- See more ----------
   The card carries a link, not the prices themselves — those live on the
   product's own page.
   ------------------------------------------------------------------ */

.see-more {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .55rem;
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.see-more:hover { color: var(--plum); border-bottom-color: var(--plum); }
.see-more-count {
  display: inline-grid; place-items: center;
  min-width: 1.1rem; height: 1.1rem; padding: 0 .25rem;
  border-radius: 999px;
  background: var(--paper-3);
  font-size: .58rem; font-weight: 600;
  color: var(--ink-soft);
}
.see-more:hover .see-more-count { background: rgba(74, 45, 107, .16); color: var(--plum); }

/* ---------- Product detail ---------- */

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 800px) { .detail-layout { grid-template-columns: minmax(0, 1fr); } }

.detail-media {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.detail-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 5%;
  transform: translate(var(--fx, 0%), var(--fy, 0%)) scale(var(--zoom, 1));
}

.detail-heading {
  margin: 0 0 1rem;
  font-family: var(--sans);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
}

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

.shop {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .4rem 1rem;
  padding: .9rem 1rem;
  margin-inline: -1rem;
  border-radius: var(--radius);
  border-bottom: 1px solid var(--line);
}
.shop:last-of-type { border-bottom: 0; }

.shop-main { display: flex; align-items: baseline; gap: 1rem; flex: 1; justify-content: space-between; }
.shop-name { font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
a.shop-name { border-bottom: 1px solid var(--line); }
a.shop-name:hover { color: var(--plum); border-bottom-color: var(--plum); }
.shop-price { font-size: 1.15rem; font-weight: 600; color: var(--ink); white-space: nowrap; }

.shop-meta { display: flex; align-items: center; gap: .6rem; flex-basis: 100%; }
.shop-flag {
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
  color: #2c6640; background: rgba(76, 145, 90, .16);
  padding: .2rem .55rem; border-radius: 999px;
}
.shop-checked { font-size: .72rem; color: var(--ink-faint); }

.shop.is-cheapest { background: rgba(76, 145, 90, .08); }
.shop.is-cheapest .shop-price { color: #2c6640; }

.shop-note {
  margin: 1.2rem 0 0;
  font-size: .8rem; line-height: 1.6;
  color: var(--ink-faint);
}

.detail-back { margin: 2rem 0 0; }

/* ---------- Mark as purchased ----------
   Three states on one row, keyed off data-bought-state:
     idle        the tick, "I have bought this"
     confirming  "I have bought this. Confirm:" with Yes / No
     done        a centred statement filled with the purple gradient
   Only one is ever shown. Nothing has an undo button on it — right-click
   clears instead.
   ------------------------------------------------------------------ */

.bought-hint {
  margin: 0 0 1.5rem;
  font-size: .85rem;
  color: var(--ink-faint);
}

.bought {
  display: block;
  margin-top: .45rem;
}

.bought > * { display: none; }
.bought[data-bought-state="idle"]       > .bought-toggle  { display: flex; }
.bought[data-bought-state="confirming"] > .bought-confirm { display: flex; }
.bought[data-bought-state="done"]       > .bought-done    { display: flex; }

/* --- the tick --- */
/* Both options, stacked, so either can be picked on a card you have not
   decided on yet. */
.bought-toggle { flex-direction: column; align-items: center; gap: .12rem; }

.bought-option {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; letter-spacing: .03em;
  color: inherit;
  opacity: .75;
  cursor: pointer;
  transition: opacity .2s var(--ease);
}
.bought-option:hover { opacity: 1; }
.bought-option input {
  accent-color: currentColor;
  width: 15px; height: 15px; flex: none; cursor: pointer;
}
.bought-option input:checked ~ span { font-weight: 500; opacity: 1; }
.bought-option:has(input:checked) { opacity: 1; }

/* --- the question --- */
.bought-confirm {
  flex-direction: column; align-items: center; gap: .45rem;
  text-align: center;
}
.bought-confirm-q { font-size: .78rem; color: var(--ink-soft); }
.bought-confirm-actions { display: flex; gap: .4rem; }
.bought-confirm-actions button {
  font-family: var(--sans);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  padding: .32rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.bought-confirm-actions [data-confirm="yes"] {
  background: var(--plum); color: var(--white); border: 1px solid var(--plum);
}
.bought-confirm-actions [data-confirm="yes"]:hover { background: var(--plum-lift); border-color: var(--plum-lift); }
.bought-confirm-actions [data-confirm="no"] {
  background: none; color: var(--ink-soft); border: 1px solid var(--line);
}
.bought-confirm-actions [data-confirm="no"]:hover { border-color: var(--ink-faint); color: var(--ink); }

/* --- the statement --- */
.bought-done {
  flex-direction: column; align-items: center; gap: .25rem;
  padding: .2rem 0;
  text-align: center;
}
.bought-done-text {
  font-size: .82rem; font-weight: 500; letter-spacing: .03em;
  color: inherit;
}

/* ---------- Decision colour ----------
   The wash covers both rows together rather than each pill, and says how far
   along the bottle is:
     pending   bought, but the re-purchase question is unanswered  -> yellow
     complete  bought and answered                                 -> purple
   A bottle you have not bought yet carries no wash at all.
   ------------------------------------------------------------------ */

.decision {
  display: block;
  border-radius: 4px;
  margin-top: .55rem;
  padding: .45rem .55rem .5rem;
  margin-inline: -.55rem;
  transition: background-image .3s var(--ease), color .3s var(--ease);
}

.product[data-decision="new"] .decision {
  background-image: linear-gradient(100deg,
                    rgba(76, 145, 90, .30) 0%,
                    rgba(123, 180, 134, .18) 55%,
                    rgba(168, 208, 176, .06) 100%);
  color: #35704a;
}

.product[data-decision="pending"] .decision {
  background-image: linear-gradient(100deg,
                    rgba(240, 196, 48, .42) 0%,
                    rgba(248, 220, 120, .26) 55%,
                    rgba(250, 232, 165, .10) 100%);
  /* A saturated gold — clearly yellow rather than brown, and still legible
     against the pale wash behind it. */
  color: #c9960c;
}
.product[data-decision="complete"] .decision {
  background-image: linear-gradient(100deg,
                    rgba(74, 45, 107, .28) 0%,
                    rgba(123, 79, 168, .16) 55%,
                    rgba(123, 79, 168, .05) 100%);
  color: var(--plum);
}

.product[data-decision="new"]      { border-color: rgba(76, 145, 90, .35); }
.product[data-decision="pending"]  { border-color: rgba(200, 160, 40, .40); }
.product[data-decision="complete"] { border-color: rgba(74, 45, 107, .35); }

/* --- re-purchase: its own row under the status, on every card --- */
.repurchase {
  display: block;
  /* No divider between the two rows — the wash already ties them together. */
  margin-top: .15rem;
  text-align: center;
}
.repurchase > * { display: none; }
.repurchase[data-repurchase-state="idle"]   > .repurchase-start   { display: inline-block; }
.repurchase[data-repurchase-state="asking"] > .repurchase-confirm { display: flex; }
.repurchase[data-repurchase-state="answered"] > .repurchase-done  { display: inline-flex; }

.repurchase-start {
  border: 0; background: none; padding: 0;
  font-family: var(--sans);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  /* Neutral until something has actually been decided — gold and purple are
     reserved for saying how far along a bottle is. */
  color: var(--ink-faint);
  cursor: pointer;
}
.repurchase-start:hover { color: var(--plum); text-decoration: underline; }

/* Inside a washed card the whole block takes the card's colour, so a pending
   one is gold throughout rather than gold with a purple link in it. */
.product[data-decision] .repurchase-start,
.product[data-decision] .repurchase-start:hover,
.product[data-decision] .repurchase-q,
.product[data-decision] .bought-confirm-q { color: inherit; }

.repurchase-confirm {
  flex-direction: column; align-items: center; gap: .35rem;
  text-align: center;
}
.repurchase-q { font-size: .72rem; color: var(--ink-soft); }
.repurchase-actions { display: flex; gap: .35rem; }
.repurchase-actions button {
  font-family: var(--sans);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .26rem .75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.repurchase-actions [data-repurchase="yes"] {
  background: var(--plum); color: var(--white); border: 1px solid var(--plum);
}
.repurchase-actions [data-repurchase="yes"]:hover { background: var(--plum-lift); border-color: var(--plum-lift); }
.repurchase-actions [data-repurchase="no"] {
  background: none; color: var(--ink-soft); border: 1px solid var(--line);
}
.repurchase-actions [data-repurchase="no"]:hover { border-color: var(--ink-faint); color: var(--ink); }

/* The answered pill: the label plus whichever answer was picked. Clicking it
   reopens the question. Answered ones carry a yellow wash so you can see at
   a glance which bottles you have already made your mind up about. */
.repurchase-done {
  align-items: center; justify-content: center; gap: .35rem;
  border: 0; padding: .3rem .7rem;
  margin-inline: -.2rem;
  border-radius: 4px;
  font-family: var(--sans);
  font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  background: none;
}
/* The whole phrase takes the answer's colour, label included, rather than a
   grey label with a coloured word after it. */
.repurchase-done-label,
.repurchase-dash,
.repurchase-answer { color: inherit; }
.repurchase-dash { opacity: .55; }
.repurchase-answer { font-weight: 600; }

/* The pill takes the card's colour; the answer word carries the meaning. */
.repurchase-done { color: inherit; }

.repurchase-done:hover { text-decoration: underline; text-underline-offset: 3px; }

.product[data-status="owned"] { border-color: rgba(74, 45, 107, .35); }

/* ---------- Sort bar ---------- */

.results-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.results-head .product-heading { margin: 0; }

.sort-bar { display: flex; align-items: center; gap: .55rem; }
.sort-label {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.sort-bar select {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .45rem 1.8rem .45rem .9rem;
  cursor: pointer;
  /* Room for the chevron drawn behind the text. */
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: right 1rem center, right .72rem center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.sort-bar select:focus-visible { border-color: var(--plum); outline: none; }

/* ---------- Heart rating ----------
   Five radios rendered 5..1 and flipped with row-reverse, so a checked heart
   can fill every heart before it in the DOM — which is every heart to its
   left on screen. Hover previews the same way. Each heart carries its own
   pink in --heart (set per label in the template), palest on the left and
   deepest on the right, so a full five reads as a ramp rather than a block.
   ------------------------------------------------------------------ */

.rating {
  display: flex; flex-direction: row-reverse; justify-content: center;
  align-items: center; gap: .22rem;
  margin-top: .65rem;
}

.rating label {
  font-size: 1.4rem;
  line-height: 1;
  /* A soft blush for an unfilled heart rather than flat grey, so the row
     still reads as a set of hearts before anything is picked. */
  color: #ecdfe3;
  cursor: pointer;
  padding: .08rem;
  transition: color .18s var(--ease), transform .18s var(--ease), filter .18s var(--ease);
}
.rating label:hover { transform: scale(1.22) translateY(-1px); }

/* The checked heart and everything before it, plus the same on hover. Each
   one paints its own --heart, so the row graduates. */
.rating input:checked ~ label,
.rating label:hover ~ label,
.rating label:hover {
  color: var(--heart);
  /* Just enough lift to make a filled heart glow rather than sit flat. */
  filter: drop-shadow(0 1px 1.5px rgba(232, 10, 74, .28));
}

.rating input:focus-visible + label { outline: 2px solid var(--plum); outline-offset: 2px; border-radius: 2px; }

/* ---------- Back to top ---------- */

.to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(16px, 3vw, 32px);
  z-index: 70;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 0; border-radius: 50%;
  background: #101010;
  color: #f8f8f8;
  cursor: pointer;
  /* Out of the way until there is something to scroll back up from. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-2px); }
.to-top .icon { transform: rotate(-90deg); }   /* the shared arrow points right */

/* ---------- Subsection card ---------- */

.subsections { display: grid; gap: 1rem; }

.subsection {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--paper-2);
  border-radius: var(--radius);
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.subsection:hover { background: var(--paper-3); transform: translateY(-2px); }
.subsection-body { display: block; }
.subsection .eyebrow { display: block; }
.subsection-title {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.15;
  color: var(--ink);
}
.subsection-note { display: block; margin-top: .4rem; color: var(--ink-soft); }
.subsection-arrow {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--ink);
}

/* ---------- Brands ----------
   A search box over an A–Z directory with a sticky letter rail down the
   right. The rail is hidden on phones, where it would be thinner than a
   fingertip — search carries the page at that size.
   ------------------------------------------------------------------ */

.page-head--brands { padding-bottom: 0; }

.brand-search {
  position: relative;
  max-width: 520px;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.brand-search-icon {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center;
  color: var(--ink-faint);
  pointer-events: none;
}
.brand-search input {
  width: 100%;
  padding: .95rem 1.2rem .95rem 3.3rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.brand-search input::placeholder { color: var(--ink-faint); }
.brand-search input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--line);
}
.brand-search input::-webkit-search-cancel-button { cursor: pointer; }

/* The rail sits beside the list, not over it, so long brand names never run
   underneath it. */
.brand-index {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2rem;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: start;
}

.brand-group { padding-bottom: 1.5rem; }
/* Clears the sticky header when the rail jumps to a group. */
.brand-group { scroll-margin-top: 92px; }
.brand-group[hidden] { display: none; }

.brand-letter {
  margin: 0 0 .6rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .18em;
  color: var(--ink);
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

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

.brand { padding: .55rem 0; }
.brand[hidden] { display: none; }

.brand-name {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  line-height: 1.3;
  color: var(--ink);
}
a.brand-name { border-bottom: 1px solid var(--line); transition: color .2s var(--ease), border-color .2s var(--ease); }
a.brand-name:hover { color: var(--rose); border-bottom-color: var(--rose); }

/* A brand with a page of its own gets a dark purple hover, so the ones you
   can actually open read differently from the rest of the list. The highlight
   is a gradient wiped in from the left rather than a flat block — animating
   background-size keeps it on the compositor and needs no extra element. */
a.brand-name--page {
  padding-inline: .24em;
  margin-inline: -.24em;
  border-radius: 3px;
  background-image: linear-gradient(100deg,
                    rgba(74, 45, 107, .22) 0%,
                    rgba(123, 79, 168, .13) 55%,
                    rgba(123, 79, 168, .04) 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size .3s var(--ease),
              color .2s var(--ease),
              border-color .2s var(--ease);
}
a.brand-name--page:hover,
a.brand-name--page:focus-visible {
  background-size: 100% 100%;
  color: var(--plum);
  border-bottom-color: var(--plum-lift);
}

@media (prefers-reduced-motion: reduce) {
  a.brand-name--page { transition: none; }
}

.brand-note { margin: .2rem 0 0; font-size: .95rem; color: var(--ink-soft); }

.brand-rail {
  position: sticky;
  top: 92px;                      /* under the sticky header */
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  font-size: .78rem; font-weight: 500; letter-spacing: .04em;
  user-select: none;
}
.brand-rail-letter {
  display: grid; place-items: center;
  width: 1.6rem; min-height: 1.15rem;
  color: var(--ink-faint);
  border-radius: 4px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
a.brand-rail-letter:hover { color: var(--white); background: var(--ink); }
.brand-rail-letter.is-empty { color: var(--line); cursor: default; }
/* Dimmed while a search is filtering that letter out. */
.brand-rail-letter.is-dim { color: var(--line); }

@media (max-width: 620px) {
  .brand-index { grid-template-columns: minmax(0, 1fr); }
  .brand-rail { display: none; }
}

/* ---------- Reveal on scroll ---------- */

/* Hidden only when JS is present to reveal it again — see the inline
   classList line in layout.php. Without JS everything renders normally. */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .featured { grid-template-columns: 1fr; }
  .about-hero { grid-template-columns: 1fr; text-align: center; }
  .about-portrait { width: min(62%, 280px); margin-inline: auto; }
  .about-cta { justify-content: center; }
  .contact-grid { grid-template-columns: 1fr; }
  .newsletter-inner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .shell { padding-inline: 20px; }
  .grid { grid-template-columns: 1fr; }
  .author-box { flex-direction: column; text-align: center; align-items: center; }
  .prose { font-size: 1.02rem; }
}

/* ---------------------------------------------------------------------------
   Price history: a shop picker, a date range, and one chart per shop.

   The SVG is stretched (preserveAspectRatio: none) so the plot always fills
   the card, which means text inside it would stretch too. The axis labels are
   therefore ordinary HTML, positioned over the plot with the same padding the
   SVG uses — passed down as --pad-* on .chart-plot.
   --------------------------------------------------------------------------- */

.price-section { border-top: 1px solid var(--line); }

.price-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.price-head .detail-heading { margin: 0; }

/* The three fields sit together on a soft rose card, so they read as one
   control rather than three loose browser widgets. */
.price-filters {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  border-radius: 999px;
  background: linear-gradient(180deg, #fdf6f7 0%, #faeef0 100%);
  border: 1px solid var(--rose-soft);
}
.price-filter { display: flex; flex-direction: column; gap: .45rem; }

.price-filter-label {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rose);
  padding-left: .15rem;
}

.price-filter select,
.price-filter input[type="date"] {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rose-soft);
  border-radius: 999px;
  padding: .6rem 1rem;
  min-height: 2.65rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.price-filter input[type="date"] { font-variant-numeric: tabular-nums; }
.price-filter select {
  padding-right: 2.4rem;
  min-width: 11.5rem;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23a8545f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.price-filter select:hover,
.price-filter input[type="date"]:hover { border-color: var(--rose); }
.price-filter select:focus-visible,
.price-filter input[type="date"]:focus-visible {
  outline: none;
  border-color: var(--rose);
  box-shadow: 0 0 0 3px rgba(168, 84, 95, .15);
}

/* Only needed when the script has not run to make the fields self-submitting. */
.js .price-go { display: none; }

.price-charts { display: grid; gap: 1.75rem; }
@media (min-width: 900px) {
  .price-charts.is-many { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.price-chart {
  margin: 0;
  padding: 1.25rem 1.35rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.chart-title { font-family: var(--serif); font-size: 1.3rem; margin: 0; }
.chart-now   { margin: 0; display: flex; align-items: baseline; gap: .65rem; }
.chart-price { font-family: var(--sans); font-size: 1.2rem; font-weight: 600; color: var(--ink); }
.chart-delta { font-family: var(--sans); font-size: .76rem; font-weight: 500; }
.chart-delta.is-down { color: #2c6640; }
.chart-delta.is-up   { color: #a8454a; }
.chart-delta.is-flat { color: var(--ink-faint); }

/* --- the plot ------------------------------------------------------------ */

.chart-plot { position: relative; }
.chart-plot svg {
  display: block;
  width: 100%;
  height: 250px;
  touch-action: pan-y;
}
@media (max-width: 600px) { .chart-plot svg { height: 210px; } }

.price-chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.price-chart .area { stroke: none; }
.price-chart .line {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.price-chart .dot { stroke: var(--white); stroke-width: 1.5; vector-effect: non-scaling-stroke; }

.price-chart .hover-rule {
  stroke: var(--ink);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: .35;
  vector-effect: non-scaling-stroke;
}
.price-chart .hover-dot {
  fill: var(--white);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

/* --- axis labels, as HTML so they are never stretched -------------------- */

.chart-axis-y,
.chart-axis-x {
  position: absolute;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 500;
  color: var(--ink-soft);
  pointer-events: none;
}

.chart-axis-y {
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--pad-l);
}
.chart-axis-y span {
  position: absolute;
  right: .6rem;
  transform: translateY(50%);
  white-space: nowrap;
}

.chart-axis-x {
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--pad-b);
}
.chart-axis-x span {
  position: absolute;
  top: .35rem;
  transform: translateX(-50%);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.chart-axis-x span.is-month { font-weight: 600; color: var(--ink); }

/* --- the readout that follows the pointer -------------------------------- */

.chart-tip {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -125%);
  padding: .5rem .7rem;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px -12px rgba(23, 19, 15, .4);
  pointer-events: none;
  white-space: nowrap;
  text-align: center;
  font-family: var(--sans);
}
.chart-tip strong { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
.chart-tip span   { display: block; font-size: .72rem; color: var(--ink-soft); margin-top: .1rem; }

.chart-foot {
  margin: .9rem 0 0;
  font-family: var(--sans);
  font-size: .74rem;
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .price-head { align-items: stretch; }
  .price-filters { width: 100%; }
  .price-filter { flex: 1 1 8rem; }
  .price-filter select, .price-filter input[type="date"] { min-width: 0; width: 100%; }
}

/* Softer, warmer card for each chart — a rose hairline, a cream wash behind
   the plot, and a little lift, so a chart reads as something rather than a
   rectangle of white. */
.price-chart {
  background:
    radial-gradient(120% 90% at 50% 0%, #fffdfc 0%, #fdf8f6 55%, #fbf3f2 100%);
  border-color: var(--rose-soft);
  box-shadow: 0 14px 36px -26px rgba(168, 84, 95, .5);
}
.price-chart .chart-head { padding-bottom: .9rem; border-bottom: 1px solid var(--rose-soft); }
.chart-price { letter-spacing: -.01em; }

/* The plot sits on its own panel inside the card. */
.chart-plot {
  margin-top: 1rem;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--rose-soft);
  overflow: hidden;
}

/* A shop with only its first reading in the window. */
.chart-new {
  margin-top: 1rem;
  padding: 2.25rem 1.5rem;
  border-radius: 10px;
  border: 1px dashed var(--rose-soft);
  background: linear-gradient(180deg, #fffdfd 0%, #fdf2f4 100%);
  text-align: center;
}
.chart-new-price {
  margin: 0;
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--ink);
}
.chart-new-date {
  margin: .3rem 0 0;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--rose);
}
.chart-new-note {
  margin: 1rem auto 0;
  max-width: 24rem;
  font-family: var(--sans);
  font-size: .78rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* The shop's name, set as a soft rose-to-plum gradient. When one shop has
   been picked out of the drop-down its card is lifted further: a warmer
   ground, a heavier hairline, and a gradient rule under the heading. */
.chart-title span {
  background: linear-gradient(100deg, var(--rose) 0%, #c76b86 45%, var(--plum-lift) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) {
  .chart-title span { color: var(--rose); }
}

.price-chart.is-featured {
  border-color: #eac4cc;
  background:
    radial-gradient(130% 100% at 50% 0%, #fffdfd 0%, #fdf4f6 45%, #f9eaee 100%);
  box-shadow: 0 18px 44px -24px rgba(168, 84, 95, .45);
}
.price-chart.is-featured .chart-head {
  border-bottom: 0;
  position: relative;
  padding-bottom: 1rem;
}
.price-chart.is-featured .chart-head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--rose) 0%, #e8a9b8 40%, rgba(232, 169, 184, 0) 100%);
}
.price-chart.is-featured .chart-title { font-size: 1.45rem; }
.price-chart.is-featured .chart-price { font-size: 1.35rem; }

/* Price and change read as a little pill, so the number carries weight. */
.chart-now {
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--rose-soft);
}

/* SVG elements ignore the HTML hidden attribute unless it is given a rule,
   which left the pointer rule and dot parked in the top-left corner. */
.price-chart [hidden] { display: none !important; }

/* A serif at this size loses the gradient, so the shop's name is set in the
   sans, a touch wider, which holds the colour. */
.chart-title {
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.price-chart.is-featured .chart-title { font-size: 1.2rem; }

/* The readout has to be able to sit above the line, so the plot cannot clip
   its own children. The rounding moves onto the SVG itself. */
.chart-plot { overflow: visible; }
.chart-plot svg { border-radius: 10px; }

/* Readable at a glance: the price large and dark, the date under it in a
   smaller weight, both in the sans with room to breathe. */
.chart-tip {
  padding: .55rem .85rem;
  border-radius: 10px;
  border-color: var(--rose-soft);
  line-height: 1.25;
}
.chart-tip strong {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.chart-tip span {
  font-size: .73rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-top: .2rem;
}
/* Flipped under the point when the line runs near the top of the plot. */
.chart-tip.is-below { transform: translate(-50%, 25%); }

/* Quick ranges — 1 month, 3 months, a year, everything there is. */
.price-ranges {
  display: flex;
  gap: .35rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: .3rem;
  border-radius: 999px;
  background: #fdf4f6;
  border: 1px solid var(--rose-soft);
  width: fit-content;
}
.price-range {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: .45rem 1.05rem;
  border-radius: 999px;
  border-bottom: 0;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.price-range:hover { color: var(--rose); background: rgba(255, 255, 255, .7); }
.price-range.is-on {
  color: var(--white);
  background: linear-gradient(100deg, var(--rose) 0%, #c76b86 100%);
  box-shadow: 0 6px 14px -8px rgba(168, 84, 95, .8);
}

/* Highest, average, lowest across the window on show. */
.price-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .6rem;
  margin: 1rem 0 0;
}
.price-stat {
  margin: 0;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--rose-soft);
  text-align: center;
}
.price-stat dt {
  font-family: var(--sans);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.price-stat dd {
  margin: .3rem 0 0;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.price-stat.is-high dd { color: #a8454a; }
.price-stat.is-low  dd { color: #2c6640; }

@media (max-width: 480px) {
  .price-stats { grid-template-columns: 1fr; }
}

/* The four categories she keeps in place at the top of Category: her two
   names on the first row, the flat that belongs to each one underneath, then
   a line, then the rest alphabetically. Placed by hand in a grid of their
   own, whose columns match the grid below so the tiles stay one size. */
.topic-row--pinned .pin-1 { grid-column: 1; grid-row: 1; }
.topic-row--pinned .pin-2 { grid-column: 2; grid-row: 1; }
.topic-row--pinned .pin-3 { grid-column: 1; grid-row: 2; }
.topic-row--pinned .pin-4 { grid-column: 2; grid-row: 2; }
.topic-split { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }