/* ==========================================================================
   Yakbuck — roaster-label editorial.
   Espresso ground, crema type, one burnt-amber accent. Print-shop rules,
   stamped numerals, and a lot of air.
   ========================================================================== */

:root {
  --ground:     #14100d;
  --ground-lo:  #0c0908;
  --ground-hi:  #1e1815;
  --crema:      #f2e7d5;
  --crema-dim:  #bfae97;
  --muted:      #8a7a66;
  --amber:      #e07a2f;
  --amber-lo:   #a8551c;
  --rule:       #33291f;

  /* Latin face first, Devanagari face second: the browser falls through
     per-glyph, so English renders in Fraunces and Nepali in Tiro. */
  --display: "Fraunces", "Tiro Devanagari Hindi", Georgia, serif;
  --body:    "Newsreader", "Tiro Devanagari Hindi", Georgia, serif;
  --label:   "IBM Plex Mono", "Mukta", ui-monospace, monospace;

  --display-ne: "Tiro Devanagari Hindi", Georgia, serif;
  --ui-ne:      "Mukta", system-ui, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --counter-h: 104px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--crema);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Warm light falling from the upper left, like a window over a counter. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(70rem 50rem at 12% -10%, rgba(224,122,47,.13), transparent 60%),
    radial-gradient(50rem 40rem at 100% 8%, rgba(120,80,40,.10), transparent 62%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  /* Deliberately static. Animating a full-viewport fixed layer forces a repaint
     of the whole screen every frame, forever, for an effect nobody can see. */
}

/* Lift real content above the fixed light/grain layers. The counter is excluded:
   it sets its own `position: fixed`, and this selector outranks `.counter`. */
body > *:not(.grain):not(.counter) { position: relative; z-index: 2; }

::selection { background: var(--amber); color: var(--ground); }

/* Devanagari corrections live at the end of this file — see ---- Devanagari. */

a { color: inherit; }

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

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.6rem var(--gutter) 1.2rem;
  border-bottom: 1px solid var(--rule);
}

.mark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}
.mark__bean {
  width: 13px; height: 17px;
  border-radius: 50% 50% 48% 48% / 46% 46% 54% 54%;
  background: var(--amber);
  position: relative;
  transform: rotate(-18deg);
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
.mark__bean::after {
  content: "";
  position: absolute; inset: 0;
  border-left: 1.5px solid var(--ground);
  left: 50%;
  border-radius: 50%;
}
.mark:hover .mark__bean { transform: rotate(160deg); }
.mark__word {
  font-family: var(--display-ne);
  font-weight: 400;
  font-size: 1.35rem;
  line-height: 1.3;
}
.mark__roman {
  font-family: var(--label);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  align-self: center;
  padding-top: .15em;
}

.masthead__meta {
  margin: 0;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead__meta span { color: var(--amber-lo); }

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

.hero {
  padding: clamp(3rem, 9vw, 7rem) var(--gutter) clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4rem);
  align-items: end;
  border-bottom: 1px solid var(--rule);
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "SOFT" 60, "WONK" 1;
  /* Latin again: Fraunces takes the tight leading and negative tracking that
     Devanagari could not. The district headings below stay loose — they are
     still Nepali. */
  font-size: clamp(3.1rem, 12vw, 9.5rem);
  line-height: .86;
  letter-spacing: -.045em;
}
.hero__title em {
  font-style: italic;
  font-weight: 600;
  color: var(--amber);
  font-variation-settings: "SOFT" 100, "WONK" 1;
}

/* staggered reveal on load */
/* The clip box has to sit below the baseline or descenders get shaved off. */
.hero__title span {
  display: block;
  overflow: hidden;
  padding-bottom: .16em;
  margin-bottom: -.16em;
}
.hero__title span > i {
  display: block;
  font-style: inherit;
  animation: rise 1s cubic-bezier(.2,.8,.2,1) backwards;
}
.hero__title span:nth-child(1) > i { animation-delay: .05s }
.hero__title span:nth-child(2) > i { animation-delay: .16s }
.hero__title span:nth-child(3) > i { animation-delay: .27s }
@keyframes rise { from { transform: translateY(105%); opacity: 0 } to { transform: none; opacity: 1 } }

.hero__standfirst {
  margin: 0;
  max-width: 34ch;
  font-size: 1.02rem;
  color: var(--crema-dim);
  animation: fade .9s ease .5s backwards;
  padding-bottom: .6rem;
}
.hero__standfirst strong { color: var(--crema); font-weight: 500; }
@keyframes fade { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }

/* --- shelf --------------------------------------------------------------- */

.shelf {
  padding: clamp(2.5rem, 6vw, 4rem) var(--gutter) 6rem;
}

.shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.4rem;
}
.shelf__head h2 {
  margin: 0;
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--amber);
}
.shelf__head p {
  margin: 0;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .12em;
  color: var(--muted);
  text-transform: uppercase;
}

.bags {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

/* Each bag is a label: stamped index, roast bar, tasting ticket. */
.bag {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  border: 0;
  background: var(--ground);
  color: inherit;
  font: inherit;
  padding: 1.9rem 1.6rem 1.5rem;
  cursor: pointer;
  /* Column layout so every bag's footer rules line up across the grid,
     regardless of how many lines the tagline wraps to. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: background .45s ease, transform .45s cubic-bezier(.2,.9,.2,1);
  animation: fade .7s ease backwards;
}
.bag:nth-child(1){animation-delay:.05s} .bag:nth-child(2){animation-delay:.1s}
.bag:nth-child(3){animation-delay:.15s} .bag:nth-child(4){animation-delay:.2s}
.bag:nth-child(5){animation-delay:.25s} .bag:nth-child(6){animation-delay:.3s}

.bag::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.2,.9,.2,1);
}
.bag:hover, .bag:focus-visible { background: var(--ground-hi); outline: none; }
.bag:hover::after, .bag:focus-visible::after { transform: scaleX(1); }
.bag:focus-visible { box-shadow: inset 0 0 0 2px var(--amber); }

.bag__index {
  font-family: var(--label);
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .12em;
}

.bag__title {
  margin: .5rem 0 .3rem;
  font-family: var(--display);
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: 0;
}
.bag__roman {
  display: block;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: -.1rem 0 .45rem;
}
.bag:hover .bag__roman { color: var(--amber-lo); }
.bag:hover .bag__title { color: var(--amber); }

.bag__tagline {
  margin: 0 0 1.5rem;
  font-size: .94rem;
  color: var(--crema-dim);
  font-style: italic;
  max-width: 28ch;
}

/* roast meter — four squares, filled to the roast level */
.roast {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1rem;
}
.roast__pip {
  width: 15px; height: 6px;
  background: var(--rule);
  transition: background .3s ease;
}
.roast__pip--on { background: var(--amber); }
.roast__word {
  margin-left: .4rem;
  font-family: var(--ui-ne);
  font-size: .82rem;
  color: var(--muted);
}

.bag__notes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: 1.1rem;
}
.note {
  font-family: var(--ui-ne);
  font-size: .78rem;
  letter-spacing: 0;
  color: var(--crema-dim);
  border: 1px solid var(--rule);
  padding: .2rem .5rem;
}

.bag__foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
}
.bag__foot .unlinked { color: var(--amber-lo); }

/* --- roast detail -------------------------------------------------------- */

.roastpage { padding: 0 0 6rem; }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.8rem var(--gutter) 0;
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
  transition: color .3s ease;
}
.crumb:hover { color: var(--amber); }

.roastpage__head {
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.roastpage__title {
  margin: .6rem 0 .5rem;
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: "SOFT" 70, "WONK" 1;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  line-height: 1.2;
  letter-spacing: 0;
  animation: fade .8s ease backwards;
}
.roastpage__roman {
  display: block;
  font-family: var(--label);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: .3rem;
}
.roastpage__tagline {
  margin: 0 0 1.5rem;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--amber);
  max-width: 40ch;
}
.roastpage__notes {
  margin: 0;
  max-width: 54ch;
  color: var(--crema-dim);
  font-size: 1.04rem;
}
/* The liner notes stay in English, so the drop cap is safe here. It is scoped
   to that one element deliberately — a floated ::first-letter on Devanagari
   would cut a matra off the character it belongs to. */
.roastpage__notes::first-letter {
  font-family: var(--display);
  font-size: 3.1rem;
  font-weight: 500;
  float: left;
  line-height: .82;
  padding: .1rem .5rem .1rem 0;
  color: var(--amber);
}

.sleeve {
  position: relative;
  aspect-ratio: 1;
  background: var(--ground-hi);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.sleeve img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) contrast(1.05); }
.sleeve--empty {
  display: grid;
  place-items: center;
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 1rem;
}

.spec {
  margin: 1.1rem 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--label);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spec div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
}
.spec div b { font-weight: 500; color: var(--crema); }

/* --- tracklist ----------------------------------------------------------- */

.tracks { padding: clamp(2rem, 4vw, 3rem) var(--gutter) 0; }

.tracks__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--amber);
}
.tracks__head span { color: var(--muted); letter-spacing: .12em; }

.track {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: .72rem .6rem;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease, padding-left .25s ease;
}
.track:hover, .track:focus-visible {
  background: var(--ground-hi);
  padding-left: 1.1rem;
  outline: none;
}
.track__n {
  font-family: var(--label);
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.track:hover .track__n { color: var(--amber); }
.track__name { font-size: 1rem; line-height: 1.25; }
.track__artist { font-size: .82rem; color: var(--muted); }
.track__time {
  font-family: var(--label);
  font-size: .72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.track[aria-current="true"] { background: var(--ground-hi); }
.track[aria-current="true"] .track__name { color: var(--amber); }
.track[aria-current="true"] .track__n::before { content: "▶ "; }

/* --- states -------------------------------------------------------------- */

.notice {
  margin: 0 var(--gutter);
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--amber-lo);
  background: rgba(224,122,47,.06);
  max-width: 62ch;
}
.notice h3 {
  margin: 0 0 .5rem;
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber);
}
.notice p { margin: 0 0 .6rem; color: var(--crema-dim); font-size: .95rem; }
.notice p:last-child { margin-bottom: 0; }
.notice code {
  font-family: var(--label);
  font-size: .85em;
  background: var(--ground-lo);
  padding: .1rem .35rem;
  color: var(--crema);
}

.loading {
  padding: 5rem var(--gutter);
  font-family: var(--label);
  font-size: .7rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
.loading::after {
  content: "";
  animation: dots 1.4s steps(4) infinite;
}
@keyframes dots { 0%{content:""} 25%{content:"."} 50%{content:".."} 75%{content:"..."} }

/* --- colophon ------------------------------------------------------------ */

.colophon {
  padding: 2.5rem var(--gutter) calc(2.5rem + var(--counter-h));
  border-top: 1px solid var(--rule);
  font-family: var(--label);
  font-size: .66rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.colophon p { margin: 0 0 .5rem; }
.colophon__fine { text-transform: none; letter-spacing: .02em; max-width: 60ch; opacity: .75; }

/* --- the counter (player) ------------------------------------------------ */

.counter {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) 3rem;
  align-items: center;
  gap: 1rem;
  padding: .7rem var(--gutter);
  background: rgba(12,9,8,.92);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--amber-lo);
  animation: slideup .5s cubic-bezier(.2,.9,.2,1);
}
@keyframes slideup { from { transform: translateY(100%) } to { transform: none } }
.counter[hidden] { display: none; }

.counter__label {
  margin: 0;
  font-family: var(--ui-ne);
  font-size: .74rem;
  color: var(--amber);
}
.counter__title {
  margin: .15rem 0 0;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.counter__embed iframe { border-radius: 4px; display: block; }
.counter__close {
  justify-self: end;
  width: 2rem; height: 2rem;
  border: 1px solid var(--rule);
  background: none;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color .3s, border-color .3s;
}
.counter__close:hover { color: var(--amber); border-color: var(--amber); }

/* --- responsive ---------------------------------------------------------- */

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; align-items: start; }
  .roastpage__head { grid-template-columns: 1fr; }
  .sleeve { max-width: 16rem; }
  .counter { grid-template-columns: 1fr 3rem; }
  .counter__embed { grid-column: 1 / -1; order: 2; }
  :root { --counter-h: 160px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html { scroll-behavior: auto; }
}



/* --- source toggle -------------------------------------------------------
   Spotify and YouTube play the same shelf. Switching stops playback, since
   the two services' track ids are not interchangeable.
   ------------------------------------------------------------------------- */

.shelf__tools,
.roastpage__bar {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.roastpage__bar {
  justify-content: space-between;
  margin: 1.8rem var(--gutter) 0;
}
.roastpage__bar .crumb { margin: 0; }

.src {
  display: inline-flex;
  border: 1px solid var(--rule);
}
.src__opt {
  border: 0;
  background: none;
  color: var(--muted);
  font-family: var(--label);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .42rem .8rem;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.src__opt + .src__opt { border-left: 1px solid var(--rule); }
.src__opt:hover:not(:disabled) { color: var(--crema); }
.src__opt[aria-pressed="true"] {
  background: var(--amber);
  color: var(--ground);
}
.src__opt:disabled {
  opacity: .32;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* A YouTube upload whose owner disabled embedding cannot play in our player,
   so the row says so rather than failing silently on click. */
.track--blocked { cursor: not-allowed; }
.track--blocked .track__name { color: var(--muted); text-decoration: line-through; }
.track--blocked:hover { background: none; padding-left: .6rem; }

/* The YouTube embed is a video, so it keeps 16:9 inside the counter rail. */
.embed[hidden] { display: none; }
#embed-youtube iframe { display: block; border: 0; border-radius: 4px; }

/* ---- Devanagari ----------------------------------------------------------
   Nepali takes neither tracking nor casing: letter-spacing pulls the
   shirorekha apart and breaks conjuncts, and text-transform only corrupts the
   intent. Every Nepali-only element carries .ne.

   This block sits last on purpose. The Latin label rules above are all single
   class selectors, so an earlier .ne merely ties and loses on source order —
   and `.shelf__head h2` outranks it outright. letter-spacing and text-transform
   carry !important because they do not merely restyle Devanagari, they break
   it; nothing should ever override them.
   ------------------------------------------------------------------------- */

.ne,
.ne--display {
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.ne {
  font-family: var(--ui-ne);
  line-height: 1.5;
  /* Without tracking or caps, Nepali reads smaller than the Latin labels
     beside it at the same px size. Nudge it back to optical parity. */
  font-size: 1.15em;
}

.ne--display { font-family: var(--display-ne); }

/* These two carry a descendant selector, so they need the extra weight. */
.shelf__head h2.ne,
.tracks__head h2.ne { font-size: .84rem; }
.notice h3.ne { font-size: .84rem; }

/* These set their own absolute size, which the 1.15em bump would blow past. */
.note.ne { font-size: .82rem; }
.masthead__meta.ne { font-size: .8rem; }