/* Homepage sections. Tokens live in tokens.css. */

.c-home{max-width:none;margin:0;padding:0}
.c-section{padding:56px 0}
/* Alternating bands so the page has rhythm instead of one flat colour. */
.c-section--band{background:var(--col-band)}





/* ---------- 1. HERO ---------- */
.c-hero{
  position:relative;padding:64px 0 34px;
  background:
    url("../img/sparkles.svg") center top / 640px 440px repeat,
    linear-gradient(180deg,#F7F0E0 0%,var(--col-cream) 58%);
}
.c-hero > .c-wrap{position:relative;z-index:1}
.c-hero--stack .c-wrap{max-width:900px;text-align:center}
/* The card row breaks out of the text column so the drawings lead. */
.c-hero--stack .c-polaroids{width:min(1040px,calc(100vw - 40px));margin-inline:calc(50% - min(520px,50vw - 20px))}
.c-hero__desc{max-width:600px}

.c-hero__title{
  font-size:clamp(2.15rem,5.6vw,3.75rem);line-height:1.1;
  letter-spacing:-.012em;margin:0 0 18px;font-weight:700
}
.c-hero__sub{
  font-family:var(--font-display);font-style:italic;font-weight:600;
  color:var(--col-muted);font-size:clamp(1.02rem,2.2vw,1.3rem);margin:0 0 6px
}
.c-hero__desc{
  max-width:620px;margin:6px auto 22px;font-weight:500;
  font-size:clamp(1rem,1.6vw,1.1rem);line-height:1.7;color:var(--col-text)
}
/* Tucked close under the buttons - it reads as a caption on them, not as its
   own block. The breathing room is all below it, in the hero's bottom padding,
   so the line never sits on the seam of the band that follows. */
.c-hero__trust{
  /* line-height matters more than margin here: the inherited 1.65 puts ~4px of
     half-leading above the glyphs, so a 6px margin still reads as a 10px gap.
     Tightening the line box is what actually lifts the text to the buttons. */
  margin:9px 0 0;font-size:.86rem;line-height:1.25;color:var(--col-muted)
}

/* polaroid row */
.c-polaroids{display:flex;gap:16px;justify-content:center;align-items:flex-start;flex-wrap:nowrap;padding:30px 0 22px}
.c-polaroid{
  background:var(--col-white);border:1px solid var(--col-border);border-radius:14px;
  padding:11px 11px 0;flex:1 1 0;min-width:0;max-width:205px;box-shadow:var(--shadow-card);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);text-decoration:none;display:block
}
.c-polaroid img{display:block;width:100%;height:auto;border-radius:8px}
.c-polaroid__label{
  display:block;text-align:center;font-weight:700;font-size:.85rem;font-family:var(--font-body);
  color:var(--col-heading);padding:10px 4px 12px;line-height:1.3
}
.c-polaroid:nth-child(1){transform:rotate(-4deg)}
.c-polaroid:nth-child(2){transform:rotate(3deg)}
.c-polaroid:nth-child(3){transform:rotate(-2deg)}
.c-polaroid:nth-child(4){transform:rotate(4deg)}
.c-polaroid:nth-child(5){transform:rotate(-3deg)}
.c-polaroid:hover{transform:rotate(0deg) translateY(-8px) scale(1.04);box-shadow:var(--shadow-lift);z-index:3}

/* ---------- 2. TRENDING ---------- */
/* Six circles fill the full section width on desktop; three fill the screen
   on a phone and the rest scroll sideways. Sizes are fractions of the row,
   not fixed pixels, so the circles grow with the container. */
.c-trend{
  display:flex;gap:24px;overflow-x:auto;
  padding:8px 2px 18px;scrollbar-width:thin;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch
}
.c-trend__item{
  flex:0 0 calc((100% - 120px) / 6);min-width:0;
  text-align:center;text-decoration:none;display:block;scroll-snap-align:center
}
.c-trend__ring{
  display:block;box-sizing:border-box;width:100%;aspect-ratio:1/1;
  border-radius:50%;padding:5px;
  background:var(--ring,var(--pill-green));
  transition:transform .25s var(--ease)
}
.c-trend__ring img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;
  border:4px solid var(--col-cream);display:block
}
.c-trend__item:hover .c-trend__ring{transform:translateY(-6px) scale(1.04)}
.c-trend__name{display:block;margin-top:13px;font-weight:700;font-size:.95rem;color:var(--col-heading)}
.c-trend__meta{display:block;margin-top:2px;font-size:.78rem;color:var(--col-muted)}

/* ---------- 3. BANNER ---------- */
.c-banner{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;
  background:var(--col-ink);
  border:1px solid var(--col-ink);border-radius:26px;padding:38px 40px;
  box-shadow:var(--shadow-raised)
}
/* Mirrored into the bottom-right corner: on a 1140px card the strip past the
   button is dead space, and the bright barrels are the one warm note on the
   purple. Hidden once the banner stacks and that corner is no longer free. */
.c-pencils--banner{
  right:-24px;bottom:-30px;width:158px;height:112px;transform:scaleX(-1)
}
.c-banner__media{flex:0 1 400px;min-width:240px}
.c-banner__media img{width:100%;height:auto;border-radius:16px;display:block;border:1px solid rgba(255,255,255,.25)}
.c-banner__body{flex:1 1 440px;min-width:260px}
.c-banner__num{font-size:clamp(1.75rem,4vw,2.6rem);line-height:1.12;margin:0 0 12px;font-weight:700;color:#fff}
.c-banner__text{color:rgba(255,255,255,.86);margin:0 0 22px}
.c-banner .c-eyebrow{color:var(--col-on-ink-muted)}
.c-banner .c-accent{color:var(--pill-yellow)}
.c-banner .c-carnet-count{color:#fff}
.c-banner .c-btn--primary{background:#fff;color:var(--col-ink)}
.c-banner .c-btn--primary:hover,.c-banner .c-btn--primary:focus{
  /* --col-ink on the yellow measured 4.15:1 */
  background:var(--pill-yellow);color:var(--col-ink-deep)
}
.c-carnet-count{font-weight:700;color:var(--col-accent-text)}

/* ---------- 4. CATEGORY GRID ---------- */
.c-cats{display:flex;flex-wrap:wrap;gap:20px}
.c-cat{
  flex:0 1 calc(20% - 16px);min-width:150px;background:var(--col-white);
  border:1px solid var(--col-border);border-radius:var(--radius-card);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  box-shadow:var(--shadow-card);
  transition:transform .26s var(--ease),box-shadow .26s var(--ease)
}
.c-cat:hover{transform:translateY(-7px);box-shadow:var(--shadow-lift)}
.c-cat__media{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--col-cream)}
.c-cat__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.c-cat:hover .c-cat__media img{transform:scale(1.05)}
.c-cat__body{padding:14px 14px 12px;flex:1;display:flex;flex-direction:column;gap:9px}
.c-cat__title{font-family:var(--font-display);font-size:1.02rem;font-weight:700;color:var(--col-heading);margin:0;line-height:1.2}
.c-cat__bar{height:4px;background:var(--pill,var(--pill-green))}

/* fan-out preview: three thumbnails peek from inside the card on hover */
.c-cat__fan{position:absolute;inset:auto 0 0 0;display:flex;justify-content:center;gap:6px;padding:0 10px 10px;
  opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none}
.c-cat:hover .c-cat__fan{opacity:1;transform:translateY(0)}
.c-cat__fan img{width:42px;height:56px;object-fit:cover;border-radius:6px;border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.16)}
.c-cat__fan img:nth-child(1){transform:rotate(-8deg)}
.c-cat__fan img:nth-child(3){transform:rotate(8deg)}

/* ---------- 5. AGE FILTER ---------- */
/* Four in one row. At 1140px that is 273px per card, and a side-by-side card
   (text left, art right) leaves a 127px text column - the description ran to
   four lines. So the row layout stacks: art on top, text under it. Below 820px
   there is room again and the card goes back to the poster shape.
   Each band passes its tint, wash and badge colour in as custom properties. */
.c-ages{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.c-age{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;
  background:var(--tint);border-radius:18px;
  padding:0 0 34px;text-decoration:none;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)
}
.c-age:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}

/* Art band. Each illustration carries its own coloured background, so a hard
   crop left a visible seam: the mask dissolves the bottom edge into the tint. */
/* order, not DOM order: the markup puts the text first because in the poster
   layout below 820px the art is absolutely positioned and order is irrelevant. */
.c-age__art{position:relative;order:-1;width:100%;height:150px;flex:0 0 auto;pointer-events:none}
.c-age__img{
  width:100%;height:100%;object-fit:cover;object-position:center 34%;display:block;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,transparent 100%)
}

.c-age__body{
  position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;
  padding:0 16px;margin-top:-14px
}
.c-age__badge{
  display:inline-flex;align-items:center;gap:5px;
  background:var(--badge);color:var(--badge-fg);
  font-family:var(--font-body);font-size:.72rem;font-weight:800;
  padding:4px 11px 4px 8px;border-radius:var(--radius-pill);margin:0 0 9px
}
.c-age__badge svg{flex:0 0 auto;width:13px;height:13px}

.c-age__head{display:flex;align-items:flex-start;gap:7px;margin:0 0 6px}
.c-age__title{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.12;
  color:var(--col-heading)
}
/* The strokes take the badge colour, which is the one saturated tone the card
   already carries - a fifth colour here would be noise. */
.c-age__sparks{flex:0 0 auto;margin-top:3px;width:18px;height:21px;color:var(--badge)}

.c-age__desc{
  display:block;font-size:.79rem;line-height:1.5;color:var(--col-text);
  margin:0 0 10px
}
.c-age__foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.c-age__swatch{display:block;flex:0 0 auto;width:32px;height:10px;opacity:.7}
.c-age__count{font-size:.75rem;font-weight:800;color:var(--col-accent-deep)}

/* .c-pencils itself lives in chrome.css - it is used outside the homepage.
   Each host only places it; the SVG knows nothing but how to draw itself. */
.c-age .c-pencils{left:-26px;bottom:-34px;width:104px;height:73px}

/* ---------- 6. ABOUT ---------- */
/* A white card on the tan band: the section is prose, and 800px of text on a
   flat background reads as a footnote rather than as part of the page. */
.c-about{
  position:relative;overflow:hidden;
  background:var(--col-white);border:1px solid var(--col-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-raised-warm);
  padding:40px 44px 64px
}
.c-about .c-lead{margin-bottom:34px;max-width:640px}
/* Top-right, the one corner this card leaves open: the lead is capped at 640px
   and the grid starts below it, so ~455x165 sits empty beside the heading.
   Flipped on both axes, so the points run down into the card rather than off it. */
.c-pencils--about{
  right:-26px;top:-32px;width:152px;height:107px;transform:scale(-1,-1)
}
/* The other end of the diagonal. */
.c-pencils--about2{
  left:-24px;bottom:-30px;width:132px;height:93px
}

/* Two columns rather than the single stack of the usual "about" block: six
   titled paragraphs in one column is a wall, and each of these is short enough
   to hold its own measure. */
.c-about__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 46px}
.c-about__title{
  font-family:var(--font-display);font-size:1.06rem;font-weight:800;
  color:var(--col-heading);margin:0 0 7px;line-height:1.3
}
.c-about__text{margin:0;color:var(--col-text);font-size:.96rem;line-height:1.72}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .c-cat{flex:0 1 calc(33.333% - 13.34px)}
  .c-banner{padding:26px;gap:24px}
  /* The stacked button only reaches x=197 of 359, so the corner is still free. */
  .c-pencils--banner{right:-20px;bottom:-24px;width:112px;height:79px}
}

/* Below the four-up row there is width to spare again, so the card returns to
   the poster shape: art down the right side, text beside it. */
@media (max-width:820px){
  .c-ages{grid-template-columns:1fr;gap:16px;max-width:560px;margin:0 auto}
  .c-age{
    display:block;min-height:186px;padding:18px 46% 32px 20px
  }
  .c-age__art{
    position:absolute;order:0;top:0;right:0;bottom:0;width:54%;height:auto;
    background:linear-gradient(90deg,transparent 0,var(--wash) 42%)
  }
  .c-age__img{
    object-position:center;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 42%);
            mask-image:linear-gradient(90deg,transparent 0,#000 42%)
  }
  .c-age__body{padding:0;margin-top:0}
  .c-age__desc{max-width:24ch}
  .c-age__foot{margin-top:0}
}
@media (max-width:460px){
  .c-ages{max-width:none}
  .c-age{min-height:168px;padding:15px 48% 30px 15px}
  .c-age__desc{font-size:.78rem;max-width:none}
  .c-age .c-pencils{left:-26px;bottom:-32px;width:98px;height:69px}
}

/* No hover on touch, so the fan-out preview is dead weight - hide it. */
@media (hover:none){
  .c-cat__fan{display:none}
  .c-polaroid:hover,.c-cat:hover,.c-age:hover{transform:none;box-shadow:var(--shadow-card)}
}

/* Horizontal rails get a fade on the right so it reads as scrollable. */
@media (max-width:760px){
  .c-trend{
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 88%,transparent 100%)
  }
}

@media (max-width:640px){
  .c-section{padding:34px 0}
  .c-wrap{padding:0 16px}

  /* Lead with the words, not the drawing: on a phone the headline must be
     the first thing on screen, with the sheet directly under it. */
  /* 4px left the trust line sitting on the seam of the band below it. */
  .c-hero{padding:28px 0 28px}
  .c-hero__title{font-size:2.05rem;margin-bottom:12px}
  .c-hero__sub{font-size:1rem}
  .c-hero__desc{font-size:.96rem;margin:4px auto 18px}
  .c-hero__trust{font-size:.8rem;margin-top:9px}

  .c-actions{gap:8px;flex-wrap:nowrap;align-items:stretch}
  /* Side by side on a phone too: equal halves, label wraps rather than
     forcing the pair onto separate rows. */
  .c-hero .c-actions--center .c-btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}
  .c-btn{padding:12px 12px;font-size:.85rem;line-height:1.25}

  /* Three across on a phone, five on desktop - no scrolling either way. */
  .c-polaroids{
    flex-wrap:nowrap;justify-content:center;align-items:flex-start;
    gap:7px;padding:22px 0 14px;overflow:visible
  }
  .c-polaroid{flex:1 1 0;width:auto;min-width:0;max-width:124px;padding:7px 7px 0}
  .c-polaroid:nth-child(n+4){display:none}
  .c-polaroid:nth-child(1){transform:rotate(-4deg)}
  .c-polaroid:nth-child(2){transform:rotate(2deg)}
  .c-polaroid:nth-child(3){transform:rotate(-3deg)}
  .c-polaroid__label{font-size:.74rem;padding:7px 2px 9px;line-height:1.25}

  .c-trend{gap:12px;padding-bottom:14px}
  .c-trend__item{flex:0 0 calc((100% - 24px) / 3)}
  .c-trend__ring{padding:4px}
  .c-trend__ring img{border-width:3px}
  .c-trend__name{font-size:.86rem;margin-top:10px}
  /* 11.5px at weight 400 was the smallest regular-weight text on the site.
     Every other label this size is 600-800 and uppercase. */
  .c-trend__meta{font-size:.78rem}

  .c-banner{padding:20px;border-radius:20px;gap:18px}
  .c-banner__num{font-size:1.5rem}
  .c-banner__text{font-size:.9rem}

  /* Two up. grow:0 matters: with grow:1 a lone card in the last row
     stretches across the full width. */
  .c-cat{flex:0 1 calc(50% - 5px);min-width:0}
  .c-cats{gap:10px;justify-content:flex-start}
  /* A category thumbnail identifies the theme - it does not need to show the
     whole sheet. Square crops cut this grid from ~2 screens to ~1.3. */
  .c-cat__media{aspect-ratio:1/1}
  .c-cat__body{padding:10px 11px 9px;gap:6px}
  .c-cat__title{font-size:.92rem;line-height:1.25}
  .c-pill{font-size:.72rem;padding:.26em .62em}

  .c-ages{gap:12px}
  .c-h2{font-size:1.35rem}
  .c-lead{font-size:.92rem;margin-bottom:18px}
}

@media (max-width:380px){
  .c-cat__title{font-size:.86rem}
  .c-sheet{max-width:100%}
}

@media (max-width:860px){
  /* Stacked, the heading wraps to within 63px of the right edge, so the top
     corner the motif used is gone. Extra bottom padding opens a new one. */
  .c-about{padding:30px 24px 62px}
  .c-pencils--about{
    right:auto;top:auto;left:-24px;bottom:-26px;
    width:108px;height:76px;transform:none
  }
  /* "A propos" only reaches x=108 of 359, so the strip beside it is open. */
  .c-pencils--about2{
    left:auto;bottom:auto;right:-24px;top:-28px;
    width:104px;height:73px;transform:scale(-1,-1)
  }
  .c-about__grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:520px){
  /* bottom padding keeps the corner the motif sits in - see the 860 block */
  .c-about{padding:24px 18px 56px;border-radius:16px}
  .c-about__title{font-size:1.02rem}
}

/* --- prose with in-sentence links -------------------------------------- */

/* The one block on this page where links live inside sentences. They are
   underlined on purpose - in running text, colour alone is not enough. */
.c-prose{max-width:660px;margin:0 auto;text-align:center}
.c-prose .c-h2{margin:0 0 18px}
.c-prose p{margin:0 0 16px;font-size:1.03rem;line-height:1.78;color:var(--col-text)}
.c-prose p:last-child{margin-bottom:0}

.c-hero__desc a,
.c-prose a{color:var(--col-accent-text);font-weight:600;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2.5px;
  text-decoration-color:color-mix(in srgb,var(--col-accent-solid) 45%,transparent);
  transition:text-decoration-color .12s ease}
.c-hero__desc a:hover,.c-prose a:hover,
.c-hero__desc a:focus-visible,.c-prose a:focus-visible{
  text-decoration-color:var(--col-accent-solid)}

@media (max-width:640px){
  .c-prose p{font-size:1rem;text-align:left}
  .c-prose{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .c-hero__desc a,.c-prose a{transition:none}
}