/* Crochet Corner — crochetcorner.store
   Hand-built styles. Petal-blush boutique palette sampled from the brand badge. */

:root {
  --blush:      #fcf1f4;   /* logo disc */
  --canvas:     #fbf6f3;   /* warm paper */
  --canvas-2:   #f6e9ec;   /* section wash */
  --raspberry:  #a12a57;   /* "Crochet" script */
  --raspberry-d:#85204599;
  --rose:       #e9b8c5;   /* badge body */
  --ring:       #b96a87;   /* outer ring / dusty rose */
  --ink:        #3b2b2b;   /* "CORNER" wordmark */
  --muted:      #7a6468;   /* warm grey body */
  --line:       #e7d3d8;   /* hairline */
  --cream-card: #fffaf7;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script:"Caveat", "Segoe Script", cursive;

  --maxw: 1140px;
  --gut: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background-color: var(--canvas);
  /* faint, hand-drawn knit texture — gives the page a made-by-hand grain */
  background-image:
    radial-gradient(120% 80% at 78% -10%, #fde7ee 0%, rgba(253,231,238,0) 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22' viewBox='0 0 34 22'%3E%3Cpath d='M1 11 Q8.5 1 17 11 Q25.5 21 33 11' fill='none' stroke='%23a12a57' stroke-opacity='0.045' stroke-width='1.4'/%3E%3C/svg%3E");
  background-attachment: fixed, scroll;
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; line-height: 1.06; font-optical-sizing: auto; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); font-weight: 600; }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: 1.28rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1rem; color: var(--muted); }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ring);
  display: inline-flex; align-items: center; gap: 0.6em;
  margin: 0 0 1.1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--ring); opacity: .6; }

.script { font-family: var(--script); color: var(--raspberry); font-size: 1.45em; line-height: 1; font-weight: 600; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,246,243,0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.site-head.scrolled { border-bottom-color: var(--line); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 10px #a12a5722; }
.brand b { font-family: var(--serif); font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; }
.brand b span { color: var(--raspberry); }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav a { text-decoration: none; font-size: 0.93rem; font-weight: 500; color: var(--ink); opacity: .82; transition: opacity .2s, color .2s; }
.nav a:hover { opacity: 1; color: var(--raspberry); }
.nav .nav-cta { color: var(--raspberry); opacity: 1; }
@media (max-width: 620px) { .nav a:not(.nav-cta) { display: none; } }

/* ---------- buttons / store badges ---------- */
.badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: var(--ink); color: #fff;
  padding: 11px 18px 11px 15px; border-radius: 13px;
  text-decoration: none; line-height: 1.1;
  box-shadow: 0 6px 18px #3b2b2b1f;
  transition: transform .18s ease, box-shadow .18s ease;
}
.badge:hover { transform: translateY(-2px); box-shadow: 0 10px 24px #3b2b2b2b; }
.badge svg { width: 22px; height: 22px; flex: none; fill: #fff; }
.badge .b-sub { font-size: 0.64rem; letter-spacing: .12em; text-transform: uppercase; opacity: .72; display: block; }
.badge .b-main { font-size: 1.02rem; font-weight: 600; display: block; margin-top: 1px; }

.pill-note {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; color: var(--ring); font-weight: 500;
  background: #fff; border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 999px; margin-bottom: 1.4rem;
}
.pill-note .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--raspberry); box-shadow: 0 0 0 4px #a12a571f; }

/* ---------- stitch divider ---------- */
.stitch {
  height: 22px; border: 0; margin: 0;
  background: center/34px 22px repeat-x
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22' viewBox='0 0 34 22'%3E%3Cpath d='M1 11 Q8.5 1 17 11 Q25.5 21 33 11' fill='none' stroke='%23b96a87' stroke-opacity='0.55' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 80px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.hero h1 { margin-bottom: 1.2rem; }
.hero h1 em { font-style: normal; color: var(--raspberry); }
.hero .lead { font-size: 1.12rem; max-width: 30ch; margin-bottom: 1.8rem; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero .art { order: -1; } }

/* hero art: a fanned stack of "swatch" cards */
.art { position: relative; min-height: 360px; display: grid; place-items: center; }
.swatch {
  position: absolute; width: min(62%, 260px); aspect-ratio: 4/5;
  background: var(--cream-card); border-radius: 18px; padding: 12px;
  box-shadow: 0 18px 40px #a12a5722, 0 2px 6px #3b2b2b14;
  border: 1px solid #f1dfe4;
}
.swatch img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.swatch.s1 { transform: rotate(-8deg) translate(-22%, 6%); z-index: 1; }
.swatch.s2 { transform: rotate(5deg) translate(26%, -4%); z-index: 2; }
.swatch.s3 { transform: rotate(-1deg) translateY(2%); z-index: 3; }
.art .tag {
  position: absolute; z-index: 5; bottom: 4%; right: 2%;
  font-family: var(--script); color: var(--raspberry); font-size: 1.7rem;
  background: #fff; padding: 4px 16px; border-radius: 999px;
  box-shadow: 0 6px 16px #a12a5722; transform: rotate(-4deg);
}
@media (max-width: 520px) { .swatch { width: min(58%, 220px); } .art { min-height: 320px; } }

/* ---------- sections ---------- */
section { padding: clamp(54px, 8vw, 96px) 0; }
.section-head { max-width: 56ch; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head p { font-size: 1.06rem; margin-top: 0.9rem; }
.wash { background: var(--canvas-2); }

/* story */
.story .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.story .quote {
  font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.4; color: var(--ink); font-weight: 500; margin: 0 0 1rem;
}
.story .quote span { color: var(--raspberry); }
.story .sig { font-family: var(--script); font-size: 1.6rem; color: var(--ring); }
.story figure { margin: 0; }
.story .disc {
  width: min(78%, 320px); margin-inline: auto; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff 0%, var(--blush) 60%, #f6dde4 100%);
  display: grid; place-items: center; box-shadow: 0 24px 60px #a12a571f; padding: 14%;
}
.story .disc img { width: 100%; filter: drop-shadow(0 8px 18px #a12a5733); }
@media (max-width: 800px) { .story .wrap { grid-template-columns: 1fr; } .story figure { order: -1; } }

/* collection grid */
.collection-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); }
.card { background: var(--cream-card); border: 1px solid #f1dfe4; border-radius: 16px; padding: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px #a12a5718; }
.card .ph { aspect-ratio: 4/5; border-radius: 10px; overflow: hidden; background: var(--blush); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; }
.card .name { font-family: var(--serif); font-weight: 600; font-size: 1rem; margin: 12px 4px 2px; }
.card .meta { font-size: 0.82rem; color: var(--ring); margin: 0 4px 6px; }
@media (max-width: 820px) { .collection-grid { grid-template-columns: repeat(2, 1fr); } }
.more-line { margin-top: 1.6rem; font-family: var(--script); font-size: 1.5rem; color: var(--raspberry); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); counter-reset: step; }
.step { border-top: 2px solid var(--rose); padding-top: 18px; }
.step .n { font-family: var(--serif); font-size: 2.4rem; color: var(--raspberry); line-height: 1; display: block; margin-bottom: 10px; }
.step h3 { margin-bottom: 6px; }
.step p { margin: 0; font-size: 0.97rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 24px; } }

/* app section */
.app .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.app ul { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: 12px; }
.app li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); }
.app li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; stroke: var(--raspberry); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.phone {
  justify-self: center; width: min(260px, 76%); aspect-ratio: 9/19; border-radius: 38px;
  background: linear-gradient(160deg, #fff, var(--blush));
  border: 9px solid #2c2022; box-shadow: 0 28px 60px #3b2b2b33;
  display: grid; place-items: center; padding: 26px; position: relative;
}
.phone::before { content:""; position:absolute; top:14px; left:50%; transform:translateX(-50%); width:46%; height:18px; background:#2c2022; border-radius:0 0 12px 12px; }
.phone .screen { text-align: center; }
.phone .screen img { width: 96px; margin: 0 auto 14px; filter: drop-shadow(0 6px 14px #a12a5733); }
.phone .screen .t { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.phone .screen .s { font-family: var(--script); color: var(--raspberry); font-size: 1.25rem; }
@media (max-width: 820px) { .app .wrap { grid-template-columns: 1fr; } .app .phone { order: -1; } }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #f4e7ea; padding: clamp(46px, 6vw, 72px) 0 32px; }
.foot a { color: #f4e7ea; text-decoration: none; }
.foot .top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
.foot .brand b { color: #fff; }
.foot .brand b span { color: var(--rose); }
.foot .tagline { font-family: var(--script); color: var(--rose); font-size: 1.5rem; margin-top: 8px; }
.foot .cols { display: flex; gap: clamp(34px, 6vw, 72px); flex-wrap: wrap; }
.foot h4 { font-family: var(--sans); font-size: 0.74rem; letter-spacing: .18em; text-transform: uppercase; color: #c99fab; margin: 0 0 14px; font-weight: 600; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.foot ul a { opacity: .9; font-size: 0.95rem; }
.foot ul a:hover { opacity: 1; color: var(--rose); }
.foot .fine { margin-top: 40px; padding-top: 20px; border-top: 1px solid #ffffff1f; font-size: 0.82rem; color: #c99fab; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; }

/* ---------- legal pages ---------- */
.legal { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 100px); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 8px; }
.legal .updated { color: var(--ring); font-size: 0.9rem; margin-bottom: 2.4rem; }
.legal h2 { font-size: 1.25rem; margin: 2.4rem 0 0.7rem; }
.legal p, .legal li { color: #5a4a4c; }
.legal ul { padding-left: 1.2rem; margin: 0 0 1rem; }
.legal li { margin-bottom: 0.5rem; }
.legal .back { display: inline-flex; align-items: center; gap: 8px; color: var(--raspberry); text-decoration: none; font-weight: 500; margin-bottom: 2rem; }
.legal a.inline { color: var(--raspberry); }

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