/* ==========================================================================
   Class of Coffee — shared styles
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Nunito:wght@400;600;700&family=Caveat:wght@600;700&display=swap');

/* Playfair Display (the wordmark) is self-hosted so it never depends on a
   network request. The local file is tried first; the Google copy is only a
   backup if the local file is missing. `font-display: block` stops the browser
   painting the wordmark in a substitute face while the real one loads. */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: block;
  src: url('fonts/PlayfairDisplay-Italic.ttf') format('truetype'),
       url('https://fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_pqTbtY.ttf') format('truetype');
}

:root {
  --coffee-dark:   #5a2d0c;
  --coffee-rust:   #a2521a;
  --coffee-mid:    #c8823c;
  --coffee-tan:    #e6c496;
  --coffee-cream:  #f3e2bf;
  --gold:          #d9b978;
  --paper:         #faf7f2;
  --ink:           #4a3524;
  /* height of the wavy masthead — one place to change it, used by the
     header, the home page stage and the mobile overrides below */
  --band-h:        108px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  color: var(--ink);
  min-height: 100%;
}

a { text-decoration: none; }

/* --------------------------------------------------------------------------
   Header — stacked gradient bands with the script logo
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;         /* static masthead at the top of the page */
  background: transparent;    /* white/page shows through the top of the wave */
  overflow: visible;
  z-index: 5;
}

/* One wavy band: white above, shimmering brown gradient below, with a
   flowing wavy TOP edge. The wave is a repeating SVG mask that scrolls
   sideways; the gold keyline + soft depth are drop-shadows, so they
   trace (and flow with) the wavy silhouette automatically. */
.site-header .band {
  height: var(--band-h);
  background: linear-gradient(90deg,
      var(--coffee-cream) 0%,
      var(--coffee-tan)   28%,
      var(--coffee-mid)   55%,
      var(--coffee-rust)  78%,
      #7d3410            100%);
  background-size: 220% 100%;                 /* room for the shimmer to travel */

  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="108" viewBox="0 0 360 108" preserveAspectRatio="none"><path d="M0 32 Q90 14 180 32 Q270 50 360 32 V108 H0 Z" fill="%23000"/></svg>') repeat-x left top;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="108" viewBox="0 0 360 108" preserveAspectRatio="none"><path d="M0 32 Q90 14 180 32 Q270 50 360 32 V108 H0 Z" fill="%23000"/></svg>') repeat-x left top;
  -webkit-mask-size: 360px 100%;
          mask-size: 360px 100%;

  animation:
    headerShimmer 16s ease-in-out infinite,   /* gentle gradient shimmer */
    waveFlow      9s linear      infinite;      /* the wave itself drifts */

  filter:
    drop-shadow(0 -2px 0 var(--gold))                   /* gold keyline hugging the wavy top */
    drop-shadow(0 3px 5px rgba(90, 45, 12, 0.18));      /* soft depth below the band */
}

@keyframes headerShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes waveFlow {
  from { -webkit-mask-position: 0 top;      mask-position: 0 top; }
  to   { -webkit-mask-position: -360px top; mask-position: -360px top; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .band { animation: none; }
}

/* The wordmark is a VECTOR OUTLINE (logo-wordmark.svg), traced from Playfair
   Display Medium Italic. It is pure geometry — no font loading, no baselines,
   no descender metrics — so the f tails are simply part of the shape and
   render identically in every browser. */
/* The wordmark is true vector outlines of "Class of Coffee" in The Seasons,
   taken from the Canva SVG export and cropped tight to the ink. Inlined in
   each page, so it needs no request, scales perfectly, and takes its colour
   from `currentColor` — the swash f tails are geometry, not text. */
.site-header .logo {
  position: absolute;
  left: 44px;
  top: 71px;                        /* centred in the brown, below the wave */
  transform: translateY(-50%);
  transform-origin: left center;
  display: block;
  line-height: 0;
  color: var(--coffee-dark);
  transition: transform 0.25s ease, color 0.25s ease;
}
.site-header .logo .wordmark {
  display: block;
  /* Scales with the window; the height follows from the SVG's own
     proportions, so the wordmark can never be squashed or stretched. */
  width: clamp(150px, 17vw, 231px);
  height: auto;
  aspect-ratio: 5.77 / 1;
  /* Soft highlight beneath the strokes — the vector equivalent of the
     text-shadow the wordmark used to carry. */
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55));
  transition: filter 0.25s ease;
}
.site-header .logo:hover {
  transform: translateY(-50%) scale(1.04);
  color: #7d3410;
}
.site-header .logo:hover .wordmark {
  /* lifts off the band a little on hover */
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55))
          drop-shadow(0 3px 5px rgba(90, 45, 12, 0.30));
}
.site-header .logo:active .wordmark {
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.55))
          drop-shadow(0 1px 2px rgba(90, 45, 12, 0.35));
}

/* Top navigation (sits on the brown, right side of the masthead) */
.top-nav {
  position: absolute;
  right: 40px;
  top: 72px;
  transform: translateY(-50%);
  display: flex;
  gap: 22px;
  z-index: 3;
}
.top-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fbf3e4;
  text-shadow: 0 1px 2px rgba(90, 45, 12, 0.55);
  white-space: nowrap;
  transition: color 0.2s ease;
}
.top-nav a:hover,
.top-nav a.active { color: var(--gold); }

/* --------------------------------------------------------------------------
   Footer — a smaller, non-animated wavy band with the same nav
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  height: 140px;        /* tall enough that the wave clears the wordmark */
  margin-top: 70px;
  z-index: 3;
}
.site-footer .foot-band {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      var(--coffee-cream) 0%,
      var(--coffee-tan)   28%,
      var(--coffee-mid)   55%,
      var(--coffee-rust)  78%,
      #7d3410            100%);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="108" viewBox="0 0 360 108" preserveAspectRatio="none"><path d="M0 32 Q90 14 180 32 Q270 50 360 32 V108 H0 Z" fill="%23000"/></svg>') repeat-x left top;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="360" height="108" viewBox="0 0 360 108" preserveAspectRatio="none"><path d="M0 32 Q90 14 180 32 Q270 50 360 32 V108 H0 Z" fill="%23000"/></svg>') repeat-x left top;
  -webkit-mask-size: 280px 100%;
          mask-size: 280px 100%;
  filter: drop-shadow(0 -2px 0 var(--gold));   /* gold keyline hugging the wave */
}
.site-footer .foot-content {
  position: absolute;
  left: 0; right: 0;
  bottom: 18px;
  text-align: center;
  z-index: 2;
}
.foot-logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 8px;
  color: var(--coffee-dark);        /* same brown as the header wordmark */
  transition: transform 0.2s ease, color 0.2s ease;
}
.foot-logo .wordmark {
  display: block;
  height: 26px;
  width: 150px;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.45));
}
.foot-logo:hover { transform: scale(1.05); color: #7d3410; }
.foot-nav { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.foot-nav a {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #f3e2bf;
  transition: color 0.2s ease;
}
.foot-nav a:hover,
.foot-nav a.active { color: var(--gold); }

/* Tablet: pull the nav in a little as the wordmark shrinks */
@media (max-width: 900px) {
  .site-header .logo { left: 26px; }
  .top-nav { right: 22px; gap: 15px; }
  .top-nav a { font-size: 12px; letter-spacing: 0.2px; }
}

/* Phone: the wordmark and the nav can no longer share a line, so the band
   grows a little and they stack, both centred. Positions are kept inside the
   brown, clear of the wave (whose lowest point sits at ~46% of the band). */
@media (max-width: 640px) {
  :root { --band-h: 142px; }

  .site-header .logo {
    left: 50%;
    top: 96px;
    transform: translate(-50%, -50%);
    transform-origin: center;
  }
  .site-header .logo:hover { transform: translate(-50%, -50%) scale(1.04); }
  .site-header .logo .wordmark { width: min(58vw, 210px); }

  .top-nav {
    left: 0;
    right: 0;
    top: 126px;
    justify-content: center;
    gap: 6px 14px;
    flex-wrap: wrap;
    padding: 0 10px;
  }
  .top-nav a { font-size: 11px; letter-spacing: 0.3px; }
}

/* Very small phones: shrink once more so four nav links still fit on one row */
@media (max-width: 380px) {
  :root { --band-h: 136px; }
  .site-header .logo { top: 92px; }
  .site-header .logo .wordmark { width: min(62vw, 180px); }
  .top-nav { top: 120px; gap: 5px 10px; }
  .top-nav a { font-size: 10px; letter-spacing: 0; }
}

/* --------------------------------------------------------------------------
   Page titles (inner pages)
   -------------------------------------------------------------------------- */
.page-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--coffee-dark);
  text-align: center;
  margin: 42px 0 6px;
  text-transform: uppercase;
  font-size: clamp(28px, 4vw, 44px);
}
.page-title .subtitle {
  display: block;
  font-size: 0.62em;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Rising bubbles / coffee stream background (inner pages)
   -------------------------------------------------------------------------- */
.inner-bg {
  min-height: 100vh;
  background: linear-gradient(160deg, #ffffff 0%, #f6ede0 45%, #ecdcc6 100%);
  position: relative;
  overflow-x: hidden;
}

#bubble-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bubble {
  position: absolute;
  bottom: -80px;
  user-select: none;
  will-change: transform, opacity;
  animation-name: rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0;
}

@keyframes rise {
  0%   { transform: translateY(0) translateX(0) rotate(0deg);      opacity: 0; }
  10%  { opacity: var(--max-op, 0.5); }
  50%  { transform: translateY(-52vh) translateX(var(--drift, 20px)) rotate(180deg); }
  90%  { opacity: var(--max-op, 0.5); }
  100% { transform: translateY(-108vh) translateX(0) rotate(360deg); opacity: 0; }
}

/* Keep page content above the bubbles */
.page-content { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Placeholder cards (About / Blog)
   -------------------------------------------------------------------------- */
.placeholder {
  max-width: 640px;
  margin: 30px auto 80px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(162, 82, 26, 0.25);
  border-radius: 18px;
  padding: 40px 46px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(90, 45, 12, 0.10);
}
.placeholder .cup { font-size: 54px; display: block; margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   About Me card (photo + bio)
   -------------------------------------------------------------------------- */
.about-card {
  position: relative;
  max-width: 680px;
  margin: 30px auto 80px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(162, 82, 26, 0.25);
  border-radius: 18px;
  padding: 42px 48px 112px;     /* extra room so the message button sits well below the hashtags */
  text-align: center;
  box-shadow: 0 10px 30px rgba(90, 45, 12, 0.10);
}
.about-photo {
  margin: 0 auto 24px;
  width: 128px;
  height: 128px;
}
.about-photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--coffee-cream);
  border: 5px solid #fff;
  box-shadow:
    0 0 0 3px var(--gold),                 /* thin gold ring, like a cup rim */
    0 10px 24px rgba(90, 45, 12, 0.22);
}
.about-text p {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 auto 16px;
  max-width: 520px;
  text-align: left;
}
.about-text em { font-style: italic; font-weight: 700; color: var(--coffee-rust); }
.about-tags {
  text-align: center !important;
  margin-top: 22px !important;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.about-tags .tag {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: var(--coffee-dark);
  background: var(--coffee-cream);
  border: 1px solid rgba(162, 82, 26, 0.3);
  border-radius: 999px;
  padding: 7px 16px;
}

/* Handwritten "Send me a message!" button — pinned to the card's bottom-right */
.about-cta {
  position: absolute;
  right: 30px;
  bottom: 22px;
  margin: 0;
  text-align: right;
}
.msg-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Caveat', cursive;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  color: #fbf3e4;
  background: linear-gradient(135deg, var(--coffee-rust), #7d3410);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 12px 30px 14px;
  box-shadow: 0 8px 20px rgba(90, 45, 12, 0.22);
  transform: rotate(-1.5deg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.msg-button .pen { font-size: 24px; transform: rotate(1.5deg); }
.msg-button:hover {
  transform: rotate(-1.5deg) translateY(-3px) scale(1.04);
  box-shadow: 0 14px 28px rgba(90, 45, 12, 0.30);
  color: #fff;
}
@media (max-width: 560px) {
  .about-card { padding-bottom: 40px; }
  .about-cta {
    position: static;
    text-align: center;
    margin-top: 28px;
  }
}
.placeholder h2 {
  font-family: 'Montserrat', sans-serif;
  color: var(--coffee-rust);
  margin: 0 0 12px;
  font-weight: 700;
}
.placeholder p { font-size: 18px; line-height: 1.6; margin: 0 auto; max-width: 460px; }

/* --------------------------------------------------------------------------
   Resources page
   -------------------------------------------------------------------------- */
.resource-list {
  max-width: 760px;
  margin: 26px auto 90px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  padding: 0 24px;
}
.resource-link {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(162, 82, 26, 0.22);
  border-radius: 14px;
  padding: 16px 20px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--coffee-dark);
  box-shadow: 0 6px 16px rgba(90, 45, 12, 0.07);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.resource-link:hover {
  transform: translateY(-4px) scale(1.03);
  background: #fff;
  box-shadow: 0 12px 26px rgba(90, 45, 12, 0.16);
  color: var(--coffee-rust);
}
.resource-link .emoji { font-size: 26px; }

/* --------------------------------------------------------------------------
   Licence page
   -------------------------------------------------------------------------- */
.licence-card {
  max-width: 660px;
  margin: 26px auto 60px;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(162, 82, 26, 0.25);
  border-radius: 18px;
  padding: 34px 40px 38px;
  box-shadow: 0 10px 30px rgba(90, 45, 12, 0.10);
}
.licence-notice {
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
  margin: 0 0 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(162, 82, 26, 0.16);
}
.licence-notice strong { color: var(--coffee-dark); }

/* Official CC icons, sized to sit inline with the notice text */
.cc-icon {
  max-width: 1em;
  max-height: 1em;
  margin-left: 0.2em;
  vertical-align: baseline;
}

.licence-h {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coffee-rust);
  margin: 24px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(162, 82, 26, 0.22);
}
.licence-list { margin: 0; padding-left: 0; list-style: none; }
.licence-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  line-height: 1.6;
}
.licence-list li::before {
  position: absolute;
  left: 2px;
  top: 0;
  font-size: 16px;
}
.licence-list--yes li::before { content: "✔"; color: #1c7c3c; }
.licence-list--terms li::before { content: "☕"; }
.licence-note {
  font-size: 15px;
  line-height: 1.6;
  color: #7a5c3e;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(162, 82, 26, 0.14);
}

@media (max-width: 560px) {
  .licence-card { padding: 26px 20px 30px; }
  .licence-notice { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Resources page — tagline, collapsible sections, resource rows
   -------------------------------------------------------------------------- */
.page-tagline {
  text-align: center;
  font-size: 19px;
  font-style: italic;
  color: var(--coffee-rust);
  margin: 4px auto 6px;
  max-width: 640px;
  padding: 0 24px;
}
.page-hint {
  text-align: center;
  font-size: 15px;
  color: #8a6a48;
  margin: 0 auto 6px;
  padding: 0 24px;
}
.eye-demo { font-style: normal; }

.res-sections { max-width: 820px; margin: 10px auto 40px; padding: 0 24px; }

.res-section {
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(162, 82, 26, 0.24);
  border-radius: 14px;
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(90, 45, 12, 0.07);
  overflow: hidden;
  scroll-margin-top: 20px;
}
.res-section > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 16px 20px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--coffee-dark);
  list-style: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.res-section > summary::-webkit-details-marker { display: none; }
.res-section > summary:hover { background: rgba(243, 226, 191, 0.55); color: var(--coffee-rust); }
.res-section > summary .s-emoji { font-size: 24px; line-height: 1; }
.res-section > summary .s-title { flex: 1 1 auto; }
.res-section > summary .s-count {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--coffee-mid);
  border-radius: 999px;
  padding: 3px 10px;
  min-width: 26px;
  text-align: center;
}
.res-section > summary .s-count:empty { display: none; }
/* chevron */
.res-section > summary::after {
  content: "";
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--coffee-mid);
  border-bottom: 2.5px solid var(--coffee-mid);
  transform: rotate(45deg);
  transition: transform 0.25s ease;
  margin-left: 4px;
  flex: 0 0 auto;
}
.res-section[open] > summary::after { transform: rotate(-135deg); }
.res-section[open] > summary { background: rgba(243, 226, 191, 0.45); }

.res-intro {
  margin: 0;
  padding: 14px 22px 4px;
  font-style: italic;
  color: #7a5c3e;
  line-height: 1.55;
  border-top: 1px solid rgba(162, 82, 26, 0.14);
}
.res-intro--tight { border-top: none; padding-top: 6px; padding-bottom: 0; }
.res-subhead {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coffee-rust);
  margin: 14px 22px 2px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(162, 82, 26, 0.22);
}
.res-list { list-style: none; margin: 0; padding: 6px 22px 18px; }
.res-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  line-height: 1.55;
  border-bottom: 1px solid rgba(162, 82, 26, 0.10);
}
.res-item:last-child { border-bottom: none; }
.res-text { flex: 1 1 auto; }
.res-name { font-weight: 700; color: var(--coffee-dark); }
.res-item .accent { color: var(--coffee-rust); font-style: italic; }

/* The eye is the link — give it a comfortable tap target */
.eye {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 34px;
  min-height: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 17px;
  line-height: 1;
  color: var(--coffee-rust);
  background: rgba(243, 226, 191, 0.55);
  border: 1px solid rgba(162, 82, 26, 0.20);
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.eye:hover {
  transform: scale(1.18);
  background: #fff;
  box-shadow: 0 4px 10px rgba(90, 45, 12, 0.18);
}
.eye:active { transform: scale(1.05); }
.res-item .sep { color: rgba(162, 82, 26, 0.5); align-self: center; }
.eye-pending { flex: 0 0 auto; opacity: 0.35; font-size: 17px; padding: 2px 8px; cursor: help; }

/* --- viewed: the eye goes green and gains a tick ----------------------- */
.eye--viewed {
  background: #e4f0e2;
  border-color: rgba(28, 124, 60, 0.45);
  position: relative;
}
.eye--viewed span[aria-hidden] { filter: grayscale(0.35); opacity: 0.75; }
.eye--viewed::after {
  content: "✓";
  position: absolute;
  right: -3px;
  bottom: -4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: #1c7c3c;
  border-radius: 999px;
  padding: 2px 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.res-item.viewed .res-name { color: #6f5a45; }

/* count badge states */
.s-count--part { background: var(--coffee-tan) !important; color: var(--coffee-dark) !important; }
.s-count--done { background: #1c7c3c !important; color: #fff !important; }

/* --- progress bar ------------------------------------------------------ */
.progress-wrap { max-width: 820px; margin: 4px auto 18px; padding: 0 24px; }
.progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(162, 82, 26, 0.15);
  overflow: hidden;
}
.progress-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--coffee-tan), var(--coffee-mid), #1c7c3c);
  transition: width 0.45s cubic-bezier(.22,.9,.3,1);
}
.progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  font-size: 13px;
  color: #8a6a48;
}
.progress-reset {
  font-family: 'Nunito', sans-serif;
  font-size: 13px;
  color: var(--coffee-rust);
  background: none;
  border: none;
  border-bottom: 1px dashed rgba(162, 82, 26, 0.5);
  padding: 0 0 1px;
  cursor: pointer;
  /* visibility (not just opacity) so it also leaves the keyboard tab order
     while there is nothing to clear */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, color 0.2s ease;
}
.progress-bar.has-progress ~ .progress-meta .progress-reset {
  opacity: 1;
  visibility: visible;
}
.progress-reset:hover { color: #7d3410; }

/* --- floating contents ------------------------------------------------- */
.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;
}
.toc {
  position: fixed;
  top: 130px;
  left: 18px;
  z-index: 4;
  width: 196px;
  /* never taller than the room between the masthead and the bottom edge */
  max-height: calc(100vh - 150px);
  overflow: hidden;
  padding: 14px 12px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(162, 82, 26, 0.22);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(90, 45, 12, 0.10);
}

/* --- the list, and our own always-visible scrollbar beside it ----------- */
/* Column layout so the list can shrink to whatever room the panel has,
   rather than pushing the panel taller than the space available. */
.toc { display: flex; flex-direction: column; }
.toc-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;            /* so the list shrinks by flex rules, not by a  */
  flex-direction: column;   /* percentage height (which resolves to auto)   */
}
.toc-scroll {
  /* Deliberately shorter than the full list at every window size, so there is
     always something to scroll — and therefore always a thumb to see. */
  max-height: min(calc(100vh - 210px), 372px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 16px;           /* room for the rail */
  /* the native bar is hidden: ours is drawn below and never fades */
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior: contain;
}
.toc-scroll::-webkit-scrollbar { width: 0; height: 0; }

.toc-rail {
  position: absolute;
  top: 2px;
  bottom: 2px;
  right: 2px;
  width: 8px;
  border-radius: 999px;
  background: rgba(162, 82, 26, 0.18);
  box-shadow: inset 0 0 0 1px rgba(162, 82, 26, 0.10);
  cursor: pointer;
}
.toc-thumb {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-radius: 999px;
  background: var(--coffee-mid);
  cursor: grab;
  transition: background 0.18s ease;
}
.toc-rail:hover .toc-thumb,
.toc-rail.is-dragging .toc-thumb { background: var(--coffee-rust); }
.toc-rail.is-dragging .toc-thumb { cursor: grabbing; }

/* soft fade at the bottom, as a second cue that there is more below */
.toc-fade {
  position: absolute;
  left: 0;
  right: 12px;
  bottom: 0;
  height: 26px;
  pointer-events: none;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 253, 250, 0.95));
  transition: opacity 0.2s ease;
}
/* the heading doubles as a "back to top" button */
.toc-title {
  display: flex;
  align-items: center;
  gap: 6px;
  width: calc(100% - 6px);
  margin: 0 0 8px 6px;
  padding: 3px 6px 4px 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--coffee-rust);
  background: none;
  border: none;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease;
}
.toc-title:hover { color: var(--coffee-dark); background: rgba(243, 226, 191, 0.6); }
.toc-up {
  font-size: 12px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toc-title:hover .toc-up,
.toc-title:focus-visible .toc-up { opacity: 1; transform: translateY(0); }
.toc-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.toc-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 9px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink);
  border-left: 3px solid transparent;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.toc-list a:hover { background: rgba(243, 226, 191, 0.7); color: var(--coffee-rust); }
.toc-list a.is-current {
  background: rgba(243, 226, 191, 0.9);
  border-left-color: var(--coffee-mid);
  color: var(--coffee-dark);
  font-weight: 700;
}
.toc-emoji { font-size: 15px; flex: 0 0 auto; }
.toc-label { flex: 1 1 auto; }
.toc-list a.is-done .toc-label { color: #6f8a6f; }
.toc-list a.is-done::after {
  content: "✓";
  font-size: 11px;
  font-weight: 700;
  color: #1c7c3c;
  flex: 0 0 auto;
}

/* the toggle button only appears when the list is hidden */
.toc-toggle {
  display: none;
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 6;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 20px;
  color: #fbf3e4;
  background: linear-gradient(135deg, var(--coffee-rust), #7d3410);
  border: 2px solid var(--gold);
  box-shadow: 0 8px 20px rgba(90, 45, 12, 0.32);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.toc-toggle:hover { transform: scale(1.06); }

@media (max-width: 1240px) {
  .toc {
    left: 50%;
    top: auto;
    bottom: 84px;
    width: min(320px, calc(100vw - 40px));
    /* Sits between the toggle button and the masthead — never crossing under
       the header however short the window is, and never so tall that the whole
       list fits (which would leave no thumb on the scrollbar). */
    max-height: min(calc(100vh - 84px - var(--band-h) - 18px), 408px);
    transform: translate(-50%, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
  }
  body.toc-open .toc { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
  /* let the list fill whatever height the panel ended up with */
  .toc-scroll { max-height: none; }
  .toc-toggle { display: block; }
}

/* --- easter egg -------------------------------------------------------- */
.egg-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(60, 32, 12, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.egg-overlay.is-in { opacity: 1; }
.egg-card {
  position: relative;
  z-index: 2;
  max-width: 460px;
  text-align: center;
  background: linear-gradient(165deg, #fffdf9, #f6e9d4);
  border: 1px solid var(--gold);
  border-radius: 22px;
  padding: 34px 34px 30px;
  box-shadow: 0 24px 60px rgba(40, 20, 6, 0.4);
  transform: translateY(14px) scale(0.96);
  transition: transform 0.34s cubic-bezier(.2,1.3,.4,1);
}
.egg-overlay.is-in .egg-card { transform: none; }
/* the rarer "every last one" version wears gold */
.egg-overlay--gold .egg-card {
  background: linear-gradient(165deg, #fffdf6, #f7e6c4);
  border-color: #c9a227;
  box-shadow: 0 24px 60px rgba(40, 20, 6, 0.45), 0 0 0 4px rgba(201, 162, 39, 0.18);
}
.egg-overlay--gold .egg-title { color: #8a5a10; }
.egg-cup { font-size: 54px; line-height: 1; margin-bottom: 6px; animation: eggBob 2.6s ease-in-out infinite; }
@keyframes eggBob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}
.egg-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  color: var(--coffee-dark);
  margin: 0 0 12px;
}
.egg-text { font-size: 16px; line-height: 1.6; color: #5a3a1c; margin: 0 0 12px; }
.egg-text--small { font-size: 14px; font-style: italic; color: #7a5c3e; }
.egg-close {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #fbf3e4;
  background: linear-gradient(135deg, var(--coffee-rust), #7d3410);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 11px 26px;
  margin-top: 8px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.egg-close:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px rgba(90, 45, 12, 0.32); }

.egg-beans { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.egg-bean {
  position: absolute;
  bottom: -50px;
  font-size: 26px;
  opacity: 0;
  animation-name: eggRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes eggRise {
  0%   { transform: translateY(0) rotate(0deg);            opacity: 0; }
  12%  { opacity: 0.75; }
  100% { transform: translateY(-108vh) rotate(360deg);      opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .egg-cup { animation: none; }
  .egg-card { transition: none; }
}

@media (max-width: 560px) {
  .res-section > summary { font-size: 16px; padding: 14px 15px; }
  .res-intro, .res-list { padding-left: 15px; padding-right: 15px; }
  .res-subhead { margin-left: 15px; margin-right: 15px; }
}

/* Section stubs (expanded later with items) */
.section-stub {
  max-width: 760px;
  margin: 0 auto 34px;
  padding: 0 24px;
  scroll-margin-top: 100px;
}
.section-stub h2 {
  font-family: 'Montserrat', sans-serif;
  color: var(--coffee-rust);
  border-bottom: 2px solid rgba(162, 82, 26, 0.3);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section-stub .empty-note {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
  padding: 18px 22px;
  font-style: italic;
  color: #7a5c3e;
}
.back-top {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  color: var(--coffee-mid);
}
.back-top:hover { color: var(--coffee-rust); }

/* Resource item (template for future entries) */
.resource-item {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(90, 45, 12, 0.06);
}
.resource-item h3 { margin: 0 0 6px; color: var(--coffee-dark); }
.resource-item p  { margin: 0 0 8px; line-height: 1.5; }
.resource-item a.item-link { color: var(--coffee-rust); font-weight: 700; }

/* --------------------------------------------------------------------------
   Blog article + square activity previews
   -------------------------------------------------------------------------- */
.blog-article {
  max-width: 720px;
  margin: 24px auto 90px;
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(162, 82, 26, 0.25);
  border-radius: 18px;
  padding: 38px 44px;
  box-shadow: 0 10px 30px rgba(90, 45, 12, 0.10);
}
.blog-article .post-title {
  font-family: 'Montserrat', sans-serif;
  color: var(--coffee-dark);
  font-size: 26px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.blog-article .post-meta {
  color: #8a6a48;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0 0 20px;
}
.blog-article p { font-size: 18px; line-height: 1.7; margin: 0 0 16px; }
a.inline-link {
  color: var(--coffee-rust);
  font-weight: 700;
  border-bottom: 1px solid rgba(162, 82, 26, 0.4);
  word-break: break-word;
}
a.inline-link:hover { color: #7d3410; }

.preview-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;      /* always centred */
  gap: 10px;
  margin: 22px auto 6px;
}
.preview-tile {
  position: relative;
  flex: 1 1 0;                  /* five equal tiles, one row */
  max-width: 96px;             /* kept small */
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(162, 82, 26, 0.25);
  box-shadow: 0 6px 14px rgba(90, 45, 12, 0.10);
  background: linear-gradient(150deg, #f6ecdc, #e9d3b3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--coffee-dark);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.preview-tile:hover {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 12px 24px rgba(90, 45, 12, 0.18);
}
.preview-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-tile .emoji { font-size: 34px; }
.preview-tile .cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10px;
  line-height: 1.15;
  color: #fff;
  text-align: center;
  padding: 14px 4px 5px;
  background: linear-gradient(transparent, rgba(90, 45, 12, 0.85));
}
.preview-note { font-size: 14px; color: #8a6a48; font-style: italic; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Blog: wide activity screenshots + tall cheat-sheets
   -------------------------------------------------------------------------- */
.artefact { margin: 0 0 32px; }
.artefact h3 {
  font-family: 'Montserrat', sans-serif;
  color: var(--coffee-dark);
  font-size: 19px;
  line-height: 1.35;
  margin: 0 0 6px;
}
.blog-article .artefact p { font-size: 17px; margin: 0 0 12px; }

a.shot {
  display: block;
  margin: 4px 0 10px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(162, 82, 26, 0.25);
  box-shadow: 0 8px 20px rgba(90, 45, 12, 0.12);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
a.shot img { display: block; width: 100%; height: auto; }
a.shot:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(90, 45, 12, 0.20);
}

.sheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 10px 0 4px;
  align-items: start;
}
.sheet-grid a.shot { margin: 0; }
@media (max-width: 620px) {
  .sheet-grid { grid-template-columns: 1fr; }
}