/* Shared look for every page, the same as the shop page (index.html, which also holds the
   designer's own styles). Colour works the way it does on Etsy: neutrals carry the page and each
   colour has one meaning, so a visitor learns it once.
   - Terracotta (--btn, the logo's home): the next step to an order. Buy it now, Buy gift card and
     each page's main "Design yours"; one per screen. Never text, icons, borders, tags or bands.
   - Ink (--ink): everything else you can press, and what you've chosen. Buttons are ink or
     outlined in ink; a chosen size, palette, frame or filter gets an ink outline or fill.
   - White card with a grey outline: something you can open; its outline turns ink on hover.
   - Grey panel (--bg-2), no outline: information. Labels and tags are grey pills.
   - Green (Etsy's sale green, a shade darker to read on grey): money in your favour. Free shipping and duty we pay in
     green text (.good); a discount or saving in a mint pill (.off, --good-bg, Etsy's "40% off").
     Prices themselves stay ink: on Etsy a green price means a sale, and we don't run sales.
   - Red (--bad): something to fix.
   - Focus: an ink ring.
   - The models' own colours (palettes, renders) belong to the pictures, not the page. */
:root {
  --bg: #FFFFFF; --bg-2: #F5F5F5; --ink: #222222; --ink-2: #595959; --line: #E1E1E1; --field: #BDBDBD;
  --btn: #C9502A; --btn-2: #A8401E; --good: #207A30; --good-bg: #A4E098; --bad: #B3261E;
  --radius: 12px;
  --font: "Figtree", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --lift: 0 2px 6px rgba(34,34,34,.06), 0 14px 32px rgba(34,34,34,.10);   /* a card you can open, under the pointer */
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--font); }
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
/* iPhones zoom the whole page into a text field set under 16 px, so on touch screens no field is
   smaller (a floor over the sizes below, which are set for a mouse) */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em) !important; } }
h1, h2, h3 { font-family: var(--font); font-weight: 700; letter-spacing: -.02em; margin: 0; }
h3 { font-weight: 600; letter-spacing: -.01em; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Money in your favour (the colour key above): green text, or a mint pill for a discount */
.good { color: var(--good); font-weight: 600; }
.off { display: inline-block; background: var(--good-bg); color: var(--ink); font-weight: 600; padding: 1px 10px; border-radius: 999px; white-space: nowrap; }

/* Header, Apple-style: a slim frosted bar with the product line-up in the middle, and the
   ribbon (.bar) under it */
.bar { background: var(--bg-2); color: var(--ink); text-align: center; font-size: 13px; padding: 8px 12px; }
.bar a { color: var(--ink); font-weight: 600; }
header.top { border-bottom: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.85); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); position: sticky; top: 0; z-index: 20; }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; position: relative; gap: 16px; }
main.page [id] { scroll-margin-top: 72px; }   /* a link to #sizes or #liability lands below the sticky header */
.logo { font-weight: 700; font-size: 24px; text-decoration: none; color: var(--ink); white-space: nowrap; }
header.top .logo img { height: 24px; }
nav.main { display: flex; gap: 32px; font-size: 13px; letter-spacing: -.005em; margin: 0 auto; }
nav.main a { text-decoration: none; color: rgba(34,34,34,.78); transition: color .2s; }
nav.main a:hover, nav.main a[aria-current="page"] { color: var(--ink); }
nav.main a[aria-current="page"] { font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 8px; }
header.top .btn-sm { padding: 6px 14px; font-size: 13px; }
header.top .locale summary { height: 32px; font-size: 12px; }
.locale-menu { top: 40px; }

/* The product line-up under the header on the four product pages (scripts/templates.js chapterNav) */
.chapternav .wrap { display: flex; justify-content: center; gap: 4px; padding-top: 18px; padding-bottom: 6px; overflow-x: auto; scrollbar-width: none; }
.chapternav .wrap::-webkit-scrollbar { display: none; }
.chapternav a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 104px; padding: 4px 10px; text-decoration: none; color: var(--ink); font-size: 12px; }
.chapternav svg { width: 34px; height: 34px; color: var(--ink-2); transition: color .2s; }
.chapternav a:hover svg, .chapternav a[aria-current] svg { color: var(--ink); }
.chapternav a[aria-current] span { font-weight: 600; }
.chapternav em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-2); line-height: 1; }
.menu-btn { display: none; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.menu-btn svg { width: 18px; height: 18px; }

/* Ship to and language in the header (scripts/templates.js localeSwitch): two menus */
.locale { position: relative; }
.locale summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.locale summary::-webkit-details-marker { display: none; }
.locale summary svg { width: 16px; height: 16px; }
.locale-menu { position: absolute; right: 0; top: 44px; z-index: 30; width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.12); padding: 12px; }
.locale-menu label { display: block; margin-bottom: 10px; }
.locale-menu label span { display: block; margin: 0 2px 4px; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.locale-menu select { width: 100%; padding: 8px 10px; border: 1px solid var(--field); border-radius: 8px; background: #fff; font-size: 15px; }
.locale-menu .locale-note { margin: -4px 2px 12px; font-size: 12px; color: var(--ink-2); }
@media (max-width: 600px) { .locale summary { padding: 0 9px; } .locale summary svg { display: none; } }
/* One line offering the visitor's own language (public/site.js offerLanguage) */
.lang-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 8px 16px; background: var(--bg-2); font-size: 14px; }
.lang-offer .btn { padding: 4px 14px; font-size: 13px; text-decoration: none; }
.lang-offer button { border: 0; background: none; color: var(--ink-2); font-size: 13px; text-decoration: underline; cursor: pointer; }
/* Phones: the picker sits in the menu, so the header bar keeps its room for the logo and button */
.nav-locale { display: none; }
@media (max-width: 600px) {
  .top-actions .locale, header.top .wrap > .locale { display: none; }
  nav.main.open .nav-locale { display: block; padding: 12px 0 4px; border-top: 1px solid var(--line); }
  .nav-locale .locale summary { display: inline-flex; padding: 0 12px; }
  .nav-locale .locale summary svg { display: block; }
  .nav-locale .locale-menu { position: static; width: auto; margin-top: 8px; box-shadow: none; }
}

/* Buttons: outlined in ink; .btn-primary is the page's main action, in terracotta. The header's
   "Design yours" is on every page, so it stays ink and leaves the colour to the page. */
.btn { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; font-weight: 500; font-size: 14px; text-decoration: none; text-align: center; }
.btn:hover { background: var(--bg-2); }
.btn[disabled] { opacity: .5; cursor: default; }
.btn-primary { background: var(--btn); border-color: var(--btn); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--btn-2); border-color: var(--btn-2); }
header.top .btn-primary { background: var(--ink); border-color: var(--ink); }
header.top .btn-primary:hover { background: #000; border-color: #000; }
.btn-sm { padding: 8px 14px; white-space: nowrap; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Sections shared with the home page */
section.block { padding: 72px 0 8px; }
section.block > h2, .section-title { font-size: 30px; margin-bottom: 22px; text-align: center; }
.section-sub { text-align: center; color: var(--ink-2); margin: -12px auto 24px; max-width: 60ch; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--bg-2); border-radius: 16px; padding: 24px; }
.card h3 { font-size: 19px; margin-bottom: 6px; }
.card p { margin: 0; color: var(--ink-2); font-size: 14px; }
.card p + p { margin-top: 8px; }
.strip { background: var(--bg-2); }
.strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 18px 20px; font-size: 14px; }
.strip div { display: flex; gap: 10px; align-items: center; }
.strip svg { width: 22px; height: 22px; flex: none; }
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 500; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* The whole row opens it, not just the line of text: the question reaches into the row's padding */
.faq summary { padding: 14px 0; margin: -14px 0; }
/* A chevron on the right, as on the shop page */
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq details p { margin: 10px 0 2px; color: var(--ink-2); font-size: 14px; max-width: 64ch; }
/* Wide tables (prices by zone) scroll sideways on phones instead of pushing the page wider */
.table-scroll { overflow-x: auto; max-width: 760px; margin: 0 auto; }
.table-scroll table.sizes th[scope="row"], .table-scroll table.sizes td { white-space: nowrap; }
.table-scroll table.sizes th[scope="row"] { color: var(--ink); font-size: 14px; }
table.sizes { width: 100%; border-collapse: collapse; font-size: 14px; max-width: 760px; margin: 0 auto; }
table.sizes th, table.sizes td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
table.sizes th { font-weight: 600; color: var(--ink-2); font-size: 13px; }
table.sizes td:last-child, table.sizes th:last-child { text-align: right; }

/* Content pages */
.page-hero { padding: 48px 0 28px; max-width: 760px; }
.page-hero.center { text-align: center; margin: 0 auto; }
.page-hero h1 { font-size: 40px; line-height: 1.12; }
.lead { font-size: 18px; color: var(--ink-2); margin: 14px 0 0; }
.eyebrow { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); margin: 0 0 10px; }
.prose { max-width: 68ch; }
.prose h2 { font-size: 24px; margin: 36px 0 10px; }
.prose h3 { font-family: var(--font); font-size: 16px; font-weight: 600; margin: 22px 0 6px; }
.prose p, .prose li { font-size: 15px; }
.prose ul { padding-left: 20px; }
.prose li + li { margin-top: 4px; }
.muted { color: var(--ink-2); }
.small { font-size: 13px; }
.note { background: var(--bg-2); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; }
.split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.figure { margin: 0; border-radius: 16px; overflow: hidden; background: var(--bg-2); }
.figure img { display: block; width: 100%; }
.figure figcaption { font-size: 12px; color: var(--ink-2); padding: 8px 12px; background: var(--bg); }
.updated { font-size: 13px; color: var(--ink-2); margin-top: 8px; }

/* Design cards: gallery, city and gift pages */
.designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.design { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.design .pic { position: relative; background: var(--bg-2); }
.design img { display: block; width: 100%; aspect-ratio: 1 / .92; object-fit: cover; }
.design .tag { position: absolute; left: 10px; top: 10px; font-size: 11px; font-weight: 600; background: rgba(255,255,255,.92); color: var(--ink-2); padding: 3px 8px; border-radius: 999px; }
.design .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.design h3 { font-size: 18px; }
.design .meta { font-size: 13px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.design .go { margin-top: auto; padding-top: 8px; }
.dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.18); display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 14px; font-size: 14px; text-decoration: none; }
.chips a:hover { border-color: var(--ink); }
/* A hidden section stays hidden whatever its display (Your orders' signed-in and signed-out parts) */
section[hidden] { display: none; }

/* Forms */
.form { display: grid; gap: 14px; max-width: 560px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
.form input, .form select, .form textarea { width: 100%; padding: 10px 14px; border: 1px solid var(--field); border-radius: var(--radius); background: #fff; }
.form textarea { min-height: 96px; resize: vertical; }
.form .hint { font-size: 12px; color: var(--ink-2); margin-top: 4px; }
.choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.choice label { position: relative; margin: 0; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span { display: block; height: 100%; padding: 14px 16px; border: 1px solid var(--field); border-radius: var(--radius); background: #fff; font-size: 14px; }
.choice span b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.choice input:checked + span { border-color: var(--ink); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.form-msg { font-size: 13px; color: var(--bad); }
.form-msg:empty { display: none; }

/* Card brands and wallets (scripts/templates.js payIcons) */
.pay-icons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pay-icons img { display: block; width: 38px; height: 24px; }

/* Footer (scripts/templates.js siteFooter), in the site's own pieces: the grey of the strip under the
   header, Figtree, ink pills, the site's dividers and line icons, and the line drawing of
   Yaletown and downtown across the whole width, a small margin each side
   (public/brand/footer-drawing*.svg, their faces filled with this grey), with the small print under
   its base line, closing the page. Parts sit 48 px apart (40 on tablets, 32 on phones). The same block is in
   public/styles.css and index.html; a test keeps the two in step. */
footer.site { margin-top: 96px; background: var(--bg-2); color: var(--ink-2); font-size: 14px; line-height: 1.6; }
:where(footer.site) a { color: inherit; text-decoration: none; }   /* :where keeps it from outranking the rules below */
footer.site h2 { color: var(--ink); }
.foot-specs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin: 0; padding: 48px 0; border-bottom: 1px solid var(--line); }
.foot-specs dt { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--ink); font-size: 15px; font-weight: 600; }
.foot-specs dt svg { flex: none; width: 24px; height: 24px; color: var(--ink-2); }
.foot-specs dt a::after { content: " ›"; content: " ›" / ""; }   /* the arrow isn't read out where the browser allows */
.foot-specs dt a:hover { text-decoration: underline; text-underline-offset: 4px; }
.foot-specs dd { margin: 0 0 0 34px; max-width: 34ch; }
.foot-specs .pay-icons { margin-top: 10px; }
.foot-cols { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 32px; padding: 48px 0 56px; }
.foot-cols h2 { font-family: var(--font); font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 14px; }
.foot-cols nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.foot-cols nav a:hover, .foot-reach a:hover, .foot-social a:hover, .foot-base a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.foot-cols nav em { margin-left: 6px; font-size: 11px; font-style: normal; font-weight: 600; color: var(--ink-2); }
.foot-news > p { margin: 0; max-width: 40ch; }
.foot-news form { display: flex; gap: 8px; max-width: 380px; margin-top: 16px; }
.foot-news input { flex: 1; min-width: 0; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font-size: 14px; }
.foot-news input:focus { border-color: var(--ink); }
.foot-news button { flex: none; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; }
.foot-news button:hover { background: #000; }
.foot-news button:disabled { opacity: .6; cursor: default; }
.foot-news .foot-news-msg { margin-top: 10px; color: var(--ink); }
.foot-news .foot-news-msg:empty { display: none; }
.foot-news .foot-reach { margin: 20px 0 0; }
.foot-reach a { color: var(--ink); }
.foot-social { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
footer.site .foot-end { padding-top: 20px; padding-bottom: 52px; }   /* room under it for the Message us button; footer.site: the phone rule for .wrap would zero it */
.foot-base { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; }
.foot-base ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (max-width: 1320px) { .foot-base { padding-right: 64px; } }   /* clear of the Message us circle at the bottom right */
.foot-credit { margin: 10px 0 0; font-size: 12px; }
.foot-credit a { text-decoration: underline; text-underline-offset: 3px; }
.foot-draw { display: block; padding: 0 32px; }
.foot-draw img { display: block; width: 100%; height: auto; }
.locale-foot .locale-menu { top: auto; bottom: 44px; line-height: 1.5; }
.locale-foot summary svg { display: block; }
@media (max-width: 920px) {
  .foot-draw { padding: 0 20px; }
  .foot-specs { grid-template-columns: 1fr 1fr; padding: 40px 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; padding: 40px 0 48px; }
  .foot-news { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  footer.site { margin-top: 72px; }
  .foot-draw { padding: 0 12px; }
  .foot-specs { grid-template-columns: 1fr; gap: 24px; }
  .foot-base { flex-direction: column; align-items: flex-start; }
  .locale-foot .locale-menu { left: 0; right: auto; }
}
/* /Footer */

@media (max-width: 920px) {
  nav.main { display: none; position: absolute; top: 52px; left: 0; right: 0; flex-direction: column; gap: 0; margin: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 4px 20px 12px; box-shadow: 0 12px 24px rgba(58,46,40,.08); }
  nav.main.open { display: flex; max-height: calc(100vh - 52px); max-height: calc(100dvh - 52px); overflow-y: auto; }   /* the header is sticky: a long menu scrolls */
  nav.main a { padding: 12px 0; font-size: 16px; border-top: 1px solid var(--line); }
  nav.main a:first-child { border-top: 0; }
  .menu-btn { display: inline-flex; }
  .strip .wrap, .cards, .designs { grid-template-columns: 1fr 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .strip .wrap, .cards, .designs { grid-template-columns: 1fr; }
  section.block { padding-top: 52px; }
  .page-hero { padding-top: 32px; }
  .page-hero h1 { font-size: 32px; }
  .form .row, .choice { grid-template-columns: 1fr; }
  .logo { font-size: 21px; }
  header.top .btn-sm { padding: 6px 12px; font-size: 13px; }
  .chapternav .wrap { justify-content: flex-start; }
  .chapternav a { min-width: 84px; padding: 4px 6px; }
}
@media print {
  .bar, header.top, footer.site, .no-print { display: none !important; }
  body { background: #fff; }
}

/* Text pages (about, shipping, privacy, terms, 404): one readable column */
main.page { max-width: 720px; margin: 0 auto; padding: 48px 20px 72px; }
main.page h1 { font-size: 36px; line-height: 1.15; margin-bottom: 12px; }
main.page h2 { font-size: 22px; margin: 36px 0 8px; }
main.page p, main.page li { color: var(--ink); }
main.page .lede { font-size: 18px; color: var(--ink-2); }
main.page table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0; }
main.page th, main.page td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
main.page th { color: var(--ink-2); font-weight: 600; font-size: 14px; }
main.page .note { background: var(--bg-2); border-radius: 12px; padding: 14px 18px; font-size: 15px; }
main.page .cta { display: inline-block; margin-top: 24px; text-decoration: none; background: var(--btn); color: #fff; font-weight: 600; padding: 14px 26px; border-radius: 999px; }
main.page .updated { font-size: 13px; color: var(--ink-2); }
@media (max-width: 560px) { main.page h1 { font-size: 30px; } main.page { padding: 36px 16px 56px; } }
.logo img { height: 30px; width: auto; display: block; }

/* Header: links that only show in the phone menu */
nav.main .m-only { display: none; }
@media (max-width: 920px) { nav.main.open .m-only { display: block; } }

/* Wider content pages: cities, gifts, gallery, guides and the blog (scoped to main.page so the
   home-page-style cards and forms above keep their look) */
main.page.wide { max-width: 1040px; }
main.page .prose { max-width: 720px; }
main.page :is(p, li, td, figcaption) a { color: var(--ink); }
.crumbs { font-size: 13px; color: var(--ink-2); margin-bottom: 18px; }
main.page .crumbs a { color: var(--ink-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }
main.page .cta-row .cta { margin-top: 0; }
main.page .cta.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); padding: 12.5px 24px; }
main.page figure { margin: 28px 0; }
main.page figure img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bg-2); }
main.page figcaption { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.badge { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; margin-right: 6px; vertical-align: 1px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 28px 0; }
main.page .pair figure { margin: 0; }
main.page .cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 18px 0; }
main.page .cards > .card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0; color: var(--ink); text-decoration: none; }
main.page a.card:hover { border-color: var(--ink-2); }
/* Cards you can open lift a little under the pointer, so they read as one tap */
@media (hover: hover) {
  main.page a.card { transition: border-color .15s, box-shadow .2s, transform .2s; }
  main.page a.card:hover { box-shadow: var(--lift); transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) { main.page a.card { transition: none; } main.page a.card:hover { transform: none; } }
main.page .card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-2); border-radius: 0; }
main.page .card img.preview { object-fit: contain; background: #fff; }   /* a 3D preview, shown whole */
main.page .card .in { padding: 14px 16px 16px; }
main.page .card h3 { font-size: 19px; margin-bottom: 4px; }
main.page .card p { font-size: 14.5px; margin: 0; color: var(--ink-2); }
main.page .card .go { display: block; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: underline; }
.areas { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
main.page .areas li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin: 0; }
.areas b { display: block; font-weight: 600; font-size: 17px; color: var(--ink); }
.areas span { display: block; font-size: 14.5px; margin: 2px 0 8px; }
main.page .areas a { font-size: 13.5px; font-weight: 600; text-decoration: none; }
main.page .steps { counter-reset: step; list-style: none; padding: 0; }
main.page .steps > li { position: relative; padding-left: 52px; margin: 0 0 26px; }
main.page .steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 2px; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-2); color: var(--ink); font: 600 16px/34px var(--font); text-align: center; }
main.page .steps h3 { font-size: 19px; margin-bottom: 4px; }
main.page .faq { max-width: none; }
main.page .faq details { padding: 12px 0; }
main.page .faq summary { font-weight: 600; color: var(--ink); padding: 12px 0; margin: -12px 0; }
main.page .faq details p { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); }
.ideas { columns: 2; column-gap: 32px; }
main.page .ideas li { break-inside: avoid; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
main.page .gallery figure { margin: 0; }
td.passed, tr.passed td { color: #9E9E9E; text-decoration: line-through; }
main.page .form { margin: 20px 0; max-width: none; }
main.page .form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
main.page .form button { justify-self: start; font-weight: 600; color: #fff; background: var(--ink); border: 0; border-radius: 999px; padding: 13px 26px; cursor: pointer; }
main.page .form button:hover:not(:disabled) { background: #000; }
main.page .form button:disabled { opacity: .6; cursor: default; }
.form .hp { position: absolute; left: -9999px; }
.inline-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.inline-form input { flex: 1 1 220px; border: 1px solid var(--field); border-radius: 999px; padding: 11px 16px; background: #fff; }
.inline-form button { font-weight: 600; color: #fff; background: var(--ink); border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; }
main.page .maker { display: flex; gap: 16px; align-items: center; background: var(--bg-2); border-radius: 14px; padding: 16px 18px; margin: 24px 0; }
main.page .maker .av { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-2); color: var(--ink); font: 600 28px/64px var(--font); text-align: center; overflow: hidden; }
main.page .maker .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
main.page .maker p { margin: 0; font-size: 15px; }
@media (max-width: 560px) {
  .pair, main.page .form .two { grid-template-columns: 1fr; }
  .ideas { columns: 1; }
}
.gallery figure { margin: 0; }
.gallery figure img { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--bg-2); }
.gallery figcaption { font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.gallery figcaption a { color: var(--ink); }

/* Phones: the essentials only. Secondary notes, long descriptions and repeat links step aside;
   everything is still one tap away on the page it belongs to. */
@media (max-width: 600px) {
  main.page .lede { font-size: 16px; }
  .areas span, .design .body > p.small, .eyebrow:not(#order-no) { display: none; }
  main.page .areas li { padding: 12px 14px; }
}

/* Lists of ideas on the gift pages */
.ideas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }

/* Product pages, Apple-style (/cities, /business): the product's name, one
   line, the picture; then "Take a closer look." tiles. Names and lines: docs/product-lines.md.
   Selectors start with main so they win over main.page's and section.block's own rules. */
main .px-hero { text-align: center; padding: 40px 0 8px; }
main p.px-kicker { font-size: 15px; font-weight: 600; color: var(--ink-2); margin: 0 0 8px; }
main .px-hero h1 { font-family: var(--font); font-weight: 700; letter-spacing: -.025em; line-height: 1.06; margin: 0; }
.px-name { display: block; font-size: 60px; }
.px-tag { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.015em; margin-top: 10px; }
main p.px-lead { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 38em; margin: 18px auto 0; }
.px-links { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; }
main .px-links .cta, .px-links .btn { margin: 0; }
main a.px-more { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
main a.px-more:hover { text-decoration: underline; }
main figure.px-figure { margin: 40px auto 0; max-width: 920px; }
main figure.px-figure img, main figure.px-figure svg { display: block; width: 100%; height: auto; border-radius: 22px; background: var(--bg-2); }
main figure.px-figure figcaption { font-size: 13px; color: var(--ink-2); margin-top: 10px; text-align: center; }
main h2.px-h2 { font-family: var(--font); font-weight: 700; font-size: 40px; letter-spacing: -.02em; line-height: 1.1; text-align: center; margin: 0 0 10px; }
main p.px-sub { text-align: center; color: var(--ink-2); font-size: 17px; max-width: 40em; margin: 0 auto 28px; }
.px-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.px-tiles:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* four tiles two by two, not three and one */
.px-tile { background: var(--bg-2); border-radius: 22px; padding: 26px 24px; }
.px-tile b { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
main .px-tile h3 { font-family: var(--font); font-weight: 700; font-size: 22px; letter-spacing: -.01em; line-height: 1.2; margin: 0 0 8px; }
main .px-tile p { margin: 0; color: var(--ink-2); font-size: 15px; }
main form.px-form { max-width: 620px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.px-form .hp { position: absolute; left: -9999px; }
@media (max-width: 560px) {
  main .px-hero { padding-top: 24px; }
  .px-name { font-size: 42px; }
  .px-tag { font-size: 22px; }
  main p.px-lead { font-size: 17px; }
  main h2.px-h2 { font-size: 30px; }
  .px-tiles:has(> :nth-child(4):last-child) { grid-template-columns: 1fr; }
  main figure.px-figure { margin-top: 28px; }
  main figure.px-figure img, main figure.px-figure svg { border-radius: 16px; }
}

/* About and contact (/contact), the way Intercom's Messenger home does it: a greeting on a grey
   panel, then white cards over its lower edge. Send me a message (opens into the form), Track my
   order (the Message us chat's sign-in) and Search for help (the FAQ, searched by
   public/support.js); then the story as Intercom's News cards: a picture, then the words. */
main.page.contact { max-width: 680px; }
.ic-hero { background: linear-gradient(var(--bg-2) 55%, rgba(245,245,245,0)); border-radius: 24px; padding: 24px 28px 76px; }
.ic-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 36px; }
.ic-top img { display: block; width: 40px; height: 40px; }
main.page p.ic-status { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 5px 12px 5px 10px; border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; color: var(--ink); }
.ic-status[hidden] { display: none; }
.ic-dot { width: 8px; height: 8px; border-radius: 50%; background: #9E9E9E; }
.ic-dot.on { background: #34C759; }
main.page .ic-hero h1 { font-size: 40px; line-height: 1.12; letter-spacing: -.025em; margin: 0; }
.ic-hi { display: block; color: var(--ink-2); }
main.page p.ic-lede { margin: 12px 0 0; max-width: 34em; font-size: 16px; color: var(--ink-2); }
.ic-cards { position: relative; display: grid; gap: 12px; margin: -52px 16px 0; }
.ic-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(34,34,34,.04), 0 6px 18px rgba(34,34,34,.06); color: var(--ink); }
/* A card you open: the title and a line, an icon at the right; the outline turns ink under the pointer */
.ic-card > summary, a.ic-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; text-decoration: none; cursor: pointer; }
.ic-card > summary { list-style: none; }
.ic-card > summary::-webkit-details-marker { display: none; }
.ic-t { flex: 1; min-width: 0; }
.ic-t b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.ic-t span { display: block; font-size: 14px; color: var(--ink-2); }
.ic-go { width: 22px; height: 22px; flex: none; }
@media (hover: hover) {
  a.ic-card, .ic-write { transition: border-color .15s, box-shadow .2s; }
  a.ic-card:hover, .ic-write:not([open]):hover { border-color: var(--ink); box-shadow: var(--lift); }
}
.ic-card:focus-within:has(> summary:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.ic-card > summary:focus-visible { outline: 0; }
.ic-write[open] > summary { cursor: default; }
.ic-write[open] .ic-go { display: none; }
main.page .ic-write .form { margin: 0; padding: 18px 20px 20px; border-top: 1px solid var(--line); }
main.page .ic-write .form select { min-height: calc(1.55em + 22px); }   /* as tall as the fields beside it */
main.page .form-msg.ok { color: var(--ink); font-weight: 600; }
/* Search for help: a grey field, then questions as rows that open in place */
.ic-help { padding: 8px; }
.ic-search { position: relative; margin-bottom: 4px; }
.ic-search[hidden] { display: none; }
.ic-search input { width: 100%; padding: 12px 44px 12px 14px; border: 0; border-radius: 10px; background: var(--bg-2); font-size: 15px; font-weight: 500; -webkit-appearance: none; appearance: none; }
.ic-search input::placeholder { color: var(--ink); opacity: 1; }
.ic-search input:focus { outline: 0; box-shadow: 0 0 0 2px var(--ink); background: #fff; }
.ic-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ic-search svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; }
.ic-qs[hidden] { display: none; }
.ic-qs summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; border-radius: 10px; font-size: 15px; cursor: pointer; list-style: none; }
.ic-qs summary::-webkit-details-marker { display: none; }
.ic-qs summary::after { content: ""; flex: none; width: 7px; height: 7px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); margin-right: 4px; transition: transform .2s; }
.ic-qs details[open] summary { font-weight: 600; }
.ic-qs details[open] summary::after { transform: rotate(135deg); }
.ic-qs summary:hover { background: var(--bg-2); }
.ic-a { padding: 2px 12px 12px; font-size: 15px; color: var(--ink-2); }
main.page .ic-a p, main.page .ic-a li { margin: 0 0 8px; color: var(--ink-2); }
.ic-a > :last-child { margin-bottom: 0; }
main.page .ic-a table { font-size: 14px; }
main.page p.ic-none { margin: 0; padding: 11px 12px; font-size: 15px; color: var(--ink-2); }
.ic-none button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
main.page a.ic-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; padding: 12px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 600; text-decoration: none; }
.ic-all svg { width: 18px; height: 18px; flex: none; }
main.page a.ic-all:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Other ways to reach me: information, so a grey panel */
.ic-ways { margin-top: 12px; padding: 20px 22px; border-radius: 16px; background: var(--bg-2); }
main.page .ic-ways h2 { margin: 0 0 12px; font-size: 17px; }
.ic-ways ul { margin: 0; padding: 0; list-style: none; }
main.page .ic-ways li { position: relative; margin: 0; padding: 10px 0 10px 34px; font-size: 15px; }
.ic-ways li + li { border-top: 1px solid var(--line); }
.ic-ways li svg { position: absolute; left: 0; top: 10px; width: 22px; height: 22px; }
/* About Tiny Town: information, so grey panels, each with its picture on top */
.ic-about { display: grid; gap: 12px; margin-top: 28px; }
main.page .ic-about h2 { margin: 0 0 2px; font-size: 22px; }
.ic-news { overflow: hidden; border-radius: 16px; background: var(--bg-2); }
.ic-cover { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ic-cover.ic-bottom { object-position: 50% 100%; }   /* the close-up's own caption sits in its top quarter */
.ic-news-in { padding: 18px 22px 22px; }
main.page p.ic-label { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
main.page .ic-news h3 { margin: 0 0 8px; font-size: 19px; line-height: 1.3; }
main.page .ic-news p { margin: 0 0 10px; font-size: 15px; }
main.page .ic-news-in > :last-child { margin-bottom: 0; }
.ic-sign { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.ic-av { display: block; flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; background: #fff; font: 600 20px/44px var(--font); text-align: center; }
.ic-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ic-sign b { display: block; font-size: 15px; }
.ic-sign b + span { display: block; font-size: 13px; color: var(--ink-2); }
/* The steps as a checklist, the way Intercom's Tasks space numbers them */
.ic-steps { counter-reset: step; margin: 14px 0; padding: 0; list-style: none; }
main.page .ic-steps li { position: relative; margin: 0; padding: 4px 0 12px 42px; font-size: 15px; }
.ic-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #fff; font: 600 14px/30px var(--font); text-align: center; }
.ic-steps b { display: block; }
main.page p.ic-end { margin: 12px 0 0; text-align: center; }
main.page .ic-end .cta { margin-top: 0; }
@media (max-width: 560px) {
  .ic-hero { padding: 20px 20px 72px; border-radius: 20px; }
  .ic-top { margin-bottom: 28px; }
  main.page .ic-hero h1 { font-size: 32px; }
  .ic-cards { margin: -52px 8px 0; }
  .ic-card > summary, a.ic-card { padding: 15px 16px; }
  main.page .ic-write .form { padding: 16px; }
  .ic-ways { padding: 18px; }
  .ic-news-in { padding: 16px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) { a.ic-card, .ic-write, .ic-qs summary::after { transition: none; } }