/*
  May Ceramics (Mây Ceramics)
  Harmony: analogous, blue to teal to green (about 150deg to 205deg), taken from the deep water glaze bowls and the
  pale bisque of the photo shoot. Calm, clean and handmade, and a clear change from the usual clay orange of pottery sites.
  60%  --porcelain #EEF2F4  page background
  30%  --mist      #D6E2E4  surfaces (product tiles, bands)
       --deep      #13303A  text, dark band, footer
       --slate     #4B6670  secondary text
  10%  --glaze     #1F5F8B  buttons, links, focus (glaze blue)
       --tide      #2E7466  second accent, badges (tide green)
       --sky       #9FC3D6  accent on dark
  Contrast (WCAG): deep on porcelain 12.33, deep on mist 10.49, glaze on porcelain 6.08, glaze on mist 5.17,
  white on glaze 6.84 (buttons), slate on porcelain 5.43, slate on mist 4.62, tide on porcelain 4.90,
  porcelain on deep 12.33, sky on deep 7.44.
*/
:root {
  --porcelain: #EEF2F4;
  --mist: #D6E2E4;
  --deep: #13303A;
  --slate: #4B6670;
  --glaze: #1F5F8B;
  --tide: #2E7466;
  --sky: #9FC3D6;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Onest", system-ui, sans-serif;
  --pad: clamp(1rem, 4vw, 3.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--porcelain); color: var(--deep); font: 400 1.0625rem/1.65 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--glaze); outline-offset: 3px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--deep); color: var(--porcelain); padding: .6rem 1rem; z-index: 60; border-radius: 8px; }
.skip:focus { top: 1rem; }
.wrap { max-width: 1340px; margin: 0 auto; padding-inline: var(--pad); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 50px; padding: .8rem 1.5rem; border-radius: 12px; font: 600 1rem/1 var(--sans); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--glaze { background: var(--glaze); color: #fff; }
.btn--glaze:hover { background: #174b6f; }
.btn--line { border-color: var(--deep); color: var(--deep); }
.btn--line:hover { background: var(--deep); color: var(--porcelain); }
.btn svg { width: 18px; height: 18px; }
.etsy { margin-top: auto; display: flex; width: 100%; min-height: 46px; border-radius: 10px; border: 2px solid var(--glaze); color: var(--glaze); background: transparent; font-weight: 600; font-size: .95rem; text-decoration: none; align-items: center; justify-content: center; gap: .5rem; transition: background-color .2s ease, color .2s ease; }
.etsy:hover { background: var(--glaze); color: #fff; }
.etsy svg { width: 16px; height: 16px; }

/* Header */
.head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--porcelain) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.head.is-stuck { border-bottom-color: rgba(19, 48, 58, .12); }
.head__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .9rem; }
.mark { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.mark svg { width: 38px; height: 38px; }
.mark b { display: block; font: 400 1.6rem/1 var(--serif); }
.mark span { font-size: .85rem; color: var(--slate); display: block; line-height: 1.1; }
.links { display: flex; align-items: center; gap: clamp(1rem, 2.6vw, 2.4rem); font-weight: 500; }
.links a { text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.links a:hover { border-bottom-color: var(--sky); }
.links a[aria-current="page"] { border-bottom-color: var(--glaze); }
.links .links__etsy { border: 2px solid var(--deep); border-radius: 10px; padding: .55rem 1rem; }
.links .links__etsy:hover { background: var(--deep); color: var(--porcelain); }
.burger { display: none; min-height: 46px; padding: 0 1rem; border-radius: 10px; border: 2px solid var(--deep); background: transparent; color: var(--deep); font: 600 .95rem/1 var(--sans); cursor: pointer; }

/* Home hero */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero h1 { font-size: clamp(2.9rem, 5.6vw, 5.4rem); }
.hero__lede { margin-top: 1.4rem; font-size: 1.18rem; max-width: 40ch; color: var(--slate); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.rating { display: flex; align-items: center; gap: .8rem; margin-top: 2.4rem; font-size: .95rem; color: var(--slate); }
.stars { display: flex; gap: 2px; color: var(--glaze); }
.stars svg { width: 18px; height: 18px; }
.rating b { color: var(--deep); }
.hero__art { position: relative; justify-self: center; width: min(100%, 520px); }
.hero__arch { border-radius: 999px 999px 18px 18px; overflow: hidden; aspect-ratio: 4 / 5.2; background: var(--mist); }
.hero__arch img { width: 100%; height: 100%; object-fit: cover; animation: lift 1.2s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes lift { from { transform: scale(1.1); } to { transform: none; } }
.hero__bowl { position: absolute; left: -12%; bottom: 6%; width: 40%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid var(--porcelain); animation: roll 1.1s .3s cubic-bezier(.2, .8, .2, 1.1) both; }
.hero__bowl img { width: 100%; height: 100%; object-fit: cover; }
@keyframes roll { from { transform: translateX(-30px) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
.hero__tag { position: absolute; right: -4%; top: 12%; background: var(--deep); color: var(--porcelain); padding: .7rem 1rem; border-radius: 12px; font-size: .9rem; line-height: 1.3; max-width: 12rem; }
.hero__tag b { display: block; font: 400 1.2rem/1.2 var(--serif); color: var(--sky); }

/* Sections */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section__head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.section__head h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.section__head p { max-width: 44ch; color: var(--slate); }
.more { font-weight: 600; color: var(--glaze); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }

/* Product tiles */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.6rem); }
.item { display: flex; flex-direction: column; gap: .8rem; }
.item__img { position: relative; border-radius: 16px; overflow: hidden; background: var(--mist); aspect-ratio: 4 / 5; }
.item__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.item:hover .item__img img { transform: scale(1.04); }
.item__flag { position: absolute; left: .7rem; top: .7rem; background: var(--porcelain); color: var(--deep); font-size: .8rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; }
.item__flag--low { background: var(--tide); color: #fff; }
.item__row { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.item h3 { font-size: 1.25rem; }
.item__price { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.item__meta { font-size: .9rem; color: var(--slate); margin-top: -.5rem; }
.item[hidden] { display: none; }

/* Process band */
.band { background: var(--deep); color: var(--porcelain); }
.band h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); max-width: 16ch; }
.process { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.4vw, 2rem); counter-reset: p; }
.process li { counter-increment: p; }
.process img { border-radius: 14px; aspect-ratio: 1; object-fit: cover; width: 100%; margin-bottom: 1rem; }
.process h3 { font-size: 1.4rem; display: flex; gap: .6rem; align-items: baseline; }
.process h3::before { content: counter(p); font: 600 .95rem/1 var(--sans); color: var(--deep); background: var(--sky); width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; transform: translateY(-3px); }
.process p { color: #c6d6dc; margin-top: .5rem; font-size: .98rem; }

/* Custom teaser */
.teaser { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.teaser h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.teaser p { margin-top: 1rem; color: var(--slate); max-width: 44ch; }
.teaser .btn { margin-top: 1.8rem; }
.dots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dots span { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 -12px 24px rgba(0, 0, 0, .18), inset 0 10px 18px rgba(255, 255, 255, .25); display: grid; place-items: end center; padding-bottom: 12%; font-size: .85rem; font-weight: 600; color: var(--t, #fff); }
.speck { background-image: radial-gradient(circle, rgba(70, 55, 40, .55) 1px, transparent 1.5px), radial-gradient(circle, rgba(70, 55, 40, .4) 1px, transparent 1.4px) !important; background-size: 13px 13px, 9px 9px !important; background-position: 0 0, 4px 6px !important; background-color: var(--c) !important; }

/* Reviews */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.reviews blockquote { margin: 0; background: var(--mist); border-radius: 18px; padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
.reviews blockquote:nth-child(2) { background: transparent; border: 2px solid var(--mist); }
.reviews p { font: 400 1.25rem/1.4 var(--serif); }
.reviews footer { font-size: .92rem; color: var(--slate); margin-top: auto; }

/* Restock form */
.restock { background: var(--mist); border-radius: 24px; padding: clamp(1.6rem, 4vw, 3rem); display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.restock h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.restock p { color: var(--slate); margin-top: .6rem; }
.inline { display: flex; gap: .6rem; flex-wrap: wrap; }
.inline input { flex: 1 1 220px; }

/* Forms */
.field { display: grid; gap: .4rem; font-weight: 600; font-size: .95rem; }
.field em { font-style: normal; font-weight: 400; color: var(--slate); }
input, select, textarea { font: 400 1rem/1.4 var(--sans); min-height: 50px; padding: .75rem .9rem; border: 2px solid #b8c9cd; border-radius: 12px; background: #fff; color: var(--deep); width: 100%; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--glaze); box-shadow: 0 0 0 4px rgba(31, 95, 139, .18); }
input.is-bad { border-color: #A3261B; }
.status { font-weight: 600; min-height: 1.5em; font-size: .95rem; }
.status.is-ok { color: var(--tide); }

/* Page header (inner pages) */
.phead { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; align-items: end; }
.phead h1 { font-size: clamp(3rem, 6.5vw, 6rem); }
.phead p { color: var(--slate); font-size: 1.1rem; max-width: 42ch; }

/* Shop */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filters button { min-height: 46px; padding: 0 1.2rem; border-radius: 999px; border: 2px solid #b8c9cd; background: transparent; color: var(--deep); font: 600 .95rem/1 var(--sans); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--porcelain); }
.filters button:hover:not([aria-pressed="true"]) { border-color: var(--deep); }
.count { color: var(--slate); font-size: .95rem; margin-bottom: 1.2rem; }
.grid--shop { grid-template-columns: repeat(3, 1fr); row-gap: 2.6rem; }
.shopnote { margin-top: 3rem; display: flex; gap: 1rem; align-items: center; background: var(--mist); padding: 1.2rem 1.4rem; border-radius: 16px; color: var(--slate); }
.shopnote svg { flex: none; width: 28px; height: 28px; color: var(--glaze); }

/* Studio */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.story__photo { position: sticky; top: 100px; border-radius: 999px 999px 18px 18px; overflow: hidden; }
.story__photo img { aspect-ratio: 4 / 5.4; object-fit: cover; width: 100%; }
.story__text h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin-bottom: 1.2rem; }
.story__text p + p { margin-top: 1rem; }
.story__text p { max-width: 58ch; }
.lead { font: 400 clamp(1.4rem, 2.2vw, 1.8rem)/1.4 var(--serif); color: var(--deep); margin-bottom: 1.6rem; }
.years { list-style: none; padding: 0; margin: 2.5rem 0 0; border-left: 2px solid var(--sky); }
.years li { padding: 0 0 1.6rem 1.6rem; position: relative; }
.years li::before { content: ""; position: absolute; left: -8px; top: .45rem; width: 14px; height: 14px; border-radius: 50%; background: var(--glaze); box-shadow: 0 0 0 4px var(--porcelain); }
.years b { font: 400 1.5rem/1.2 var(--serif); display: block; color: var(--glaze); }
.duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1rem, 2.5vw, 2rem); }
.duo img { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; aspect-ratio: 4 / 3; }
.duo figure { margin: 0; }
.duo figcaption { font-size: .92rem; color: var(--slate); margin-top: .6rem; }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); }
.promises div { border-top: 2px solid var(--deep); padding-top: 1.1rem; }
.promises h3 { font-size: 1.45rem; margin-bottom: .5rem; }
.promises p { color: var(--slate); }

/* Custom: signature glaze studio */
.studio { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.preview { position: sticky; top: 96px; background: var(--mist); border-radius: 28px; padding: clamp(1rem, 3vw, 2.2rem); display: grid; gap: 1rem; }
.preview__stage { aspect-ratio: 1 / .82; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 85%, rgba(19, 48, 58, .14), transparent 55%), var(--porcelain); border-radius: 20px; overflow: hidden; }
.preview__stage svg { width: 78%; height: 78%; }
.preview__stage .piece { transition: opacity .35s ease, transform .35s ease; }
.preview__stage .piece[hidden] { display: none; }
[data-preview] { --g: #1F4F5C; --rim: #15383F; }
.glazefill { fill: var(--g); transition: fill .4s ease; }
.g-stroke { stroke: var(--g); transition: stroke .4s ease; }
.g-rim { fill: var(--rim); transition: fill .4s ease; }
.g-rimline { stroke: var(--rim); }
.spk { opacity: 0; transition: opacity .3s ease; }
.is-speck .spk { opacity: 1; }
.preview__sum { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.preview__name { font: 400 1.6rem/1.2 var(--serif); }
.preview__meta { color: var(--slate); font-size: .95rem; }
.preview__price { text-align: right; }
.preview__price b { display: block; font: 400 2.4rem/1 var(--serif); color: var(--glaze); }
.preview__price span { font-size: .88rem; color: var(--slate); }
.opts { display: grid; gap: 1.8rem; }
.opt legend { font: 400 1.35rem/1.2 var(--serif); padding: 0; margin-bottom: .8rem; }
.opt { border: 0; padding: 0; margin: 0; }
.shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.shapes label, .glazes label { position: relative; cursor: pointer; }
.shapes input, .glazes input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; min-height: 0; }
.shapes span { display: grid; justify-items: center; gap: .3rem; padding: .8rem .4rem; border: 2px solid #b8c9cd; border-radius: 14px; font-weight: 600; font-size: .92rem; text-align: center; }
.shapes span svg { width: 40px; height: 40px; }
.shapes small { font-weight: 400; color: var(--slate); font-size: .8rem; }
.shapes input:checked + span { border-color: var(--deep); background: var(--deep); color: var(--porcelain); }
.shapes input:checked + span small { color: var(--sky); }
.shapes input:focus-visible + span, .glazes input:focus-visible + span { outline: 3px solid var(--glaze); outline-offset: 2px; }
.glazes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.glazes span { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 2px solid #b8c9cd; border-radius: 14px; font-weight: 600; font-size: .92rem; min-height: 56px; }
.glazes i { width: 32px; height: 32px; border-radius: 50%; flex: none; background: var(--c); box-shadow: inset 0 -5px 8px rgba(0, 0, 0, .2); }
.glazes input:checked + span { border-color: var(--deep); box-shadow: 0 0 0 2px var(--deep); }
.extras { display: grid; gap: .6rem; }
.extras label { display: flex; gap: .7rem; align-items: center; font-weight: 500; min-height: 44px; }
.extras input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; accent-color: var(--glaze); flex: none; }
.extras input:disabled { opacity: .5; }
.extras .field { font-weight: 600; }
.qty { display: flex; align-items: center; gap: .6rem; }
.qty button { width: 46px; height: 46px; border-radius: 12px; border: 2px solid var(--deep); background: transparent; color: var(--deep); font-size: 1.3rem; cursor: pointer; }
.qty output { font: 400 1.6rem/1 var(--serif); min-width: 2.2ch; text-align: center; }
.req { margin-top: clamp(3rem, 6vw, 5rem); display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); }
.req h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.req__side p { color: var(--slate); margin-top: 1rem; }
.steps { list-style: none; padding: 0; margin: 1.6rem 0 0; counter-reset: st; display: grid; gap: .9rem; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 2.2rem 1fr; gap: .6rem; color: var(--slate); }
.steps li::before { content: counter(st); width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--glaze); color: var(--glaze); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.steps b { color: var(--deep); }
.form { display: grid; gap: 1.1rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.summary { background: var(--mist); border-radius: 14px; padding: .9rem 1rem; font-size: .95rem; }
.summary b { color: var(--glaze); }

/* Footer */
.foot { background: var(--deep); color: #c6d6dc; margin-top: clamp(3rem, 6vw, 5rem); }
.foot__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-block: 3rem; }
.foot__name { font: 400 2.4rem/1 var(--serif); color: var(--porcelain); }
.foot p + p { margin-top: .5rem; }
.foot a { color: var(--porcelain); }
.foot a:hover { color: var(--sky); }
.foot__small { font-size: .85rem; }
.foot nav { display: grid; gap: .4rem; }

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid--shop { grid-template-columns: repeat(2, 1fr); }
  .process { grid-template-columns: repeat(2, 1fr); }
  .studio { grid-template-columns: 1fr; }
  .preview { position: static; }
}
@media (max-width: 860px) {
  .burger { display: block; }
  .links { position: absolute; top: 100%; left: 0; right: 0; background: var(--porcelain); flex-direction: column; align-items: stretch; gap: 0; padding: .4rem var(--pad) 1.2rem; border-bottom: 1px solid rgba(19, 48, 58, .15); display: none; }
  .head.is-open .links { display: flex; }
  .links a { padding: .95rem .2rem; border-bottom: 1px solid rgba(19, 48, 58, .1); font-size: 1.1rem; }
  .links .links__etsy { margin-top: .8rem; text-align: center; }
  .hero, .teaser, .restock, .phead, .story, .req, .duo { grid-template-columns: 1fr; }
  .hero__art { width: min(88%, 440px); }
  .story__photo { position: static; max-width: 460px; }
  .reviews, .promises { grid-template-columns: 1fr; }
  .foot__in { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .hero h1 { font-size: clamp(2.5rem, 11vw, 3.2rem); }
  .grid, .grid--shop { grid-template-columns: 1fr 1fr; gap: 1rem .8rem; }
  .item h3 { font-size: 1.05rem; }
  .item__row { flex-direction: column; gap: .2rem; }
  .item__meta { margin-top: -.3rem; font-size: .85rem; }
  .etsy { font-size: .88rem; }
  .process { grid-template-columns: 1fr 1fr; }
  .shapes { grid-template-columns: repeat(2, 1fr); }
  .glazes { grid-template-columns: repeat(2, 1fr); }
  .pair { grid-template-columns: 1fr; }
  .hero__tag { right: -2%; top: 6%; }
  .hero__bowl { left: -6%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}