/* Otter Potter: small tools as vessels on a shelf.
   Porcelain ground, river-slate ink, celadon and cobalt glazes. */

@font-face { font-family: "Petrona"; src: url("/fonts/petrona-normal-400-700.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-normal-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-normal-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/fonts/atkinson-italic-400.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --porcelain: #f3f6f3;
  --ink: #1e2b30;
  --ink-soft: #4d5e63;
  --celadon: #5f8e79;
  --celadon-wash: #dce8e1;
  --cobalt: #2449a6;
  --bisque: #c9b9a6;
  --rule: #cfdad3;
  --on-cobalt: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --porcelain: #172126;
    --ink: #e4ece8;
    --ink-soft: #a7b7b1;
    --celadon: #8dbba6;
    --celadon-wash: #22332f;
    --cobalt: #93abf3;
    --bisque: #8f8072;
    --rule: #2c3c3d;
    --on-cobalt: #10183a;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--porcelain);
  color: var(--ink);
  font: 400 1.0625rem/1.6 "Atkinson Hyperlegible", system-ui, sans-serif;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cobalt); text-underline-offset: 0.18em; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--celadon); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 16px; }
.measure { max-width: 38rem; }

/* Header */
.site-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.5rem 0; }
.wordmark { font: 600 1.375rem/1 "Petrona", Georgia, serif; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.site-nav { display: flex; gap: 1.25rem; font-size: 0.9375rem; }
.site-nav a { color: var(--ink-soft); text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Type scale: 1.25 ratio from 17px body */
h1, h2, h3 { font-family: "Petrona", Georgia, serif; font-weight: 600; letter-spacing: -0.015em; line-height: 1.1; margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw + 1rem, 4.75rem); font-weight: 500; }
h2 { font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem); }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0 0 1em; }
.lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); }

/* Home hero: the headline sits above the shelf */
.hero { padding: 3rem 0 0; }
.hero h1 { max-width: 12ch; }
.hero .lede { margin-top: 1.25rem; max-width: 34rem; }

/* The shelf: products drawn as vessels */
.shelf { margin: 3.5rem 0 4.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 18rem)); gap: 2.5rem 4rem; align-items: start; }
.vessel { position: relative; z-index: 1; text-decoration: none; color: inherit; display: block; }
/* Each vessel carries its own length of shelf, so pots line up whatever the caption length.
   The plank's top sits where the pots' feet end (y=234 of a 240-unit-tall, 13rem-wide drawing). */
.vessel::before { content: ""; position: absolute; z-index: -1; left: -16px; right: -16px; top: calc(13rem * 1.2 * 234 / 240); height: 10px; background: var(--rule); border-radius: 2px; }
@media (min-width: 40rem) { .vessel::before { right: -4rem; } .vessel:last-child::before { right: -16px; } }
.vessel svg { display: block; width: 100%; max-width: 13rem; height: auto; margin-bottom: 1.6rem; }
.vessel-name { font: 600 1.25rem/1.2 "Petrona", Georgia, serif; display: block; }
.vessel-note { display: block; color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.25rem; }
a.vessel .vessel-name { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a.vessel:hover .glaze { fill: color-mix(in srgb, var(--celadon) 85%, var(--ink)); }
.glaze { fill: var(--celadon); transition: fill 0.2s; }
.glaze-drip { fill: color-mix(in srgb, var(--celadon) 70%, var(--ink)); }
.clay { fill: var(--bisque); }
.wheel-lines { stroke: color-mix(in srgb, var(--bisque) 60%, var(--ink)); stroke-width: 1.5; fill: none; opacity: 0.55; }

/* Sections */
.section { padding: 3.5rem 0; border-top: 1px solid var(--rule); }
.section h2 { margin-bottom: 1.25rem; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.75rem 3rem; margin: 0; }
.principles dt { font: 600 1.15rem/1.3 "Petrona", Georgia, serif; margin-bottom: 0.35rem; }
.principles dd { margin: 0; color: var(--ink-soft); }

/* Product page */
.product-head { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: center; padding-top: 2.5rem; }
.product-head img { width: 72px; height: 72px; }
.product-head h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
.product-intro { margin-top: 1.25rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; margin: 1.75rem 0 2.5rem; }
.button {
  display: inline-block; padding: 0.8rem 1.4rem; border-radius: 999px; border: 0;
  background: var(--cobalt); color: var(--on-cobalt); font: 700 1rem/1 "Atkinson Hyperlegible", sans-serif; text-decoration: none;
}
.button[aria-disabled="true"] { background: var(--celadon-wash); color: var(--ink-soft); cursor: default; }
.actions small { color: var(--ink-soft); font-size: 0.9375rem; }

.shot { border-radius: 10px; border: 1px solid var(--rule); background: #fff; }
.shot-main { margin: 0 0 1rem; }
figcaption { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.6rem; }

.two-col { display: grid; grid-template-columns: 1fr; gap: 2rem 3.5rem; align-items: start; }
@media (min-width: 52rem) { .two-col { grid-template-columns: 5fr 6fr; } }
.features { list-style: none; padding: 0; margin: 0; }
.features li { padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.features li:first-child { padding-top: 0; }
.features strong { display: block; }
.features span { color: var(--ink-soft); }

/* Pricing reads as a small comparison table, not as cards */
.pricing { width: 100%; border-collapse: collapse; max-width: 44rem; }
.pricing th, .pricing td { text-align: left; padding: 0.8rem 1rem 0.8rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pricing thead th { font: 600 1.2rem/1.2 "Petrona", Georgia, serif; }
.pricing thead th span { display: block; font: 400 0.9375rem/1.4 "Atkinson Hyperlegible", sans-serif; color: var(--ink-soft); margin-top: 0.2rem; }
.pricing tbody th { font-weight: 400; color: var(--ink-soft); }
.pricing .pro { background: var(--celadon-wash); padding-left: 1rem; }

.faq dt { font: 600 1.15rem/1.3 "Petrona", Georgia, serif; margin-top: 1.5rem; }
.faq dd { margin: 0.35rem 0 0; color: var(--ink-soft); max-width: 40rem; }

/* Legal pages */
.prose { max-width: 42rem; padding: 2rem 0 3rem; }
.prose h1 { font-size: clamp(2.25rem, 3vw + 1rem, 3rem); margin-bottom: 0.5rem; }
.prose h2 { font-size: 1.4rem; margin: 2rem 0 0.5rem; }
.prose .date { color: var(--ink-soft); }
.prose li { margin: 0.3rem 0; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; color: var(--ink-soft); font-size: 0.9375rem; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; }
.site-foot a { color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.price-note { margin-top: 1.25rem; color: var(--ink-soft); }