:root{
  --bg:#f3ece1;--surface:#fbf7f0;--ink:#2b1d14;--muted:#7a6656;--line:#e2d6c5;
  --accent:#b5541f;--accent2:#c89b3c;--onaccent:#fff;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --radius:18px;
  color-scheme:light;
}
:root[data-dark]{color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);transition:background .8s,color .8s;min-height:100vh;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
#ambient{position:fixed;inset:0;pointer-events:none;z-index:1}
main,header,.sheet,.toast{position:relative;z-index:2}

/* top bar */
.top{display:flex;align-items:center;gap:20px;padding:16px clamp(16px,4vw,44px);position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.mark-ring{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--ink);position:relative}
.mark-ring:after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);top:-4px;left:7px;box-shadow:0 0 10px var(--accent)}
.mark-word{font:500 21px/1 var(--display);letter-spacing:-.3px}
.mark-word em{color:var(--accent);font-style:italic}
.presence{flex:1;display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.presence .dot{width:7px;height:7px;border-radius:50%;background:#3bb273;box-shadow:0 0 0 4px color-mix(in srgb,#3bb273 25%,transparent);flex:none;animation:breathe 2.6s ease-in-out infinite}
.topnav{display:flex;gap:6px;align-items:center}
.topnav button{padding:8px 14px;border-radius:99px;font-size:13px;color:var(--muted)}
.topnav button.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.avatar{width:34px;height:34px;border-radius:50%!important;padding:0!important;background:var(--surface)!important;box-shadow:0 0 0 1px var(--line);font-size:12px!important;font-weight:600}
.avatar.member{background:var(--accent)!important;color:var(--onaccent)!important;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--accent2)}
@keyframes breathe{50%{box-shadow:0 0 0 7px color-mix(in srgb,#3bb273 0%,transparent)}}

main{padding:8px clamp(16px,4vw,44px) 120px;max-width:1440px;margin:auto}
.eyebrow{font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.4px;margin:0}
.muted{color:var(--muted)}

/* ===== A: day ring ===== */
.ring-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);gap:clamp(20px,4vw,56px);align-items:center;min-height:calc(100vh - 140px)}
.hero-photo{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:832/1100;max-height:calc(100vh - 150px);width:100%;justify-self:center;background:var(--line);box-shadow:0 30px 80px -30px color-mix(in srgb,var(--ink) 50%,transparent)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s}
.hero-photo .cap{position:absolute;left:0;right:0;bottom:0;padding:70px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.66));color:#fff}
.hero-photo .cap h2{font-size:clamp(22px,2.4vw,30px)}
.hero-photo .cap p{margin:6px 0 0;font-size:13px;opacity:.85}
.stackbadge{position:absolute;top:16px;right:16px;background:rgba(10,10,10,.5);color:#fff;font-size:12px;padding:6px 10px;border-radius:99px;backdrop-filter:blur(8px);display:flex;gap:6px;align-items:center}
.stackbadge i{width:12px;height:12px;border:1.5px solid #fff;border-radius:3px;box-shadow:3px -3px 0 -1.5px rgba(10,10,10,.5),3px -3px 0 0 #fff;display:inline-block}
.hero-photo button.open{position:absolute;inset:0;width:100%}

.dialcol{display:flex;flex-direction:column;align-items:center;gap:22px}
.dial{width:min(380px,82vw);aspect-ratio:1;position:relative}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .ringtrack{fill:none;stroke:var(--line);stroke-width:2}
.dial .ringlived{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.dial .tick{stroke:var(--muted);stroke-width:1}
.dial .hourlbl{fill:var(--muted);font:11px var(--sans);text-anchor:middle;dominant-baseline:middle}
.dial .bead{cursor:pointer}
.dial .bead circle.b{fill:var(--surface);stroke:var(--ink);stroke-width:1.5;transition:r .2s}
.dial .bead.on circle.b{fill:var(--accent);stroke:var(--accent)}
.dial .bead circle.halo{fill:none;stroke:var(--accent);stroke-width:1;opacity:.0}
.dial .bead.on circle.halo{opacity:.5;animation:halo 2.4s ease-out infinite}
.dial .bead.multi circle.b2{fill:none;stroke:var(--ink);stroke-width:1;opacity:.5}
@keyframes halo{from{r:9;opacity:.6}to{r:20;opacity:0}}
.dial .keyhole{fill:var(--muted)}
.dial .sun{fill:var(--accent2)}
.dial-center{position:absolute;inset:18%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
.dial-center .clock{font:400 clamp(34px,4vw,46px)/1 var(--display);letter-spacing:-1px}
.dial-center .where{font-size:13px;color:var(--muted)}
.dial-center .status{font:italic 17px/1.35 var(--display);max-width:220px;margin-top:6px}

.layers{display:grid;gap:10px;width:min(420px,100%)}
.chip{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line);text-align:left;width:100%}
.chip small{display:block;color:var(--muted);font-size:12px}
.chip b{font-weight:600;font-size:14px}
.chip .grow{flex:1;min-width:0}
.disc{width:40px;height:40px;border-radius:50%;flex:none;background:radial-gradient(circle,var(--bg) 0 14%,#111 15% 40%,#2a2a2a 41% 43%,#111 44% 100%);position:relative;animation:spin 4s linear infinite;animation-play-state:paused}
.disc:after{content:"";position:absolute;inset:36%;border-radius:50%;background:var(--accent)}
.playing .disc{animation-play-state:running}
@keyframes spin{to{transform:rotate(360deg)}}
.eq{display:flex;gap:2px;align-items:flex-end;height:16px}
.eq i{width:3px;background:var(--accent);border-radius:2px;height:4px}
.playing .eq i{animation:eq .9s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.2s!important}.eq i:nth-child(3){animation-delay:.45s!important}.eq i:nth-child(4){animation-delay:.1s!important}
@keyframes eq{50%{height:16px}}
.voicebtn{width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--onaccent);display:grid;place-items:center;flex:none}
.voicebtn svg{width:16px;height:16px}
.wave{display:flex;align-items:center;gap:2px;height:28px}
.wave i{width:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 30%,transparent);transition:background .2s}
.wave i.lit{background:var(--accent)}
.transcript{display:none;margin:8px 0 0;font:italic 14px/1.4 var(--display);color:var(--ink)}
.heard .transcript{display:block;animation:fadein .4s}
.chip[data-voicechip]{flex-wrap:wrap}



@keyframes fadein{from{opacity:0;transform:translateY(4px)}}

.days{margin-top:56px}
.dayrow{margin-bottom:44px}
.dayhead{display:flex;align-items:baseline;gap:14px;margin-bottom:16px}
.dayhead h3{font-size:26px}
.dayhead span{color:var(--muted);font-size:13px}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,240px);gap:22px;overflow-x:auto;padding:12px 4px 18px;scroll-snap-type:x mandatory}
.strip::-webkit-scrollbar{height:6px}.strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

/* moment stack (shared) */
.stack{display:block;width:100%;scroll-snap-align:start;text-align:left}
.stack .cards{display:block;position:relative;aspect-ratio:3/4}
.stack .card{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:var(--line);transition:transform .35s cubic-bezier(.2,.8,.2,1);box-shadow:0 12px 30px -14px rgba(0,0,0,.45)}
.stack .card img{width:100%;height:100%;object-fit:cover}
.stack .card:nth-child(2){transform:rotate(3.5deg) translate(6px,-2px)}
.stack .card:nth-child(1){transform:rotate(-3deg) translate(-4px,2px)}
.stack:hover .card:nth-child(1){transform:rotate(-8deg) translate(-26px,4px)}
.stack:hover .card:nth-child(2){transform:rotate(8deg) translate(26px,-4px)}
.stack:hover .card:nth-child(3){transform:translateY(-6px)}
.stack .meta{display:block;padding-top:14px}
.stack .meta b{font:500 16px/1.2 var(--display);display:block}
.stack .meta small{color:var(--muted);font-size:12px}
.stackwrap{padding-bottom:6px}

/* ===== B: journal ===== */
.journal{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,380px);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 2px 30px;min-height:calc(100vh - 160px)}
.page{scroll-snap-align:start;background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:24px 22px;display:flex;flex-direction:column;gap:22px}
.page.today{box-shadow:0 0 0 1.5px var(--accent)}
.page .date{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px}
.page .date h3{font-size:30px}
.page .date span{font-size:12px;color:var(--muted);text-align:right}
.entry-time{font-size:11px;color:var(--muted);letter-spacing:1px;margin-bottom:8px}
.note{font:italic 19px/1.4 var(--display)}
.page .stack{width:78%;margin:6px auto 0}

/* ===== C: board ===== */
.boardhead{display:flex;justify-content:space-between;align-items:end;gap:20px;margin:16px 0 26px;flex-wrap:wrap}
.boardhead h1{font-size:clamp(34px,5vw,60px);line-height:1}
.board{columns:4 250px;column-gap:20px}
.tile{break-inside:avoid;margin-bottom:20px;border-radius:var(--radius);background:var(--surface);box-shadow:0 0 0 1px var(--line);overflow:hidden;display:block;width:100%;text-align:left}
.tile.photo{position:relative}
.tile.photo img{width:100%;height:auto}
.tile.photo:after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:none}
.tile.photo .tcap{z-index:1}
.search{min-width:min(360px,100%);padding:12px 16px;border-radius:99px;border:0;box-shadow:0 0 0 1px var(--line);background:var(--surface);color:var(--ink);font:inherit}
.searchnote{font-size:12px;color:var(--muted);margin:8px 4px 0}
.tile.photo .tcap{position:absolute;left:12px;bottom:12px;right:12px;color:#fff;font:500 16px var(--display);text-shadow:0 1px 12px rgba(0,0,0,.6);display:flex;justify-content:space-between;align-items:end}
.tile.photo .tcap small{font:12px var(--sans);opacity:.9}
.tile.text{padding:22px}
.tile.big .note{font-size:24px}
.tile .chip{box-shadow:none;background:transparent;padding:16px}
.tile.poll{padding:20px}
.pollopt{display:flex;justify-content:space-between;position:relative;padding:10px 12px;border-radius:10px;margin-top:8px;overflow:hidden;box-shadow:0 0 0 1px var(--line);width:100%;font-size:14px}
.pollopt .fill{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--accent) 18%,transparent);z-index:0}
.pollopt span{position:relative}

/* ===== moment sheet ===== */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:stretch;justify-content:center}
.sheet[hidden]{display:none}
.sheet-scrim{position:absolute;inset:0;background:color-mix(in srgb,#000 72%,transparent);backdrop-filter:blur(6px)}
.sheet-body{position:relative;margin:auto;width:min(1240px,100%);max-height:100vh;overflow:auto;background:var(--bg);border-radius:var(--radius);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(24px)}}
.viewer{position:relative;background:#0b0b0c;display:flex;flex-direction:column;min-height:min(88vh,900px)}
.viewer .main{flex:1;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}
.viewer .main img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.viewer .hint{position:absolute;top:14px;left:14px;font-size:12px;color:#fff;background:rgba(0,0,0,.45);padding:6px 10px;border-radius:99px}
.viewer .shimmering .hint{background:var(--accent)}
.film{display:flex;gap:6px;padding:10px;overflow-x:auto;background:#0b0b0c}
.film button{flex:none;width:58px;height:78px;border-radius:7px;overflow:hidden;position:relative;opacity:.55;transition:opacity .2s,transform .2s}
.film button img{width:100%;height:100%;object-fit:cover}
.film button.on{opacity:1;box-shadow:0 0 0 2px var(--accent)}
.film button:hover{opacity:1}




.side{padding:28px 28px 32px;display:flex;flex-direction:column;gap:20px}
.side .x{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:18px;z-index:3}
.side h2{font-size:32px;line-height:1.1}
.side .caption{font:italic 18px/1.45 var(--display);margin:0}






.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.btn{padding:11px 16px;border-radius:99px;box-shadow:0 0 0 1px var(--line);background:var(--surface);font-size:14px;font-weight:550;display:inline-flex;gap:8px;align-items:center}
.btn.primary{background:var(--accent);color:var(--onaccent);box-shadow:none}
.btn.ghost{background:transparent}
.fine{font-size:12px;color:var(--muted)}
.divider{height:1px;background:var(--line)}

/* ===== circle ===== */
.circle{max-width:1100px;margin:30px auto}
.circle h1{font-size:clamp(36px,5vw,64px);line-height:1.02;max-width:780px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:40px 0}
.tier{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:26px;display:flex;flex-direction:column;gap:14px}
.tier.feature{box-shadow:0 0 0 2px var(--accent)}
.tier .price{font:400 40px/1 var(--display)}
.tier .price small{font:14px var(--sans);color:var(--muted)}
.tier ul{margin:0;padding:0 0 0 18px;display:grid;gap:7px;font-size:14px}




.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:99px;font-size:14px;z-index:40;box-shadow:0 10px 40px rgba(0,0,0,.3)}


@media (max-width:900px){
  .ring-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .dialcol{min-width:0}
  .strip{grid-auto-columns:minmax(170px,62vw)}
  .hero-photo{aspect-ratio:4/5;max-height:none}
  .sheet-body{grid-template-columns:minmax(0,1fr);border-radius:0;min-height:100vh}
  .side{padding:22px 18px 28px}
  .viewer{min-height:70vh}
  .tiers{grid-template-columns:1fr}
  
  .topnav button{padding:8px 10px}
  .presence{display:none}
  .top{justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* production additions */
.soon{display:inline-block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;padding:5px 10px;border-radius:99px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent);font-weight:600}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:36px 0}
.perk{background:var(--surface);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line);padding:24px}
.perk h3{font-size:22px;margin-bottom:8px}
.perk p{margin:0;color:var(--muted)}
.state{min-height:60vh;display:grid;place-items:center;text-align:center;color:var(--muted)}
.state h2{color:var(--ink);font-size:28px;margin-bottom:10px}
.lastposted{font-size:12px;color:var(--muted)}
a.chip{text-decoration:none;color:inherit}
@media (max-width:900px){.perks{grid-template-columns:1fr}}
.topnav a.navlink{padding:8px 14px;border-radius:99px;font-size:13px;color:var(--muted);text-decoration:none}
.topnav a.navlink.on{background:var(--surface);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
@media (max-width:900px){.topnav a.navlink{padding:7px 9px;font-size:12px}}