/*
Theme Name: WinterCotton
Theme URI: https://wintercotton.com
Description: The WinterCotton brand site. Warm neutral editorial, deep forest accent, asymmetric grid. Standalone theme — no parent required.
Author: WinterCotton
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.1
Text Domain: wintercotton
*/

/* ===== 1. Tokens ===================================================== */
:root{
  --wc-cream:#FBF8F3;  --wc-ivory:#F4EEE4;  --wc-oatmeal:#E7DFD2;
  --wc-taupe:#C6B8A5;  --wc-ink:#221E1A;    --wc-muted:#6E6358;
  --wc-forest:#2E4636; --wc-forest-deep:#1F3126; --wc-border:#E2D9CC;

  --wc-display:"Libre Bodoni",Georgia,"Times New Roman",serif;
  --wc-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wc-s1:8px; --wc-s2:16px; --wc-s3:24px; --wc-s4:32px;
  --wc-s5:48px; --wc-s6:64px; --wc-s7:96px;

  --wc-max:1280px;
  --wc-dur:400ms; --wc-ease:cubic-bezier(.22,.61,.36,1);
}

/* ===== 2. Reset-ish ================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--wc-cream); color:var(--wc-ink);
  font-family:var(--wc-body); font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
@media (max-width:767px){ body{ font-size:16px; } }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--wc-forest); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ color:var(--wc-forest-deep); }

h1,h2,h3,h4{ font-family:var(--wc-display); font-weight:500; line-height:1.12;
  letter-spacing:-.015em; margin:0 0 var(--wc-s3); color:var(--wc-ink); }
h1{ font-size:clamp(40px,6vw,64px); }
h2{ font-size:clamp(28px,3.6vw,44px); }
h3{ font-size:clamp(21px,2.2vw,28px); }
p{ margin:0 0 var(--wc-s3); }

.wc-eyebrow{
  font-family:var(--wc-body); font-size:12px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--wc-muted);
  margin:0 0 var(--wc-s2);
}
.wc-eyebrow--forest{ color:var(--wc-forest); }

.wc-wrap{ max-width:var(--wc-max); margin:0 auto; padding:0 var(--wc-s2); }
@media (min-width:900px){ .wc-wrap{ padding:0 var(--wc-s6); } }

.wc-skip{ position:absolute; left:-9999px; }
.wc-skip:focus{ left:var(--wc-s2); top:var(--wc-s2); z-index:999; background:var(--wc-forest);
  color:#fff; padding:12px 18px; border-radius:2px; }

:focus-visible{ outline:2px solid var(--wc-forest); outline-offset:3px; }

/* ===== 3. Buttons ==================================================== */
.wc-btn{
  display:inline-block; font-family:var(--wc-body); font-size:13px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; text-decoration:none;
  padding:16px 30px; border:1px solid var(--wc-forest); border-radius:2px;
  background:var(--wc-forest); color:var(--wc-cream);
  transition:background var(--wc-dur) var(--wc-ease), color var(--wc-dur) var(--wc-ease);
}
.wc-btn:hover{ background:var(--wc-forest-deep); border-color:var(--wc-forest-deep); color:var(--wc-cream); }
.wc-btn--ghost{ background:transparent; color:var(--wc-forest); }
.wc-btn--ghost:hover{ background:var(--wc-forest); color:var(--wc-cream); }

/* ===== 4. Masthead =================================================== */
.wc-masthead{ border-bottom:1px solid var(--wc-border); background:var(--wc-cream); }
.wc-masthead__inner{ display:flex; align-items:center; justify-content:space-between;
  gap:var(--wc-s3); padding-top:var(--wc-s3); padding-bottom:var(--wc-s3); }
.wc-wordmark{ font-family:var(--wc-display); font-size:25px; font-weight:500;
  letter-spacing:.02em; text-decoration:none; color:var(--wc-ink); white-space:nowrap; }
.wc-wordmark:hover{ color:var(--wc-forest); }
.wc-nav ul{ display:flex; gap:var(--wc-s4); list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.wc-nav a{ font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; color:var(--wc-ink); padding:6px 0; border-bottom:1px solid transparent;
  transition:border-color var(--wc-dur) var(--wc-ease), color var(--wc-dur) var(--wc-ease); }
.wc-nav a:hover,.wc-nav .current-menu-item > a{ color:var(--wc-forest); border-bottom-color:var(--wc-forest); }
@media (max-width:767px){
  .wc-masthead__inner{ flex-direction:column; align-items:flex-start; gap:var(--wc-s2); }
  .wc-nav ul{ gap:var(--wc-s3); }
  .wc-nav a{ font-size:12px; }
}

/* ===== 5. Hero (asymmetric 7/5) ====================================== */
.wc-hero{ padding:var(--wc-s7) 0 var(--wc-s6); }
.wc-hero__grid{ display:grid; gap:var(--wc-s5); align-items:center; }
@media (min-width:900px){
  .wc-hero__grid{ grid-template-columns:7fr 5fr; gap:var(--wc-s6); }
}
.wc-hero h1{ margin-bottom:var(--wc-s3); }
.wc-hero__lede{ font-size:clamp(18px,2vw,21px); color:var(--wc-muted); max-width:34em; }
.wc-hero__media{ position:relative; }
/* the offset forest block from the mockup */
.wc-hero__media::before{
  content:""; position:absolute; inset:auto -18px -18px auto;
  width:62%; height:62%; background:var(--wc-forest); border-radius:2px; z-index:0;
}
.wc-hero__media img{ position:relative; z-index:1; border-radius:2px; }
@media (max-width:899px){ .wc-hero__media::before{ inset:auto -10px -10px auto; } }

/* ===== 6. Sections =================================================== */
.wc-section{ padding:var(--wc-s7) 0; }
.wc-section--alt{ background:var(--wc-ivory); }
.wc-section__head{ max-width:46em; margin-bottom:var(--wc-s5); }
.wc-rule{ width:72px; height:1px; background:var(--wc-taupe); border:0; margin:0 0 var(--wc-s3); }

/* ===== 7. Pillars ==================================================== */
.wc-pillars{ display:grid; gap:var(--wc-s4); }
@media (min-width:768px){ .wc-pillars{ grid-template-columns:repeat(3,1fr); gap:var(--wc-s5); } }
.wc-pillar{ border-top:1px solid var(--wc-border); padding-top:var(--wc-s3); }
.wc-pillar h3{ margin-bottom:var(--wc-s2); }
.wc-pillar p{ color:var(--wc-muted); font-size:16px; margin-bottom:0; }

/* ===== 8. Guides grid (asymmetric) =================================== */
.wc-guides{ display:grid; gap:var(--wc-s5); }
@media (min-width:768px){ .wc-guides{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .wc-guides{ grid-template-columns:repeat(3,1fr); } }
.wc-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; }
.wc-card__media{ overflow:hidden; border-radius:2px; background:var(--wc-oatmeal); aspect-ratio:3/2; }
.wc-card__media img{ width:100%; height:100%; object-fit:cover;
  transition:transform 250ms var(--wc-ease); }
.wc-card:hover .wc-card__media img{ transform:scale(1.03); }
.wc-card h3{ font-size:22px; margin:var(--wc-s3) 0 var(--wc-s1); }
.wc-card:hover h3{ color:var(--wc-forest); }
.wc-card__meta{ font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--wc-muted); }
/* break the rhythm on the first card at wide sizes */
@media (min-width:1024px){
  .wc-guides--feature .wc-card:first-child{ grid-column:span 2; }
  .wc-guides--feature .wc-card:first-child .wc-card__media{ aspect-ratio:2/1; }
  .wc-guides--feature .wc-card:first-child h3{ font-size:30px; }
}

/* ===== 9. Split band ================================================= */
.wc-split{ display:grid; gap:var(--wc-s5); align-items:center; }
@media (min-width:900px){ .wc-split{ grid-template-columns:5fr 7fr; gap:var(--wc-s6); } }
.wc-split--flip .wc-split__media{ order:2; }
@media (max-width:899px){ .wc-split--flip .wc-split__media{ order:0; } }
.wc-split__media img{ border-radius:2px; }

/* ===== 10. Footer ==================================================== */
.wc-footer{ background:var(--wc-forest); color:var(--wc-cream); padding:var(--wc-s6) 0 var(--wc-s4);
  margin-top:var(--wc-s7); }
.wc-footer a{ color:var(--wc-cream); text-decoration:none; }
.wc-footer a:hover{ color:var(--wc-cream); text-decoration:underline; }
.wc-footer__grid{ display:grid; gap:var(--wc-s5); }
@media (min-width:768px){ .wc-footer__grid{ grid-template-columns:2fr 1fr 1fr; } }
.wc-footer__wordmark{ font-family:var(--wc-display); font-size:25px; display:block;
  margin-bottom:var(--wc-s2); }
.wc-footer__blurb{ color:#D8D2C6; font-size:16px; max-width:32em; }
.wc-footer h4{ font-family:var(--wc-body); font-size:12px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:#B9C4BB; margin:0 0 var(--wc-s2); }
.wc-footer ul{ list-style:none; margin:0; padding:0; }
.wc-footer li{ margin-bottom:10px; font-size:15px; }
.wc-footer__base{ border-top:1px solid rgba(251,248,243,.18); margin-top:var(--wc-s5);
  padding-top:var(--wc-s3); font-size:13px; color:#B9C4BB; }
.wc-footer__base p{ margin:0 0 var(--wc-s1); }

/* ===== 11. Page / article body ======================================= */
.wc-page{ padding:var(--wc-s6) 0; }
.wc-page__head{ max-width:48em; margin-bottom:var(--wc-s5); }
.wc-prose{ max-width:680px; }
.wc-prose h2{ margin-top:var(--wc-s6); }
.wc-prose h3{ margin-top:var(--wc-s5); }
.wc-prose ul,.wc-prose ol{ margin:0 0 var(--wc-s3); padding-left:1.3em; }
.wc-prose li{ margin-bottom:10px; }
.wc-prose blockquote{ margin:var(--wc-s4) 0; padding-left:var(--wc-s3);
  border-left:2px solid var(--wc-forest); color:var(--wc-muted); font-style:italic; }
.wc-prose table{ width:100%; border-collapse:collapse; margin:0 0 var(--wc-s4); font-size:16px; }
.wc-prose th,.wc-prose td{ text-align:left; padding:12px 10px; border-bottom:1px solid var(--wc-border); }
.wc-prose th{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--wc-muted); }

/* ===== 12. Disclosure ================================================ */
.wc-disclosure{ background:var(--wc-ivory); border-left:2px solid var(--wc-taupe);
  padding:var(--wc-s3); font-size:14px; color:var(--wc-muted); margin:var(--wc-s5) 0 0; }
.wc-disclosure p:last-child{ margin-bottom:0; }

/* ===== 13. Motion ==================================================== */
.wc-reveal{ opacity:0; transform:translateY(24px); }
.wc-reveal.is-in{ opacity:1; transform:none;
  transition:opacity var(--wc-dur) var(--wc-ease), transform var(--wc-dur) var(--wc-ease); }
@media (prefers-reduced-motion:reduce){
  .wc-reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}