/* Cormorant Garamond is included locally with its Open Font License. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/cormorant-garamond-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/cormorant-garamond-700.ttf') format('truetype');
}
/* Coffee finder, journal and content manager. */
[hidden] { display: none !important; }
textarea, select, input, button { font: inherit; }
button { cursor: pointer; }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px 24px; margin-top:30px; }
.hero .hero-actions .button { margin-top:0; }
.quiz-callout { display:flex; align-items:center; justify-content:space-between; gap:40px; background:#dce2ca; border-radius:28px; padding:48px; }
.quiz-callout > div { max-width:670px; }
.quiz-callout p:last-child { margin-bottom:0; color:var(--muted); }
.quiz-callout .button { flex-shrink:0; }
.blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:36px 28px; }
.blog-photo { display:grid; place-items:center; aspect-ratio:1.3; overflow:hidden; background:#ead9c8; border-radius:22px; text-decoration:none; }
.blog-card:nth-child(3n+2) .blog-photo { background:#e5dfe9; }
.blog-card:nth-child(3n+3) .blog-photo { background:#e0e7cf; }
.blog-photo img { width:100%; height:100%; object-fit:contain; padding:20px; transition:transform .2s; }
.blog-photo:hover img { transform:rotate(-3deg); }
.blog-photo span { font:500 30px/1.2 'Shantell Sans',Georgia,serif; text-align:center; padding:20px; }
.blog-card .eyebrow { margin:23px 0 12px; }
.blog-card h3 { font-size:25px; line-height:1.25; margin:0; }
.blog-card h3 a { text-decoration:none; }
.blog-card > p:not(.eyebrow) { color:var(--muted); }
.article-page { max-width:900px; padding-block:44px 84px; }
.article-heading { max-width:760px; margin:44px 0; }
.article-cover { background:#e9dfcf; border-radius:24px; overflow:hidden; margin:40px 0; }
.article-cover img { width:100%; height:440px; object-fit:contain; padding:24px; }
.article-body { max-width:700px; margin:40px auto; font-size:19px; line-height:1.9; }
.article-body p { margin:0 0 25px; }
.article-end { display:flex; align-items:center; gap:25px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:30px; }
.quiz-page { display:grid; grid-template-columns:.9fr 1.1fr; align-items:start; gap:65px; padding-block:70px 100px; }
.quiz-intro { padding-top:25px; }
.quiz-form { padding:36px; background:#eee4d5; border-radius:28px; }
.quiz-progress { font:12px 'Space Mono',monospace; text-transform:uppercase; letter-spacing:.1em; margin:0 0 25px; }
.quiz-step { border:0; padding:0; margin:0 0 30px; min-width:0; }
.quiz-step legend { font:500 30px/1.3 'Shantell Sans',Georgia,serif; padding:0; }
.quiz-step > p { margin:12px 0 22px; color:var(--muted); }
.quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quiz-option { display:flex; align-items:center; gap:10px; background:var(--white); padding:16px 14px; border:1px solid #d4cabc; border-radius:14px; cursor:pointer; line-height:1.35; }
.quiz-option:has(input:checked) { background:#dce2ca; border-color:#525d36; box-shadow:inset 0 0 0 1px #525d36; }
.quiz-option:focus-within { outline:3px solid #68497b; outline-offset:3px; }
.quiz-option input { accent-color:#515c35; width:18px; height:18px; flex-shrink:0; }
.quiz-controls { display:flex; align-items:center; gap:12px; justify-content:flex-end; }
.quiz-error, .form-error { color:#853624; }
.quiz-error:empty { display:none; }
.quiz-result { padding-block:55px 0; }
.match-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.match-reasons { padding-left:22px; margin:25px 0; }
.match-reasons li { margin:8px 0; }
.image-placeholder { display:grid; place-items:center; padding:30px; min-height:180px; font:500 26px/1.3 'Shantell Sans',Georgia,serif; }
img.product-upload { object-fit:contain; }
.admin-body { background:#f7f2e9; }
.admin-top { border-bottom:1px solid var(--line); background:var(--white); }
.admin-top > div { display:flex; align-items:center; justify-content:space-between; padding:20px 0; gap:20px; }
.admin-top .wordmark { font-size:38px; }
.admin-top nav { display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.admin-top a { text-decoration:none; }
.admin-top button { background:none; border:0; padding:0; text-decoration:underline; }
.admin-layout { display:grid; grid-template-columns:190px minmax(0,1fr); gap:40px; padding-block:38px 75px; }
.admin-nav { display:flex; flex-direction:column; gap:5px; align-self:start; }
.admin-nav a { padding:12px 16px; border-radius:12px; text-decoration:none; }
.admin-nav a[aria-current=page] { background:#dce2ca; font-weight:700; }
.admin-main { min-width:0; }
.admin-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:30px; }
.admin-heading h1 { font:500 38px/1.2 'Shantell Sans',Georgia,serif; margin:0 0 10px; letter-spacing:-.03em; }
.admin-heading p { color:var(--muted); margin:0; }
.admin-panel { background:var(--white); border:1px solid var(--line); border-radius:20px; padding:28px; margin-bottom:24px; }
.admin-panel h2 { margin:0 0 18px; font-size:22px; line-height:1.3; }
.admin-panel p { color:var(--muted); }
.admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.admin-stat { display:block; padding:24px; border-radius:20px; background:#e0e7cf; text-decoration:none; }
.admin-stat:nth-child(2) { background:#eadbd4; }
.admin-stat:nth-child(3) { background:#e5dce9; }
.admin-stat strong { display:block; font-size:40px; line-height:1.2; margin-bottom:10px; }
.admin-stats + .admin-panel { margin-top:25px; }
.admin-list { display:grid; gap:14px; }
.admin-row { display:flex; align-items:center; justify-content:space-between; gap:20px; border:1px solid var(--line); background:var(--white); padding:18px; border-radius:18px; }
.admin-row-main { display:flex; align-items:center; gap:18px; min-width:0; }
.admin-row img { width:70px; height:90px; object-fit:contain; background:#eee5d7; border-radius:10px; flex-shrink:0; }
.admin-row h2 { font-size:19px; margin:0 0 3px; }
.admin-row p { font-size:14px; color:var(--muted); margin:0; }
.admin-row-actions { display:flex; align-items:center; flex-wrap:wrap; gap:14px; flex-shrink:0; }
.admin-row-actions button { border:0; background:none; padding:0; text-decoration:underline; }
.badge { display:inline-block; background:#eee5d7; font-size:12px; padding:3px 10px; border-radius:99px; margin-top:6px; }
.badge.published { background:#dce2ca; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { display:block; margin-bottom:20px; }
.field > span, .field > label { display:block; margin-bottom:7px; font-size:14px; font-weight:600; }
.field input:not([type=checkbox]), .field select, .field textarea { display:block; width:100%; padding:12px 14px; min-height:48px; border:1px solid #bdb4a6; background:white; border-radius:10px; color:var(--ink); }
.field input[type=color] { padding:5px; }
.field textarea { resize:vertical; line-height:1.65; }
.field input:focus, .field textarea:focus, .field select:focus { outline:3px solid #b8c298; outline-offset:2px; }
.field small, .field-hint { display:block; font-size:13px; color:var(--muted); margin-top:7px; font-weight:400; }
.field-grid .field { margin-bottom:0; }
.field-grid { margin-bottom:20px; }
.checkboxes { display:flex; flex-wrap:wrap; gap:12px 22px; margin:10px 0 22px; }
.checkboxes label, .check-label { display:flex; align-items:center; gap:10px; }
.checkboxes input, .check-label input { width:19px; height:19px; accent-color:#52603a; }
.admin-photo { width:180px; height:220px; object-fit:contain; background:#eee5d7; border-radius:16px; margin:0 0 20px; }
.form-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.notice, .form-error { padding:16px 20px; border-radius:12px; margin:0 0 25px; }
.notice { background:#dce2ca; }
.form-error { background:#f2dcd2; }
.admin-auth { max-width:560px; margin:60px auto; padding:0 20px; }
.admin-auth .admin-panel { padding:32px; }
.admin-auth h1 { font:500 35px/1.2 'Shantell Sans',Georgia,serif; margin:0 0 18px; }
.admin-auth .button { width:100%; }
.admin-footer { font-size:13px; color:var(--muted); margin-top:28px; }
@media(max-width:900px) {
  .hero-actions { justify-content:center; }
  .quiz-callout { flex-direction:column; align-items:flex-start; padding:32px; gap:25px; }
  .quiz-page { grid-template-columns:1fr; gap:30px; padding-block:35px 60px; }
  .quiz-intro { padding:0; }
  .quiz-intro h1 br { display:none; }
  .quiz-form { max-width:650px; width:100%; }
  .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .match-layout { gap:30px; }
  .admin-layout { grid-template-columns:1fr; gap:25px; }
  .admin-nav { flex-direction:row; flex-wrap:wrap; gap:5px; }
  .admin-nav a { padding:9px 13px; }
}
@media(max-width:600px) {
  .quiz-form { padding:25px 20px; }
  .quiz-options { grid-template-columns:1fr; }
  .quiz-step legend { font-size:27px; }
  .quiz-controls { flex-wrap:wrap; }
  .blog-grid, .match-layout, .field-grid { grid-template-columns:1fr; }
  .article-cover img { height:320px; }
  .article-body { font-size:18px; }
  .article-heading { margin:30px 0; }
  .admin-top nav { gap:14px; font-size:13px; }
  .admin-top .brand-caption { display:none; }
  .admin-heading { align-items:flex-start; flex-direction:column; }
  .admin-stats { grid-template-columns:1fr; gap:12px; }
  .admin-stat strong { display:inline; font-size:28px; margin-right:15px; }
  .admin-row { flex-direction:column; align-items:stretch; }
  .admin-row-actions { padding-top:10px; border-top:1px solid var(--line); }
  .admin-panel { padding:22px 18px; }
  .admin-auth { margin-top:30px; }
  .admin-auth .admin-panel { padding:26px 20px; }
}

/* Shared headline style across the website and its content manager. */
h1, h2, h3, h4, h5, h6,
.hero h1,
.page-title,
.section-heading h2,
.editorial-title,
.product-title,
.detail-label,
.coffee-card h3,
.quiz-step legend,
.blog-card h3,
.blog-photo span,
.image-placeholder,
.admin-heading h1,
.admin-auth h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero h1 { font-size: clamp(52px, 6.5vw, 88px); line-height: 1.02; }
.page-title,
.section-heading h2,
.editorial-title,
.product-title { line-height: 1.1; }
.coffee-card h3, .blog-card h3 { font-size: 30px; line-height: 1.15; }
.detail-label { font-size: 20px; line-height: 1.2; text-transform: none; letter-spacing: 0; }
.admin-panel h2 { font-size: 26px; }
.admin-row h2 { font-size: 24px; }
.story-editorial { align-items: start; }
.story-editorial .editorial-visual { position: sticky; top: 125px; }
.story-editorial .intro { max-width: 650px; line-height: 1.8; }
.story-editorial .intro p { margin: 0 0 22px; }
.card-prices { display:flex; flex-wrap:wrap; gap:10px 22px; border-block:1px solid var(--line); padding:12px 0; margin:16px 0; font-size:14px; }
.card-prices > span { display:flex; gap:10px; align-items:baseline; }
.card-prices strong { font-weight:600; }
.pouch-options { margin:0 0 30px; padding-bottom:26px; border-bottom:1px solid var(--line); }
.pouch-price { display:flex; align-items:baseline; gap:14px; margin-bottom:20px; }
.pouch-price > strong { font-size:30px; line-height:1.2; font-weight:600; letter-spacing:-.03em; }
.pouch-price > span { font-size:14px; color:var(--muted); }
.pouch-sizes { padding:0; margin:0; border:0; min-width:0; }
.pouch-sizes legend { margin-bottom:12px; padding:0; font-size:14px; font-weight:600; }
.pouch-size-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pouch-size { display:flex; align-items:center; gap:12px; padding:15px 16px; border:1px solid #bcb3a6; border-radius:14px; cursor:pointer; background:var(--white); }
.pouch-size:has(input:checked) { border-color:var(--ink); background:var(--tint); box-shadow:inset 0 0 0 1px var(--ink); }
.pouch-size:focus-within { outline:3px solid #68497b; outline-offset:3px; }
.pouch-size input { accent-color:var(--ink); width:18px; height:18px; flex-shrink:0; margin:0; }
.pouch-size > span { display:flex; flex-direction:column; gap:3px; }
.pouch-size strong { font-size:18px; font-weight:600; }
.pouch-size > span > span { font-size:14px; color:var(--muted); }
.pouch-ordering { font-size:14px; color:var(--muted); margin:14px 0 0; }
.size-apply { margin-top:16px; }
.price-input { position:relative; }
.price-input > span { position:absolute; top:12px; left:14px; }
.field .price-input input { padding-left:32px; }
@media(max-width:900px) {
  .story-editorial .editorial-visual { position: static; }
}
@media(max-width:600px) {
  .hero h1 { font-size: clamp(46px, 12vw, 64px); }
}