@import url('./assets/fonts.css');
:root{--cream:#fff5de;--ink:#291a43;--purple:#3d2569;--coral:#ef7755;--sans:'Be Vietnam Pro',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;color:var(--ink);background:#e9e6e0;font-family:var(--sans);font-size:14px;line-height:1.7}
body.dialog-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:400}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #ef9b77;outline-offset:5px}
.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip:focus{position:fixed;background:var(--cream);padding:12px;z-index:30;left:10px;top:10px}
.eyebrow{font-size:12px;line-height:1.7;letter-spacing:.14em;font-weight:500}
.proposal-bar{background:var(--ink);color:var(--cream);padding:5px 4%;display:flex;justify-content:space-between;gap:12px;font-size:12px}
.proposal-bar a{text-decoration:underline;text-underline-offset:3px}
.site-header{background:var(--coral);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4%;border-bottom:1px solid #291a4340}
.brand{width:174px;flex:0 0 auto}
.site-header nav{display:flex;gap:35px;align-items:center;font-size:12px;text-transform:uppercase}
.site-header nav>a:hover{text-decoration:underline;text-underline-offset:5px}
.nav-note{border:1px solid var(--ink);background:var(--ink);color:var(--cream);padding:10px 15px;font-size:12px;text-transform:uppercase;font-weight:500}
.nav-note span{padding-left:22px;font-size:16px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:13px 18px;min-height:48px;font-size:12px;border:1px solid transparent;font-weight:500;transition:background .2s,color .2s}
.button-dark{background:var(--ink);color:var(--cream)}
.button-dark:hover{background:#694b82}
.button span{font-size:19px;line-height:1}
.button-outline{border-color:var(--ink);background:transparent}
.button-outline:hover{background:var(--ink);color:var(--cream)}
.text-button{font-size:12px;border:0;border-bottom:1px solid currentColor;padding:10px 0;background:transparent;display:inline-flex;align-items:center;gap:35px}
.text-button span{font-size:20px;line-height:1}
/* The desktop ritual is one product installation. Mobile uses normal flow below. */
.brew-room{--room-ink:#f7eee4;--room-accent:#ed9b70;background:#38254f;color:var(--room-ink);position:relative;height:calc(100svh - 120px);min-height:750px;max-height:1000px;isolation:isolate;transition:background .45s,color .45s}
.brew-room[data-step="1"]{background:#77513d;--room-accent:#f7c384}
.brew-room[data-step="2"]{background:#233d3a;--room-accent:#d8b07e}
.room-heading{position:absolute;left:4%;top:35px;z-index:3}
.room-heading .eyebrow{font-size:12px;color:#dacddd}
.room-heading h1{font:400 clamp(40px,4.4vw,67px)/1.18 var(--sans);letter-spacing:-.065em;margin-top:21px}
.room-heading h1 span{color:var(--room-accent)}
.ritual-nav{position:absolute;left:4%;bottom:135px;z-index:4;display:flex;flex-direction:column}
.ritual-nav button{display:flex;align-items:center;gap:18px;background:transparent;border:0;color:#c6b5cd;padding:17px 0;text-align:left;min-width:180px}
.ritual-nav button span{font-size:12px;border:1px solid #a591b4;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 auto}
.ritual-nav button+button span:before{content:'';height:30px;width:1px;background:#80698e;position:absolute;bottom:33px;left:16px}
.ritual-nav button strong{font-size:12px;font-weight:400}
.ritual-nav button.is-active span{background:var(--room-accent);color:#38254f;border-color:var(--room-accent)}
.ritual-nav button.is-active strong{color:var(--room-ink)}
.ritual-visual{position:absolute;top:14%;bottom:14%;left:24%;right:22%;display:flex;align-items:center;justify-content:center;isolation:isolate}
.orbit{position:absolute;border:1px solid #bc9cca55;border-radius:50%;width:min(38vw,570px);aspect-ratio:1;transform:rotate(-18deg);z-index:-1}
.orbit-inner{width:min(32vw,480px);border-style:dashed;border-color:#bc9cca33;transform:rotate(18deg)}
.orbit:after{content:'';position:absolute;width:9px;height:9px;border-radius:50%;background:var(--room-accent);right:13%;top:14%}
.orbit-label{position:absolute;bottom:0;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.28em;white-space:nowrap}
.orbit-tick{position:absolute;color:#b194c1;font:21px monospace}
.tick-one{left:0;top:18%}.tick-two{right:0;bottom:20%}
.ritual-visual>img{width:min(36vw,490px);height:auto;max-height:90%;object-fit:contain;transform:rotate(-7deg);filter:drop-shadow(20px 35px 15px #100b173b);transition:transform .5s}
.brew-room[data-step="1"] .ritual-visual>img{width:auto;max-width:90%;height:95%;transform:rotate(8deg)}
.brew-room[data-step="2"] .ritual-visual>img{width:min(32vw,430px);aspect-ratio:.85;object-fit:cover;object-position:center;transform:rotate(-4deg);border:8px solid #e9dfcc}
.ritual-panel{position:absolute;right:4%;top:29%;width:235px;z-index:3;outline-offset:8px}
.ritual-panel>.eyebrow{font-size:12px;letter-spacing:.1em;color:var(--room-accent)}
.ritual-panel h2{font:400 32px/1.25 var(--sans);letter-spacing:-.05em;margin:23px 0 20px}
.ritual-panel>p:not(.eyebrow){font-size:12px;line-height:1.9;color:#e0d3dc}
.ritual-fact{border-top:1px solid #c6a3c347;border-bottom:1px solid #c6a3c347;padding:20px 0;margin-top:27px}
.ritual-fact span{display:block;font-size:12px;letter-spacing:.14em;color:#bda8c5;margin-bottom:7px}
.ritual-fact strong{font-size:13px;font-weight:400;color:var(--room-accent)}
.ritual-panel>a{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:12px;margin-top:24px}
.ritual-panel>a:hover{text-decoration:underline;text-underline-offset:5px}
.room-bottom{position:absolute;left:4%;right:4%;bottom:25px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #bca3c43b;padding-top:20px;gap:20px}
.room-bottom>span{font-size:12px;letter-spacing:.14em;color:#b9a3c2}
.room-bottom>div{display:flex;align-items:center;gap:27px;flex:0 0 auto}
.room-bottom>div>span{font-size:12px;letter-spacing:.12em}
.room-bottom button{border:1px solid #c5afce7a;border-radius:50%;color:var(--room-ink);background:transparent;width:45px;height:45px;font-size:22px}
.room-bottom button:hover{background:var(--room-accent);color:#38254f}
/* Fractional grid tracks share the remaining width after the gap. */
.gift-interlude{background:#e9e6e0;padding:75px 10%;display:grid;grid-template-columns:minmax(0,36fr) minmax(0,64fr);gap:65px;align-items:center;color:#38254f}
.interlude-image{transform:rotate(-4deg);max-width:370px;min-width:0}
.interlude-image img{width:100%;height:auto}
.interlude-copy{min-width:0}
.interlude-copy .eyebrow{font-size:12px}
.interlude-copy h2{font:400 46px/1.2 var(--sans);letter-spacing:-.055em;margin:18px 0 20px}
.interlude-copy>p:not(.eyebrow){max-width:390px;font-size:12px;line-height:1.9}
.interlude-copy label{display:block;font-size:12px;margin:21px 0 7px}
.interlude-copy select{display:block;border:0;border-bottom:1px solid #927f9b;background:transparent;color:inherit;font:12px var(--sans);padding:11px 24px 11px 0;width:100%;max-width:380px;min-width:0;border-radius:0}
.interlude-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:22px}
.interlude-actions>a{font-size:12px}
.interlude-actions>.button{background:#38254f;font-size:12px;padding:12px 16px;min-height:45px;gap:30px}
.interlude-actions>.button:hover{background:#6a4a7c}
.story-section{position:relative;min-height:680px;background:var(--ink);color:var(--cream);isolation:isolate}
.story-photo{position:absolute;inset:0 0 0 34%;z-index:-1}
.story-photo>img{height:100%;width:100%;object-fit:cover;object-position:center 45%}
.story-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#291a43 0%,#291a4360 30%,transparent 70%)}
.photo-caption{position:absolute;right:26px;bottom:24px;font-size:12px;letter-spacing:.1em}
.story-copy{padding:60px 4% 55px;min-height:680px;width:100%}
.story-copy .eyebrow{font-size:12px;color:#d9c6d6;max-width:280px;margin-bottom:28px}
.story-copy h2{font:500 clamp(75px,7.5vw,112px)/1.08 var(--sans);letter-spacing:-.06em;width:340px;margin:0}
.story-copy h2 em{color:var(--coral);font-style:normal}
.story-copy>p:not(.eyebrow){font-size:12px;max-width:260px;margin:22px 0 0;line-height:1.85}
.story-copy>p:not(.eyebrow)+p{display:none}
.story-copy .text-button{margin-top:20px;font-size:12px;gap:45px}
.daily-section{background:#c7d1ca;display:grid;grid-template-columns:minmax(0,42fr) minmax(0,37fr) minmax(0,21fr);padding:90px 4%;align-items:start}
.daily-copy{padding:0 30px 0 0;min-width:0}
.daily-copy h2{font:500 clamp(50px,5.5vw,80px)/1.1 var(--sans);letter-spacing:-.06em;margin-top:25px}
.daily-copy h2 em{color:#594291;font-style:normal}
.daily-copy>p:not(.eyebrow){font-size:12px;line-height:1.9;max-width:310px;margin:27px 0}
.daily-copy .button{font-size:12px;gap:28px}
.daily-large{padding:35px 18px 0 0;transform:rotate(3deg);min-width:0}
.daily-large img{height:360px;width:100%;object-fit:cover;object-position:45% center}
.daily-small{padding:230px 0 0;transform:rotate(-5deg);margin-left:-20px;min-width:0}
.daily-small img{height:235px;width:100%;object-fit:cover}
.daily-section figcaption{font-size:12px;letter-spacing:.03em;line-height:1.8;font-weight:500;margin-top:13px}
footer{background:#e9e6e0;padding:35px 4% 22px}
.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center;padding-bottom:30px;border-bottom:1px solid #291a4340}
.footer-top img{width:174px}
.footer-top p{font:500 17px/1.6 var(--sans);letter-spacing:-.04em}
.footer-top>a:last-child{font-size:12px}
.footer-bottom{display:flex;gap:30px;align-items:center;padding-top:20px;font-size:12px}
.footer-bottom p{margin-right:auto;max-width:650px}
.footer-bottom a{white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
/* Local message preview, never submitted. */
dialog{border:0;padding:0;width:min(920px,calc(100% - 40px));max-height:calc(100dvh - 40px);background:var(--cream);color:var(--ink)}
dialog::backdrop{background:#231614b3;backdrop-filter:blur(4px)}
.dialog-close{position:absolute;right:14px;top:12px;border:1px solid #bdb1c8;width:35px;height:35px;border-radius:50%;font-size:25px;line-height:1;background:var(--cream);z-index:2;display:grid;place-items:center}
.note-layout{display:grid;grid-template-columns:minmax(0,48fr) minmax(0,52fr)}
.note-preview{padding:40px 35px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#aaa2b5;min-width:0}
.postcard{background:var(--cream);color:var(--purple);min-height:400px;width:100%;padding:24px;box-shadow:8px 12px 0 #291a4325;transform:rotate(-5deg);display:flex;flex-direction:column}
.note-preview[data-color="coral"] .postcard{background:var(--coral);color:var(--ink)}
.note-preview[data-color="purple"] .postcard{background:var(--purple);color:var(--cream)}
.note-preview[data-color="purple"] .postcard img{filter:brightness(0) invert(1)}
.postcard-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid currentColor;padding-bottom:17px}
.postcard-top>span{font:500 28px var(--sans);letter-spacing:-.06em}
.postcard-top img{width:36px;height:36px}
.postcard-to{font-size:12px;margin-top:26px;overflow-wrap:anywhere}
.postcard-message{font:500 26px/1.5 var(--sans);letter-spacing:-.04em;margin:20px 0 30px;white-space:pre-wrap;overflow-wrap:anywhere}
.postcard-bottom{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;gap:10px;margin-top:auto;padding-top:15px}
.preview-caption{font-size:12px;letter-spacing:.13em;margin-top:30px}
.note-fields{padding:40px 36px 26px;min-width:0}
.note-fields>.eyebrow{font-size:12px;padding-right:20px}
.note-fields h2{font:500 46px/1.15 var(--sans);letter-spacing:-.06em;margin-top:17px}
.note-fields h2 br{display:none}
.note-product{font-size:12px;margin:15px 0 24px;color:#594291}
.note-fields label{display:block;font-size:12px;margin-bottom:7px}
.note-fields input,.note-fields textarea{border:1px solid #bdb1c8;border-radius:0;background:transparent;width:100%;font-size:12px;padding:10px 12px;line-height:1.7}
.note-fields input{margin-bottom:16px}
.note-fields textarea{resize:vertical;min-height:110px}
.message-label{display:flex!important;justify-content:space-between;gap:15px}
.message-label span{font-size:12px}
.colors{display:flex;gap:9px;border:0;padding:12px 0 0;margin:10px 0 22px}
.colors legend{font-size:12px;padding:0}
.colors button{width:25px;height:25px;border:1px solid #99785f;border-radius:50%;background:var(--cream);padding:0}
.colors button[data-color="coral"]{background:var(--coral)}
.colors button[data-color="purple"]{background:var(--purple)}
.colors button[aria-pressed="true"]{outline:1px solid var(--purple);outline-offset:3px}
.note-fields>.button{width:100%}
.copy-status{font-size:12px;min-height:17px;margin-top:8px}
.demo-note{font-size:12px;line-height:1.8;color:#765d82;margin-top:5px}
@media(min-width:1600px){
  .ritual-panel{width:280px;top:30%}.ritual-panel h2{font-size:40px}.ritual-panel>p:not(.eyebrow){font-size:13px}
  .ritual-visual{left:25%;right:23%}.ritual-visual>img{width:520px}.brew-room[data-step="2"] .ritual-visual>img{width:470px}
  .room-heading h1{font-size:76px}.room-heading{top:45px}.ritual-nav{bottom:150px}
}
@media(min-width:801px) and (max-width:1100px){
  .brew-room{min-height:750px}.room-heading h1{font-size:46px}.ritual-panel{width:195px;top:35%}.ritual-panel h2{font-size:28px}
  .ritual-visual{left:23%;right:27%;top:24%;bottom:18%}.ritual-visual>img{width:36vw}.brew-room[data-step="2"] .ritual-visual>img{width:31vw}
  .ritual-nav button{min-width:130px;gap:12px}.ritual-nav button strong{font-size:12px}
  .gift-interlude{padding:60px 6%;gap:40px}.interlude-copy h2{font-size:39px}
  .daily-section{grid-template-columns:minmax(0,45fr) minmax(0,55fr);row-gap:0}.daily-copy{grid-row:1/3}.daily-copy h2{font-size:60px}
  .daily-large{padding:30px 10px 0 15px}.daily-large img{height:290px}.daily-small{grid-column:2;padding:0 10px 0 40%;margin-top:-30px;margin-left:0}.daily-small img{height:200px}
}
@media(max-width:800px){
  .proposal-bar{padding:5px 5%;font-size:12px}.site-header{padding:17px 5%;gap:15px}.brand{width:140px}
  .site-header nav{gap:0}.site-header nav>a{display:none}.nav-note{font-size:12px;padding:9px 11px}.nav-note span{padding-left:12px;font-size:14px}
  .brew-room{display:grid;grid-template-columns:minmax(0,1fr);gap:0;height:auto;min-height:0;max-height:none;padding:30px 6% 22px}
  .room-heading,.ritual-nav,.ritual-visual,.ritual-panel,.room-bottom{position:relative;inset:auto;width:auto;min-width:0}
  .room-heading .eyebrow{font-size:12px}.room-heading h1{font-size:clamp(34px,8.8vw,50px);line-height:1.18;margin-top:18px;letter-spacing:-.06em}
  .ritual-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:27px;border-top:1px solid #bca3c43b;border-bottom:1px solid #bca3c43b}
  .ritual-nav button{min-width:0;min-height:67px;display:flex;align-items:center;gap:8px;padding:12px 0}
  .ritual-nav button span{width:25px;height:25px;font-size:12px}.ritual-nav button strong{font-size:12px;line-height:1.4}
  .ritual-nav button+button span:before{display:none}
  .ritual-visual{height:350px;margin:16px 0 23px;display:flex;align-items:center;justify-content:center}
  .ritual-visual>img{width:min(78%,300px);max-height:83%;height:auto;transform:rotate(-7deg);filter:drop-shadow(12px 20px 12px #100b173b)}
  .brew-room[data-step="1"] .ritual-visual>img{width:auto;max-width:80%;height:88%;max-height:88%;transform:rotate(6deg)}
  .brew-room[data-step="2"] .ritual-visual>img{width:min(76%,270px);height:295px;max-height:85%;aspect-ratio:auto;border-width:6px}
  .orbit{width:min(91%,325px)}.orbit-inner{width:min(76%,270px)}.orbit-label{font-size:12px;letter-spacing:.16em;bottom:0;max-width:100%}
  .tick-one{top:7%;left:2%}.tick-two{bottom:9%;right:1%}
  .ritual-panel{display:block;padding-top:4px}.ritual-panel>.eyebrow{font-size:12px}
  .ritual-panel h2{font-size:33px;line-height:1.22;letter-spacing:-.05em;margin:17px 0 18px;max-width:370px}
  .ritual-panel h2 br{display:none}.ritual-panel>p:not(.eyebrow){font-size:12px;line-height:1.9;max-width:480px}
  .ritual-fact{padding:17px 0;margin-top:23px}.ritual-fact span{font-size:12px;margin-bottom:7px}.ritual-fact strong{font-size:13px}
  .ritual-panel>a{font-size:12px;margin-top:21px;justify-content:flex-start;gap:35px}
  .room-bottom{margin-top:30px;padding-top:18px;gap:15px}.room-bottom>span{font-size:12px;letter-spacing:.07em;max-width:175px}
  .room-bottom>div{gap:15px}.room-bottom>div>span{font-size:12px}.room-bottom button{width:38px;height:38px;font-size:20px}
  .gift-interlude{padding:45px 6%;grid-template-columns:minmax(0,1fr);gap:25px}
  .interlude-image{width:190px;max-width:60%;transform:rotate(-4deg);margin:0 auto;padding:0}
  .interlude-copy .eyebrow{font-size:12px}.interlude-copy h2{font-size:38px;line-height:1.2;margin:17px 0 20px}
  .interlude-copy>p:not(.eyebrow){font-size:12px;max-width:440px;line-height:1.9}
  .interlude-copy label{font-size:12px;margin-top:23px}.interlude-copy select{font-size:12px;max-width:100%;padding:13px 25px 13px 0}
  .interlude-actions{gap:21px;margin-top:24px}.interlude-actions>.button{font-size:12px}.interlude-actions>a{font-size:12px}
  .story-section{min-height:0;display:grid;grid-template-columns:minmax(0,1fr)}
  .story-photo{position:relative;inset:auto;z-index:auto;height:360px;min-width:0}.story-photo>img{object-position:60% 40%}
  .story-photo:after{background:linear-gradient(0deg,#291a43,transparent 60%)}.photo-caption{font-size:12px;right:6%;bottom:19px}
  .story-copy{min-height:0;padding:0 6% 43px}.story-copy .eyebrow{font-size:12px;max-width:none;margin-bottom:22px}
  .story-copy h2{font-size:47px;line-height:1.12;width:auto;max-width:100%;letter-spacing:-.05em}
  .story-copy h2 br{display:none}.story-copy h2 em{display:block}.story-copy>p:not(.eyebrow){font-size:12px;max-width:430px;line-height:1.9;margin-top:22px}
  .story-copy .text-button{font-size:12px;margin-top:20px}
  .daily-section{padding:45px 6%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 15px}
  .daily-copy{grid-column:1/-1;padding:0}.daily-copy .eyebrow{font-size:12px}.daily-copy h2{font-size:46px;line-height:1.12;margin-top:21px}
  .daily-copy>p:not(.eyebrow){font-size:12px;max-width:420px;margin:23px 0}.daily-copy .button{font-size:12px;gap:25px}
  .daily-large{grid-column:1/-1;padding:5px 10% 0 3%;transform:rotate(2deg)}.daily-large img{height:235px}
  .daily-small{grid-column:2;padding:0 8px 0 0;transform:rotate(-3deg);margin:-45px 0 0}.daily-small img{height:170px}
  .daily-section figcaption{font-size:12px;line-height:1.7;margin-top:10px}
  footer{padding:32px 6% 23px}.footer-top{flex-wrap:wrap;gap:23px;padding-bottom:25px}.footer-top img{width:140px}.footer-top p{font-size:13px}
  .footer-top>a:last-child{flex-basis:100%;font-size:12px}.footer-bottom{flex-wrap:wrap;gap:14px 22px;font-size:12px;line-height:1.85;padding-top:18px}
  .footer-bottom p{flex-basis:100%;max-width:none}
  dialog{width:calc(100% - 24px);max-height:calc(100dvh - 24px)}.dialog-close{width:31px;height:31px;right:10px;top:10px;font-size:22px}
  .note-layout{display:flex;flex-direction:column}.note-fields{padding:33px 23px 20px}.note-fields>.eyebrow{font-size:12px}
  .note-fields h2{font-size:36px;margin-top:16px}.note-product{font-size:12px;margin:14px 0 22px}
  .note-fields input,.note-fields textarea{font-size:16px;line-height:1.5}.note-fields label{font-size:12px}.message-label span{font-size:12px}
  .note-preview{order:2;padding:38px 30px 24px}.postcard{min-height:340px;max-width:380px;padding:21px;transform:rotate(-3deg)}
  .postcard-message{font-size:23px;line-height:1.5}.postcard-top>span{font-size:26px}.preview-caption{margin-top:25px;font-size:12px}
  .demo-note{font-size:12px}.copy-status{font-size:12px}
}
@media(max-width:360px){
  .brand{width:124px}.nav-note{font-size:12px;padding:8px 9px}.nav-note span{padding-left:8px}.proposal-bar{font-size:12px}
  .brew-room{padding-top:27px}.room-heading h1{font-size:34px}.room-heading .eyebrow{font-size:12px}
  .ritual-nav{gap:8px;margin-top:24px}.ritual-nav button{gap:6px}.ritual-nav button strong{font-size:12px}.ritual-nav button span{width:23px;height:23px}
  .ritual-visual{height:305px;margin-top:15px;margin-bottom:23px}.ritual-visual>img{width:79%;max-height:83%}
  .brew-room[data-step="2"] .ritual-visual>img{height:255px}.ritual-panel h2{font-size:30px}.ritual-panel>p:not(.eyebrow){font-size:12px}
  .room-bottom>span{max-width:125px;font-size:12px}.room-bottom>div{gap:11px}.room-bottom>div>span{font-size:12px}
  .interlude-copy h2{font-size:34px}.interlude-copy>p:not(.eyebrow){font-size:12px}.interlude-actions{gap:19px}.interlude-actions>a{font-size:12px}
  .story-photo{height:310px}.story-copy h2{font-size:42px}.story-copy>p:not(.eyebrow){font-size:12px}
  .daily-copy h2{font-size:41px}.daily-copy>p:not(.eyebrow){font-size:12px}.daily-large img{height:200px}.daily-small img{height:145px}
  .footer-top img{width:125px}.footer-top p{font-size:12px}.footer-top{gap:18px}.note-fields{padding-left:19px;padding-right:19px}
  .postcard-message{font-size:21px}.postcard{min-height:320px}.postcard-top>span{font-size:24px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Readable type and a bounded decorative orbit. */
body{font-size:16px}.proposal-bar{font-size:12px;line-height:1.5}.site-header nav,.nav-note{font-size:14px}.room-heading h1{font-size:56px;line-height:1.15;letter-spacing:-.045em}.eyebrow,.room-heading .eyebrow,.ritual-panel>.eyebrow{font-size:12px;letter-spacing:.07em}.ritual-nav button strong{font-size:14px}.ritual-nav button span{font-size:12px}.ritual-panel h2{font-size:30px;letter-spacing:-.035em}.ritual-panel>p:not(.eyebrow),.interlude-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),.daily-copy>p:not(.eyebrow){font-size:15px;line-height:1.7}.ritual-fact span,.orbit-label,.room-bottom>span{font-size:12px;letter-spacing:.04em}.ritual-fact strong,.ritual-panel>a,.button,.text-button,.interlude-actions>a,.interlude-copy label{font-size:14px}.interlude-copy h2{font-size:38px}.interlude-copy select,.note-fields input,.note-fields textarea{font-size:16px}.story-copy h2{font-size:54px}.daily-copy h2{font-size:46px}.photo-caption,.daily-section figcaption,.footer-bottom,.demo-note{font-size:12px}.note-fields h2{font-size:30px}.note-fields label,.note-fields legend{font-size:14px}.orbit{transform:none}.orbit-inner{transform:none}.postcard-message{font-size:24px;line-height:1.5}
@media(max-width:800px){.proposal-bar{font-size:12px;gap:18px;align-items:flex-start}.proposal-bar>span{max-width:48%;text-align:right}.site-header{gap:12px}.brand{max-width:140px;min-width:0}.nav-note{font-size:12px;padding:12px;gap:10px}.room-heading h1{font-size:36px;line-height:1.2}.room-heading .eyebrow{font-size:12px}.ritual-nav button{gap:7px;min-width:0}.ritual-nav button strong{font-size:12px;white-space:normal;line-height:1.5}.ritual-nav button span{font-size:12px;width:27px;height:27px;flex-shrink:0}.ritual-panel h2{font-size:28px}.ritual-panel>p:not(.eyebrow),.interlude-copy>p:not(.eyebrow),.story-copy>p:not(.eyebrow),.daily-copy>p:not(.eyebrow){font-size:15px}.ritual-panel>a,.interlude-actions>a,.button,.text-button{font-size:14px}.room-bottom>span{font-size:12px;line-height:1.5;max-width:170px}.room-bottom>div>span{font-size:12px}.orbit-label{font-size:12px;letter-spacing:.03em}.interlude-copy h2{font-size:32px}.story-copy h2,.daily-copy h2{font-size:34px;line-height:1.2}.daily-section figcaption,.photo-caption{font-size:12px;line-height:1.6}.note-fields h2{font-size:28px}.footer-bottom{font-size:12px;line-height:1.6}.postcard-message{font-size:22px}}

/* Refinement: hierarchy, responsive composition, and complete control states. */
html { scrollbar-gutter: stable; scrollbar-color: #977aab var(--ink); }
::selection { background: var(--coral); color: var(--ink); }
[hidden] { display: none !important; }
h1,h2,h3 { text-wrap: balance; letter-spacing: -.03em; }
.room-heading h1 { margin: 0 0 18px; letter-spacing: -.035em; }
.room-heading>.eyebrow { letter-spacing: .04em; }
.ritual-panel h2 { margin: 0 0 16px; }
.ritual-panel>.eyebrow { margin-bottom: 20px; font-size: 11px; letter-spacing: .04em; }
.ritual-fact { padding-block: 18px; margin-top: 24px; }
.ritual-panel>a { min-height: 44px; margin-top: 14px; }
.ritual-nav button { min-height: 60px; }
.ritual-nav button:hover strong { color: var(--room-ink); }
.ritual-visual { aspect-ratio: 1; margin-block: auto; }
.ritual-visual>img { transition: none; }
.ritual-panel[aria-busy="true"] { cursor: progress; }
.image-status { font-size: 13px; line-height: 1.6; }
.image-status:empty { display: none; }
#ritual-status { position: absolute; left: 4%; bottom: 92px; color: var(--room-ink); }
#gift-status { margin-top: 12px; }
.interlude-copy h2 { margin: 0 0 18px; letter-spacing: -.03em; }
.interlude-copy>.eyebrow { margin-bottom: 20px; letter-spacing: .04em; }
.interlude-image { aspect-ratio: 1; display: grid; place-items: center; }
.interlude-image img { height: 100%; width: 100%; object-fit: contain; }
.interlude-actions>a { display: inline-flex; align-items: center; min-height: 44px; }
.story-copy h2 { letter-spacing: -.035em; }
.story-copy>.eyebrow { margin-top: 24px; margin-bottom: 18px; }
.story-copy>p:not(.eyebrow)+p { display: block; }
.story-copy>p:not(.eyebrow) { max-width: 32ch; }
.daily-copy h2 { margin: 0 0 20px; letter-spacing: -.035em; }
.daily-copy>.eyebrow { letter-spacing: .04em; }
.daily-small { margin-left: 0; padding-top: 265px; }
.daily-large { padding-right: 28px; }
dialog { overscroll-behavior: contain; }
dialog::backdrop { backdrop-filter: none; }
.dialog-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 64px; padding: 8px 24px; background: var(--cream); border-bottom: 1px solid #291a432b; font-size: 12px; letter-spacing: .04em; }
.dialog-close { position: static; width: 44px; height: 44px; border: 0; border-radius: 0; font-size: 28px; }
.note-fields { padding-top: 30px; }
.note-fields h2 { margin: 0 0 14px; letter-spacing: -.03em; }
.note-fields>.eyebrow { margin-bottom: 20px; letter-spacing: .03em; }
.note-fields .copy-fallback { margin-top: 16px; min-height: 140px; }
.colors { gap: 12px; }
.colors button { width: 44px; height: 44px; border: 9px solid var(--cream); box-shadow: inset 0 0 0 1px #99785f; }
.colors button[aria-pressed="true"] { outline: 2px solid var(--purple); outline-offset: 0; }
.colors button:focus-visible { outline-offset: 3px; }
.postcard { box-shadow: 6px 12px 22px #291a432b; }
.postcard-message { letter-spacing: -.025em; }
#message-count { font-variant-numeric: tabular-nums; }
@media (max-width:1100px) and (min-width:801px) {
  .ritual-panel { width: 210px; top: 32%; }
  .ritual-visual { left: 23%; right: 30%; }
  .room-heading h1 { font-size: 46px; }
  .daily-small { padding: 30px 0 0 45%; margin-top: 0; }
}
@media (max-width:800px) {
  .brew-room { padding-top: 28px; }
  .room-heading h1 { font-size: 38px; margin-bottom: 16px; }
  .ritual-nav { margin-top: 24px; gap: 10px; }
  .ritual-nav button { flex-direction: column; align-items: flex-start; gap: 9px; padding-block: 16px; }
  .ritual-nav button strong { font-size: 13px; }
  .ritual-visual { aspect-ratio: auto; height: 320px; margin-block: 12px 24px; }
  .ritual-panel h2 { font-size: 28px; margin-bottom: 14px; }
  .ritual-panel>.eyebrow { margin-bottom: 18px; }
  .ritual-fact { margin-top: 20px; }
  #ritual-status { position: static; margin-top: 12px; }
  .room-bottom { margin-top: 22px; }
  .room-bottom button { width: 44px; height: 44px; }
  .gift-interlude { gap: 32px; }
  .interlude-image { width: 250px; max-width: 76%; }
  .interlude-copy h2 { font-size: 34px; }
  .story-photo { height: 320px; }
  .story-photo::after { background: linear-gradient(0deg,#291a43,transparent 40%); }
  .photo-caption { display: none; }
  .story-copy { padding-top: 8px; }
  .story-copy>p:not(.eyebrow) { max-width: 42ch; }
  .story-copy>.eyebrow { margin-top: 18px; }
  .daily-large { padding-right: 5%; }
  .daily-small { margin: 0; padding: 8px 0 0; }
  .note-fields { padding-top: 28px; }
  .dialog-bar { padding-inline: 20px; }
}