/* ==========================================================================
   Cutie Pie's Clay

   Design direction: San Francisco fog as the cool ground, fired clay as the
   warm objects sitting on it, International Orange reserved strictly for
   buy actions. Everything is built on a block grid with hard bevels and
   zero rounded corners.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */

/* Clay Pixel is Silkscreen with one glyph redrawn. Silkscreen Bold draws 4
   as a solid block with no counter, which reads as a 9 at price-tag size.
   On a shop whose three prices are $3, $4 and $5 that is not cosmetic.
   See tools/patch-font.py. Licence in fonts/OFL.txt.

   Pixelify Sans was the other candidate and is worse: its 5 is an S-shape
   indistinguishable from 8. */
@font-face {
  font-family: "Clay Pixel";
  src: url("fonts/claypixel-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clay Pixel";
  src: url("fonts/claypixel-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Karla";
  src: url("fonts/karla-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Fog: the cool ground everything sits on */
  --fog-0: #e9eeef;
  --fog-1: #d8e3e5;
  --fog-2: #b8c8cb;

  /* Slate: text and the deepest structure */
  --slate: #26343a;
  --slate-2: #55676e;

  /* Paper: the warm interior of every block */
  --paper: #faf7f3;
  --paper-2: #f0e9e1;

  /* Clay: fired terracotta, the material of the blocks themselves */
  --clay: #b06a4b;
  --clay-hi: #d9997a;
  --clay-lo: #7c4630;

  /* Bridge: International Orange. Buy actions only. Nothing else. */
  --bridge: #c93a12;
  --bridge-hi: #e8724a;
  --bridge-lo: #8a2408;

  /* Sun: one small warm highlight, used for price tags */
  --sun: #f2c14e;
  --sun-lo: #b98a1c;

  /* Structure */
  --bevel: 4px;
  --gap: 1rem;
  --container: 68rem;

  /* Type scale */
  --step--1: 0.82rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: 2.6rem;

  --display: "Clay Pixel", ui-monospace, monospace;
  --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --------------------------------------------------------------------------
   3. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fog-0);
  color: var(--slate);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.6;
  /* Faint block grid, so the page itself reads as graph paper */
  background-image:
    linear-gradient(var(--fog-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--fog-1) 1px, transparent 1px);
  background-size: 32px 32px, 32px 32px;
}

img, svg { max-width: 100%; display: block; }

img { image-rendering: pixelated; }

/* Clay Pixel is a caps-forward bitmap face and sets wide, so the display
   sizes here run smaller than a proportional face would want. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.6em;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.35rem, 6.5vw, 2.3rem); }
h2 { font-size: clamp(1.05rem, 4.4vw, 1.6rem); }
h3 { font-size: var(--step-0); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--bridge-lo); }

:focus-visible {
  outline: var(--bevel) solid var(--slate);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.section { padding: 3.5rem 0; }
.section--tight { padding: 2.25rem 0; }

.section__label {
  font-family: var(--display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--clay-lo);
  margin: 0 0 0.35rem;
}

/* --------------------------------------------------------------------------
   5. The block primitive

   Light on top and left, dark on bottom and right, plus a hard offset
   shadow. This is the whole visual language of the site.
   -------------------------------------------------------------------------- */

.block {
  background: var(--paper);
  border: var(--bevel) solid;
  border-color: var(--clay-hi) var(--clay-lo) var(--clay-lo) var(--clay-hi);
  box-shadow: var(--bevel) var(--bevel) 0 rgba(38, 52, 58, 0.16);
}

.block--fog {
  background: var(--fog-1);
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
}

/* --------------------------------------------------------------------------
   6. Buttons

   A button is a physical key. It sits proud, and pressing it pushes it
   into the page by exactly one bevel.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-size: var(--step-0);
  font-weight: 700;
  line-height: 1;
  padding: 0.85rem 1.15rem;
  border: var(--bevel) solid;
  cursor: pointer;
  text-decoration: none;
  background: var(--fog-1);
  color: var(--slate);
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
  box-shadow: var(--bevel) var(--bevel) 0 rgba(38, 52, 58, 0.18);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}

.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 rgba(38, 52, 58, 0.22); }

.btn:active {
  transform: translate(var(--bevel), var(--bevel));
  box-shadow: 0 0 0 rgba(38, 52, 58, 0);
  border-color: var(--fog-2) #fff #fff var(--fog-2);
}

/* The only International Orange on the page */
.btn--buy {
  background: var(--bridge);
  color: #fff;
  border-color: var(--bridge-hi) var(--bridge-lo) var(--bridge-lo) var(--bridge-hi);
  width: 100%;
}

.btn--buy:active { border-color: var(--bridge-lo) var(--bridge-hi) var(--bridge-hi) var(--bridge-lo); }

.btn--ghost { background: var(--paper); border-color: var(--clay-hi) var(--clay-lo) var(--clay-lo) var(--clay-hi); }
.btn--ghost:active { border-color: var(--clay-lo) var(--clay-hi) var(--clay-hi) var(--clay-lo); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #cfe0e4 0%, #e9eeef 62%, var(--fog-0) 100%);
  border-bottom: var(--bevel) solid var(--fog-2);
  padding-top: 2.5rem;
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-bottom: 0.5rem;
}

/* Stacked two-line lockup. Clay Pixel is wide enough that setting the name
   on one line either overflows a phone or shrinks past legibility. */
.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 7.5vw, 2.9rem);
  line-height: 1.15;
  color: var(--slate);
  margin: 0;
  /* Blocky offset shadow in clay, so the name reads as a stamped tile */
  text-shadow:
    0.09em 0.09em 0 var(--clay-hi),
    0.18em 0.18em 0 var(--clay-lo);
}

.wordmark span { display: block; }

/* The hook. A nine year old running a real business is what actually stops
   someone, more than the fact that the magnets are handmade, so it goes
   above the product line and is set larger than it. */
.hero__hook {
  max-width: 24ch;
  margin: 1.25rem auto 0.9rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.6vw, 1.65rem);
  line-height: 1.3;
  color: var(--clay-lo);
  text-wrap: balance;
}

.hero__pitch {
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  font-size: var(--step-0);
  color: var(--slate-2);
}

/* Price tiers, as three small blocks */
.tiers {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
}

/* The price tiles jump to the collection. Padding lives on the anchor so the
   whole tile is the hit area and the geometry is identical to before. */
.tier {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  background: var(--sun);
  color: var(--slate);
  border: var(--bevel) solid;
  border-color: #fbe3a3 var(--sun-lo) var(--sun-lo) #fbe3a3;
  transition: transform 80ms steps(2);
}

.tier a {
  display: block;
  padding: 0.5rem 0.9rem;
  color: inherit;
  text-decoration: none;
}

.tier:hover { transform: translate(-1px, -1px); }

.tier:active {
  transform: translate(2px, 2px);
  border-color: var(--sun-lo) #fbe3a3 #fbe3a3 var(--sun-lo);
}

/* Land the collection just below the top edge rather than flush against it */
#collection { scroll-margin-top: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* The signature: pixel San Francisco.

   On a wide screen the drawing shows in full at its natural 176:66 ratio.
   On a phone that would be a 146px sliver, so it gets a fixed height and
   the SVG crops from both sides instead ("slice" in the markup). Sutro
   Tower and the far bridge tower live outside the phone crop on purpose. */
.skyline {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px; /* seal the seam against the section below */
}

@media (max-width: 46rem) {
  .skyline { height: 210px; }
}

/* Fog bands drift behind the skyline */
.fogband { opacity: 0.55; }

@media (prefers-reduced-motion: no-preference) {
  .fogband--a { animation: drift 38s linear infinite; }
  .fogband--b { animation: drift 61s linear infinite reverse; }
  .fogband--c { animation: drift 47s linear infinite; }
}

@keyframes drift {
  from { transform: translateX(-40px); }
  to   { transform: translateX(40px); }
}

/* --------------------------------------------------------------------------
   8. Collection grid
   -------------------------------------------------------------------------- */

/* Two up on a phone, three up above that, and capped so six designs read as
   a considered set rather than a thin row of stamps on a wide screen. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 54rem;
}

@media (min-width: 46rem) {
  .grid { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
}

.card {
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 0;
  overflow: hidden;
}

.card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--paper-2);
  border-bottom: 3px solid var(--clay-hi);
}

.card__media img,
.card__media svg { width: 100%; height: 100%; object-fit: cover; }

/* Only appears when the count is genuinely low. Scarcity that is always on
   screen is just decoration, and stops meaning anything.

   Slate rather than orange: International Orange belongs to buy actions only,
   and a page with two competing oranges weakens both. */
.card__left {
  position: absolute;
  bottom: 0; left: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.68rem;
  padding: 0.25rem 0.45rem;
  background: var(--slate);
  color: var(--fog-0);
}

.card__price {
  position: absolute;
  top: 0; right: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-0);
  padding: 0.2rem 0.45rem;
  background: var(--sun);
  color: var(--slate);
}

.card__body {
  padding: 0.7rem 0.7rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.card__name {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-0);
  line-height: 1.25;
  margin: 0;
}

/* Most names are proper nouns now, so this is the only thing telling a
   buyer whether they are looking at a magnet or a keychain. */
.card__type {
  font-family: var(--display);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clay-lo);
  margin: 0;
}

.card__buy { margin-top: auto; }

/* Sold */
.card--sold { filter: saturate(0.25); }
.card--sold .card__media::after {
  content: "SOLD";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-2);
  letter-spacing: 0.1em;
  color: var(--paper);
  background: rgba(38, 52, 58, 0.66);
}

.sold-note {
  font-family: var(--display);
  font-size: var(--step--1);
  color: var(--slate-2);
  text-align: center;
  margin-top: auto;
  padding: 0.85rem 0;
}

.grid__empty {
  grid-column: 1 / -1;
  padding: 2rem;
  text-align: center;
  color: var(--slate-2);
}

/* --------------------------------------------------------------------------
   9. Story
   -------------------------------------------------------------------------- */

.story {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  padding: 1.5rem;
}

.story__avatar {
  width: 11rem;
  margin-inline: auto;
}

/* Set in the body face on purpose. Silkscreen is caps-only, and a
   three-line sentence in all caps reads as a wall rather than a voice. */
.story__quote {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-2);
  line-height: 1.35;
  color: var(--clay-lo);
  margin: 0 0 1rem;
  padding-left: 0.9rem;
  border-left: var(--bevel) solid var(--clay-hi);
}

/* The point of the whole project, so it gets its own block rather than
   being a fourth paragraph nobody reads. */
.challenge {
  margin-top: 1.5rem;
  padding: 1.1rem 1.2rem;
  background: var(--fog-1);
  border: var(--bevel) solid;
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
}

.challenge__label {
  font-family: var(--display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay-lo);
  margin: 0 0 0.5rem;
}

.challenge__text {
  font-family: var(--body);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--slate);
  margin: 0 0 0.6rem;
}

.challenge__note {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--slate-2);
  margin: 0;
}

@media (min-width: 42rem) {
  .story { grid-template-columns: 12rem 1fr; gap: 2rem; padding: 2rem; }
  .story__avatar { width: 100%; margin: 0; }
}

/* --------------------------------------------------------------------------
   10. Steps
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1rem;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}

.step {
  padding: 1rem 1.1rem;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.9rem;
  align-items: start;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--step-1);
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  background: var(--slate);
  color: var(--fog-0);
}

.step h3 { margin: 0 0 0.15rem; font-size: var(--step-0); }
.step p { font-size: var(--step--1); color: var(--slate-2); margin: 0; }

@media (min-width: 46rem) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   11. Custom orders and booth
   -------------------------------------------------------------------------- */

.panel { padding: 1.75rem 1.5rem; text-align: center; }
.panel p { max-width: 34rem; margin-inline: auto; color: var(--slate-2); }
.panel .btn { margin-top: 1rem; }

.booth__where {
  font-family: var(--display);
  font-size: var(--step-1);
  color: var(--slate);
  margin: 0.35rem 0;
}

/* --------------------------------------------------------------------------
   12. Modal
   -------------------------------------------------------------------------- */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 26rem;
  width: calc(100% - 2rem);
}

.modal::backdrop { background: rgba(38, 52, 58, 0.6); }

.modal__inner { padding: 0; }

.modal__head {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  padding: 0.9rem;
  background: var(--paper-2);
  border-bottom: 3px solid var(--clay-hi);
}

.modal__thumb { width: 4rem; height: 4rem; flex: none; border: 3px solid var(--clay-lo); }
.modal__thumb img, .modal__thumb svg { width: 100%; height: 100%; object-fit: cover; }

.modal__title { font-family: var(--display); font-weight: 700; font-size: var(--step-1); margin: 0; }
.modal__price { font-family: var(--display); font-size: var(--step-0); color: var(--clay-lo); margin: 0; }

.modal__close {
  margin-left: auto;
  align-self: flex-start;
  font-family: var(--display);
  font-size: var(--step-0);
  line-height: 1;
  padding: 0.4rem 0.55rem;
  background: var(--fog-1);
  border: 3px solid;
  border-color: #fff var(--fog-2) var(--fog-2) #fff;
  cursor: pointer;
}

.modal__body { padding: 1.1rem 0.9rem 1.2rem; }

.modal__step { margin-bottom: 1.25rem; }
.modal__step:last-child { margin-bottom: 0; }

.modal__steplabel {
  font-family: var(--display);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--clay-lo);
  margin: 0 0 0.5rem;
}

.modal__hint { font-size: var(--step--1); color: var(--slate-2); margin: 0.6rem 0 0; }

.paypal-slot { min-height: 3rem; }

.paypal-slot__fallback {
  font-size: var(--step--1);
  color: var(--slate-2);
  background: var(--fog-1);
  border: 3px dashed var(--fog-2);
  padding: 0.85rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */

.footer {
  border-top: var(--bevel) solid var(--fog-2);
  background: var(--fog-1);
  padding: 2rem 0 2.5rem;
  text-align: center;
  font-size: var(--step--1);
  color: var(--slate-2);
}

.footer__mark { width: 8rem; margin: 0 auto 0.9rem; }
.footer p { margin: 0.2rem 0; }