/* Arnold's Home of Sweets: shared styles.
   A white sketchbook page: graphite ink, pencil rules and underlines, one warm gold for the tasting link.
   Display and body type: Cormorant Garamond. Labels, logo lettering and small print: Montserrat. */

:root {
  --paper: #ffffff;
  --ink: #2b2723;
  --graphite: #3b3833;
  --soft: #6f6a64;
  --line: #e6e2dc;
  --accent: #8a6d3b;
  --todo: #fff2b8;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Montserrat, Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --pencil-underline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C20 2 45 5 70 3 S92 2 99 4' fill='none' stroke='%233b3833' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  --pencil-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 8' preserveAspectRatio='none'%3E%3Cpath d='M1 4 C80 2 160 6 240 4 S360 2 399 5' fill='none' stroke='%233b3833' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M1 5.5 C100 5 200 3 300 5.5 S380 6 399 4' fill='none' stroke='%233b3833' stroke-width='.6' opacity='.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Lining figures: Cormorant's default old-style numbers dip below the line and are hard to read in phone numbers and hours. */
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 20px/1.55 var(--serif); font-variant-numeric: lining-nums; }
a[href^="tel:"] { text-underline-offset: .2em; text-decoration-thickness: 1px; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 4px;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; color: var(--ink); }
h1 { font-size: clamp(40px, 5vw, 64px); }
h2 { font-size: clamp(30px, 3.4vw, 42px); }
p { margin: 0 0 1em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--ink); color: var(--paper); padding: 10px 14px; font: 600 14px var(--sans); }
.skip-link:focus { top: 12px; }

/* ---------- Header (Sketchbook) ---------- */
.site-header {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  column-gap: 40px; padding: 0 64px 22px; height: 170px;
}
.logo { display: block; color: #000; position: relative; z-index: 1; }
.logo svg { display: block; overflow: visible; }
.logo .stacked { height: 140px; width: auto; background: var(--paper); padding: 0 18px; }
.logo .side { display: none; }
.site-header nav { display: flex; gap: 44px; font-size: 22px; letter-spacing: .02em; padding-bottom: 6px; }
.site-header nav.left { justify-content: flex-end; }
.site-header nav.right { justify-content: flex-start; align-items: center; }
.site-header nav a { position: relative; color: var(--ink); text-decoration: none; white-space: nowrap; padding-bottom: 8px; }
.site-header nav a:focus-visible { outline-offset: 6px; }
/* Pencil underline: sketches in on hover or focus; stays drawn under the page you're on. */
.site-header nav a:not(.tasting)::after {
  content: ""; position: absolute; left: -4px; right: -6px; bottom: -2px; height: 6px;
  background: var(--pencil-underline) no-repeat center / 100% 100%;
  transform: scaleX(0); transform-origin: left center; transition: transform 260ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-header nav a:not(.tasting):hover::after { transform: scaleX(1); }
}
.site-header nav a:not(.tasting):focus-visible::after,
.site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
.tasting { color: var(--accent); font-style: italic; }
.tasting svg { position: absolute; left: -22px; top: -16px; width: calc(100% + 44px); height: calc(100% + 30px); overflow: visible; pointer-events: none; }
/* No non-scaling-stroke here: with it, the dash that hides these lines before they draw in is measured at the
   drawing's own width (1366 px for the rule), so on wider screens the rest of the line showed during the opening. */
.tasting path, .rule path { fill: none; stroke: var(--graphite); stroke-linecap: round; stroke-dasharray: 1; }
.tasting path { stroke-width: 1.3; }
.rule { position: absolute; left: 0; bottom: 16px; width: 100%; height: 10px; overflow: visible; pointer-events: none; }

/* ---------- Home: the pencil opening fills the first screen ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: flex; flex-direction: column; }
.hero .stage { position: relative; flex: 1; min-height: 0; }
.hero canvas { display: block; width: 100%; height: 100%; }
.scroll-cue {
  align-self: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0 14px;
  font: 600 11px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--soft); text-decoration: none;
}
.scroll-cue svg { width: 18px; height: 12px; }
.scroll-cue path { fill: none; stroke: var(--graphite); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Content ---------- */
.section { max-width: 1120px; margin: 0 auto; padding: 88px 40px; }
.section + .section { border-top: 0; position: relative; }
.section + .section::before { content: ""; position: absolute; left: 40px; right: 40px; top: 0; height: 8px; background: var(--pencil-rule) no-repeat center / 100% 100%; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.lede { font-size: 24px; line-height: 1.5; }
.label { font: 600 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin-bottom: 14px; }

/* A link that reads like a pencil note: italic, with a hand-drawn underline. */
.pencil-link {
  display: inline-block; position: relative; color: var(--accent); font-style: italic; font-size: 22px; text-decoration: none; padding-bottom: 6px;
}
.pencil-link::after { content: ""; position: absolute; left: -2px; right: -4px; bottom: 0; height: 6px; background: var(--pencil-underline) no-repeat center / 100% 100%; transform-origin: left center; transition: transform 260ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pencil-link:hover::after { transform: scaleX(1.06); }
}

/* Home sections */
.intro .lede { max-width: 680px; margin-left: auto; margin-right: auto; }
.preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 36px 0 30px; }
.preview-grid a { display: block; overflow: hidden; aspect-ratio: 4 / 5; background: #f3f1ee; }
.preview-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .preview-grid a:hover img { transform: scale(1.03); }
}
.flavor-line { font-size: 26px; line-height: 1.6; }
.flavor-line span { white-space: nowrap; }
.flavor-line span:not(:last-child)::after { content: "·"; margin: 0 .2em 0 .5em; color: var(--soft); }  /* the dot stays with its word, so lines break cleanly */
.rating-score { font: 500 clamp(64px, 9vw, 104px)/1 var(--serif); margin-bottom: 6px; }
.stars { font-size: 26px; letter-spacing: .2em; color: var(--accent); margin-bottom: 10px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }

/* Hours table, used on the home page and Visit Us */
.hours { border-collapse: collapse; width: 100%; max-width: 420px; }
.hours th, .hours td { text-align: left; padding: 6px 0; font-weight: 500; border-bottom: 1px solid var(--line); }
.hours td { text-align: right; }
.hours .closed td { color: var(--soft); }

/* ---------- Inner pages ---------- */
.page-head { max-width: 1120px; margin: 0 auto; padding: 56px 40px 8px; text-align: center; }
.page-head p { max-width: 640px; margin: 0 auto; font-size: 22px; color: var(--graphite); }

/* Gallery */
.filters { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 30px; margin: 28px 0 8px; }
.filters button {
  position: relative; background: none; border: 0; padding: 4px 0 10px; cursor: pointer;
  font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soft);
}
.filters button::after { content: ""; position: absolute; left: -3px; right: -5px; bottom: 0; height: 6px; background: var(--pencil-underline) no-repeat center / 100% 100%; transform: scaleX(0); transform-origin: left center; transition: transform 260ms var(--ease-out); }
.filters button[aria-pressed="true"] { color: var(--ink); }
.filters button[aria-pressed="true"]::after { transform: scaleX(1); }
.filters .count { color: var(--soft); font-weight: 500; margin-left: 4px; }
.gallery-grid { max-width: 1280px; margin: 0 auto; padding: 24px 40px 96px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gallery-grid figure { margin: 0; }
.gallery-grid figure[hidden] { display: none; }
.gallery-grid a { display: block; aspect-ratio: 2 / 3; background: #f3f1ee; overflow: hidden; cursor: zoom-in; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .gallery-grid a:hover img { transform: scale(1.03); }
}

/* Lightbox */
.lightbox { border: 0; padding: 0; max-width: none; max-height: none; width: 100%; height: 100%; background: rgba(255, 255, 255, .97); color: var(--ink); }
.lightbox::backdrop { background: transparent; }
.lightbox[open] { display: grid; grid-template-columns: 80px 1fr 80px; grid-template-rows: 1fr auto; align-items: center; }
.lightbox figure { grid-column: 2; grid-row: 1; margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; padding: 64px 0 12px; min-height: 0; }
.lightbox img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; box-shadow: 0 10px 40px rgba(0, 0, 0, .12); }
.lightbox .caption { grid-column: 1 / -1; grid-row: 2; text-align: center; padding: 6px 24px 22px; font-size: 19px; color: var(--graphite); }
.lightbox button { background: none; border: 0; cursor: pointer; color: var(--ink); font: 600 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.lightbox .prev, .lightbox .next { grid-row: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
.lightbox .prev { grid-column: 1; }
.lightbox .next { grid-column: 3; }
.lightbox .prev svg, .lightbox .next svg { width: 22px; height: 40px; }
.lightbox .prev path, .lightbox .next path { fill: none; stroke: var(--graphite); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .close { position: absolute; top: 22px; right: 26px; padding: 8px; }
.lightbox .counter { position: absolute; top: 30px; left: 30px; font: 600 12px/1 var(--sans); letter-spacing: .2em; color: var(--soft); }

/* Flavors & prices */
.menu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.menu-cols ul { list-style: none; padding: 0; margin: 0 0 14px; }
.menu-cols li { padding: 7px 0; border-bottom: 1px solid var(--line); }
.note { font-size: 18px; color: var(--soft); font-style: italic; }
.prices { border-collapse: collapse; width: 100%; max-width: 640px; margin: 18px auto 28px; text-align: left; }
.prices th, .prices td { padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.prices td { text-align: right; white-space: nowrap; }
.todo { background: var(--todo); padding: 0 6px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .04em; }

/* Visit us */
.visit-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
.visit-grid h2 { font-size: 28px; margin-top: 26px; }
.visit-grid h2:first-child { margin-top: 0; }
.map { position: relative; aspect-ratio: 4 / 3; background: #f3f1ee; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); }

/* Tasting form */
.tasting-form { max-width: 760px; margin: 0 auto; }
.tasting-form fieldset { border: 0; padding: 0; margin: 0 0 36px; }
.tasting-form legend { font: 500 30px/1.2 var(--serif); padding: 0; margin-bottom: 16px; }
.field { margin-bottom: 18px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field label { display: block; font: 600 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); margin-bottom: 6px; }
.field .optional { color: var(--soft); font-weight: 500; letter-spacing: .06em; text-transform: none; }
.field input, .field select, .field textarea {
  width: 100%; font: 500 20px/1.4 var(--serif); color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1.5px solid var(--graphite); padding: 8px 2px; border-radius: 0;
}
.field textarea { min-height: 120px; border: 1.5px solid var(--graphite); padding: 10px 12px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 2px 0 var(--accent); }
.field .error { display: none; color: #9b2c1f; font: 600 13px/1.4 var(--sans); margin-top: 6px; }
.field.invalid .error { display: block; }
.field.invalid input { border-color: #9b2c1f; }
.submit {
  font: 700 13px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); background: var(--ink);
  border: 0; padding: 18px 28px; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.submit:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .submit:hover { background: #000; }
}
.form-status { margin-top: 18px; font-size: 20px; }
.form-status.done { padding: 18px 20px; border: 1.5px solid var(--graphite); }
.form-status .proto { display: block; margin-top: 8px; font: 600 12px/1.4 var(--sans); color: var(--soft); }

/* ---------- Footer ---------- */
.site-footer { position: relative; margin-top: 40px; padding: 64px 40px 30px; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--pencil-rule) no-repeat center / 100% 100%; }
.footer-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 36px; }
.footer-logo svg { height: 64px; width: auto; color: #000; }
.site-footer h2 { font: 600 12px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); margin: 6px 0 12px; }
.site-footer p { font-size: 19px; line-height: 1.6; }
.site-footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--accent); }
}
.small-print { max-width: 1120px; margin: 30px auto 0; font: 500 12px/1.6 var(--sans); letter-spacing: .06em; color: var(--soft); }

/* ---------- Phones and small tablets ---------- */
@media (max-width: 900px) {
  .menu-cols, .visit-grid, .two-col { grid-template-columns: 1fr; gap: 32px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); padding: 20px 20px 72px; gap: 10px; }
}
@media (max-width: 700px) {
  body { font-size: 19px; }
  .site-header {
    grid-template-columns: 1fr 1fr; grid-template-areas: "logo logo" "left right";
    row-gap: 12px; column-gap: 8px; padding: 10px 14px 16px; height: 128px; align-items: center;
  }
  .logo { grid-area: logo; justify-self: center; }
  .logo .stacked { display: none; }
  .logo .side { display: block; height: 52px; width: auto; }
  .site-header nav { gap: 14px; font-size: 14px; padding-bottom: 0; }
  .site-header nav a { padding-bottom: 4px; }
  .site-header nav.left { grid-area: left; justify-content: flex-start; }
  .site-header nav.right { grid-area: right; justify-content: flex-end; }
  .tasting svg { left: -10px; top: -9px; width: calc(100% + 20px); height: calc(100% + 16px); }
  .rule { bottom: 8px; }
  .section { padding: 64px 22px; }
  .section + .section::before { left: 22px; right: 22px; }
  .page-head { padding: 40px 22px 4px; }
  .page-head p { font-size: 20px; }
  .lede { font-size: 21px; }
  .preview-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 22px; }
  .site-footer { padding: 52px 22px 26px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 16px 12px 64px; }
  .filters { gap: 6px 18px; padding: 0 12px; }
  .filters button { font-size: 11px; letter-spacing: .14em; }
  .lightbox[open] { grid-template-columns: 44px 1fr 44px; }
  .lightbox figure { padding-top: 56px; }
}
@media (max-width: 380px) {
  .site-header { padding: 10px 12px 16px; column-gap: 6px; }
  .site-header nav { gap: 10px; font-size: 12.5px; }
}

/* ---------- Flavors with pencil drawings: three layouts for Joe to choose from ---------- */
/* 1. Illustrated menu: the three lists, a small drawing beside each name. */
.menu-drawn li { display: flex; align-items: center; gap: 14px; padding: 3px 0; }
.menu-drawn li img { width: 76px; height: 76px; flex: none; }

/* 2. Pastry case: a grid of larger drawings, the name underneath. */
.menu-case { text-align: center; }
.menu-case h2 { margin-bottom: .15em; }
.menu-case .note { margin-bottom: 34px; }
.case-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 28px; }
.case-grid li { display: flex; flex-direction: column; align-items: center; }
.case-grid img { width: 100%; max-width: 230px; }
.case-grid span { margin-top: 2px; font-size: 22px; line-height: 1.25; max-width: 13em; }

/* 3. Sketchbook: staggered studies, italic labels with a pencil leader line, notes in the margin. */
.sketch-page h2 {
  display: inline-block; margin-bottom: 30px; padding-bottom: 8px; font-style: italic; font-size: clamp(38px, 4.4vw, 56px);
  background: var(--pencil-underline) no-repeat left bottom / 100% 7px;
}
.sketch-grid { list-style: none; margin: 0; padding: 0 0 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 34px; }
.sketch-grid li:nth-child(4n+2), .sketch-grid li:nth-child(4n+4) { transform: translateY(56px); }
.sketch-grid img { width: 100%; max-width: 250px; }
.sketch-grid .tag {
  position: relative; display: block; width: fit-content; max-width: 85%; margin: -10px 0 0 14%; padding-left: 30px;
  font-style: italic; font-size: 23px; line-height: 1.2; transform: rotate(-2deg);
}
.sketch-grid li:nth-child(even) .tag { margin-left: 6%; transform: rotate(1.5deg); }
.sketch-grid .tag::before {
  content: ""; position: absolute; left: 0; top: -18px; width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M25 25 C17 22 10 15 6 3' fill='none' stroke='%233b3833' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M3.5 7 L6 3 L9.2 6.2' fill='none' stroke='%233b3833' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
}
.margin-note {
  width: fit-content; margin: 0 0 0 auto; padding-left: 46px; color: var(--accent); font-style: italic; font-size: 22px; transform: rotate(-1.5deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M38 12 C28 15 16 13 4 8' fill='none' stroke='%238a6d3b' stroke-width='1.1' stroke-linecap='round'/%3E%3Cpath d='M9 4 L3.5 8 L8.5 12' fill='none' stroke='%238a6d3b' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat left center / 40px 20px;
}

@media (max-width: 900px) {
  .case-grid, .sketch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sketch-grid li:nth-child(n) { transform: none; }
  .sketch-grid li:nth-child(3n+2) { transform: translateY(44px); }
}
@media (max-width: 700px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .case-grid span { font-size: 19px; }
  .menu-drawn li img { width: 68px; height: 68px; }
  .sketch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; padding-bottom: 40px; }
  .sketch-grid li:nth-child(n) { transform: none; }
  .sketch-grid li:nth-child(even) { transform: translateY(40px); }
  .sketch-grid .tag { font-size: 19px; margin-left: 6%; padding-left: 24px; }
  .margin-note { font-size: 19px; }
}

/* Home page: dessert tables */
.narrow-text { max-width: 640px; margin-left: auto; margin-right: auto; }
@media (max-width: 700px) { .preview-grid.three { grid-template-columns: repeat(3, 1fr); gap: 8px; } }

/* Schedule a tasting: call to book, until the tasting form has an inbox to send to. */
.call-to-book { padding-top: 48px; }
.call-button {
  position: relative; display: inline-block; margin: 14px 0 40px; padding: 4px 6px;
  color: var(--accent); font-style: italic; font-size: clamp(30px, 4vw, 42px); text-decoration: none; transition: color 200ms ease;
}
.call-button svg { position: absolute; left: -36px; top: -18px; width: calc(100% + 72px); height: calc(100% + 36px); overflow: visible; pointer-events: none; }
.call-button path { fill: none; stroke: var(--graphite); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@media (hover: hover) and (pointer: fine) { .call-button:hover { color: var(--ink); } }
.call-hours { color: var(--soft); font-size: 20px; }

/* Honeypot for spam bots: hidden from people, filled in only by bots. */
.botcheck { display: none; }