/* Garabatos Hileños — shared styles.
   Linked by index.html and products.html. Edit here, both pages get it.
   (es/index.html is a standalone holding page and keeps its own inline styles.) */

:root{
  /* ---- palette sampled directly from the hoop logo ---- */
  --paper:#FFFEFB;
  --ink:#17150F;
  --ink-soft:#5B564A;
  --rose:#E28081;
  --rose-deep:#B8535A;
  --yellow:#EAC120;
  --green:#B8E5A6;
  --green-deep:#5A9159;
  --blue:#85AFFF;
  --blue-deep:#4A6FC4;
  --line:#E6E0D4;

  --display:"Fraunces",Georgia,serif;
  --body:"Karla",system-ui,-apple-system,sans-serif;
  --hand:"Caveat",cursive;

  --pad:clamp(20px,5vw,56px);
  --maxw:1180px;
}

*{box-sizing:border-box;}
/* clip, not hidden, in both places — `hidden` would break the sticky header.
   html needs it too: the hero image's sway rotates it a fraction past the edge
   around 900px, which body's clip alone doesn't stop from scrolling. */
html{-webkit-text-size-adjust:100%; overflow-x:clip;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* clip, not hidden — `hidden` here would break the sticky header */
  overflow-x:clip;
}
img{max-width:100%; display:block;}
a{color:inherit;}

h1,h2,h3{
  font-family:var(--display); font-weight:600; line-height:1.06;
  letter-spacing:-.02em; margin:0;
  font-variation-settings:"SOFT" 60,"WONK" 1;
}

.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}
/* jumping to #about, #contact etc. must clear the 76px sticky header */
section[id]{scroll-margin-top:92px;}
.eyebrow{
  font-family:var(--body); font-size:12.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
}
.note{font-family:var(--hand); font-size:21px; color:var(--rose-deep); line-height:1.3;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:15px; text-decoration:none;
  padding:13px 24px; border-radius:999px; border:2px solid var(--ink);
  background:none; color:var(--ink); transition:transform .16s ease, background .16s ease, color .16s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-fill{background:var(--rose); border-color:var(--rose-deep); color:#fff;}
.btn-fill:hover{background:var(--rose-deep);}
.btn-quiet:hover{background:var(--ink); color:var(--paper);}

/* ---------- the signature: a running stitch ---------- */
/* dashes are drawn as a real stroke so they animate like thread pulling through */
.stitch{display:block; width:100%; height:14px; overflow:visible; margin:4px 0 32px;}
.stitch path{
  fill:none; stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:14 13; stroke-dashoffset:270;
  transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1);
}
.stitch.sewn path{stroke-dashoffset:0;}

/* a stitched underline that sits behind a word in the headline */
.threaded{position:relative; white-space:nowrap;}
.threaded svg{
  position:absolute; left:-2%; bottom:-.14em; width:104%; height:.26em; overflow:visible;
}
.threaded path{
  fill:none; stroke:var(--rose); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:10 9; stroke-dashoffset:400;
  animation:sew 1.7s .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes sew{to{stroke-dashoffset:0;}}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,254,251,.93); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.bar{display:flex; align-items:center; justify-content:space-between; gap:18px; height:76px;}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none;}
.brand img{height:52px; width:auto;}
.brand b{
  font-family:var(--display); font-weight:700; font-size:19px; line-height:1.05;
  letter-spacing:-.02em; font-variation-settings:"SOFT" 60,"WONK" 1;
}
.brand span{display:block; font-family:var(--body); font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft);}

.menu{display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0;
  font-size:15px; font-weight:600;}
.menu a{text-decoration:none; padding-bottom:3px; position:relative;}
.menu a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--rose); transition:right .2s ease;
}
.menu a:hover::after{right:0;}
/* the page you're on keeps its underline drawn */
.menu a[aria-current="page"]::after{right:0;}

.tools{display:flex; align-items:center; gap:10px; flex:none;}
.lang{font-size:13px; padding:9px 15px; border-width:1.5px;}
.cart{font-size:14px; padding:10px 18px;}
.cart-count{
  display:inline-grid; place-items:center; min-width:21px; height:21px; padding:0 6px;
  border-radius:999px; background:var(--ink); color:var(--paper);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums;
}
.burger{display:none; width:44px; height:44px; border:none; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;}
.burger span{width:23px; height:2.5px; background:var(--ink); border-radius:2px;}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:1.02fr .98fr; align-items:center;
  gap:clamp(28px,5vw,64px); padding:clamp(36px,6vw,76px) 0 clamp(30px,5vw,56px);
}
.hero h1{font-size:clamp(40px,6.6vw,78px);}
.hero p.lede{font-size:clamp(17px,1.9vw,20px); color:var(--ink-soft); max-width:44ch; margin:22px 0 0;}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}
.hero-note{margin-top:22px; display:flex; align-items:center; gap:9px;}

/* min-width:0 — without it the grid track refuses to shrink below the
   logo's intrinsic pixel width and the hero overflows around 900px */
.hoop{position:relative; justify-self:center; width:100%; max-width:470px; min-width:0;}
.hero > *{min-width:0;}
.hoop img{width:100%; height:auto; animation:sway 7s ease-in-out infinite;}
@keyframes sway{
  0%,100%{transform:translateY(0) rotate(-1.1deg);}
  50%{transform:translateY(-11px) rotate(1.1deg);}
}
/* doodle flowers that drift around the hoop */
.petal{position:absolute; opacity:.85; animation:drift 9s ease-in-out infinite;}
/* offsets stay non-negative so the flowers can never push the page sideways */
.petal:nth-child(2){top:3%; left:1%; width:34px; animation-delay:-1.2s;}
.petal:nth-child(3){top:34%; right:1%; width:26px; animation-delay:-3.4s;}
.petal:nth-child(4){bottom:8%; left:2%; width:30px; animation-delay:-5.1s;}
@keyframes drift{
  0%,100%{transform:translateY(0) rotate(-8deg);}
  50%{transform:translateY(-16px) rotate(9deg);}
}

/* ---------- generic section rhythm ---------- */
.section{padding:clamp(48px,7vw,88px) 0;}
.section-head{max-width:60ch; margin-bottom:clamp(28px,4vw,44px);}
.section-head h2{font-size:clamp(30px,4.3vw,50px);}
.section-head p{color:var(--ink-soft); margin:16px 0 0; font-size:17.5px;}
/* opt-in centered variant — used by the two-card craft band and the shop invite */
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}

/* ---------- what I make: two crafts ---------- */
/* the running stitch above is the seam — no border needed on top */
.craft-band{background:#F4FAF1; border-bottom:1px solid var(--line);}
/* two cards — capped so they don't stretch into billboards on a wide screen,
   and centered in the band so the cap doesn't leave a hole on the right */
.crafts{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,28px);
  max-width:820px; margin-inline:auto;}
.craft{
  border:2px solid var(--ink); border-radius:22px; padding:28px 26px 30px;
  background:var(--paper); transition:transform .18s ease;
}
.craft:hover{transform:translateY(-4px);}
.craft svg{width:56px; height:56px; margin-bottom:16px;}
.craft h3{font-size:23px; margin-bottom:9px;}
.craft p{margin:0; color:var(--ink-soft); font-size:16px;}
.craft-es{display:block; font-family:var(--hand); font-size:19px; color:var(--rose-deep); margin-top:2px;}

/* ---------- shop invite (home page) ---------- */
/* stands in for the old mid-page product grid — sends people to products.html */
.invite{text-align:center; max-width:56ch; margin-inline:auto;}
.invite h2{font-size:clamp(30px,4.3vw,50px);}
.invite p{color:var(--ink-soft); margin:16px 0 0; font-size:17.5px;}
.invite .btn{margin-top:28px;}
.invite .note{margin-top:20px;}

/* ---------- products ---------- */
.grid-products{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.6vw,30px);}
.card{display:flex; flex-direction:column;}
.shot{
  aspect-ratio:4/5; border-radius:20px; overflow:hidden; position:relative;
  background:var(--paper); border:2px solid var(--ink); margin-bottom:16px;
}
.shot img{width:100%; height:100%; object-fit:cover;}
/* placeholder frame — delete .ph markup once real photos land */
.ph{
  position:absolute; inset:10px; border:2.5px dashed var(--line); border-radius:12px;
  display:grid; place-content:center; text-align:center; gap:6px; padding:16px;
}
.ph b{font-family:var(--body); font-size:12px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft);}
.ph i{font-family:var(--hand); font-style:normal; font-size:19px; color:var(--rose-deep);}
.card h3{font-size:21px;}
.card .desc{color:var(--ink-soft); font-size:15.5px; margin:7px 0 0;}
.row-price{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px;}
.price{font-family:var(--display); font-size:23px; font-weight:700; font-variant-numeric:tabular-nums;}

/* products page masthead — shorter than the home hero, no logo */
/* no width cap here — the cap is on the paragraph, so the headline gets the full
   column and doesn't strand "wall." alone on a second line */
.page-head{padding:clamp(38px,6vw,68px) 0 clamp(6px,2vw,14px);}
.page-head h1{font-size:clamp(34px,5vw,58px); text-wrap:balance;}
.page-head p{color:var(--ink-soft); font-size:clamp(17px,1.9vw,20px); margin:20px 0 0; max-width:52ch;}
.page-head .note{margin-top:18px;}

/* the small print under the catalog */
.terms{border-top:1px solid var(--line); margin-top:clamp(40px,5vw,60px); padding-top:26px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,3vw,40px);}
.terms p{margin:0; color:var(--ink-soft); font-size:15.5px;}
.terms b{color:var(--ink);}

/* ---------- storefront (shop/shop.css) ----------
   shop.css is deliberately plain so every client shop can look like itself.
   These are the Garabatos clothes: the same 2px ink outline, Fraunces names and
   rose buttons the rest of the site already wears. Set as custom properties on
   :root so they win — shop.css only ever reads them with var() fallbacks. */
:root{
  --cqs-accent:var(--rose);
  --cqs-accent-deep:var(--rose-deep);
  --cqs-accent-ink:#fff;
  --cqs-ink:var(--ink);
  --cqs-paper:var(--paper);
  --cqs-muted:var(--ink-soft);
  --cqs-line:var(--line);
  --cqs-radius:20px;
  --cqs-border:2px solid var(--ink);
  --cqs-shot-bg:var(--paper);
  /* Ella shoots square. The shared default is 4/5, and object-fit:cover would
     quietly crop ~10% off each side — enough to clip both hoops of the
     Heart(Break) pair. Change this only if the photos stop being 1:1. */
  --cqs-shot-ratio:1 / 1;
  --cqs-note-bg:#FCF7EE;
  --cqs-gap:clamp(18px,2.6vw,30px);
}
/* type can't come through custom properties — the display face has to be said */
.cqs-name,.cqs-price,.cqs-title,.cqs-total strong{
  font-family:var(--display); font-weight:600; letter-spacing:-.02em;
  font-variation-settings:"SOFT" 60,"WONK" 1;
}
.cqs-price,.cqs-total strong{font-weight:700;}
.cqs-grid{grid-template-columns:repeat(3,1fr);}
.cqs-btn{padding:13px 24px;}
@media (max-width:860px){
  .cqs-grid{grid-template-columns:1fr; gap:34px;}
}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(26px,4.5vw,58px); align-items:center;}
.portrait{aspect-ratio:4/5; border-radius:22px; border:2px solid var(--ink); position:relative; overflow:hidden;}
.about h2{font-size:clamp(28px,4vw,46px);}
.about p{color:var(--ink-soft); margin:18px 0 0;}

/* ---------- shipping ---------- */
.ship-band{background:#FCF7EE; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.ships{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,30px);}
.ship h3{font-size:19px; display:flex; align-items:baseline; gap:9px;}
.ship .amt{font-family:var(--display); font-size:30px; font-weight:700;}
.ship p{margin:7px 0 0; color:var(--ink-soft); font-size:15.5px;}

/* ---------- contact ---------- */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,28px);}
.chan{
  border:2px solid var(--ink); border-radius:20px; padding:26px 24px;
  text-decoration:none; display:block; transition:transform .18s ease, background .18s ease;
}
.chan:hover{transform:translateY(-4px); background:#FCF7EE;}
.chan .k{font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:8px;}
.chan .v{font-family:var(--display); font-size:20px; font-weight:600; word-break:break-word;}

/* ---------- footer ---------- */
footer{padding:clamp(38px,5vw,60px) 0 34px; border-top:1px solid var(--line);}
.foot{display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center;}
.foot p{margin:0; font-size:14.5px; color:var(--ink-soft);}
.foot a{color:var(--ink-soft);}

/* ---------- scroll reveal ----------
   Scoped to .js so the page stays fully visible if JavaScript never runs. */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.js .reveal.in{opacity:1; transform:none;}

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

@media (max-width:1000px){
  .menu{
    display:none; position:absolute; top:76px; left:0; right:0; flex-direction:column;
    gap:0; background:var(--paper); border-bottom:2px solid var(--ink); padding:6px var(--pad);
  }
  .menu.open{display:flex;}
  .menu li{width:100%; padding:13px 0; border-bottom:1px solid var(--line);}
  .burger{display:flex;}
}
/* header has to survive a 320px phone: let the brand shrink and drop the tagline */
@media (max-width:560px){
  .bar{gap:8px;}
  .brand{min-width:0;}
  .brand img{height:40px;}
  .brand b{font-size:16px;}
  .brand span{display:none;}
  .tools{gap:6px;}
  .lang,.cart{padding:8px 12px; font-size:12.5px;}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr; text-align:left;}
  .hoop{grid-row:1; max-width:330px;}
  .crafts,.grid-products,.ships,.contact-grid,.terms{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr;}
  .grid-products{gap:34px;}
  .terms{gap:18px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important;}
  .reveal{opacity:1; transform:none;}
  .stitch path,.threaded path{stroke-dashoffset:0 !important;}
}