/* ============================================
   Christine's Cards — shared design system
   ============================================ */
:root{
  --paper:#FDFBF6;
  --paper-2:#F6F1E9;
  --blush:#F1C7D3;
  --blush-deep:#E8A6B8;
  --sage:#93A97E;
  --sage-deep:#71875D;
  --mint:#C7E6D6;
  --lavender:#DED4EE;
  --ink:#3B342E;
  --ink-soft:#6B6259;
  --stamp:#C1584A;
  --line:#E4DCCE;
  --shadow: 0 18px 40px -20px rgba(59,52,46,0.35);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{ scrollbar-gutter:stable; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ font-family:'Fraunces', serif; font-weight:600; color:var(--ink); letter-spacing:-0.01em;}
.accent-script{ font-family:'Caveat', cursive; font-weight:600; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.wrap{ max-width:1180px; margin:0 auto; padding:0 28px; }

/* torn paper divider */
.torn{
  height:34px; width:100%; background:var(--paper);
  clip-path: polygon(0% 40%, 3% 10%, 6% 45%, 9% 15%, 12% 50%, 15% 20%, 18% 55%, 21% 10%, 24% 40%, 27% 15%, 30% 48%, 33% 20%, 36% 52%, 39% 12%, 42% 45%, 45% 18%, 48% 50%, 51% 22%, 54% 48%, 57% 15%, 60% 45%, 63% 20%, 66% 55%, 69% 10%, 72% 42%, 75% 18%, 78% 50%, 81% 22%, 84% 48%, 87% 15%, 90% 45%, 93% 20%, 96% 52%, 100% 25%, 100% 100%, 0% 100%);
}
.torn.flip{ transform: rotate(180deg); }
.torn.on-tone{ background:var(--paper-2); }

/* NAV */
header{ position:sticky; top:0; z-index:50; background:rgba(253,251,246,0.92); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); }
.announcement-bar{ position:relative; overflow:hidden; min-height:36px; background:var(--sage-deep); color:var(--paper); border-top:1px solid rgba(255,255,255,.14); }
.announcement-track{ position:relative; min-height:36px; max-width:1400px; margin:0 auto; }
.announcement-slide{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:7px 56px; text-align:center; font-size:13.5px; font-weight:600; letter-spacing:.01em; opacity:0; transform:translateX(32px); pointer-events:none; transition:opacity .42s ease, transform .42s ease; }
.announcement-slide.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; }
.announcement-slide.is-leaving{ opacity:0; transform:translateX(-32px); }
.announcement-slide a{ color:inherit; text-decoration:none; }
.announcement-slide a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion: reduce){ .announcement-slide{ transition:none; transform:none !important; } }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; padding-bottom:16px; }
.logo{ display:flex; align-items:center; gap:10px; }
.site-logo{ display:block; width:46px; height:46px; border-radius:50%; object-fit:cover; flex-shrink:0; }
footer .site-logo{ width:54px; height:54px; }
.logo-mark{ width:34px; height:34px; border-radius:50%; background:var(--stamp); display:flex; align-items:center; justify-content:center; color:var(--paper); font-family:'Fraunces',serif; font-weight:600; font-size:16px; transform:rotate(-8deg); box-shadow:0 4px 10px rgba(193,88,74,0.35); flex-shrink:0; }
.logo-text{ font-family:'Fraunces', serif; font-weight:600; font-size:20px; line-height:1.05; }
.logo-text span{ color:var(--sage-deep); }
.nav-links{ display:flex; gap:28px; font-size:15px; font-weight:500; }
.nav-links a{ position:relative; padding:4px 0; }
.nav-links a:hover, .nav-links a.active{ color:var(--stamp); }
.nav-cta{ background:var(--ink); color:var(--paper); padding:10px 20px; border-radius:100px; font-size:14px; font-weight:600; white-space:nowrap; }
.nav-cta:hover{ background:var(--sage-deep); }

/* BUTTONS */
.btn{ padding:13px 24px; border-radius:100px; font-weight:600; font-size:14.5px; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; border:none; font-family:'Work Sans', sans-serif; }
.btn-primary{ background:var(--sage-deep); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -8px rgba(113,135,93,0.55); }
.btn-outline{ border:1.5px solid var(--ink); color:var(--ink); background:transparent; }
.btn-outline:hover{ transform:translateY(-2px); background:var(--ink); color:var(--paper); }
.btn-ghost{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:4px; background:none; }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; }

/* PAGE HERO (used on interior pages) */
.page-hero{ padding:56px 0 40px; }
.eyebrow{ font-family:'Caveat', cursive; font-size:22px; color:var(--stamp); font-weight:600; margin-bottom:6px; display:inline-block; transform:rotate(-2deg); }
.page-hero h1{ font-size:44px; line-height:1.08; margin-bottom:14px; }
.page-hero p.lede{ font-size:17px; color:var(--ink-soft); max-width:640px; }

/* SECTION HEADS */
.section{ padding:56px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:32px; flex-wrap:wrap; gap:14px;}
.section-head h2{ font-size:32px; }
.section-head .sub{ font-family:'Caveat', cursive; color:var(--sage-deep); font-size:20px; }
.view-all{ font-weight:600; font-size:14px; border-bottom:1.5px solid var(--ink); padding-bottom:2px; }

/* CARDS (projects / blog / tutorials) */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.p-card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .18s ease, box-shadow .18s ease; }
.p-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.p-card .thumb{ aspect-ratio:5/4; overflow:hidden; position:relative; }
.p-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.p-card .thumb .tag{ position:absolute; top:12px; left:12px; background:var(--paper); padding:4px 12px; border-radius:100px; font-size:12px; font-weight:600; color:var(--sage-deep); }
.p-card .body{ padding:18px 20px 22px; }
.p-card .date{ font-size:12.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:6px; }
.p-card h3{ font-size:19px; margin-bottom:8px; }
.p-card p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:14px; }
.p-card .read{ font-size:13.5px; font-weight:600; color:var(--stamp); }

/* FILTER PILLS (archive / blog / tutorials) */
.filter-bar{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:34px; }
.pill{ padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-soft); background:var(--paper); cursor:pointer; }
.pill.active, .pill:hover{ border-color:var(--ink); color:var(--ink); }

/* CLASSES */
.class-list{ display:flex; flex-direction:column; gap:16px; }
.class-row{ display:grid; grid-template-columns: 90px 1fr auto; gap:22px; align-items:center; background:var(--paper); border:1px solid var(--line); border-radius:14px; padding:18px 22px; }
.class-date{ background:var(--mint); border-radius:10px; padding:10px 0; text-align:center; }
.class-date .d{ font-family:'Fraunces', serif; font-size:24px; font-weight:600; line-height:1; }
.class-date .m{ font-size:12px; text-transform:uppercase; letter-spacing:0.05em; color:var(--sage-deep); font-weight:600; }
.class-info h3{ font-size:18px; margin-bottom:4px; }
.class-meta{ font-size:13.5px; color:var(--ink-soft); display:flex; gap:14px; flex-wrap:wrap; }
.seats{ font-size:12.5px; font-weight:600; color:var(--stamp); margin-top:6px; display:inline-block; }
.class-actions{ text-align:right; }
.class-actions .price{ font-weight:600; margin-bottom:8px; }

/* NEWSLETTER band */
.newsletter{ background:var(--sage-deep); color:var(--paper); border-radius:24px; padding:52px 48px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:32px; align-items:center; }
.newsletter h2{ color:var(--paper); font-size:28px; margin-bottom:8px; }
.newsletter p{ color:rgba(253,251,246,0.85); font-size:15px; max-width:420px; }
.nl-form{ display:flex; gap:10px; }
.nl-form input{ flex:1; padding:13px 16px; border-radius:100px; border:none; font-family:'Work Sans'; font-size:14.5px; }
.nl-form button{ background:var(--stamp); color:var(--paper); border:none; padding:13px 22px; border-radius:100px; font-weight:600; font-size:14.5px; cursor:pointer; }

/* FOOTER */
footer{ padding:48px 0 30px; border-top:1px solid var(--line); }
.foot-grid{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; }
.foot-links{ display:flex; gap:26px; font-size:14px; color:var(--ink-soft); flex-wrap:wrap; }
.foot-links a:hover{ color:var(--stamp); }
.foot-note{ font-size:13px; color:var(--ink-soft); margin-top:18px; }

/* Washi tape + stamp accents (reusable) */
.washi{
  position:absolute; width:110px; height:34px;
  background: repeating-linear-gradient(45deg, var(--blush), var(--blush) 8px, var(--blush-deep) 8px, var(--blush-deep) 16px);
  opacity:0.9; box-shadow:0 3px 6px rgba(0,0,0,0.12);
}
.stamp-badge{
  width:96px; height:96px; border-radius:50%;
  border:2.5px dashed var(--stamp);
  display:flex; align-items:center; justify-content:center;
  text-align:center; font-family:'Caveat', cursive; font-weight:600;
  color:var(--stamp); font-size:15px; line-height:1.15;
  background:rgba(253,251,246,0.9);
}

@media (max-width: 880px){
  .card-grid{ grid-template-columns:1fr 1fr; }
  .newsletter{ grid-template-columns:1fr; padding:36px 26px; }
  .nav-links{ display:none; }
  .page-hero h1{ font-size:34px; }
  .class-row{ grid-template-columns:70px 1fr; }
  .class-actions{ grid-column:1/-1; text-align:left; margin-top:6px; }
}
@media (max-width:560px){
  .card-grid{ grid-template-columns:1fr; }
}

/* Responsive navigation and small-screen scaling */
.menu-toggle,
.mobile-shop-link{ display:none; }

@media (max-width: 1040px){
  .wrap{ padding-left:22px; padding-right:22px; }
  nav.wrap{ position:relative; min-height:68px; }
  .nav-links{
    display:none;
    position:absolute;
    top:calc(100% + 1px);
    left:22px;
    right:22px;
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:0 0 16px 16px;
    box-shadow:var(--shadow);
    padding:10px;
    gap:0;
    flex-direction:column;
    align-items:stretch;
    max-height:calc(100vh - 90px);
    overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
  }
  .nav-links a:hover,
  .nav-links a.active{ background:var(--paper-2); }
  .nav-cta{ display:none; }
  .mobile-shop-link{ display:block !important; background:var(--ink); color:var(--paper) !important; margin-top:4px; }
  .mobile-shop-link:hover{ background:var(--sage-deep) !important; color:var(--paper) !important; }
  .menu-toggle{
    display:flex;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:12px;
    background:var(--paper);
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
    flex-shrink:0;
  }
  .menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    border-radius:2px;
    background:var(--ink);
    transition:transform .18s ease, opacity .18s ease;
  }
  .menu-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .menu-toggle.open span:nth-child(2){ opacity:0; }
  .menu-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .page-hero{ padding:44px 0 32px; }
  .section{ padding:46px 0; }
  .section-head h2{ font-size:clamp(27px,4vw,32px); }
  .newsletter{ padding:34px 26px; }
  .foot-grid{ flex-direction:column; }
  .foot-links{ gap:12px 22px; }
}

@media (max-width: 700px){
  .wrap{ padding-left:18px; padding-right:18px; }
  nav.wrap{ padding-top:11px; padding-bottom:11px; min-height:62px; }
  .nav-links{ left:12px; right:12px; }
  .logo-text{ font-size:18px; }
  .logo-mark{ width:32px; height:32px; font-size:15px; }
  .menu-toggle{ width:40px; height:40px; }
  .page-hero{ padding:36px 0 26px; }
  .page-hero h1{ font-size:clamp(30px,9vw,38px); }
  .page-hero p.lede{ font-size:16px; }
  .section{ padding:38px 0; }
  .section-head{ align-items:flex-start; margin-bottom:24px; }
  .newsletter{ border-radius:18px; padding:28px 20px; }
  .newsletter h2{ font-size:24px; }
  .nl-form{ flex-direction:column; }
  .nl-form input,
  .nl-form button{ width:100%; }
  .class-row{ grid-template-columns:62px 1fr; gap:14px; padding:15px; }
  .class-actions{ grid-column:1/-1; }
  .foot-links{ flex-direction:column; gap:10px; }
  footer{ padding:38px 0 24px; }
}

@media (max-width: 480px){
  .wrap{ padding-left:14px; padding-right:14px; }
  .logo-text{ font-size:16px; }
  .logo{ gap:8px; }
  .btn{ width:100%; justify-content:center; }
  .btn-row{ flex-direction:column; }
  .p-card .body{ padding:16px 16px 20px; }
  .filter-bar{ gap:8px; }
  .pill{ padding:8px 14px; }
}

@media (max-width: 560px){
  .hero{ padding-top:42px !important; padding-bottom:48px !important; }
  .hero h1{ font-size:clamp(34px,10vw,40px) !important; }
  .hero-grid,
  .about-grid,
  .about-hero,
  .join-grid,
  .shop-hero{ gap:28px !important; }
  .shop-hero{ padding:26px 20px !important; border-radius:18px !important; }
  .join-copy h1{ font-size:clamp(32px,9vw,38px) !important; }
  .about-hero .intro{ font-size:17px !important; }
  .letter p{ font-size:15.5px !important; }
  .news-item{ gap:14px !important; }
  .news-date{ min-width:56px !important; padding:10px !important; }
  .news-body img{ max-width:100% !important; }
  .class-full{ padding:17px !important; }
}

/* Search / filter / sort controls used on content archive pages */
.archive-tools{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:16px;
  margin:0 0 28px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:16px;
}
.archive-tools label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  font-weight:700;
  color:var(--ink-soft);
}
.archive-tools input,
.archive-tools select{
  min-height:42px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  color:var(--ink);
  padding:9px 12px;
  font:inherit;
  font-size:14px;
}
.archive-tools input:focus,
.archive-tools select:focus{ outline:2px solid var(--mint); outline-offset:1px; }
.archive-search{ flex:1 1 220px; }
.archive-search input{ width:100%; }
.archive-reset{ min-height:42px; padding:9px 17px; }
.filter-count{ font-size:13px; color:var(--ink-soft); margin:-16px 0 22px; }
@media (max-width:700px){
  .archive-tools{ align-items:stretch; }
  .archive-tools label,
  .archive-tools .archive-reset{ width:100%; }
  .archive-tools input,
  .archive-tools select{ width:100%; }
}

@media (max-width: 560px){ .announcement-bar,.announcement-track{ min-height:40px; } .announcement-slide{ padding:7px 18px; font-size:12.5px; line-height:1.3; } }

/* ============================================
   Mobile polish + collapsible archive controls
   ============================================ */
body{ overflow-x:hidden; }

.archive-filter-panel{
  margin:0 0 28px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper-2);
  overflow:hidden;
}
.archive-filter-panel > summary{
  list-style:none;
  cursor:pointer;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 16px;
  font-weight:700;
  color:var(--ink);
  user-select:none;
}
.archive-filter-panel > summary::-webkit-details-marker{ display:none; }
.archive-filter-panel > summary::after{
  content:'+';
  width:28px;
  height:28px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  font-size:20px;
  line-height:1;
  color:var(--sage-deep);
  flex:0 0 auto;
}
.archive-filter-panel[open] > summary::after{ content:'−'; }
.archive-filter-panel .archive-tools{
  margin:0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
}

@media (max-width:1040px){
  header{ isolation:isolate; }
  nav.wrap{ position:static; z-index:3; }
  .announcement-bar{ z-index:1; }
  .nav-links{
    top:100%;
    z-index:80;
    border-radius:0 0 18px 18px;
    box-shadow:0 20px 45px -22px rgba(59,52,46,.5);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ min-height:46px; display:flex; align-items:center; }
  .menu-toggle{ position:relative; z-index:90; }
}

@media (max-width:700px){
  header{ background:rgba(253,251,246,.97); backdrop-filter:blur(12px); }
  nav.wrap{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .announcement-bar{ min-height:34px; }
  .announcement-track{ min-height:34px; }
  .announcement-slide{ min-height:34px; padding:6px 16px; font-size:12.5px; line-height:1.3; }
  .nav-links{
    left:10px;
    right:10px;
    max-height:calc(100dvh - 118px - env(safe-area-inset-bottom));
    padding:8px;
    overscroll-behavior:contain;
  }
  .nav-links a{ padding:11px 13px; font-size:15px; }
  .nav-links a + a{ margin-top:2px; }
  .mobile-shop-link{ margin-top:6px !important; justify-content:center; }
  .page-hero{ text-align:left; }
  .page-hero .lede{ max-width:46rem; }
  .archive-filter-panel{ border-radius:14px; margin-bottom:22px; }
  .archive-filter-panel:not([open]){ background:var(--paper); }
  .archive-filter-panel > summary{ min-height:50px; padding:13px 14px; }
  .archive-tools{ padding:14px; gap:10px; }
  .filter-count{ margin-top:-10px; }
  .card-grid{ gap:16px; }
  .p-card, .video-card, .class-full, .panel{ border-radius:14px; }
  .section{ padding-top:34px; padding-bottom:34px; }
  .foot-grid{ gap:22px; }
  .foot-note{ margin-top:22px; font-size:12px; line-height:1.5; }
}

@media (max-width:480px){
  .logo-text{ max-width:155px; line-height:1.05; }
  .page-hero h1{ line-height:1.04; }
  .eyebrow{ font-size:20px; }
  .archive-tools input,
  .archive-tools select{ min-height:46px; font-size:16px; }
  .archive-reset{ min-height:46px; }
  .announcement-slide{ padding-left:12px; padding-right:12px; }
}

/* Final responsive polish */
@media (max-width:1040px){
  .nav-links{
    position:fixed;
    left:clamp(12px,2.5vw,28px);
    right:clamp(12px,2.5vw,28px);
    top:auto;
    z-index:1000;
    border-radius:16px;
    max-height:calc(100dvh - 90px);
    overflow:auto;
    transform:translateY(-8px) scale(.985);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    display:flex;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  }
  .nav-links.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(8px) scale(1);
  }
}

/* Filter boxes are collapsed by default; details handles accessibility natively. */
.archive-filter-panel{ background:var(--paper); }
.archive-filter-panel > summary{ transition:background .18s ease, color .18s ease; }
.archive-filter-panel > summary:hover{ background:var(--paper-2); }
.archive-filter-panel .archive-tools{
  animation:filterPanelIn .22s ease both;
  transform-origin:top;
}
@keyframes filterPanelIn{
  from{ opacity:0; transform:translateY(-8px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .archive-filter-panel .archive-tools,
  .nav-links{ animation:none !important; transition:none !important; }
}

/* Keep all page content comfortably away from viewport edges. */
@media (max-width:700px){
  .wrap{ width:100%; max-width:none; padding-left:max(18px, env(safe-area-inset-left)); padding-right:max(18px, env(safe-area-inset-right)); }
  main.wrap, footer .wrap{ box-sizing:border-box; }
  .panel, .newsletter, .shop-hero, .class-full, .letter, .about-hero, .join-card{ max-width:100%; }
}
@media (max-width:480px){
  .wrap{ padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right)); }
}

/* Animated Filters panels */
.archive-filter-panel .archive-tools{
  overflow:hidden;
  will-change:max-height, opacity, transform;
}
.archive-filter-panel.is-animating > summary::after{ transition:transform .26s ease, background .2s ease; }
.archive-filter-panel[open] > summary::after{ transform:rotate(180deg); }
@media (prefers-reduced-motion: reduce){
  .archive-filter-panel .archive-tools,
  .archive-filter-panel > summary::after{ transition:none !important; animation:none !important; }
}

@media (max-width: 640px){
  .site-logo{ width:40px; height:40px; }
  footer .site-logo{ width:46px; height:46px; }
}