/* TinyTown Rugs — one stylesheet for every public page.
   The brand is "Main Street": oat paper, ink navy and a toy-car red, with school-bus yellow and park
   sage as accents. The dashed road line is the one decorative motif, used everywhere a divider
   would go, so the site reads like the rugs without copying them. */
:root {
  --oat: #f6f0e6; --oat-2: #fbf8f2; --kraft: #e9dcc6; --line: #e2d6c2; --line-2: #d4c5ac;
  --ink: #1e2b3a; --ink-2: #44505e; --ink-3: #7a7468;
  --red: #d9482b; --red-2: #b53a20; --bus: #e9ae3a; --sage: #7e9c7a; --sage-2: #5e7b5a; --sky: #a9c7d8;
  --ok: #4f7a4b; --bad: #a33a24;
  --radius: 18px;
  --lift: 0 1px 0 rgba(30, 43, 58, .04), 0 22px 44px -30px rgba(30, 43, 58, .42);
  --display: 'Fredoka', 'Arial Rounded MT Bold', 'Helvetica Rounded', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* The road line: a gently wavy dashed stroke in school-bus yellow. */
  --road: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'%3E%3Cpath d='M0 8c30-6 60-6 90 0s60 6 90 0 45-4 60-2' fill='none' stroke='%23e9ae3a' stroke-width='3.2' stroke-linecap='round' stroke-dasharray='14 11'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
/* Fredoka, the display face, has no italic: never let the browser fake one for it (DM Sans has its own). */
html { font-synthesis: none; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); font: 17px/1.62 var(--body); -webkit-font-smoothing: antialiased;
  /* Lightly wrinkled paper behind everything: a seamless tile (site/tools/seamless.mjs) shown near
     its own resolution, so the creases stay crisp on a retina screen instead of being stretched. */
  background: var(--oat) url(/brand/paper-oat.webp) 0 0 / 960px repeat;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration-color: var(--bus); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.04; margin: 0 0 .45em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.7rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: 1.32rem; letter-spacing: -.01em; line-height: 1.15; }
h1, h2 { text-wrap: balance; }
h1 em, h2 em { font-style: normal; color: var(--red); }
p { margin: 0 0 1em; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 780px; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.center { text-align: center; }
.hide { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kicker { display: flex; align-items: center; gap: 10px; font: 700 .78rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.kicker::before { content: ''; width: 34px; height: 10px; background: var(--road) left center / 120px 8px repeat-x; flex: 0 0 auto; }
.center .kicker, .kicker.center { justify-content: center; }
.road { height: 16px; background: var(--road) center / 240px 16px repeat-x; border: 0; margin: 0; }
.lede { font-size: 1.18rem; color: var(--ink-2); max-width: 40ch; }

/* ---- header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(246, 240, 230, .86); backdrop-filter: saturate(1.2) blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(212, 197, 172, .6); }
.top .wrap { display: flex; align-items: center; gap: 18px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: auto; height: 47px; }
/* "RUGS" sits beside the name on the same baseline, so "TinyTown" can be set large. */
.brand .wm { display: inline-flex; align-items: baseline; gap: 8px; font: 650 1.85rem/1 var(--display); letter-spacing: -.025em; }
.brand .wm small { font: 700 .74rem/1 var(--body); letter-spacing: .26em; color: var(--red); }
.brand:hover { color: var(--ink); }
.nav { margin-left: auto; display: flex; gap: 26px; align-items: center; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a:not(.btn):hover { color: var(--red); }
@media (max-width: 820px) { .nav a:not(.btn) { display: none; } .brand .wm { font-size: 1.45rem; gap: 6px; } .brand .wm small { font-size: .6rem; } .brand img { height: 40px; } }
@media (max-width: 440px) { .top .brand .wm small { display: none; } }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 14px 26px;
  font: 700 1rem/1.1 var(--body); text-decoration: none; cursor: pointer; background: var(--red); color: #fff8ef;
  box-shadow: 0 3px 0 var(--red-2), 0 12px 22px -14px rgba(181, 58, 32, .8); transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { color: #fff8ef; transform: translateY(-1px); background: #e0532f; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--red-2); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn.ghost:hover { background: rgba(30, 43, 58, .05); color: var(--ink); }
.btn.green { background: var(--ink); color: var(--oat); box-shadow: 0 3px 0 #0f1823; }
.btn.small { padding: 9px 16px; font-size: .9rem; }
/* The hero's one call to action. */
.btn.big { padding: 26px 58px; font-size: 1.5rem; gap: 14px; box-shadow: 0 4px 0 var(--red-2), 0 18px 30px -16px rgba(181, 58, 32, .85); }
@media (max-width: 520px) { .btn.big { width: 100%; padding: 20px 28px; font-size: 1.2rem; } }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
.textlink { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--bus); }

/* ---- cards */
.card { background: var(--oat-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--lift); }
a.card { color: inherit; text-decoration: none; display: block; transition: transform .18s, box-shadow .18s; }
a.card:hover { transform: translateY(-4px) rotate(-.3deg); color: inherit; }
.clay { width: auto; height: 104px; object-fit: contain; margin: -8px 0 6px -8px; filter: drop-shadow(0 10px 10px rgba(30, 43, 58, .14)); }

/* ---- sections */
section { padding: 84px 0; }
/* Every section opens with a centered heading: kicker, title, and a line of text kept to a readable width. */
.sec-head { max-width: 820px; margin: 0 auto 38px; text-align: center; }
.sec-head .kicker { justify-content: center; }
.sec-head p { max-width: 62ch; margin-left: auto; margin-right: auto; }
.kraft { background: var(--kraft) url(/brand/paper-kraft.webp) 0 0 / 960px repeat; }
/* Bands of colour, so the page doesn't sit on one background all the way down: the same oat paper
   with a wash of one of the brand's accents laid over it, so its creases still show. Not school-bus
   yellow behind "how it works", whose road line is that yellow. */
.band { --wash: transparent; background: linear-gradient(var(--wash), var(--wash)), var(--oat) url(/brand/paper-oat.webp) 0 0 / 960px repeat; }
.band.sky { --wash: rgba(140, 185, 215, .4); }

/* ---- hero */
.hero { padding: 54px 0 36px; position: relative; }
.hero .grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: 54px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 4.7vw, 3.6rem); margin-bottom: .32em; }
.hero .ctas { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 28px 0 26px; }
.trust { display: flex; flex-wrap: wrap; gap: 10px 22px; color: var(--ink-2); font-size: .93rem; font-weight: 500; list-style: none; padding: 0; margin: 0; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ''; width: 18px; height: 18px; border-radius: 50%; background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.4L12 5.4' fill='none' stroke='%23f6f0e6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; flex: 0 0 auto; }
.film { position: relative; }
.film .frame { border-radius: 26px; overflow: hidden; background: var(--kraft); box-shadow: 0 2px 0 rgba(30, 43, 58, .05), 0 40px 70px -40px rgba(30, 43, 58, .65); aspect-ratio: 16 / 9; }
.film video, .film .frame > img { width: 100%; height: 100%; object-fit: cover; }
/* The promise, as a stitched felt badge pinned to the corner of the film. */
.badge { position: absolute; left: -34px; bottom: -34px; z-index: 3; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: var(--red) url(/brand/felt-badge.webp) center / cover; color: #fff8ef; transform: rotate(-9deg);
  box-shadow: 0 16px 26px -14px rgba(120, 30, 10, .7); padding: 20px; }
.badge::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 2px dashed rgba(255, 248, 239, .7); }
.badge span { font: 600 1.02rem/1.08 var(--display); position: relative; }
.badge small { display: block; font: 700 .6rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; margin-top: 6px; opacity: .9; }
@media (max-width: 920px) {
  .hero .grid { grid-template-columns: 1fr; gap: 34px; }
  .badge { width: 118px; height: 118px; left: auto; right: 10px; bottom: -40px; }
  .badge span { font-size: .86rem; }
}

/* ---- the paper-cut town that sits on top of the footer: one street, repeated along the width.
   Its two ends meet on the road, so it runs on however wide the screen is. */
.townline { height: clamp(140px, 16vw, 230px); margin-bottom: -1px; background: url(/brand/border-town-wide.webp) center bottom / auto 100% repeat-x; pointer-events: none; }

/* ---- playroom photos: one strip, edge to edge, every photo the same height, no gaps. Each photo
   takes about seven seconds to pass (nine of them, 63 s for the set), whatever the screen size. */
.reel { overflow: hidden; }
.reel-track { display: flex; width: max-content; animation: reel 63s linear infinite; }
.reel:hover .reel-track, .reel.held .reel-track { animation-play-state: paused; }
.reel-set { display: flex; }
.reel-shot { flex: 0 0 auto; background: var(--kraft); }
.reel-shot img { height: clamp(260px, 30vw, 440px); width: auto; aspect-ratio: 3 / 2; object-fit: cover; }
@keyframes reel { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .reel { overflow-x: auto; scroll-snap-type: x mandatory; }
  .reel-track { animation: none; }
  .reel-set[aria-hidden] { display: none; }
  .reel-shot { scroll-snap-align: start; }
}

/* ---- three ways */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards .card { padding-top: 22px; text-align: center; }
.cards .card .clay { margin: -6px auto 12px; height: 112px; }
.cards .card .go { font-weight: 700; color: var(--red); margin: 0; }
@media (max-width: 880px) { .cards { grid-template-columns: 1fr; } }

/* ---- how it works: four stops along one road */
.journey { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; position: relative; counter-reset: stop; }
.journey::before { content: ''; position: absolute; left: 6%; right: 6%; top: 50px; height: 16px; background: var(--road) center / 240px 16px repeat-x; z-index: 0; }
.stop { position: relative; z-index: 1; text-align: center; }
.stop .icon { width: 112px; height: 112px; margin: 0 auto 10px; border-radius: 50%; background: var(--oat-2); border: 1px solid var(--line); display: grid; place-items: center; box-shadow: var(--lift); }
.stop .icon img { width: 92px; height: 92px; object-fit: contain; }
.stop h3::before { counter-increment: stop; content: counter(stop) '. '; color: var(--red); }
.stop p { color: var(--ink-2); font-size: .97rem; max-width: 26ch; margin: 0 auto; }
/* A clay car driving along the road between the last two stops, heading on toward delivery. */
.journey .car { position: absolute; left: 75%; top: 30px; width: 64px; margin-left: -32px; z-index: 2; transform: scaleX(-1); filter: drop-shadow(0 6px 6px rgba(30, 43, 58, .18)); }
@media (max-width: 1240px) { .journey .car { display: none; } }
@media (max-width: 880px) {
  .journey { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .journey::before { display: none; }
}
@media (max-width: 520px) { .journey { grid-template-columns: 1fr; } }

/* ---- the promise band */
.promise { display: grid; grid-template-columns: auto 1fr auto; gap: 34px; align-items: center; }
.promise .badge { position: static; transform: rotate(-6deg); width: 170px; height: 170px; }
.promise .badge span { font-size: 1.22rem; }
.promise h2 { margin-bottom: .3em; }
@media (max-width: 820px) { .promise { grid-template-columns: 1fr; text-align: center; } .promise .badge { margin: 0 auto; } }

/* ---- two styles and two sizes: shown side by side to compare, deliberately not as cards, which
   would look like options to click. Choosing happens on the order form. */
.styles-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 30px; align-items: start; }
.style-fig { margin: 0; }
.style-fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; box-shadow: 0 22px 40px -28px rgba(30, 43, 58, .55); }
.style-fig figcaption { padding: 18px 2px 0; }
.style-fig h3 { font-size: 1.6rem; margin-bottom: .3em; }
.style-fig p { max-width: 42ch; }
.swatches { display: flex; gap: 6px; margin-top: 4px; }
.swatches i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.or { align-self: center; margin-top: -60px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--kraft) url(/brand/paper-kraft.webp) center / 300px; font: 600 1.5rem/1 var(--display); color: var(--red); box-shadow: inset 0 0 0 2px rgba(212, 197, 172, .9); }
.size-guide { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(28px, 7vw, 90px); margin-top: 64px; padding-top: 44px; border-top: 1.5px dashed var(--line-2); flex-wrap: wrap; }
.scale-note { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); margin: 0; padding: 0 14px; background: var(--oat); font: 700 .72rem/24px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.size-fig { margin: 0; text-align: center; }
.size-fig b { display: block; font: 600 1.25rem/1.2 var(--display); }
.size-fig .price { display: block; font: 600 2.3rem/1.15 var(--display); }
.size-fig small { display: block; max-width: 26ch; margin: 6px auto 0; color: var(--ink-2); font-size: .92rem; }
@media (max-width: 760px) {
  .styles-split { grid-template-columns: 1fr; gap: 18px; }
  .or { margin: 0 auto; width: 52px; height: 52px; font-size: 1.25rem; }
}

/* ---- lightbox (a customer's proof opens in it, on their order page) */
.lightbox { position: fixed; inset: 0; z-index: 50; background: rgba(20, 27, 36, .9); display: grid; place-items: center; padding: 24px; cursor: zoom-out; }
.lightbox img { max-height: 86vh; border-radius: 10px; margin: 0 auto; }

/* ---- sizes, under the two styles */

/* ---- FAQ */
.faqs { border-top: 1.5px dashed var(--line-2); }
details.faq { border-bottom: 1.5px dashed var(--line-2); padding: 18px 4px; }
details.faq summary { font: 600 1.18rem var(--display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font: 500 1.5rem/1 var(--body); color: var(--red); transition: transform .2s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p { margin: 10px 0 0; color: var(--ink-2); max-width: 62ch; }

/* ---- closing call and footer */
.closer { text-align: center; padding: 90px 0 30px; }
.closer h2 { max-width: 16ch; margin-left: auto; margin-right: auto; }
footer { color: #d9d3c7; }
footer .foot { background: var(--ink); padding: 56px 0 34px; }
footer a { color: var(--oat); text-decoration: none; }
footer a:hover { color: var(--bus); }
footer .cols { display: grid; grid-template-columns: 2fr 1fr; gap: 34px; }
footer .brand, footer .brand:hover { color: var(--oat); }
/* The emblem's road is navy, so on the navy footer it sits on a little oat tile. */
footer .brand img { background: var(--oat); border-radius: 12px; padding: 5px 6px; height: 54px; }
footer h4 { font: 700 .74rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--bus); margin: 6px 0 14px; }
footer .links { display: grid; gap: 8px; font-size: .95rem; }
footer .fine { margin-top: 40px; padding-top: 20px; border-top: 1px dashed rgba(217, 211, 199, .25); font-size: .84rem; display: flex; flex-wrap: wrap; gap: 6px 18px; color: #a9a397; }
footer .about { font-size: .95rem; max-width: 38ch; margin-top: 14px; color: #c9c2b4; }
@media (max-width: 720px) { footer .cols { grid-template-columns: 1fr 1fr; } footer .cols > :first-child { grid-column: 1 / -1; } }

/* ---- forms (the order page) */
.page-head { padding: 46px 0 8px; }
.page-head h1 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.form { display: grid; gap: 26px; }
.field label, .field .label { display: block; font-weight: 700; margin-bottom: 8px; }
.field .hint { font-size: .88rem; color: var(--ink-2); margin-top: 6px; }
input[type=text], input[type=email], textarea, select {
  width: 100%; font: inherit; color: inherit; background: #fffdf9; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 13px 15px; transition: border-color .15s, box-shadow .15s; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(233, 174, 58, .28); }
textarea { resize: vertical; min-height: 96px; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice > span { display: block; background: #fffdf9; border: 1.5px solid var(--line-2); border-radius: 14px; padding: 13px 15px; cursor: pointer; height: 100%; transition: border-color .15s, background .15s; }
.choice > span:hover { border-color: var(--ink-3); }
.choice > span b { display: block; }
.choice > span small { color: var(--ink-2); }
.choice input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); background: #fff; }
.choice input:checked + span b::after { content: ' ✓'; color: var(--red); }
.choice input:focus-visible + span { box-shadow: 0 0 0 4px rgba(233, 174, 58, .4); }
.choice img { border-radius: 9px; margin-bottom: 9px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.field label.optin { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; font-weight: 400; font-size: .95rem; color: var(--ink-2); cursor: pointer; }
.optin input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--red); flex: 0 0 auto; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.tabs button { font: 700 .97rem var(--body); border: 1.5px solid var(--line-2); background: #fffdf9; border-radius: 999px; padding: 10px 18px; cursor: pointer; color: var(--ink); }
.tabs button:hover { border-color: var(--ink-3); }
.tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--oat); }
.tabs button { display: inline-flex; align-items: center; gap: 8px; }
.tabs button img { width: 26px; height: 26px; margin: -4px 0 -4px -6px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip { background: var(--oat-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 6px 8px 6px 14px; font-size: .92rem; display: inline-flex; align-items: center; gap: 6px; }
.chip button { all: unset; cursor: pointer; color: var(--ink-3); font-weight: 800; padding: 0 5px; }
.chip button:hover { color: var(--red); }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.row > .btn { flex: 0 0 auto; }
.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 10px; }
.photo { background: var(--oat-2); border: 1px solid var(--line); border-radius: 12px; padding: 7px; font-size: .85rem; }
.photo img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 8px; margin-bottom: 6px; }
.photo select, .photo input { padding: 7px 9px; border-radius: 9px; font-size: .85rem; margin-top: 4px; }
.photo .restored { aspect-ratio: 1; display: grid; place-items: center; text-align: center; background: var(--kraft); border-radius: 8px; padding: 8px; margin-bottom: 6px; font-size: .78rem; color: var(--ink-2); overflow-wrap: anywhere; }
.photo .x { all: unset; cursor: pointer; float: right; color: var(--red); font-weight: 800; }
.summary { position: sticky; top: 92px; }
.summary h3 { font-size: 1.6rem; }
.summary .usa-row { margin-top: 18px; }
.order-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 920px) { .order-grid { grid-template-columns: 1fr; } .summary { position: static; } }
.error { background: #fbe6df; color: var(--bad); border-radius: 12px; padding: 11px 15px; font-weight: 700; }
.note { background: #fbf1d8; border: 1px solid #ecd9a6; border-radius: 14px; padding: 13px 17px; }
.suggest { position: relative; }
.suggest ul { position: absolute; z-index: 5; left: 0; right: 0; top: 100%; margin: 6px 0 0; padding: 6px; list-style: none; background: #fffdf9; border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--lift); }
.suggest li { padding: 9px 11px; border-radius: 9px; cursor: pointer; }
.suggest li.on, .suggest li:hover { background: var(--oat); }

/* ---- the order form, one step at a time */
.steps { display: grid; gap: 14px; }
.step { padding: 0; background: var(--oat-2); border: 1px solid var(--line); border-radius: 20px; scroll-margin-top: 90px; transition: box-shadow .2s, opacity .2s; }
.step.active { box-shadow: var(--lift); border-color: var(--line-2); }
.step-head { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 22px; cursor: pointer; border-radius: 20px; }
.step-head:focus-visible { outline: 3px solid var(--bus); outline-offset: 2px; }
.step .num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--kraft); color: var(--ink); font: 700 1rem var(--body); }
.step.active .num { background: var(--red); color: #fff8ef; }
.step.done .num { background: var(--sage); color: transparent; position: relative; }
.step.done .num::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff8ef; font-weight: 800; }
.st-title { font: 600 1.3rem/1.1 var(--display); }
.st-title .opt { font: 500 .78rem var(--body); color: var(--ink-3); margin-left: 6px; letter-spacing: .02em; }
.st-sum { margin-left: auto; min-width: 0; color: var(--ink-2); font-size: .93rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-edit { display: none; color: var(--red); font-weight: 700; font-size: .9rem; flex: 0 0 auto; }
.step.done .st-edit { display: inline; }
.step-body { display: none; padding: 2px 22px 24px 70px; }
.step.active .step-body { display: grid; gap: 24px; }
.step.locked { opacity: .45; }
.step.locked .step-head { cursor: not-allowed; }
.step-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
@media (max-width: 600px) { .step-body { padding: 2px 18px 22px; } .step-head { padding: 16px 18px; } .st-sum { display: none; } }
/* The running summary beside the steps. */
.sum { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 6px 0 16px; font-size: .95rem; }
.sum dt { color: var(--ink-3); }
.sum dd { margin: 0; text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.sum dd.muted { font-weight: 400; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1.5px dashed var(--line-2); padding-top: 14px; }
.sum-total b { font: 600 2rem/1 var(--display); }

/* ---- order page (the customer's proof) */
.timeline { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 28px; }
.timeline span { font-size: .85rem; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: var(--oat-2); border: 1px solid var(--line); color: var(--ink-3); }
.timeline span.done { background: #e7efe3; color: var(--ok); border-color: #cddcc6; }
.timeline span.now { background: var(--ink); color: var(--oat); border-color: var(--ink); }
.proof { background: #fffdf9; border-radius: 18px; padding: 10px; box-shadow: var(--lift); cursor: zoom-in; border: 1px solid var(--line); }
.proof img { border-radius: 10px; width: 100%; }
.thread { display: grid; gap: 10px; }
.msg { background: var(--oat-2); border: 1px solid var(--line); border-radius: 14px; padding: 11px 15px; }
.msg.owner { background: #eef2ea; }
.msg small { color: var(--ink-3); display: block; }

/* ---- legal pages */
.legal-body h1 { font-size: clamp(2.2rem, 4.4vw, 3rem); }
.legal-body section { padding: 6px 0; }
.legal-body h2 { font-size: 1.55rem; margin-top: 1.3em; }
.legal-body h3 { font-size: 1.15rem; margin-top: 1em; }
.legal-body li { margin-bottom: .4em; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---- made in the USA: a cut-paper flag beside the claim, as a little stamp */
.usa { display: inline-flex; align-items: center; gap: 14px; padding: 12px 20px 12px 14px; border: 1.5px dashed var(--line-2); border-radius: 16px; background: rgba(251, 248, 242, .7); }
.usa img { width: 64px; height: auto; flex: 0 0 auto; }
.usa b { display: block; font: 600 1.06rem/1.15 var(--display); }
.usa span { display: block; font: 700 .7rem/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--red); margin-top: 5px; }
footer .usa { background: transparent; border-color: rgba(217, 211, 199, .3); margin-top: 26px; }
footer .usa b { color: var(--oat); }
footer .usa span { color: var(--bus); }
.usa-row { display: flex; justify-content: center; margin-top: 34px; }

/* ---- the closing call: felt clouds drifting over the town at the foot of the page. One cloud,
   placed six times at different sizes, some flipped so they don't read as copies. */
.closer { position: relative; overflow: hidden; padding-top: 130px; }
.closer .deco { position: absolute; pointer-events: none; z-index: 0; filter: drop-shadow(0 8px 8px rgba(30, 43, 58, .1)); }
.closer .wrap { position: relative; z-index: 1; }
.closer .c1 { width: 150px; left: 5%; top: 40px; }
.closer .c2 { width: 86px; left: 21%; top: 170px; transform: scaleX(-1); opacity: .9; }
.closer .c3 { width: 170px; right: 6%; top: 70px; transform: scaleX(-1); }
.closer .c4 { width: 96px; right: 23%; top: 200px; opacity: .9; }
.closer .c5 { width: 70px; left: 37%; top: 20px; transform: scaleX(-1); opacity: .85; }
.closer .c6 { width: 110px; right: 33%; top: 6px; opacity: .9; }
@media (max-width: 860px) {
  .closer { padding-top: 110px; }
  .closer .c2, .closer .c4, .closer .c5, .closer .c6 { display: none; }
  .closer .c1 { width: 92px; left: 4%; top: 22px; }
  .closer .c3 { width: 104px; right: 4%; top: 46px; }
}

/* ---- the About page: the family's snapshot taped to the page above a letter from them. The letter
   is set for reading (one narrow column, generous leading); the snapshot carries the warmth. */
.story-head { padding: 56px 0 6px; }
.story-head .lede { margin: 0 auto; max-width: 46ch; }
.snapshot { position: relative; max-width: 880px; margin: 34px auto 0; padding: 14px 14px 18px; background: #fffdf9; border-radius: 3px;
  box-shadow: 0 2px 0 rgba(30, 43, 58, .05), 0 30px 50px -30px rgba(30, 43, 58, .5); transform: rotate(-1.2deg); }
.snapshot img { width: 100%; border-radius: 2px; }
.snapshot figcaption { margin-top: 12px; text-align: center; font: 500 1.12rem/1.3 var(--display); color: var(--ink-2); }
/* Two strips of tape holding it on. */
.snapshot::before, .snapshot::after { content: ''; position: absolute; z-index: 1; top: -16px; width: 132px; height: 36px; background: rgba(233, 220, 198, .82); box-shadow: 0 1px 2px rgba(30, 43, 58, .12); }
.snapshot::before { left: 9%; transform: rotate(-5deg); }
.snapshot::after { right: 9%; transform: rotate(4deg); }
/* As wide as the snapshot above it, so the two read as one piece. */
.letter { position: relative; max-width: 880px; margin: 64px auto 0; padding: clamp(30px, 6vw, 68px) clamp(24px, 6.5vw, 84px);
  background: var(--oat-2); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--lift); font-size: 1.16rem; line-height: 1.78; }
.letter p { margin-bottom: 1.15em; }
.letter .greet { font: 500 1.6rem/1.2 var(--display); margin-bottom: .8em; }
.letter .first::first-letter { float: left; font: 600 4.3rem/.82 var(--display); color: var(--red); margin: 7px 10px 0 0; }
.wonder { margin: 1.5em 0; padding: 28px 0; text-align: center; font: 600 clamp(1.6rem, 3.6vw, 2.2rem)/1.15 var(--display);
  background: var(--road) center top / 240px 16px repeat-x, var(--road) center bottom / 240px 16px repeat-x; }
.wonder em { color: var(--red); }
.signoff { position: relative; margin-top: 2.2em; }
.signoff p { margin: 0; }
.signoff .sig { display: inline-block; margin-top: 10px; transform: rotate(-3deg); transform-origin: left center;
  font: 600 clamp(2.2rem, 5vw, 2.9rem)/1.1 var(--display); }
.signoff .sig-sub { margin-top: 4px; color: var(--ink-2); font-style: italic; }
.signoff .deco { position: absolute; right: -8px; bottom: -6px; width: 124px; transform: rotate(-8deg); filter: drop-shadow(0 8px 8px rgba(30, 43, 58, .14)); }
@media (max-width: 600px) {
  .snapshot { padding: 8px 8px 12px; transform: rotate(-.8deg); }
  .snapshot::before, .snapshot::after { width: 88px; height: 28px; top: -12px; }
  .letter { margin-top: 44px; font-size: 1.04rem; }
  .signoff .deco { width: 84px; right: -4px; }
}

/* ---- the cart: rugs designed and waiting to be checked out together, listed in the order form's
   summary, and counted in the header from any page. */
.cart-link { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: var(--oat-2); border: 1px solid var(--line-2); color: var(--ink); text-decoration: none; font-weight: 700; font-size: .9rem; }
.cart-link:hover { color: var(--red); border-color: var(--red); }
.cart-link b { min-width: 1.1em; text-align: center; }
@media (max-width: 820px) { .nav a.cart-link { display: inline-flex; } }
.cart-list { display: grid; gap: 10px; margin: 4px 0 16px; }
.cart-item { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--oat); }
.cart-item b { display: block; font-size: .95rem; line-height: 1.3; }
.cart-item small { color: var(--ink-2); }
.ci-end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-weight: 700; white-space: nowrap; }
.ci-end button { all: unset; cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--ink-2); text-decoration: underline; }
.ci-end button:hover { color: var(--red); }
.ci-end button:focus-visible { outline: 2px solid var(--bus); outline-offset: 2px; }
.this-rug { font: 700 .74rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin: 6px 0 8px; }
.cart-go { margin: 4px 0 18px; }
.cart-go .btn { width: 100%; }
.cart-go p { margin: 8px 0 0; }
.cart-go .error { margin-bottom: 10px; }
.another { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1.5px dashed var(--line-2); }
.another .muted { flex: 1 1 220px; }
/* On a rug's order page: the other rugs bought in the same checkout. */
.together { margin: -4px 0 16px; padding: 10px 14px; border: 1.5px dashed var(--line-2); border-radius: 12px; font-size: .95rem; }

/* ---- after the order: the page for several rugs bought together, and photos sent with a note */
.rugs { display: grid; gap: 16px; margin-top: 20px; }
.rug-card { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: center; padding: 18px; }
.rug-thumb { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--oat); }
.rug-thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.rug-thumb.empty { aspect-ratio: 3 / 2; display: grid; place-items: center; color: var(--ink-3); font-weight: 600; font-size: .9rem; border-style: dashed; }
.rug-body h3 { margin: 4px 0 8px; }
.rug-body .btn { margin-top: 4px; }
.st-pill { display: inline-block; font-size: .85rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; background: var(--ink); color: var(--oat); }
.st-pill.act { background: var(--red); }
.timeline.mini { margin: 10px 0 14px; gap: 4px; }
.timeline.mini span { font-size: .72rem; padding: 4px 9px; }
@media (max-width: 640px) { .rug-card { grid-template-columns: 1fr; } }
.note-photos { margin-top: 10px; }
.note-photos .thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.note-photos .thumbs:empty { display: none; }
.note-photos .thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.note-photos .thumbs img.up { opacity: .45; }

/* ---- the contact page */
.contact-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; margin: 22px 0 70px; }
.contact-grid .form { padding: 28px; }
.contact-grid > .note { grid-column: 1; }
.contact-side p { margin: 0 0 14px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }