/* Mach's Shop — "toy shop at night" storefront.
   Single deliberate dark theme derived from the shop's chromatic sticker logo:
   violet-black halftone ground, Etsy-orange / TikTok-glow CTAs, product wall first. */

:root {
  color-scheme: dark;
  --void: #17131f;
  --panel: #221b2f;
  --panel-up: #2c2440;
  --edge: #3a3151;
  --milk: #f4f1f7;
  --dim: #a79dba;
  --tang: #ff7a1a;
  --tang-deep: #d95c05;
  --candy: #ff3d8e;
  --splash: #2fd6c3;
  --butter: #ffc93c;
  --photo: #dcdadf;
  --display: "Bricolage Grotesque", "Avenir Next", "Arial Black", sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 16px;
  --dock-h: 4.6rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--void) radial-gradient(rgba(244, 241, 247, .05) 1px, transparent 1.4px);
  background-size: 22px 22px;
  color: var(--milk);
  font-family: var(--body);
  line-height: 1.55;
  padding-bottom: calc(var(--dock-h) + 1.5rem);
}
img { max-width: 100%; }
a { color: var(--splash); text-decoration-thickness: .08em; text-underline-offset: .18em; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--splash); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--butter); color: #17131f; }
h1, h2, h3 { margin-top: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; text-wrap: balance; }
p { margin-top: 0; }

.wrap { width: min(100% - 2rem, 76rem); margin-inline: auto; }
.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 40; padding: .65rem .9rem; background: var(--butter); color: #17131f; font-weight: 700; border-radius: 8px; }
.skip-link:focus { top: 1rem; }

/* ---- Top bar ---- */
.bar { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--milk); text-decoration: none; }
.brand img { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 2px solid var(--edge); }
.brand b { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }
.brand b i { color: var(--tang); font-style: normal; }
.bar__nav { display: flex; gap: 1.1rem; margin-left: auto; }
.bar__nav a { color: var(--dim); font-size: .82rem; font-weight: 600; text-decoration: none; }
.bar__nav a:hover { color: var(--milk); }
.bar__nav a.is-active { color: var(--milk); text-decoration: underline; text-decoration-color: var(--tang); text-decoration-thickness: 2px; text-underline-offset: .5rem; }

/* ---- Store dock: fixed, on screen at every scroll position ---- */
.dock { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: .6rem; padding: .7rem max(1rem, env(safe-area-inset-left)) max(.7rem, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--void) 82%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--edge); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.1rem; padding: .6rem 1.4rem; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: .95rem; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; flex: 1; max-width: 17rem; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
@media (max-width: 420px) { .dock .cta { font-size: .84rem; padding-inline: .9rem; gap: .35rem; } }
.cta:hover { transform: translateY(-2px); }
.cta--etsy { background: var(--tang); color: #1c0e02; box-shadow: 0 .5rem 1.4rem rgba(255, 122, 26, .35); }
.cta--etsy:hover { filter: brightness(1.06); }
.cta--tiktok { background: #0b0a10; color: var(--milk); border: 1px solid var(--edge); box-shadow: -3px 0 14px rgba(47, 214, 195, .35), 3px 0 14px rgba(255, 61, 142, .35); }
.cta--tiktok:hover { box-shadow: -3px 0 20px rgba(47, 214, 195, .5), 3px 0 20px rgba(255, 61, 142, .5); }

/* ---- Storefront: rail + product wall ---- */
.storefront { display: grid; grid-template-columns: minmax(15rem, 19rem) 1fr; gap: 1.6rem; align-items: start; padding-block: .8rem 2.2rem; }
.rail { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .9rem; }
.rail img { width: 6.4rem; height: 6.4rem; border-radius: 22px; border: 2px solid var(--edge); }
.rail h1 { margin: 0; font-size: clamp(2rem, 3.4vw, 2.6rem); }
.rail h1 i { color: var(--tang); font-style: normal; }
.tag { margin: 0; color: var(--dim); font-size: .95rem; max-width: 24ch; text-wrap: pretty; }
.store-ctas { display: flex; flex-direction: column; gap: .6rem; margin-top: .3rem; }
.store-ctas .cta { max-width: none; flex: none; }
.follow { display: flex; flex-wrap: wrap; gap: .4rem; }
.text-link { color: var(--dim); font-size: .8rem; font-weight: 600; text-decoration: none; padding: .35rem .7rem; border: 1px solid var(--edge); border-radius: 999px; }
.text-link:hover { color: var(--milk); border-color: var(--splash); }
.rail-note { color: var(--dim); font-size: .78rem; }
.rail-note a { color: var(--dim); }

.wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.page-home .bar .brand { display: none; }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); background: var(--panel); color: var(--milk); text-decoration: none; border: 1px solid var(--edge); transition: transform .18s ease, border-color .18s ease; }
.tile:hover { transform: translateY(-3px); border-color: var(--splash); }
.tile img { display: block; width: 100%; flex: 1; min-height: 0; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 96%; background: var(--photo); }
.tile--featured { grid-column: span 2; grid-row: span 2; }
.tile--featured img { aspect-ratio: 1 / 1; }
.tile--wide { grid-column: span 2; }
.tile--wide img { aspect-ratio: 2 / 1; }
.tile__meta { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .6rem .8rem .7rem; }
.tile__meta b { font-family: var(--display); font-weight: 700; font-size: .92rem; letter-spacing: -.01em; line-height: 1.15; }
.tile--featured .tile__meta b { font-size: 1.25rem; }
.tile__meta i { font-style: normal; font-family: var(--display); font-weight: 800; font-size: .8rem; color: #17131f; background: var(--butter); padding: .18rem .5rem; border-radius: 999px; white-space: nowrap; }
.tile__badge { position: absolute; top: .7rem; left: .7rem; z-index: 1; padding: .32rem .7rem; background: var(--candy); color: #fff; font-family: var(--display); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; rotate: -3deg; box-shadow: 0 .3rem .9rem rgba(255, 61, 142, .4); }
.tile--more { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1.2rem; background: linear-gradient(120deg, var(--panel-up), var(--panel)); }
.tile--more b { font-family: var(--display); font-weight: 800; font-size: 1.1rem; line-height: 1.15; }
.tile--more span { color: var(--splash); font-weight: 600; font-size: .85rem; white-space: nowrap; }

/* ---- Section labels ---- */
.section-label { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 .9rem; }
.section-label h2 { margin: 0; font-size: 1.25rem; }
.section-label small { color: var(--dim); font-size: .78rem; font-weight: 600; }
.section-label a { margin-left: auto; font-size: .82rem; font-weight: 600; text-decoration: none; }
.section-label a:hover { text-decoration: underline; }

/* ---- Amazon picks shelf ---- */
.picks { padding-block: 0 2rem; }
.shelf { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(15rem, 1fr); gap: .7rem; overflow-x: auto; padding-bottom: .4rem; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.pick { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); scroll-snap-align: start; }
.pick h3 { margin: 0; font-size: 1rem; font-weight: 700; }
.pick p { margin: 0; color: var(--dim); font-size: .84rem; flex: 1; text-wrap: pretty; }
.pick .arrow-link { margin-top: .3rem; }
.picks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .7rem; }
.arrow-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--tang); font-size: .84rem; font-weight: 700; text-decoration: none; }
.arrow-link:hover { color: var(--butter); }
.quiet-link { display: inline-flex; align-items: center; gap: .45rem; color: var(--milk); font-size: .88rem; font-weight: 600; }
.micro-note { margin: .8rem 0 0; color: var(--dim); font-size: .72rem; max-width: 60ch; }
.micro-note a { color: var(--dim); }

/* ---- First-party workshop context ---- */
.home-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: .7rem; padding-block: 0 2.2rem; }
.home-story__lead, .story-note { padding: 1.2rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); }
.home-story__lead { background: linear-gradient(135deg, var(--panel-up), var(--panel)); }
.home-story__lead h2 { margin-bottom: .8rem; font-size: clamp(1.5rem, 3vw, 2rem); }
.home-story__lead h2 em { color: var(--tang); font-style: normal; }
.home-story__lead > p:not(.eyebrow) { color: var(--dim); font-size: .9rem; text-wrap: pretty; }
.home-story__notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.story-note { display: flex; flex-direction: column; }
.story-note h3 { margin: 0 0 .6rem; font-size: 1.08rem; }
.story-note > p:not(.eyebrow) { color: var(--dim); font-size: .84rem; text-wrap: pretty; flex: 1; }

/* ---- Buttons (articles, 404) ---- */
.button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .6rem 1.2rem; border-radius: 999px; background: var(--tang); color: #1c0e02; font-family: var(--display); font-weight: 800; font-size: .88rem; text-decoration: none; transition: transform .15s ease, filter .15s ease; }
.button:hover { transform: translateY(-2px); filter: brightness(1.06); }
.button--small { min-height: 2.5rem; padding: .45rem 1rem; font-size: .8rem; }

/* ---- Subpage heads, guides, articles, legal ---- */
.page-hero { padding-block: 2.2rem 1.6rem; }
.page-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 16ch; }
.page-hero h1 em { color: var(--tang); font-style: normal; }
.eyebrow { margin: 0 0 .6rem; color: var(--splash); font-family: var(--display); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow--coral { color: var(--candy); }
.lede { margin: 0; color: var(--dim); font-size: clamp(1rem, 2vw, 1.15rem); max-width: 44rem; text-wrap: pretty; }
.section { padding-block: 1.4rem 2.6rem; }
.disclosure-callout { margin-bottom: 1.4rem; padding: .9rem 1.1rem; border: 1px solid var(--edge); border-left: 4px solid var(--splash); border-radius: 10px; background: var(--panel); color: var(--dim); font-size: .84rem; }
.disclosure-callout strong { color: var(--milk); }
.disclosure-callout--strong { border-left-color: var(--candy); }
.disclosure-callout p { margin: .4rem 0 0; color: var(--milk); font-size: .95rem; }

.guide-list { display: grid; gap: .7rem; }
.guide-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.2rem 1.3rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); text-decoration: none; color: var(--milk); transition: transform .18s ease, border-color .18s ease; }
.guide-row:hover { transform: translateY(-2px); border-color: var(--splash); }
.guide-row--teal:hover { border-color: var(--candy); }
.guide-row h2 { margin: .1rem 0 .3rem; font-size: clamp(1.2rem, 3vw, 1.7rem); }
.guide-row p:not(.eyebrow) { margin: 0; color: var(--dim); font-size: .88rem; max-width: 46rem; }
.guide-row__number { display: none; }
.guide-row__arrow { color: var(--tang); font-size: 1.4rem; }

.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1rem; color: var(--dim); font-size: .74rem; }
.breadcrumbs a { color: var(--dim); text-decoration: none; }
.breadcrumbs a:hover { color: var(--milk); }
.breadcrumbs span[aria-current] { color: var(--milk); }
.article { padding-block: 1.4rem 3rem; }
.article-header { max-width: 46rem; padding-block: 1.2rem 2rem; }
.article-header h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
.article-header h1 em { color: var(--tang); font-style: normal; }
.article-layout { display: grid; grid-template-columns: 12rem minmax(0, 40rem); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.article-aside { position: sticky; top: 1rem; display: grid; gap: .55rem; }
.article-aside a { color: var(--dim); font-size: .78rem; text-decoration: none; }
.article-aside a:hover { color: var(--splash); }
.prose { font-size: 1rem; line-height: 1.75; }
.prose p { margin-bottom: 1.25rem; }
.prose h2 { margin-top: 2.4rem; font-size: 1.55rem; }
.prose h2[id], .prose h3[id] { scroll-margin-block-start: 1.25rem; }
.prose a { color: var(--splash); font-weight: 600; }
.prose ul, .prose ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .5rem; }
.pull-quote { margin: 1.8rem 0; padding: 1.1rem 1.2rem; border-left: 4px solid var(--splash); border-radius: 8px; background: var(--panel); color: var(--milk); font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.35; }
.pull-quote--coral { border-color: var(--candy); }
.article-cta { margin-top: 2.2rem; padding: 1.2rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); }
.article-cta h3 { max-width: 24ch; margin: .2rem 0 1rem; font-size: 1.2rem; }

.about-grid { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.about-avatar { margin: 0; }
.about-avatar img { display: block; width: 100%; height: auto; border-radius: 22px; border: 2px solid var(--edge); }
.about-avatar figcaption { margin-top: .8rem; color: var(--dim); font-size: .74rem; }
.social-links { display: flex; flex-wrap: wrap; gap: .45rem; }
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.35rem; margin-top: 2rem; }
.not-found { min-height: 45vh; padding-block: 4rem; }
.not-found h1 { font-size: clamp(2.2rem, 6vw, 4rem); max-width: 14ch; }
.not-found h1 em { color: var(--tang); font-style: normal; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.6rem; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1rem 2.4rem; padding: 1.3rem; background: var(--panel); border: 1px solid var(--edge); border-radius: var(--radius); }
.cta-band h2 { margin: .2rem 0 0; font-size: 1.3rem; }

/* ---- Footer ---- */
.site-footer { margin-top: 1rem; padding-block: 1.6rem .4rem; border-top: 1px solid var(--edge); color: var(--dim); font-size: .8rem; }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; }
.footer-grid a { color: var(--dim); text-decoration: none; }
.footer-grid a:hover { color: var(--milk); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; margin-top: 1rem; font-size: .7rem; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .storefront { grid-template-columns: 1fr; gap: 1rem; padding-top: .3rem; }
  .rail { position: static; display: grid; grid-template-columns: auto 1fr; column-gap: .9rem; align-items: center; }
  .rail img { width: 3.6rem; height: 3.6rem; border-radius: 14px; grid-row: span 2; }
  .rail h1 { font-size: 1.5rem; }
  .tag { font-size: .84rem; max-width: none; }
  /* The dock carries the store links on small screens. */
  .store-ctas, .rail .follow, .rail-note { display: none; }
  .wall { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .tile--featured .tile__meta b { font-size: 1.05rem; }
  .article-layout { grid-template-columns: 1fr; gap: .8rem; }
  .article-aside { position: static; display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding-block: .6rem; border-block: 1px solid var(--edge); }
  .article-aside .eyebrow { width: 100%; margin: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .about-avatar { width: 10rem; }
  .home-story { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .home-story__notes { grid-template-columns: 1fr; } }
@media (min-width: 901px) {
  /* Desktop home already shows the CTAs in the rail; keep one set on screen. */
  .page-home .dock { display: none; }
  .page-home { padding-bottom: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ---- Modern enhancements; each degrades to nothing where unsupported. ---- */
@view-transition { navigation: auto; }
.lede, .tag, .prose p { text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) {
  .tile, .cta { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease, opacity .5s ease, translate .5s ease; }
  @starting-style {
    .tile, .dock .cta { opacity: 0; translate: 0 12px; }
  }
  @supports (animation-timeline: view()) {
    .pick, .guide-row { animation: rise-in linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}
@keyframes rise-in { from { opacity: .3; scale: .97; } }