/* ============================================================
   The Daily Grind — Coffee & Kitchen
   Editorial static site. One shared stylesheet, zero JS.
   Palette: deep brown ink on warm cream, amber accents.
   ============================================================ */

:root {
  --paper: #f4edde;
  --paper-2: #ece0c9;
  --ink: #231710;
  --ink-soft: #6c5847;
  --amber: #b06a28;
  --amber-deep: #8a4f18;
  --line: rgba(35, 23, 16, 0.16);
  --line-strong: rgba(35, 23, 16, 0.42);
  --serif: Georgia, Charter, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  font-family: var(--sans);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  background:
    radial-gradient(120% 60% at 85% -5%, rgba(214, 168, 106, 0.14), transparent 60%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

:focus-visible {
  outline: 2px dashed var(--amber);
  outline-offset: 3px;
}

/* ---------- utilities ---------- */

.wrap {
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3.5rem);
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  z-index: 50;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

.kicker {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber-deep);
}

.mono {
  font-family: var(--mono);
  font-size: 0.88em;
  letter-spacing: 0.01em;
}

/* ---------- top line + header ---------- */

.topline {
  border-bottom: 1px solid var(--line);
  padding: 0.65rem 0;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.site-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem 0 1.4rem;
  border-bottom: 1px solid var(--line);
}

.wordmark {
  text-decoration: none;
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  line-height: 1.05;
  color: var(--ink);
  transition: color 0.3s ease;
}
.wordmark:hover { color: var(--amber-deep); }
.wordmark span {
  display: block;
  font-family: var(--sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 0.3rem;
}

.nav { display: flex; gap: clamp(1.1rem, 3vw, 2.4rem); }
.nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 4px;
  transition: color 0.3s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom: 1px solid var(--amber);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.21, 1);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); }

/* ---------- hero (home) ---------- */

.hero {
  position: relative;
  padding: clamp(4rem, 11vw, 8.5rem) 0 clamp(3rem, 7vw, 5.5rem);
}

.hero-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3.3rem, 10.5vw, 7.6rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  margin: 1.4rem 0 1.8rem;
  max-width: 12ch;
}
.hero-title em {
  font-style: italic;
  color: var(--amber-deep);
}

.hero-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.35rem, 3.2vw, 2.15rem);
  line-height: 1.3;
  max-width: 26ch;
  color: var(--ink);
}

.hero-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-top: clamp(2rem, 4.5vw, 3.2rem);
}

/* decorative coffee-ring stain, pure CSS */
.stain {
  position: absolute;
  top: 8%;
  right: clamp(-9rem, 2vw, 5vw);
  width: min(42vw, 430px);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(7% 5% at 76% 74%, rgba(150, 94, 42, 0.16), transparent 70%),
    radial-gradient(closest-side at 58% 42%, transparent 80%, rgba(150, 94, 42, 0.10) 81% 88%, transparent 89%),
    radial-gradient(closest-side, transparent 73%, rgba(150, 94, 42, 0.20) 74% 82%, rgba(150, 94, 42, 0.06) 83%, transparent 84%);
}
@media (max-width: 760px) {
  .stain { opacity: 0.45; right: -38%; top: 2%; }
}

/* ---------- buttons & links ---------- */

.btn {
  display: inline-block;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--ink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.link-arrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--amber-deep);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.link-arrow::after {
  content: " →";
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.21, 1);
}
.link-arrow:hover { border-bottom-color: var(--amber); }
.link-arrow:hover::after { transform: translateX(5px); }

/* ---------- sections ---------- */

.sec {
  border-top: 1px solid var(--line);
  margin-top: clamp(3rem, 7vw, 5.5rem);
  padding-top: clamp(2.2rem, 5vw, 3.6rem);
}

.sec-head {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7.5rem) 1fr;
  gap: 1rem 1.5rem;
  align-items: baseline;
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
.sec-no {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--amber);
  text-transform: uppercase;
}
.sec h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.sec p { max-width: 58ch; }
.sec p + p { margin-top: 1.1rem; }
.sec .lead { font-size: 1.14rem; }

.dropcap::first-letter {
  font-family: var(--serif);
  font-size: 3.3em;
  float: left;
  line-height: 0.78;
  padding: 0.1em 0.14em 0 0;
  color: var(--amber-deep);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 4rem;
  align-items: start;
}
@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
}

/* AI-agent callout */
.agent-note {
  margin-top: 2.2rem;
  max-width: 46rem;
  padding: 1.6rem 1.8rem;
  background: var(--paper-2);
  border-left: 3px solid var(--amber);
}
.agent-note h3 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--amber-deep);
  margin-bottom: 0.7rem;
}
.agent-note p { max-width: none; font-size: 0.98rem; }
.agent-note a {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--amber-deep);
  text-decoration: underline;
  text-decoration-color: rgba(138, 79, 24, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s ease;
}
.agent-note a:hover { text-decoration-color: var(--amber-deep); }

/* ---------- facts / find us ---------- */

.facts { border-top: 1px solid var(--line); }
.facts > div {
  display: grid;
  grid-template-columns: minmax(6rem, 9.5rem) 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.facts dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.35rem;
}
.facts dd {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.45;
}
.facts dd a { text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s, color 0.3s; }
.facts dd a:hover { color: var(--amber-deep); border-bottom-color: var(--amber-deep); }
.facts dd small {
  display: block;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

/* ---------- page head (subpages) ---------- */

.page-head {
  padding: clamp(3.2rem, 8vw, 6rem) 0 clamp(2rem, 5vw, 3.4rem);
}
.page-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  margin: 1.2rem 0 1.4rem;
  max-width: 16ch;
}
.page-title em { font-style: italic; color: var(--amber-deep); }
.page-sub {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---------- gallery ---------- */

.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.2rem, 4.5vw, 3.4rem) clamp(1.5rem, 3vw, 2.4rem);
  padding-bottom: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 620px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile:nth-child(even) { margin-top: 3.2rem; }
}
@media (min-width: 1000px) {
  .tiles { grid-template-columns: repeat(4, 1fr); }
}

.tile { margin: 0; }
.tile .art {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 2px;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.21, 1),
              box-shadow 0.6s cubic-bezier(0.22, 0.61, 0.21, 1);
}
.tile:hover .art {
  transform: translateY(-6px);
  box-shadow: 0 22px 40px -24px rgba(35, 23, 16, 0.45);
}
.tile .art::before,
.tile .art::after {
  content: "";
  position: absolute;
  inset: 0;
}
.tile figcaption {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  margin-top: 0.85rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line);
  transition: border-color 0.4s ease;
}
.tile:hover figcaption { border-top-color: var(--amber); }
.tile .no {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--amber);
  transition: color 0.3s ease;
}
.tile:hover .no { color: var(--amber-deep); }
.tile figcaption em {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--ink);
}

/* --- the eight frames, pure CSS --- */

/* 01 — First pour, 7:04 : ripples in a dark cup */
.art--pour {
  background:
    radial-gradient(circle at 50% 58%, #6f4523 0 17%, #573317 18% 29%, transparent 30%),
    linear-gradient(180deg, #2c1a10, #190e07);
}
.art--pour::before {
  background: repeating-radial-gradient(
    circle at 50% 58%,
    transparent 0 9px,
    rgba(224, 168, 101, 0.15) 10px 12px,
    transparent 13px 21px
  );
}
.art--pour::after {
  background: radial-gradient(
    circle at 50% 58%,
    rgba(240, 205, 160, 0.5) 0 5%,
    rgba(240, 205, 160, 0) 22%
  );
}

/* 02 — The corner table : gingham, a plate, a cup */
.art--table {
  background:
    repeating-linear-gradient(0deg, rgba(178, 108, 52, 0.22) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(90deg, rgba(178, 108, 52, 0.22) 0 10px, transparent 10px 20px),
    #ecdfc6;
}
.art--table::before {
  background: radial-gradient(circle at 32% 36%, #fbf4e6 0 24%, #efe1c8 25% 31%, transparent 32%);
}
.art--table::after {
  background:
    radial-gradient(circle at 68% 66%, rgba(80, 50, 28, 0.32) 0 9%, transparent 10%),
    radial-gradient(circle at 66% 64%, #3a2413 0 6.5%, transparent 7.5%);
}

/* 03 — Morning light through glass : sun + mullions */
.art--light {
  background: linear-gradient(180deg, #f7ecd9 0%, #eecf9a 55%, #d89c55 100%);
}
.art--light::before {
  background: radial-gradient(
    circle at 62% 28%,
    rgba(255, 246, 224, 0.95) 0 9%,
    rgba(255, 238, 204, 0.35) 10% 25%,
    transparent 40%
  );
}
.art--light::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 21%, rgba(58, 36, 20, 0.26) 21% 23%, transparent 23% 46%),
    linear-gradient(180deg, transparent 0 30%, rgba(58, 36, 20, 0.26) 30% 31.5%, transparent 32%);
}

/* 04 — Steam over the bar : blurred vapor on dark roast */
.art--steam {
  background: linear-gradient(180deg, #241610, #40281a 70%, #241610);
}
.art--steam::before {
  background: linear-gradient(
    104deg,
    transparent 16%,
    rgba(243, 220, 186, 0.16) 17% 18%,
    transparent 19% 38%,
    rgba(243, 220, 186, 0.11) 39% 39.8%,
    transparent 40.8% 60%,
    rgba(243, 220, 186, 0.13) 61% 62%,
    transparent 63%
  );
  filter: blur(7px);
}
.art--steam::after {
  background: radial-gradient(120% 60% at 50% 104%, rgba(214, 150, 84, 0.38), transparent 62%);
}

/* 05 — The long counter : plank wood + sheen */
.art--counter {
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #7a4a26, #5d3319 60%, #482511);
}
.art--counter::before {
  background: repeating-linear-gradient(92deg, rgba(255, 226, 180, 0.06) 0 3px, transparent 3px 11px);
}
.art--counter::after {
  background: linear-gradient(180deg, transparent 0 70%, rgba(255, 222, 170, 0.35) 70% 73%, transparent 74%);
}

/* 06 — Rain on the window : droplet dots + one big drop */
.art--rain {
  background:
    radial-gradient(rgba(255, 252, 244, 0.16) 1.5px, transparent 1.7px) 0 0 / 17px 21px,
    radial-gradient(rgba(255, 252, 244, 0.10) 1.5px, transparent 1.7px) 8px 10px / 17px 21px,
    linear-gradient(160deg, #6b5a48, #3c2f24 60%, #241a12);
}
.art--rain::before {
  background: radial-gradient(
    circle at 62% 42%,
    rgba(255, 244, 224, 0.5) 0 3.5%,
    rgba(255, 244, 224, 0.09) 4% 8%,
    transparent 9%
  );
}
.art--rain::after {
  background: linear-gradient(115deg, transparent 46%, rgba(224, 164, 96, 0.24) 47% 53%, transparent 54%);
}

/* 07 — Closing time, 19:58 : one lamp still on */
.art--closing {
  background: linear-gradient(180deg, #0f0a07, #1d120b);
}
.art--closing::before {
  background: radial-gradient(
    circle at 50% 22%,
    rgba(233, 178, 105, 0.8) 0 2.5%,
    rgba(222, 158, 86, 0.3) 3% 11%,
    rgba(222, 158, 86, 0.08) 12% 23%,
    transparent 30%
  );
}
.art--closing::after {
  background:
    linear-gradient(180deg, transparent 0 73%, rgba(236, 196, 142, 0.5) 73% 74.5%, transparent 75.5%),
    radial-gradient(6% 9% at 22% 88%, rgba(154, 106, 58, 0.55), transparent 70%),
    radial-gradient(6% 9% at 50% 90%, rgba(154, 106, 58, 0.42), transparent 70%),
    radial-gradient(6% 9% at 78% 88%, rgba(154, 106, 58, 0.55), transparent 70%);
}

/* 08 — The regulars : mugs in a cluster, warm daylight */
.art--regulars {
  background: linear-gradient(180deg, #f1e6d2, #e2cfaf);
}
.art--regulars::before {
  background:
    radial-gradient(circle at 30% 62%, #7c4a22 0 12%, #6b3f1c 13% 17%, transparent 18%),
    radial-gradient(circle at 50% 55%, #8a5327 0 14%, #77481f 15% 19%, transparent 20%),
    radial-gradient(circle at 69% 63%, #7c4a22 0 11%, #6b3f1c 12% 16%, transparent 17%),
    radial-gradient(circle at 41% 43%, rgba(122, 74, 34, 0.5) 0 4.5%, transparent 5.5%);
}
.art--regulars::after {
  background:
    linear-gradient(96deg, transparent 28%, rgba(120, 80, 40, 0.18) 29% 30%, transparent 31%),
    linear-gradient(84deg, transparent 48%, rgba(120, 80, 40, 0.15) 49% 50%, transparent 51%);
  filter: blur(5px);
}

/* ---------- contact form ---------- */

.form-panel h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  margin-bottom: 1.6rem;
}

.form label {
  display: block;
  margin-bottom: 1.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.form input,
.form textarea {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0.7rem 0.1rem;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  font-family: var(--sans);
  font-size: 1.02rem;
  color: var(--ink);
  transition: border-color 0.3s ease, background 0.3s ease;
}
.form textarea { resize: vertical; min-height: 7rem; }
.form input:focus,
.form textarea:focus {
  outline: none;
  border-bottom-color: var(--amber);
  background: rgba(176, 106, 40, 0.05);
}
.form-note {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  font-style: italic;
  font-family: var(--serif);
  color: var(--ink-soft);
}

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

.site-foot {
  margin-top: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--line);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 3rem;
}
.foot-sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 2.2rem;
}
.foot-sign em { color: var(--amber-deep); }
.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.foot-row .agents a {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink-soft);
  text-decoration: underline;
  text-decoration-color: rgba(108, 88, 71, 0.4);
  text-underline-offset: 3px;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}
.foot-row .agents a:hover {
  color: var(--amber-deep);
  text-decoration-color: var(--amber-deep);
}

/* ---------- motion preferences ---------- */

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