/* ==========================================================================
   Kawaii Crochet and Crafts — shared styles
   --------------------------------------------------------------------------
   One file for the plumbing every page needs: colour, type, forms, buttons,
   panels. Individual pages add a theme on top by setting --accent and
   --accent-soft, so the mug page can feel different from the crochet page
   without either of them carrying its own copy of the form CSS.

   The idea underneath the design: everything here is built from repeated
   small units — crochet stitches, print layers, filament lines, the colour
   bands on a plate. The stitch texture is that idea made visible, and it is
   the only decoration on the site that isn't a photograph.
   ========================================================================== */

:root{
  /* This page is light by design. Without this, browsers with automatic dark
     mode invert the whole thing — backgrounds and text flip while SVG and
     photographs keep their colours, which looks broken rather than dark. */
  color-scheme: light;

  /* Ground and surfaces. Milk pink rather than cream — warmer than white,
     and it keeps photographs of yarn and printed plastic looking right. */
  --milk:      #f5e1da;
  --milk-deep: #eed2c8;
  --card:      #fffaf7;
  --blush:     #ead0c6;

  /* Plum instead of near-black. Softer against a pink ground, and it reads
     as considered rather than default. */
  --ink:       #40303a;
  --ink-soft:  #7d6b70;
  --hair:      #ddc4b9;

  /* Strawberry is the only thing that asks to be clicked. Butter and mint
     support; they never carry an action. */
  --accent:      #dd7189;
  --accent-deep: #c25a72;
  --accent-soft: #fbe8e6;
  --butter:      #f6cf93;
  --mint:        #9bcdb9;
  --sky:         #aec6e0;

  /* Radius varies with the size of the thing it's on. A button and a hero
     panel shouldn't share a corner. */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;

  /* Plum-tinted rather than grey, so shadows sit in the palette. */
  --lift:      0 2px 6px rgba(61,43,63,.06);
  --lift-hi:   0 10px 26px rgba(61,43,63,.13);

  --measure: 62ch;
  --page: 1360px;
}

*{ box-sizing: border-box }

html,body{ margin:0; padding:0 }

body{
  background-color: var(--milk);
  /* The ground is fabric, not paper. A faint stitch grid, large and low
     contrast — you notice it as texture rather than as a pattern, and the
     white cards lift off it. */
  /* Blossom petals, scattered and very pale — texture you feel rather than a
     pattern you look at. Two sizes at different offsets stops it reading as
     a grid. */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='180' viewBox='0 0 220 180'>\
<g fill='%23e3c5b9' opacity='.38'>\
<ellipse cx='30' cy='26' rx='9' ry='5.5' transform='rotate(-24 30 26)'/>\
<ellipse cx='150' cy='58' rx='8' ry='5' transform='rotate(38 150 58)'/>\
<ellipse cx='86' cy='118' rx='9.5' ry='5.5' transform='rotate(-52 86 118)'/>\
<ellipse cx='196' cy='142' rx='7.5' ry='4.5' transform='rotate(14 196 142)'/>\
<ellipse cx='118' cy='16' rx='7' ry='4' transform='rotate(62 118 16)'/>\
<ellipse cx='8' cy='150' rx='8' ry='5' transform='rotate(-8 8 150)'/>\
</g></svg>");
  background-size: 300px 250px;
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Nunito Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4{
  font-family: "Baloo 2", "Nunito Sans", system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin: 0;
}
h1{ font-size: clamp(2rem, 4.5vw, 2.9rem) }
h2{ font-size: 1.35rem }
h3{ font-size: 1.05rem }

p{ margin: 0 0 1rem; max-width: var(--measure) }
a{ color: inherit }

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- layout */

.wrap{ max-width: var(--page); margin: 0 auto; padding: 22px 28px 80px }
@media (max-width: 640px){ .wrap{ padding: 18px 18px 60px } }
.wrap--narrow{ max-width: 780px }

.back{
  display: inline-block; margin-bottom: 20px;
  font-size: .92rem; color: var(--ink-soft); text-decoration: none;
}
.back:hover{ color: var(--accent) }

/* The stitch. A row of little Vs, the shape a crochet stitch actually makes,
   used as a rule between sections and along the top of the hero. It is the
   site's one motif — everywhere else stays quiet. */
.stitch{
  height: 14px;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'>\
<path d='M1 12 L6 3 L11 12 L16 3 L21 12' fill='none' stroke='%23efd5cd' \
stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: repeat-x;
  background-size: 22px 14px;
}
.stitch--accent{
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='22' height='14' viewBox='0 0 22 14'>\
<path d='M1 12 L6 3 L11 12 L16 3 L21 12' fill='none' stroke='%23dd7189' \
stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------------------------------------------------------------- panels */

.panel{
  background: var(--card);
  border-radius: var(--r-lg);
  padding: 26px 28px;
  box-shadow: var(--lift);
  margin-bottom: 16px;
}
.panel > h2{ margin-bottom: .4rem }
.panel > h3{ margin: 1.4rem 0 .5rem }
.panel p:last-child{ margin-bottom: 0 }

.hint{ color: var(--ink-soft); font-size: .92rem }
.fine{ color: var(--ink-soft); font-size: .84rem; line-height: 1.5 }

.note{
  background: var(--accent-soft);
  border-radius: var(--r-md);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: .95rem;
}
.note p{ max-width: none }
.note p:last-child{ margin-bottom: 0 }
.note--mint{ background: #e4f4ee }
.note--butter{ background: #fff3d9 }

/* ----------------------------------------------------------- yes/no boxes */

.two{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 700px){ .two{ grid-template-columns: 1fr } }

.box{ background: var(--milk); border-radius: var(--r-md); padding: 16px 18px }
.box h3{ margin: 0 0 .5rem; font-size: .98rem }
.box ul{ margin: 0; padding-left: 20px; font-size: .92rem }
.box li{ margin-bottom: 6px }
.box--yes{ background: #e9f5f0 }
.box--no{ background: #fdeef2 }

/* -------------------------------------------------------------- controls */

label{ display: block; font-size: .92rem; font-weight: 600; margin-bottom: 6px }

input[type=text], input[type=email], input[type=tel], textarea, select{
  width: 100%;
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--hair);
  border-radius: var(--r-md);
  padding: 11px 13px;
  transition: border-color .15s;
}
input:hover, textarea:hover, select:hover{ border-color: #dcc7d1 }
input:focus, textarea:focus, select:focus{
  border-color: var(--accent); outline: none;
}
textarea{ resize: vertical; min-height: 104px; line-height: 1.55 }

.row{ display: flex; gap: 14px; flex-wrap: wrap }
.row > *{ flex: 1; min-width: 160px }
.field{ margin-bottom: 14px }

button, .button{
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 12px 26px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 2px 0 var(--accent-deep);
  transition: transform .12s, box-shadow .12s, background .15s;
}
button:hover:not(:disabled), .button:hover{
  background: var(--accent-deep);
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--accent-deep);
}
button:active:not(:disabled){ transform: translateY(2px); box-shadow: none }
button:disabled{ opacity: .45; cursor: not-allowed; box-shadow: none }

button.ghost{
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--hair);
}
button.ghost:hover{ background: var(--milk-deep); color: var(--ink) }
button.small{ padding: 8px 16px; font-size: .9rem }

.actions{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px }

.status{ font-size: .9rem; color: var(--ink-soft); margin-top: 10px; min-height: 22px }
.status.err{ color: #c0344f; font-weight: 600 }

.done{
  background: #e4f4ee;
  border-radius: var(--r-md);
  padding: 18px 20px;
  font-size: 1rem;
}

/* ----------------------------------------------------------- photo drops */

.drop{
  border: 2px dashed var(--hair);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 22px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over{ border-color: var(--accent); background: var(--accent-soft) }
.drop b{ display: block; font-size: .98rem; margin-bottom: 2px }
.drop span{ font-size: .86rem; color: var(--ink-soft) }

.shots{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px }
.shots figure{ margin: 0; position: relative }
.shots img{
  width: 84px; height: 84px; object-fit: cover;
  border-radius: var(--r-sm); display: block; border: 2px solid var(--hair);
}
.shots button{
  position: absolute; top: -7px; right: -7px;
  width: 22px; height: 22px; padding: 0; border-radius: 50%;
  font-size: .8rem; line-height: 1; box-shadow: none;
}

/* ---------------------------------------------------------------- prices */

.prices{ width: 100%; border-collapse: collapse; font-size: .95rem; margin: 4px 0 8px }
.prices th, .prices td{
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--hair); vertical-align: top;
}
.prices th{ font-weight: 600; width: 58%; font-size: .95rem }
.prices td{ font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700 }
.prices tr:last-child th, .prices tr:last-child td{ border-bottom: 0 }

/* ----------------------------------------------------------------- steps */

.steps{ list-style: none; padding: 0; margin: 0; counter-reset: s }
.steps li{
  counter-increment: s; position: relative;
  padding-left: 46px; margin-bottom: 18px; font-size: .96rem;
}
.steps li::before{
  content: counter(s);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--butter); color: var(--ink);
  font-family: "Baloo 2", sans-serif; font-weight: 600; font-size: .92rem;
  display: flex; align-items: center; justify-content: center;
}
.steps b{ display: block; margin-bottom: 1px; font-size: 1rem }
.steps li:last-child{ margin-bottom: 0 }

/* ---------------------------------------------------------------- footer */

.foot{
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--hair);
  color: var(--ink-soft); font-size: .88rem;
}
.foot a{ color: var(--ink-soft); text-decoration: none; margin-right: 18px }
.foot a:hover{ color: var(--accent) }
.foot p{ max-width: none }

/* ------------------------------------------------------------- utilities */

.tag{
  display: inline-block;
  font-size: .78rem; font-weight: 700;
  border-radius: 999px; padding: 4px 12px;
  background: var(--milk-deep); color: var(--ink-soft);
}
.tag--open{ background: #e4f4ee; color: #2c6d57 }
.tag--shut{ background: var(--accent-soft); color: var(--accent-deep) }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ------------------------------------------------------------- blossom */

/* A branch for the corner of a hero. Purely decorative, hidden from screen
   readers, and it sits behind the words rather than beside them. */
.sprig{
  position: absolute;
  pointer-events: none;
  opacity: .9;
}
.sprig--tr{ top: -4px; right: -30px; width: 300px }
/* The same drawing flipped, so the pair frames the centred headline rather
   than looking like two different branches. */
.sprig--tl{ top: -4px; left: -30px; width: 300px; transform: scaleX(-1) }
@media (max-width: 1080px){
  .sprig--tr, .sprig--tl{ width: 190px }
}
@media (max-width: 720px){
  .sprig--tl{ display: none }
  .sprig--tr{ width: 150px; opacity: .7 }
}

/* Where a photograph of blossom goes instead of the drawing. Give the image
   this class and it crops and fades into the panel rather than sitting on
   it as a hard rectangle. */
.bloom{
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  -webkit-mask-image: linear-gradient(100deg, transparent 38%, #000 82%);
          mask-image: linear-gradient(100deg, transparent 38%, #000 82%);
  opacity: .85; pointer-events: none;
}


/* --------------------------------------------------------------- bands */

/* Breaks out of .wrap to the window edges, then puts its own padding back so
   the content inside lines up with everything above and below it. */
.band{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(28px, calc(50vw - (var(--page) / 2) + 28px));
  padding-right: max(28px, calc(50vw - (var(--page) / 2) + 28px));
}
@media (max-width: 640px){
  .band{ padding-left: 18px; padding-right: 18px }
}
.band--blush{ background: var(--blush) }
.band--card{ background: var(--card) }
.band--milk{ background: var(--milk-deep) }

/* ------------------------------------------------------------- phones */
/* 16px in a field stops iPhones zooming the page when you tap into it, and
   44px is a comfortable size for a thumb. */
@media (max-width: 640px){
  input, select, textarea{ font-size: 16px }
}
@media (pointer: coarse){
  button, .btn, select, input[type="text"], input[type="email"], input[type="search"]{ min-height: 44px }
  .sw{ width: 40px; height: 40px }
}

/* ------------------------------------------------------------ galleries */
/* A grid of pictures. Until there is a real photo, a dashed tile says what
   will go there. "Example design" marks a mock-up rather than a photograph. */
.gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; margin-top:12px }
.gallery .frame{ aspect-ratio:1; border:2px dashed var(--hair); border-radius:14px; display:flex;
  align-items:center; justify-content:center; text-align:center; padding:12px; font-size:.85rem;
  color:var(--ink-soft); background:var(--card) }
.gallery figure{ margin:0; position:relative; aspect-ratio:1; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:inset 0 0 0 1px var(--hair) }
.gallery figure a{ display:block; height:100% }
.gallery figure img{ width:100%; height:100%; object-fit:cover; display:block }
.gallery figcaption{ position:absolute; left:8px; bottom:8px; background:rgba(64,48,58,.78); color:#fff;
  font-size:.72rem; padding:2px 9px; border-radius:999px }