/* Joyhdae site styles. Mobile first. See DESIGN.md for the plan behind these choices.
   Palette: Espresso, Linen, Dusty Rose, Gold (hex values from the original site). */
:root{
  --linen:#F6EFE5; --linen-deep:#EFE3D2; --white:#FFFDF9;
  --espresso:#2B1D14; --text:#3D2E22; --text-soft:#6B5847;
  --dusty-rose:#C79C92; --dusty-rose-deep:#B67F73; --gold:#B78B4E;
  /* darker versions of rose and gold for small text (the originals are too light on linen) */
  --rose-ink:#8A5649; --gold-ink:#7D5A1E;
  /* names the /partner page uses */
  --rose:var(--dusty-rose); --rose-text:var(--rose-ink); --gold-text:var(--gold-ink); --line:rgba(43,29,20,.16);

  --serif:'Playfair Display',Georgia,serif; --sans:'DM Sans',system-ui,sans-serif; --hand:'Reenie Beanie','Segoe Print',cursive;

  --r-xs:6px; --r-sm:12px; --r-md:20px; --r-lg:32px; --radius:20px;
  --arch:999px 999px 28px 28px / 520px 520px 28px 28px;
  --leaf:46px 130px 46px 130px;
  --blob:58% 42% 46% 54% / 46% 56% 44% 54%;

  --sh-1:0 1px 0 rgba(43,29,20,.07),0 2px 8px -3px rgba(43,29,20,.2);
  --sh-2:0 10px 22px -12px rgba(43,29,20,.38),0 2px 5px -1px rgba(43,29,20,.1);
  --sh-3:0 30px 46px -26px rgba(43,29,20,.55),0 8px 16px -8px rgba(43,29,20,.22);

  --grain:url(/assets/img/grain.svg);
  --torn-b:polygon(0 0,100% 0,100.0% calc(100% - 3.3px),97.73% calc(100% - 1.6px),95.45% calc(100% - 1.6px),93.18% calc(100% - 2.5px),90.91% calc(100% - 2.5px),88.64% calc(100% - 0.0px),86.36% calc(100% - 0.0px),84.09% calc(100% - 1.6px),81.82% calc(100% - 1.6px),79.55% calc(100% - 5.7px),77.27% calc(100% - 7.4px),75.0% calc(100% - 7.4px),72.73% calc(100% - 1.6px),70.45% calc(100% - 0.8px),68.18% calc(100% - 1.6px),65.91% calc(100% - 4.9px),63.64% calc(100% - 1.6px),61.36% calc(100% - 3.3px),59.09% calc(100% - 4.9px),56.82% calc(100% - 2.5px),54.55% calc(100% - 9.0px),52.27% calc(100% - 0.0px),50.0% calc(100% - 2.5px),47.73% calc(100% - 7.4px),45.45% calc(100% - 0.8px),43.18% calc(100% - 6.5px),40.91% calc(100% - 4.9px),38.64% calc(100% - 2.5px),36.36% calc(100% - 5.7px),34.09% calc(100% - 4.1px),31.82% calc(100% - 0.8px),29.55% calc(100% - 1.6px),27.27% calc(100% - 0.0px),25.0% calc(100% - 8.2px),22.73% calc(100% - 2.5px),20.45% calc(100% - 5.7px),18.18% calc(100% - 0.0px),15.91% calc(100% - 6.5px),13.64% calc(100% - 8.2px),11.36% calc(100% - 9.0px),9.09% calc(100% - 9.0px),6.82% calc(100% - 4.1px),4.55% calc(100% - 9.0px),2.27% calc(100% - 3.3px),0.0% calc(100% - 7.4px));
  --torn-t:polygon(0.0% 4.1px,2.27% 2.5px,4.55% 6.5px,6.82% 8.2px,9.09% 8.2px,11.36% 2.5px,13.64% 1.6px,15.91% 9.0px,18.18% 2.5px,20.45% 4.9px,22.73% 3.3px,25.0% 0.0px,27.27% 4.1px,29.55% 4.9px,31.82% 1.6px,34.09% 1.6px,36.36% 3.3px,38.64% 0.8px,40.91% 4.1px,43.18% 3.3px,45.45% 7.4px,47.73% 7.4px,50.0% 0.0px,52.27% 7.4px,54.55% 8.2px,56.82% 9.0px,59.09% 4.1px,61.36% 0.8px,63.64% 3.3px,65.91% 4.1px,68.18% 3.3px,70.45% 5.7px,72.73% 9.0px,75.0% 4.1px,77.27% 1.6px,79.55% 5.7px,81.82% 5.7px,84.09% 9.0px,86.36% 1.6px,88.64% 0.0px,90.91% 3.3px,93.18% 0.0px,95.45% 9.0px,97.73% 4.1px,100.0% 4.9px,100% 100%,0 100%);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem;overflow-x:clip}
body{background:var(--grain),var(--linen);color:var(--text);font:400 1.0625rem/1.7 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);color:var(--espresso);font-weight:700;line-height:1.08;text-wrap:balance}
/* no single-word accents in headings */
h1 em,h2 em,h3 em{font-style:normal;color:inherit}
em{font-style:italic}
ul,ol{list-style:none}
[hidden]{display:none!important}
.hidden{display:none!important}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:.6rem;background:var(--espresso);color:var(--white);padding:.7rem 1.1rem;border-radius:999px;z-index:300}
.skip:focus{left:.6rem}
:focus-visible{outline:3px solid var(--espresso);outline-offset:3px;border-radius:6px}
html:not(.js) .js-only{display:none}
.hand{font-family:var(--hand);font-size:1.95rem;line-height:1;color:var(--rose-ink);font-weight:400}
.lead{max-width:56ch;color:var(--text-soft);font-size:1.12rem}
section{padding:4.5rem 0}
@media(min-width:900px){.wrap{padding:0 2rem}section{padding:6rem 0}}

/* ---------- tape ---------- */
.tape{position:absolute;top:-13px;left:50%;width:92px;height:28px;margin-left:-46px;background:rgba(199,156,146,.7);transform:rotate(-3deg);z-index:3;
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}
.tape.gold,.portrait .tape,.s-index .tape{background:rgba(183,139,78,.62);transform:rotate(2deg)}

/* ---------- navigation ---------- */
.site-nav{position:fixed;top:.7rem;left:0;right:0;z-index:100;padding:0 .8rem;pointer-events:none}
.nav{pointer-events:auto;position:relative;max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:rgba(255,253,249,.94);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh-2);padding:.4rem .45rem}
.brand{display:flex;align-items:center;gap:.65rem;padding-right:.5rem;text-decoration:none;color:var(--espresso);font:700 1.3rem/1 var(--serif)}
.brand-face{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid var(--white);box-shadow:0 0 0 1px var(--line)}
.nav-toggle{appearance:none;border:0;background:var(--espresso);color:var(--white);font:500 .95rem var(--sans);padding:.7rem 1.25rem;border-radius:999px;cursor:pointer}
.nav-links{display:none;position:absolute;top:calc(100% + .6rem);left:0;right:0;background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:.7rem;border:1px solid var(--line)}
.nav-links.open{display:block;animation:menu-in .22s ease-out}
.nav-links a{display:block;padding:.85rem 1rem;border-radius:var(--r-sm);font:700 1.35rem/1.2 var(--serif);color:var(--espresso);text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{background:var(--linen-deep)}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(min-width:860px){
  .nav-toggle{display:none}
  .nav-links{display:flex;position:static;background:none;box-shadow:none;border:0;padding:0;gap:.15rem}
  .nav-links a{font:500 .98rem var(--sans);padding:.6rem 1.05rem;border-radius:999px}
}

/* ---------- buttons, chips, small pieces ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.7rem 1.55rem;border-radius:999px;font:500 1rem/1.2 var(--sans);text-decoration:none;border:1.5px solid var(--espresso);cursor:pointer;transition:background .2s,color .2s}
.btn-solid{background:var(--espresso);color:var(--white)}
.btn-solid:hover{background:#4A3426}
.btn-ghost,.btn-outline{background:transparent;color:var(--espresso)}
.btn-ghost:hover,.btn-outline:hover{background:var(--white)}
.btn-sm{min-height:40px;padding:.5rem 1.1rem;font-size:.92rem}
.btn[disabled]{opacity:.6;cursor:default}
.actions,.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:1.6rem 0 2rem}
.chip{min-height:44px;font:500 .95rem var(--sans);padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid rgba(43,29,20,.35);background:var(--white);color:var(--text);cursor:pointer;transition:background .2s,color .2s}
.chip:hover{border-color:var(--espresso)}
.chip[aria-pressed="true"]{background:var(--espresso);color:var(--white);border-color:var(--espresso)}
.pill{display:inline-block;background:color-mix(in srgb,var(--dusty-rose) 34%,var(--white));color:var(--espresso);padding:.1rem .75rem;border-radius:999px;font-weight:500;font-size:.85rem}
.sec-head{margin-bottom:1.8rem}
.sec-head h2,.watch-text h2,.follow-grid h2,.partner-text h2,.more-sec h2,.related h2{font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.04;margin-bottom:.9rem;letter-spacing:-.01em}
.sec-head .lead{margin-top:.3rem}

/* ---------- hero ---------- */
.hero{padding:6.4rem 0 3.5rem;position:relative}
.hero-grid{display:grid;gap:1.4rem;position:relative}
.hero-photo{margin:0 auto 0 -1.25rem;width:min(86%,430px);aspect-ratio:3/4;border-radius:var(--arch);overflow:hidden;background:var(--linen-deep);box-shadow:var(--sh-3);transform:rotate(-1.5deg)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 8%}
.polaroid{position:relative;display:block;justify-self:end;width:min(66%,270px);margin:-5.2rem .2rem 0 0;background:var(--white);padding:.65rem .65rem .95rem;border-radius:var(--r-sm);box-shadow:var(--sh-3);text-decoration:none;color:var(--text);transform:rotate(2.5deg);z-index:2}
.polaroid .tape{width:78px;margin-left:-39px;transform:rotate(-5deg)}
.polaroid .frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-xs);background:var(--linen-deep)}
.polaroid .frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.polaroid .frame::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(255,253,249,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5v11l9-5.5z' fill='%232B1D14'/%3E%3C/svg%3E") center/20px no-repeat}
.polaroid .cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:.7rem;font:700 .95rem/1.3 var(--sans);color:var(--espresso)}
.polaroid .clip-note{position:absolute;right:.2rem;bottom:-2.1rem;transform:rotate(-3deg);white-space:nowrap}
.hero-text{padding-top:1.6rem}
.hero h1{font-size:clamp(3.3rem,15vw,7.2rem);line-height:.92;font-weight:900;letter-spacing:-.02em}
.hero-line{font:italic 500 clamp(1.4rem,4.4vw,2.1rem)/1.25 var(--serif);color:var(--espresso);margin:1.1rem 0 1rem;max-width:22ch}
.hero-sub{max-width:44ch;color:var(--text-soft);font-size:1.08rem}
@media(min-width:900px){
  .hero{padding:8rem 0 6rem}
  .hero-grid{grid-template-columns:repeat(12,1fr);gap:0 1.5rem;align-items:center}
  .hero-photo{grid-column:1/7;grid-row:1;width:100%;max-width:540px;margin:0 0 0 -4rem}
  .hero-text{grid-column:7/13;grid-row:1;padding:0 0 2rem}
  .polaroid{grid-column:3/7;grid-row:1;align-self:end;justify-self:start;width:290px;margin:0 0 -3rem 15rem}
  .hero-text{padding-bottom:5rem}
}
@keyframes settle-a{from{transform:translateY(24px) rotate(-4.5deg)}to{transform:translateY(0) rotate(-1.5deg)}}
@keyframes settle-p{from{transform:translateY(-30px) rotate(10deg)}62%{transform:translateY(5px) rotate(1deg)}to{transform:translateY(0) rotate(2.5deg)}}
.hero-photo{animation:settle-a .95s cubic-bezier(.2,.8,.25,1) both}
.polaroid{animation:settle-p 1.05s .3s cubic-bezier(.2,.8,.25,1) both}

/* ---------- about ---------- */
.about{padding-top:3rem;position:relative}
.about-grid{display:grid;gap:2.4rem;align-items:center}
.portrait{position:relative;width:min(74%,340px);margin:1rem 0 1.5rem 1rem;transform:rotate(-2deg);background:var(--white);padding:.7rem .7rem 1rem;border-radius:var(--r-sm);box-shadow:var(--sh-2)}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:82% 25%;border-radius:var(--leaf)}
.portrait figcaption{position:absolute;right:-.6rem;bottom:-1.6rem;transform:rotate(3deg)}
.about-text h2{font-size:clamp(2.4rem,7vw,4.4rem);line-height:1;margin-bottom:1.2rem}
.about-text .big{font-size:1.2rem;line-height:1.65;max-width:46ch;color:var(--text)}
.for-you{margin-top:1.5rem;max-width:50ch;padding:1rem 1.2rem;background:var(--white);border-radius:6px 20px 6px 20px;box-shadow:var(--sh-1);font-size:1rem}
@media(min-width:900px){.about-grid{grid-template-columns:5fr 7fr;gap:5rem}.portrait{margin-left:0;width:100%;max-width:380px}}

/* ---------- pillars ---------- */
.pillars-sec{padding-top:3rem}
.pillars-sec .wrap{display:grid;gap:1.4rem}
.pillar-list{display:grid;gap:.85rem;max-width:760px}
.pillar{background:var(--white);box-shadow:var(--sh-1);border-radius:var(--r-md)}
.pillar:nth-child(1){width:100%;border-radius:30px 30px 30px 8px}
.pillar:nth-child(2){width:94%;margin-left:auto;border-radius:8px 30px 30px 30px;background:color-mix(in srgb,var(--dusty-rose) 20%,var(--white))}
.pillar:nth-child(3){width:88%;border-radius:30px 8px 30px 30px}
.pillar:nth-child(4){width:97%;margin-left:auto;border-radius:30px 30px 8px 30px;background:color-mix(in srgb,var(--gold) 16%,var(--white))}
.pillar:nth-child(5){width:90%;border-radius:8px 30px 30px 30px}
.pillar:nth-child(6){width:100%;border-radius:30px 8px 30px 30px;background:color-mix(in srgb,var(--linen-deep) 70%,var(--white))}
.pillar button{appearance:none;background:none;border:0;font:inherit;color:inherit;text-align:left;width:100%;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.3rem 1.15rem 1.5rem;border-radius:inherit}
.p-text{display:grid;gap:.15rem}
.p-title{font:700 clamp(1.3rem,3.6vw,1.65rem)/1.15 var(--serif);color:var(--espresso)}
.p-line{color:var(--text-soft);font-size:.98rem}
.p-plus{flex:none;position:relative;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--espresso);transition:transform .3s,background .3s}
.p-plus::before,.p-plus::after{content:"";position:absolute;left:50%;top:50%;width:.9rem;height:1.5px;background:var(--espresso);margin:-.75px 0 0 -.45rem}
.p-plus::after{transform:rotate(90deg);transition:transform .3s}
.pillar.open .p-plus{background:var(--espresso);transform:rotate(180deg)}
.pillar.open .p-plus::before,.pillar.open .p-plus::after{background:var(--white)}
.pillar.open .p-plus::after{transform:rotate(0)}
.p-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.pillar.open .p-more{grid-template-rows:1fr}
.p-more>div{overflow:hidden}
.p-more p{padding:0 1.5rem 1.4rem;max-width:52ch}
html:not(.js) .p-more{grid-template-rows:1fr}
@media(min-width:900px){.pillars-sec .wrap{grid-template-columns:4fr 8fr;gap:3rem;align-items:start}.pillars-sec .sec-head{position:sticky;top:6rem}}

/* ---------- now ---------- */
.now-sec{padding:1.5rem 0 3rem;position:relative;z-index:2}
.now-sec .wrap{filter:drop-shadow(0 14px 12px rgba(43,29,20,.2))}
.sheet{max-width:860px;background:var(--white);clip-path:var(--torn-b);padding:2.4rem 1.5rem 3.6rem 1.6rem}
.sheet h2{font-size:clamp(2rem,5vw,3rem);margin-bottom:1.4rem}
.now-cols{display:grid;gap:1.6rem}
.now-col h3{font:700 1.15rem/1.2 var(--sans);color:var(--espresso);margin-bottom:.5rem}
.now-col li{padding:.35rem 0;border-bottom:1px dashed rgba(43,29,20,.22)}
.now-when{margin-top:1.5rem}
@media(min-width:760px){.now-cols{grid-template-columns:repeat(2,1fr);gap:2.4rem}.sheet{padding:3rem 3rem 4rem}}

/* ---------- series collage ---------- */
.series-sec{padding-top:2.5rem;margin-top:-1.5rem}
.collage{display:grid;gap:2rem}
.collage article{position:relative}
.s-blurb{color:var(--text-soft);font-size:.98rem}
.s-entries{margin-top:.8rem;border-top:1px solid var(--line)}
.s-entries li{padding:.4rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.collage h3{font-size:1.5rem;line-height:1.15;margin-bottom:.5rem}

/* Note to Self: lined paper, an old belief crossed out, a new one written under it */
.s-note{background-color:#FFFEF9;border-radius:4px 16px 6px 14px;padding:1.5rem 1.4rem 1.5rem 3.5rem;box-shadow:var(--sh-2);transform:rotate(-2deg);line-height:1.8rem;
  background-image:linear-gradient(90deg,transparent 2.6rem,rgba(199,156,146,.75) 2.6rem,rgba(199,156,146,.75) calc(2.6rem + 1.5px),transparent calc(2.6rem + 1.5px)),repeating-linear-gradient(transparent 0 1.74rem,rgba(61,46,34,.14) 1.74rem 1.8rem)}
.s-note h3{line-height:1.8rem;margin:0 0 .9rem}
.s-note .old{font:italic 500 1.08rem/1.8rem var(--serif);color:var(--rose-ink)}
.s-note .old s{text-decoration-thickness:2px;text-decoration-color:var(--rose-ink)}
.s-note .new{font-size:2rem;line-height:1.8rem;color:var(--espresso);margin:.3rem 0 .9rem;transform:rotate(-1deg)}
.s-note .s-blurb{line-height:1.8rem}

/* Tech It Out: an index card of what I use */
.s-index{background-color:#FFFDF6;border-top:4px solid var(--dusty-rose);border-radius:6px 6px 16px 16px;padding:1.5rem 1.4rem 1.2rem;box-shadow:var(--sh-2);transform:rotate(1.6deg)}
.idx{margin-top:.9rem}
.idx li{display:flex;flex-wrap:wrap;gap:0 .7rem;align-items:baseline;line-height:2rem;border-bottom:1px solid rgba(61,46,34,.14)}
.idx strong{font-weight:700;color:var(--espresso)}
.idx span{color:var(--text-soft);font-size:.92rem}

/* Fit Happens: a tall lookbook frame */
.s-lookbook figure{margin:0;background:var(--white);padding:.7rem .7rem 1rem;border-radius:26px 26px 8px 8px;box-shadow:var(--sh-2)}
.s-lookbook img{width:100%;aspect-ratio:3/4.3;object-fit:cover;object-position:50% 20%;border-radius:18px 18px 4px 4px}
.s-lookbook figcaption{padding:.9rem .5rem 0}
.s-lookbook h3{font-size:1.6rem}

/* Mind You: a thought bubble */
.s-bubble{padding-bottom:3rem}
.bubble{background:color-mix(in srgb,var(--dusty-rose) 36%,var(--white));border-radius:56% 44% 50% 50% / 38% 42% 58% 62%;padding:2.5rem 2.2rem;box-shadow:var(--sh-1)}
.bubble .thought{font:italic 500 1.35rem/1.3 var(--serif);color:var(--espresso);margin-bottom:.9rem}
.bubble .s-blurb{color:var(--text)}
.s-bubble .dot{position:absolute;border-radius:50%;background:color-mix(in srgb,var(--dusty-rose) 36%,var(--white));box-shadow:var(--sh-1)}
.s-bubble .d1{width:26px;height:26px;left:16%;bottom:1.1rem}
.s-bubble .d2{width:14px;height:14px;left:10%;bottom:0}

/* Closet Case: a garment tag */
.s-tag{filter:drop-shadow(0 10px 8px rgba(43,29,20,.28));transform:rotate(3deg);padding-top:3.4rem;max-width:340px}
.s-tag .string{position:absolute;top:0;left:50%;width:64px;height:84px;margin-left:-64px;color:var(--text-soft)}
.tag-body{position:relative;background:color-mix(in srgb,var(--gold) 26%,var(--white));clip-path:polygon(16% 0,84% 0,100% 12%,100% 100%,0 100%,0 12%);padding:2.8rem 1.6rem 1.6rem}
.hole{position:absolute;top:.9rem;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--linen);box-shadow:inset 0 2px 3px rgba(43,29,20,.4)}
.tag-lines{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.tag-lines li{border:1.5px dashed var(--gold-ink);border-radius:999px;padding:.1rem .8rem;font-weight:500;font-size:.9rem;color:var(--espresso)}

/* Sun-daze: a rose to gold sunset band */
.s-sunset{overflow:hidden;border-radius:var(--r-lg) var(--r-lg) var(--r-lg) 90px;padding:2.6rem 1.8rem;background:linear-gradient(100deg,var(--dusty-rose),var(--gold));color:var(--espresso)}
.s-sunset>div{position:relative;max-width:46ch}
.s-sunset .s-blurb,.s-sunset .s-entries li{color:var(--espresso)}
.s-sunset .sun{position:absolute;right:-50px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:var(--linen);opacity:.6;}

/* The Audacity Project: a clean banner with a phase tracker */
.s-banner{display:grid;gap:1.6rem;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 1.5rem;box-shadow:var(--sh-1)}
.s-banner .btn{margin-top:1rem}
.phases{display:grid;grid-template-columns:repeat(4,1fr);gap:.2rem}
.phases li{position:relative;padding-top:1.7rem;font-size:.85rem;line-height:1.3}
.phases li::before{content:"";position:absolute;top:.55rem;left:0;right:0;height:2px;background:var(--line)}
.phases li.done::before{background:var(--espresso)}
.phases .dotmark{position:absolute;top:0;left:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--white);border:2px solid var(--line);z-index:1}
.phases .done .dotmark{background:var(--espresso);border-color:var(--espresso)}
.phases .current .dotmark{background:var(--gold);border-color:var(--espresso);box-shadow:0 0 0 4px rgba(183,139,78,.3)}
.ph-n{display:block;font-weight:700;color:var(--espresso)}
.ph-name{display:block;color:var(--text-soft)}
@media(min-width:900px){.s-banner{grid-template-columns:5fr 7fr;align-items:center;padding:2.2rem 2.6rem;gap:3rem}.phases li{font-size:.92rem}}

/* the rest */
.s-plain{background:color-mix(in srgb,var(--linen-deep) 70%,var(--white));border-left:4px solid var(--dusty-rose);border-radius:22px 6px 22px 6px;padding:1.3rem 1.5rem}
.s-tag-text{margin-top:.6rem;font-size:.88rem;font-weight:500;color:var(--rose-ink)}

@media(min-width:900px){
  .collage{grid-template-columns:repeat(12,1fr);gap:2.2rem 1.5rem;align-items:start;grid-auto-flow:dense}
  .s-note{grid-column:1/6}
  .s-lookbook{grid-column:6/9;grid-row:span 2}
  .s-bubble{grid-column:9/13}
  .s-index{grid-column:1/6}
  .s-tag{grid-column:9/13;justify-self:center}
  .s-sunset,.s-banner{grid-column:1/13}
  .s-plain{grid-column:span 6}
  .collage.filtered{display:block}
  .collage.filtered article{max-width:640px}
  .collage.filtered .s-sunset,.collage.filtered .s-banner{max-width:none}
}
.collage.filtered article{margin-bottom:1.5rem}

/* ---------- watch ---------- */
.watch-grid{display:grid;gap:2.4rem;align-items:center}
.clips{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:flex-start}
.clip,.video{display:block;background:var(--white);padding:.6rem .6rem .9rem;border-radius:var(--r-sm);box-shadow:var(--sh-2);text-decoration:none;color:var(--text)}
.clip .frame,.video .frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-xs);background:var(--linen-deep)}
.clip img,.video img{width:100%;height:100%;object-fit:cover}
.clip .cap,.video .cap{display:block;margin-top:.65rem;font:700 .95rem/1.3 var(--sans);color:var(--espresso)}
.clip.c1{width:min(100%,320px)}
.clip.c2{width:min(72%,230px);margin-top:2.2rem}
.clip.c3{width:min(62%,200px);margin-top:-.5rem}
.note-card{position:relative;background:var(--white);padding:1.8rem 1.6rem;border-radius:6px 24px 6px 24px;box-shadow:var(--sh-2);max-width:460px}
.note-card p{font:700 1.3rem/1.25 var(--serif);color:var(--espresso);margin-bottom:.4rem}
.note-card .s-blurb{font:400 1rem/1.5 var(--sans);color:var(--text-soft);margin-bottom:1rem}
.note-card .btn{margin-top:.8rem}
@media(min-width:900px){.watch-grid{grid-template-columns:5fr 7fr;gap:4rem}}
.page-head{padding-top:7.5rem;padding-bottom:1rem}
.page-head h1{font-size:clamp(2.8rem,9vw,5.4rem);line-height:.96;font-weight:900;letter-spacing:-.02em;margin-bottom:1rem}
.watch-page{padding-top:1rem;padding-bottom:2rem}
.videos{display:grid;gap:1.6rem}
.video .play{appearance:none;border:0;background:none;padding:0;cursor:pointer;display:block;width:100%;height:100%;position:relative}
.video .play::after{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;background:rgba(255,253,249,.94) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 4.5v11l9-5.5z' fill='%232B1D14'/%3E%3C/svg%3E") center/22px no-repeat}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video .cap a{text-decoration:none}
.video .cap a:hover{text-decoration:underline}
@media(min-width:640px){.videos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.videos{grid-template-columns:repeat(6,1fr)}.video{grid-column:span 2}.video.first{grid-column:span 4;grid-row:span 2}.video:nth-child(2n+3){transform:translateY(1rem)}}
.more-sec{padding-top:2rem;padding-bottom:5rem}

/* ---------- blog ---------- */
.latest{display:grid;gap:1.5rem}
.post{display:block;background:var(--white);border-radius:var(--r-md);box-shadow:var(--sh-1);overflow:hidden;text-decoration:none;color:var(--text)}
.post .thumb{aspect-ratio:4/3;overflow:hidden;background:var(--linen-deep)}
.post .thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.post .body{padding:1.1rem 1.3rem 1.5rem}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;font-size:.88rem;color:var(--text-soft)}
.post h3{font-size:1.3rem;line-height:1.2;margin:.7rem 0 .5rem}
.post:hover h3,.post:focus-visible h3{text-decoration:underline;text-underline-offset:4px}
.post .ex{font-size:.95rem;color:var(--text-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post.feature{border-radius:34px 34px var(--r-md) var(--r-md)}
.post.feature .thumb{margin:.6rem .6rem 0;border-radius:var(--arch);aspect-ratio:5/4}
.post.feature h3{font-size:clamp(1.6rem,4vw,2.2rem)}
.post:nth-child(3n+2){border-radius:8px 28px 8px 28px}
.post:nth-child(3n+2) .thumb img{object-position:50% 30%}
.post:nth-child(3n){border-radius:28px 8px 28px 8px}
.posts{display:grid;gap:1.5rem}
@media(min-width:760px){.posts{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.latest{grid-template-columns:1.2fr 1fr;grid-template-rows:auto auto;gap:1.5rem 1.8rem}.latest .post.feature{grid-row:span 2}}
.blog-sec .actions{margin-top:2rem}
.blog-tools{display:grid;gap:1.2rem;margin:1.2rem 0 .5rem}
.search{max-width:420px}
.posts.all{margin-top:1.4rem}
@media(min-width:760px){.posts.all{grid-template-columns:repeat(6,1fr)}.posts.all .post{grid-column:span 2}.posts.all .post:nth-child(5n+1),.posts.all .post:nth-child(5n+2){grid-column:span 3}}
.none{margin:2rem 0}
.blog-sec-page{padding-bottom:5rem}

/* article */
.article-head{max-width:760px;padding-top:7.2rem}
.article-head .back{display:inline-block;margin-bottom:1.4rem;font-size:.95rem;color:var(--text-soft);text-underline-offset:4px}
.article-head .meta{margin-bottom:.9rem}
.article-head h1{font-size:clamp(2.3rem,6.4vw,4rem);line-height:1.02;letter-spacing:-.01em;margin-bottom:1.8rem}
.article-img{max-width:760px;margin-bottom:0}
.article-img img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 25%;border-radius:var(--leaf);box-shadow:var(--sh-2)}
.article-body{max-width:760px;padding-top:2.6rem;padding-bottom:3.5rem;font-size:1.125rem;line-height:1.8}
.article-body>*{max-width:62ch}
.article-body p,.article-body ul,.article-body ol,.article-body blockquote{margin-bottom:1.4rem}
.article-body h2{font-size:1.9rem;margin:2.4rem 0 1rem}
.article-body h3{font-size:1.4rem;margin:2rem 0 .8rem}
.article-body ul{list-style:disc;padding-left:1.4rem}
.article-body ol{list-style:decimal;padding-left:1.4rem}
.article-body blockquote{border-left:4px solid var(--dusty-rose);padding-left:1.2rem;font:italic 500 1.25rem/1.5 var(--serif);color:var(--espresso)}
.article-body a{color:var(--rose-ink);text-underline-offset:3px}
.article-body img{border-radius:var(--r-md);margin:1.6rem 0}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.4rem 0}
.article-body .category-label{font:700 1.5rem/1.2 var(--serif);margin:2.4rem 0 1rem}
.article-body .tool-block{background:var(--white);border-radius:8px 24px 8px 24px;padding:1.2rem 1.4rem;margin-bottom:1rem;box-shadow:var(--sh-1)}
.article-body .tool-block h3{margin:0 0 .2rem;font-size:1.25rem}
.article-body .tool-block .price{font-size:.9rem;color:var(--rose-ink);font-weight:500;margin-bottom:.4rem}
.article-body .tool-block p{margin:0;font-size:1rem}
.related{background:var(--linen-deep);padding:4rem 0 5rem;margin-top:1rem}
.related h2{font-size:clamp(1.8rem,4vw,2.6rem)}

/* ---------- follow ---------- */
.follow-sec{background:color-mix(in srgb,var(--linen-deep) 80%,var(--linen))}
.follow-grid{display:grid;gap:1.4rem;align-items:center}
.socials{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.soc{display:inline-block;padding:.65rem 1.3rem;font-weight:500;text-decoration:none;color:var(--espresso);border-radius:999px 999px 999px 8px;background:color-mix(in srgb,var(--dusty-rose) 52%,var(--white));box-shadow:var(--sh-1)}
.soc1{background:color-mix(in srgb,var(--gold) 44%,var(--white));border-radius:8px 999px 999px 999px}
.soc2{background:var(--white);border:1.5px solid var(--line);border-radius:999px}
.soc3{background:color-mix(in srgb,var(--dusty-rose) 30%,var(--white));border-radius:999px 8px 999px 999px}
.soc:hover{text-decoration:underline;text-underline-offset:4px}
@media(min-width:900px){.follow-grid{grid-template-columns:5fr 6fr;gap:4rem}}

/* ---------- partner (home) ---------- */
.partner-grid{display:grid;gap:3rem;align-items:start}
.offers{margin:1.4rem 0 1.8rem;max-width:52ch}
.offers li{padding:.7rem 0;border-bottom:1px dashed rgba(43,29,20,.28)}
.letter{position:relative;background:var(--white);border-radius:var(--r-md);box-shadow:var(--sh-2);padding:2.2rem 1.5rem 1.8rem}
.letter h3{font-size:1.7rem;margin-bottom:.5rem}
.letter-lead{color:var(--text-soft);margin-bottom:1.2rem;font-size:1rem}
.fields{display:grid;gap:1rem}
label{display:block;font-weight:500;font-size:.98rem;margin-bottom:.3rem;color:var(--espresso)}
.opt{font-weight:400;color:var(--text-soft)}
input,select,textarea{width:100%;font:inherit;color:var(--text);background:var(--white);padding:.8rem 1rem;border:1.5px solid rgba(43,29,20,.38);border-radius:var(--r-sm)}
textarea{min-height:140px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--espresso);outline-offset:2px}
.send-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.form-msg{min-height:1.4em;font-size:.98rem;color:var(--text)}
.form-msg.err,.err{color:#8A2B1E}
@media(min-width:900px){.partner-grid{grid-template-columns:6fr 6fr;gap:4rem}.letter{padding:2.6rem 2.2rem 2rem}}

/* ---------- footer ---------- */
.footer{background:var(--grain),var(--linen-deep);clip-path:var(--torn-t);margin-top:2.5rem;padding:4.4rem 0 2.4rem}
.footer-grid{display:grid;gap:2.2rem}
.f-brand{display:flex;gap:1rem;align-items:center}
.f-face{width:72px;height:72px;object-fit:cover;border-radius:var(--blob);flex:none}
.f-name{font:900 clamp(2.4rem,8vw,3.6rem)/1 var(--serif);color:var(--espresso);letter-spacing:-.02em}
.f-line{color:var(--text-soft);font-size:.98rem}
.f-note{margin-top:.35rem;transform:rotate(-2deg);transform-origin:left}
.f-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.2rem}
.f-head{font-weight:700;font-size:.98rem;color:var(--espresso);margin-bottom:.4rem}
.footer a{display:inline-block;padding:.25rem 0;text-underline-offset:4px;text-decoration:none;color:var(--text)}
.footer a:hover{text-decoration:underline}
.f-copy{grid-column:1/-1;font-size:.9rem;color:var(--text-soft)}
@media(min-width:900px){.footer-grid{grid-template-columns:5fr 7fr;align-items:start}.f-cols{grid-template-columns:repeat(3,1fr)}}

/* ---------- 404 and thank-you ---------- */
.lost{display:grid;gap:2.4rem;padding-top:8rem;padding-bottom:4rem;align-items:center}
.lost h1{font-size:clamp(2.6rem,8vw,4.6rem);line-height:1;margin-bottom:1rem}
.lost-art img{border-radius:var(--leaf);box-shadow:var(--sh-2);max-width:480px;width:100%}
@media(min-width:900px){.lost{grid-template-columns:6fr 5fr;gap:4rem}}

/* ---------- /partner and other shared pieces (kept compatible) ---------- */
.page-hero{padding:7.5rem 0 2rem}
.title{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.04;letter-spacing:-.01em;margin-bottom:1rem;max-width:20ch}
.kicker{font-weight:500;color:var(--rose-ink);margin-bottom:.4rem}
.alt{background:var(--grain),var(--linen-deep)}
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:1.4rem}
.center{text-align:left}
.about-grid.kit{align-items:start}
.series-list{display:grid;gap:1.2rem}
.series-card{background:var(--white);border:1px solid var(--line);border-radius:22px 6px 22px 6px;padding:1.3rem 1.4rem}
.series-card h3{font-size:1.3rem;margin-bottom:.4rem}
.series-card p{color:var(--text-soft);font-size:.96rem}
.series-card .tag{margin-top:.5rem;font-size:.88rem;font-weight:500;color:var(--rose-ink)}
@media(min-width:760px){.series-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.series-list{grid-template-columns:repeat(3,1fr)}}

/* ---------- reduced motion: no entrance, no transitions ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

.note-card.empty{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:center}
.note-card.empty img{width:112px;height:112px;object-fit:cover;object-position:50% 20%;border-radius:var(--blob);grid-column:2;grid-row:1/span 3}
.note-card.empty>*:not(img):not(.tape){grid-column:1}
@media(min-width:900px){.post.feature{display:flex;flex-direction:column}.post.feature .thumb{flex:1;aspect-ratio:auto;min-height:340px}.latest .post:not(.feature) .thumb{aspect-ratio:16/9}}
@media(max-width:759px){
  .chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-1.25rem;margin-right:-1.25rem;padding:.2rem 1.25rem .7rem;scroll-snap-type:x proximity}
  .chip{flex:none;scroll-snap-align:start}
  .portrait figcaption{right:.2rem;font-size:1.7rem}
}

/* /partner: reserve room for numbers that arrive after load, so the page does not jump */
#headline-stats{min-height:9.5rem}
@media(min-width:760px){#headline-stats{min-height:8rem}}

@media(max-width:899px){.s-lookbook{max-width:360px}.s-bubble{max-width:520px}.s-note,.s-index{max-width:560px}}