/* Sand and Soul — a year of sunrises, scrolled slowly.
   Nautical, meditative, cinematic. Not a website, a daybook.
   Dark ink carries the photographs. Fraunces italic carries the feeling. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT@0,9..144,300..700,25..100;1,9..144,300..700,25..100&family=Inter:wght@300;400;500;600&family=Caveat:wght@400;600&family=Bebas+Neue&display=swap');

:root{
  --ink:#0a0c10;
  --ink-2:#12161d;
  --deep:#1d3045;
  --paper:#f4ecd8;
  --paper-dim:#d4cab0;
  --mute:#6a6e74;
  --mute-2:#9c9a8f;
  --ember:#c67c5a;             /* coral, sunrise */
  --salt:#8fa9ad;              /* pale sea glass */
  --gold:#d4a86a;              /* morning gold */
  --rule:rgba(244,236,216,.18);
  --serif:"Fraunces", "Cormorant Garamond", Georgia, serif;
  --hand:"Caveat", "Brush Script MT", cursive;
  --sans:"Inter", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink)}
body{
  background:var(--ink);color:var(--paper);
  font-family:var(--sans);font-weight:300;
  font-size:16.5px;line-height:1.75;letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
a{color:var(--paper);text-decoration:none;transition:color .6s ease}
a:hover{color:var(--ember)}

/* ══════ Fixed mark + navigation ══════ */
.mark{
  position:fixed;top:34px;left:42px;z-index:100;
  width:88px;height:88px;display:flex;align-items:center;justify-content:center;
  opacity:.96;transition:opacity .6s ease, transform .6s ease;
}
.mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.mark:hover{opacity:1;transform:scale(1.03)}

.navline{
  position:fixed;top:56px;right:52px;z-index:99;
  display:flex;gap:36px;
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(244,236,216,.8);text-shadow:0 2px 8px rgba(0,0,0,.4);
}
.navline a{color:inherit}
.navline a:hover{color:var(--ember)}
.navline.inv{color:rgba(13,15,20,.82);text-shadow:none}
.navline.inv a:hover{color:var(--ember)}
@media (max-width:780px){
  .mark{top:18px;left:20px;width:62px;height:62px}
  .navline{top:28px;right:20px;gap:20px;font-size:10.5px;letter-spacing:.22em}
}
body.light-page .mark img{filter:none}

/* ══════ Fade-on-scroll (cinematic reveal) ══════ */
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 1.4s ease, transform 1.4s cubic-bezier(.19,1,.22,1)}
.fade-in.in{opacity:1;transform:translateY(0)}
.fade-in.d-1{transition-delay:.15s}
.fade-in.d-2{transition-delay:.3s}
.fade-in.d-3{transition-delay:.45s}

/* ══════ Opening overture ══════ */
.overture{
  position:relative;min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:15vh 8vw 10vh;
  overflow:hidden;z-index:1;
}
/* Full-bleed ambient video background (autoplay muted loop, YouTube embed) */
.overture .bg-video{
  position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:var(--ink);
}
.overture .bg-video iframe{
  position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;      /* 16:9 always */
  min-height:100vh;min-width:177.77vh;
  transform:translate(-50%,-50%);
  border:0;pointer-events:none;
}
.overture::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(10,12,16,.38) 0%, rgba(10,12,16,.72) 55%, rgba(10,12,16,.92) 100%);
}
.overture .salutation{
  font-family:var(--hand);font-weight:400;font-size:28px;
  color:var(--gold);letter-spacing:.02em;margin-bottom:38px;
  transform:rotate(-1.4deg);
}
.overture h1{
  font-family:"Bebas Neue", "Oswald", Impact, sans-serif;
  font-weight:400;text-transform:uppercase;
  font-size:clamp(60px, 10.5vw, 200px);line-height:.88;letter-spacing:.008em;
  color:var(--paper);margin-bottom:50px;max-width:16ch;
  text-shadow:0 4px 30px rgba(0,0,0,.5);
}
.overture h1 em{color:var(--ember);font-style:normal;font-weight:400}
.overture .sub{
  font-size:17px;line-height:1.65;max-width:46ch;
  color:rgba(244,236,216,.72);font-weight:300;margin-bottom:70px;
  font-style:italic;font-family:var(--serif);
}
.overture .descent{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--mute-2);
  animation:drift 3.6s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(6px);opacity:1}}

/* ══════ The year scroll — single-column diary of photographs ══════ */
.year{
  padding:20vh 0;background:var(--ink);
}
.year-intro{
  text-align:center;padding:0 8vw;margin-bottom:22vh;
}
.year-intro .plate{
  font-family:var(--sans);font-size:10px;letter-spacing:.6em;
  text-transform:uppercase;color:var(--gold);margin-bottom:32px;
}
.year-intro .plate::before, .year-intro .plate::after{
  content:"";display:inline-block;width:60px;height:1px;
  background:var(--gold);vertical-align:middle;margin:0 18px;
}
.year-intro h2{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(44px, 6vw, 96px);line-height:1;letter-spacing:-.02em;
  color:var(--paper);font-variation-settings:"SOFT" 100;
  max-width:18ch;margin:0 auto 28px;
}
.year-intro h2 em{color:var(--ember);font-weight:400}
.year-intro p{
  max-width:50ch;margin:0 auto;color:rgba(244,236,216,.62);
  font-size:16.5px;line-height:1.75;font-family:var(--serif);font-style:italic;
}

/* ── Each morning entry is a cinematic stanza ── */
.morning{
  display:grid;grid-template-columns:1fr 8fr 1fr;
  gap:0 0;margin:0 auto 22vh;max-width:1400px;
  padding:0 40px;
  align-items:center;
}
.morning.right{grid-template-columns:1fr 8fr 1fr}
.morning .photo{
  grid-column:2;position:relative;overflow:hidden;
  aspect-ratio:16/10;background:var(--ink-2);
  box-shadow:0 48px 120px rgba(0,0,0,.6), 0 12px 32px rgba(0,0,0,.5);
}
.morning .photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);transition:transform 12s ease-out;
  filter:saturate(1.06) contrast(1.02);
}
.morning.in .photo img{transform:scale(1.08)}  /* slow Ken Burns */
.morning .photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, transparent 55%, rgba(10,12,16,.35) 100%);
}
.morning .frame-ornament{
  position:absolute;bottom:-1px;right:-1px;
  font-family:var(--sans);font-size:9px;letter-spacing:.38em;
  color:rgba(244,236,216,.55);padding:8px 14px;
  background:rgba(10,12,16,.7);backdrop-filter:blur(4px);
  text-transform:uppercase;
}
.morning .caption{
  grid-column:2;margin-top:26px;
  display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start;
  padding:0 4px;
}
.morning .caption .date{
  font-family:var(--hand);font-weight:400;
  font-size:30px;line-height:1.1;color:var(--gold);
  transform:rotate(-2deg);letter-spacing:.01em;
}
.morning .caption .date small{
  display:block;font-family:var(--sans);font-size:10px;letter-spacing:.36em;
  color:var(--mute-2);text-transform:uppercase;margin-top:6px;
  transform:rotate(2deg);letter-spacing:.36em;
  font-weight:500;
}
.morning .caption .note{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(18px, 1.6vw, 24px);line-height:1.55;
  color:rgba(244,236,216,.82);max-width:46ch;
  font-variation-settings:"SOFT" 80;
}
.morning .caption .note em{color:var(--ember);font-style:italic}
@media (max-width:880px){
  .morning{grid-template-columns:1fr;padding:0 24px}
  .morning .photo{grid-column:1}
  .morning .caption{grid-column:1;grid-template-columns:1fr;gap:12px;margin-top:18px}
  .morning .caption .date{font-size:24px;transform:rotate(-1.5deg)}
}

/* ── Divider ornament between major sections ── */
.ornament{
  display:flex;align-items:center;justify-content:center;gap:22px;
  padding:12vh 8vw;color:var(--gold);
}
.ornament::before,.ornament::after{
  content:"";flex:1;max-width:220px;height:1px;background:var(--rule);
}
.ornament-compass{
  width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold);
}
.ornament-compass svg{width:100%;height:100%}

/* ══════ Archive grid — museum wall ══════ */
.archive-wall{padding:14vh 0 18vh;background:var(--ink)}
.archive-wall .intro{
  text-align:center;padding:0 8vw;margin-bottom:10vh;
}
.archive-wall .intro .plate{
  font-family:var(--sans);font-size:10px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--gold);margin-bottom:24px;
}
.archive-wall .intro h2{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(40px,5vw,76px);line-height:1;letter-spacing:-.02em;
  color:var(--paper);font-variation-settings:"SOFT" 100;
  max-width:18ch;margin:0 auto 20px;
}
.archive-wall .intro h2 em{color:var(--ember)}
.archive-wall .intro p{max-width:50ch;margin:0 auto;color:rgba(244,236,216,.68);font-size:16px;line-height:1.75;font-family:var(--serif);font-style:italic}

.archive-grid{
  display:grid;gap:4px;grid-template-columns:repeat(12,1fr);
  max-width:1400px;margin:0 auto;padding:0 4px;
}
.archive-tile{
  display:block;position:relative;overflow:hidden;
  background:var(--ink-2);
}
.archive-tile img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 1.6s ease-out, filter 1s ease;
  filter:grayscale(.18) contrast(1.02);
}
.archive-tile:hover img{transform:scale(1.06);filter:grayscale(0) contrast(1.08)}
.archive-tile .label{
  position:absolute;inset:auto 0 0 0;padding:14px 16px;
  background:linear-gradient(180deg, transparent, rgba(10,12,16,.85));
  opacity:0;transition:opacity .6s ease;
}
.archive-tile:hover .label{opacity:1}
.archive-tile .label h4{font-family:var(--serif);font-style:italic;font-weight:300;font-size:18px;color:var(--paper);margin:0}
.archive-tile .label span{display:block;font-family:var(--hand);font-size:15px;color:var(--gold);margin-top:2px;transform:rotate(-1deg)}
/* Asymmetric magazine layout */
.archive-tile:nth-child(12n+1){grid-column:span 7;aspect-ratio:16/10}
.archive-tile:nth-child(12n+2){grid-column:span 5;aspect-ratio:4/5}
.archive-tile:nth-child(12n+3){grid-column:span 4;aspect-ratio:1/1}
.archive-tile:nth-child(12n+4){grid-column:span 4;aspect-ratio:1/1}
.archive-tile:nth-child(12n+5){grid-column:span 4;aspect-ratio:1/1}
.archive-tile:nth-child(12n+6){grid-column:span 5;aspect-ratio:4/5}
.archive-tile:nth-child(12n+7){grid-column:span 7;aspect-ratio:16/10}
.archive-tile:nth-child(12n+8){grid-column:span 6;aspect-ratio:3/2}
.archive-tile:nth-child(12n+9){grid-column:span 6;aspect-ratio:3/2}
.archive-tile:nth-child(12n+10){grid-column:span 3;aspect-ratio:3/4}
.archive-tile:nth-child(12n+11){grid-column:span 6;aspect-ratio:4/3}
.archive-tile:nth-child(12n){grid-column:span 3;aspect-ratio:3/4}
@media (max-width:780px){
  .archive-grid{grid-template-columns:repeat(2,1fr)}
  .archive-tile{grid-column:span 1 !important;aspect-ratio:1/1 !important}
}

.see-more{
  text-align:center;margin-top:11vh;
}
.see-more a{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.5em;
  text-transform:uppercase;color:var(--gold);
  border-bottom:1px solid var(--gold);padding:8px 0;
  transition:color .4s ease, border-color .4s ease;
}
.see-more a:hover{color:var(--ember);border-color:var(--ember)}

/* ══════ Invitation band — shop, letter, practices, films ══════ */
.invitations{
  padding:16vh 8vw;background:var(--ink-2);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
}
.invitations .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:70px;max-width:1240px;margin:0 auto;
}
.invitation{position:relative}
.invitation .tag{
  font-family:var(--hand);font-size:26px;color:var(--gold);
  transform:rotate(-2deg);display:inline-block;margin-bottom:12px;
}
.invitation h3{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.01em;
  color:var(--paper);margin-bottom:18px;
  font-variation-settings:"SOFT" 100;
}
.invitation h3 em{color:var(--ember)}
.invitation p{
  font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.65;
  color:rgba(244,236,216,.66);margin-bottom:22px;max-width:36ch;
}
.invitation a.go{
  font-family:var(--sans);font-size:11px;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);border-bottom:1px solid var(--gold);padding-bottom:4px;
}
.invitation a.go:hover{color:var(--ember);border-color:var(--ember)}

/* ══════ Morning letter — newsletter ══════ */
.letter{
  padding:17vh 8vw 15vh;background:var(--ink);text-align:center;
  position:relative;
}
.letter::before{
  content:"";display:block;width:64px;height:1px;background:var(--gold);
  margin:0 auto 40px;
}
.letter .plate{
  font-family:var(--hand);font-size:26px;color:var(--gold);
  transform:rotate(-1.4deg);margin-bottom:16px;display:inline-block;
}
.letter h2{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(40px,5.5vw,84px);line-height:1;letter-spacing:-.025em;
  color:var(--paper);font-variation-settings:"SOFT" 100;
  max-width:18ch;margin:10px auto 28px;
}
.letter h2 em{color:var(--ember)}
.letter p{max-width:48ch;margin:0 auto 36px;color:rgba(244,236,216,.66);font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.7}
.letter form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:520px;margin:0 auto}
.letter input[type=email]{
  flex:1;min-width:240px;padding:16px 20px;
  background:transparent;border:1px solid rgba(244,236,216,.4);
  color:var(--paper);font-family:var(--serif);font-style:italic;font-size:16px;
  letter-spacing:.01em;
}
.letter input::placeholder{color:rgba(244,236,216,.36);font-style:italic}
.letter button{
  padding:16px 34px;background:var(--paper);color:var(--ink);
  border:1px solid var(--paper);font-family:var(--sans);
  font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:500;
  cursor:pointer;transition:all .4s ease;
}
.letter button:hover{background:var(--ember);border-color:var(--ember);color:var(--paper)}
.letter #subscribe-msg{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold);min-height:20px}

/* ══════ Footer — nautical logbook ══════ */
footer{
  padding:8vh 8vw 5vh;background:var(--ink);
  border-top:1px solid var(--rule);color:rgba(244,236,216,.45);
  font-size:12.5px;letter-spacing:.03em;
}
footer .grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:40px;
  max-width:1280px;margin:0 auto;
}
footer .brand-name{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:22px;color:var(--paper);font-variation-settings:"SOFT" 80;
}
footer .brand-name em{color:var(--ember)}
footer nav{display:flex;flex-direction:column;gap:8px}
footer nav a{color:rgba(244,236,216,.55);font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
footer nav a:hover{color:var(--ember)}
footer .logbook{
  font-family:var(--sans);font-size:11px;letter-spacing:.18em;
  color:var(--mute-2);line-height:1.9;
}
footer .logbook strong{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:14px;color:var(--paper);text-transform:none;letter-spacing:.01em;
  margin-bottom:8px;
}
footer .copyright{
  grid-column:1/-1;padding-top:24px;border-top:1px solid var(--rule);
  margin-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  font-family:var(--hand);font-size:17px;color:var(--gold);
}

/* ══════ Retain pages that haven't been touched this pass ══════ */
/* Practices, photo detail, videos, shop — keep their existing structure; new typography
   inherits via body + serif vars. We override a few specifics below. */

.practice-detail,
.practices-section,
.archive,
.videos-section,
.photo-stage,
.shop-item-page{
  background:var(--ink);color:var(--paper);
}
.practice-detail h1,
.practices-section h2{font-family:var(--serif);font-style:italic;font-weight:300;font-variation-settings:"SOFT" 100}
.photo-stage{min-height:100vh;padding:22vh 40px;display:grid;grid-template-columns:1.15fr .9fr;gap:60px;max-width:1400px;margin:0 auto}
.photo-stage .frame{position:relative;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.photo-stage .frame img{width:100%;height:auto;display:block;filter:saturate(1.04)}
.photo-stage .aside .plate{font-family:var(--sans);font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--gold);margin-bottom:24px;display:flex;align-items:center;gap:16px}
.photo-stage .aside .plate::before{content:"";width:40px;height:1px;background:var(--gold)}
.photo-stage .aside h1{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(36px,4.5vw,58px);line-height:1;margin-bottom:14px;font-variation-settings:"SOFT" 100}
.photo-stage .aside .date{font-family:var(--hand);color:var(--gold);font-size:22px;margin-bottom:28px;transform:rotate(-1.5deg);display:inline-block}
.photo-stage .aside p{font-family:var(--serif);font-style:italic;font-size:16.5px;line-height:1.7;color:rgba(244,236,216,.72);margin-bottom:26px}
.buy-rule{border:0;height:1px;background:var(--rule);margin:28px 0}
.buy-row{display:block;padding:22px 24px;background:var(--ink-2);border:1px solid var(--rule);margin-bottom:14px;transition:border-color .3s ease}
.buy-row:hover{border-color:var(--ember)}
.buy-row .tag{font-family:var(--sans);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;display:block}
.buy-row .row-main{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.buy-row .name{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--paper)}
.buy-row .price{font-family:var(--serif);font-size:26px;color:var(--ember);font-weight:400}
.buy-row .note{font-family:var(--sans);font-size:12px;color:var(--mute-2)}
.fine{font-family:var(--sans);font-size:11px;color:var(--mute-2);line-height:1.7;margin-top:30px}

@media (max-width:900px){
  .photo-stage{grid-template-columns:1fr;padding:18vh 20px 10vh}
}

/* Crumbs */
.crumbs{font-family:var(--sans);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--mute-2);margin-bottom:28px}
.crumbs a{color:var(--mute-2)}
.crumbs a:hover{color:var(--ember)}
.crumbs span{margin:0 12px}

/* Watermarks (preserved from previous pass) */
.watermark-corner{position:absolute;bottom:16px;right:20px;z-index:3;pointer-events:none;font-family:var(--sans);font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:rgba(244,236,216,.8);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.watermark-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(40px,6vw,82px);color:rgba(244,236,216,.13);letter-spacing:.04em;transform:rotate(-14deg);mix-blend-mode:overlay;font-variation-settings:"SOFT" 100}

/* Archive/shop/videos sections retained from previous CSS, with typography reset to new vars */
.archive{min-height:100vh;padding:22vh 0 16vh}
.archive-intro{text-align:center;padding:0 8vw;margin-bottom:10vh}
.archive-intro .plate{font-family:var(--sans);font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.archive-intro h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(44px,5.5vw,82px);line-height:1;letter-spacing:-.02em;color:var(--paper);font-variation-settings:"SOFT" 100;max-width:18ch;margin:0 auto 20px}
.archive-intro h2 em{color:var(--ember)}
.archive-intro p{max-width:52ch;margin:0 auto;color:rgba(244,236,216,.68);font-size:17px;line-height:1.75;font-weight:300;font-family:var(--serif);font-style:italic}

.videos-section{background:var(--ink);padding:18vh 0 14vh}
.videos-section .intro{padding:0 8vw;max-width:1040px;margin:0 auto 6vh}
.videos-section .plate{font-family:var(--sans);font-size:10px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.videos-section h2{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(44px,5.5vw,82px);line-height:.95;letter-spacing:-.025em;margin-bottom:26px;color:var(--paper);font-variation-settings:"SOFT" 100}
.videos-section h2 em{color:var(--ember)}
.videos-section p{max-width:52ch;color:rgba(244,236,216,.68);font-size:16.5px;line-height:1.75;font-family:var(--serif);font-style:italic}
.video-feature{max-width:1100px;margin:0 auto;padding:0 40px}
.video-feature .player{width:100%;aspect-ratio:16/9;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.video-feature .player iframe{width:100%;height:100%;border:0}
.video-feature .caption{margin-top:18px}
.video-feature h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;color:var(--paper)}
.video-feature .date{font-family:var(--hand);color:var(--gold);font-size:18px;transform:rotate(-1deg);display:inline-block;margin-top:4px}

.video-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:32px;padding:0 40px;max-width:1400px;margin:0 auto}
.video-list article{}
.video-list .player-sm{aspect-ratio:16/9;overflow:hidden}
.video-list .player-sm iframe{width:100%;height:100%;border:0}
.video-list h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:19px;color:var(--paper);margin-top:12px}
.video-list .date{font-family:var(--hand);font-size:15px;color:var(--gold);transform:rotate(-1deg);display:inline-block;margin-top:2px}

.shop-item-page{background:var(--ink)}

/* Practices-section + library tiles, preserved compact */
.practices-section{padding:18vh 0 12vh}
.practice-library{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;max-width:1240px;margin:0 auto;padding:0 40px}
.practice-tile{display:block;background:var(--ink-2);padding:34px 30px;border:1px solid var(--rule);color:var(--paper);transition:border-color .4s ease, transform .4s ease}
.practice-tile:hover{border-color:var(--ember);transform:translateY(-3px)}
.practice-tile h3{font-family:var(--serif);font-style:italic;font-weight:300;font-size:24px;line-height:1.15;margin-bottom:10px;font-variation-settings:"SOFT" 100}
.practice-tile .subtitle{font-family:var(--serif);font-style:italic;font-size:14px;color:var(--mute-2);margin-bottom:14px;line-height:1.45}
.practice-tile .duration{font-family:var(--hand);color:var(--gold);font-size:16px;transform:rotate(-1deg);display:inline-block}

/* Practice detail */
.practice-detail{padding:22vh 28px 14vh;background:var(--paper);color:var(--ink)}
.practice-detail .reading{max-width:640px;margin:0 auto}
.practice-detail .reading .plate{font-family:var(--sans);font-size:10px;letter-spacing:.44em;text-transform:uppercase;color:var(--ember);font-weight:500;margin-bottom:28px;display:flex;align-items:center;gap:16px}
.practice-detail .reading .plate::before{content:"";width:40px;height:1px;background:var(--ember)}
.practice-detail h1{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(46px,6vw,76px);line-height:1;letter-spacing:-.025em;margin-bottom:20px;font-variation-settings:"SOFT" 100}
.practice-detail h1 em{color:var(--ember)}
.practice-detail .subtitle{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--mute);margin-bottom:46px;line-height:1.4}
.practice-detail .intro-quote{padding:24px 28px;border-left:3px solid var(--ember);margin:34px 0;font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;color:var(--ink-2)}
.practice-detail .section-h{font-family:var(--serif);font-style:italic;font-weight:400;font-size:28px;margin:50px 0 20px;letter-spacing:-.015em}
.practice-detail .reading p{font-size:18px;line-height:1.85;color:var(--ink);margin-bottom:22px;font-weight:300}

body.light-page{background:var(--paper);color:var(--ink)}
body.light-page footer{background:var(--paper);color:var(--mute)}
body.light-page footer .brand-name{color:var(--ink)}