/* The SOTTO card (Cara, 2026-11-06; Adam: "re-design SOTTO's card carefully"). SOTTO's own identity:
   two translucent circles, one in each partner's colour (sage and sand, from the app icon), on the
   icon's cream. Where they overlap is where Sotto lives, beneath the conversation. Left: an
   illustrated exchange between a fictional couple, then the next morning's Daily Note. Right: what
   it is, three things it does, and where it stands. No privacy or encryption claims while it's in
   development, and no real couple's words. */
#sotto-drawer{padding:16px 24px 18px}
.st-card{--cream:#f5f5ec;--cream2:#ecebdf;--sage:#6a9483;--sage-d:#4f7466;--sand:#e2d6c6;--sand-d:#cdbfac;--ink:#26332e;--ink2:#5d6a64;--line:#26332e1a;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:452px;border-radius:14px;overflow:hidden;color:var(--ink);
  background:radial-gradient(120% 90% at 30% 20%,#fafaf3 0%,var(--cream) 55%,var(--cream2) 100%);box-shadow:0 18px 44px #26332e1f}
.st-card p{margin:0}

/* left: the scene */
.st-scene{position:relative;isolation:isolate;min-width:0;padding:30px 34px 22px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.st-scene .st-mark-big{position:absolute;z-index:-1;width:min(112%,580px);height:auto;left:50%;top:50%;transform:translate(-50%,-50%);opacity:.3}
.st-chat{display:flex;flex-direction:column;gap:9px;max-width:400px;width:100%;margin:0 auto}
.st-bubble{max-width:78%;padding:10px 15px;border-radius:20px;font-size:15.5px;line-height:1.35;box-shadow:0 2px 8px #26332e14}
.st-a{align-self:flex-end;background:var(--sage);color:#fbfbf5;border-bottom-right-radius:7px}
.st-b{align-self:flex-start;background:var(--sand);color:var(--ink);border-bottom-left-radius:7px}
.st-day{display:flex;align-items:center;gap:10px;margin:10px 0 2px!important;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.st-day:before,.st-day:after{content:'';flex:1;height:1px;background:var(--line)}
.st-note{padding:16px 18px 14px;border-radius:16px;background:#fdfdf8f2;border:1px solid var(--line);box-shadow:0 10px 28px #26332e1a}
.st-note-label{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-d)}
.st-note-text{font:400 19px/1.35 var(--serif);margin-top:8px!important}
.st-note-sign{font-size:14px;color:var(--sage-d);margin-top:8px!important;text-align:right}
.st-caption{font-size:12px;color:var(--ink2);text-align:center;margin-top:16px!important}
/* the exchange plays once, slowly, each time the drawer opens */
.st-chat>*{opacity:0;transform:translateY(10px)}
.st-chat.play>*{animation:st-in .7s cubic-bezier(.2,.7,.2,1) forwards}
.st-chat.play>:nth-child(1){animation-delay:.25s}
.st-chat.play>:nth-child(2){animation-delay:1.25s}
.st-chat.play>:nth-child(3){animation-delay:2.35s}
.st-chat.play>:nth-child(4){animation-delay:3.6s}
.st-chat.play>:nth-child(5){animation-delay:4.1s}
@keyframes st-in{to{opacity:1;transform:none}}

/* right: what it is */
.st-side{min-width:0;padding:30px 34px 26px;display:flex;flex-direction:column;gap:22px;border-left:1px solid var(--line);background:#ffffff59}
.st-brand{display:flex;align-items:center;gap:10px}
.st-mark{width:34px;height:28px;flex:none}
.st-word{font-size:15px;font-weight:600;letter-spacing:.22em}
.st-meaning{font:italic 400 15px var(--serif);color:var(--ink2);margin-left:4px}
.st-head{font:400 27px/1.2 var(--serif);letter-spacing:-.012em;margin:0;max-width:520px}
.st-features{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.st-features li{display:flex;gap:14px;align-items:flex-start}
.st-features svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--sage-d);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.st-features b{display:block;font-size:15px;font-weight:600}
.st-features span{display:block;font-size:14px;line-height:1.45;color:var(--ink2);margin-top:2px}
.st-status{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;align-items:baseline;gap:12px}
.st-status-main{font-size:15px}
.st-status-sub{font-size:14px;color:var(--ink2)}

@media(max-width:1100px){
 .st-scene{padding:26px 24px 20px}.st-side{padding:26px 26px 22px;gap:18px}
 .st-head{font-size:23px}
 .st-bubble{font-size:14.5px}.st-note-text{font-size:17px}
}
/* phones: the scene, then what it is, one under the other */
@media(max-width:700px){
 #sotto-drawer{padding:10px}
 .st-card{grid-template-columns:minmax(0,1fr);min-height:0;border-radius:12px}
 .st-scene{padding:22px 18px 18px}
 .st-scene .st-mark-big{width:135%}
 .st-side{border-left:0;border-top:1px solid var(--line);padding:20px 18px;gap:16px}
 .st-head{font-size:21px}
 .st-status{flex-direction:column;gap:2px}
}
@media(prefers-reduced-motion:reduce){.st-chat>*{opacity:1;transform:none}.st-chat.play>*{animation:none}}
html:not(.js) .st-chat>*{opacity:1;transform:none}

/* そっと, "gently": the name's own word, faint behind what SOTTO is, as the Stratara mark sits behind
   the About card (Adam, 2026-11-07). Written top to bottom, running off the card's right edge. */
.st-side{position:relative;isolation:isolate;overflow:hidden}
.st-kana{position:absolute;z-index:-1;right:3%;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;text-orientation:upright;white-space:nowrap;
  font:500 clamp(112px,9.4vw,134px)/1 "Hiragino Mincho ProN","Hiragino Mincho Pro","Yu Mincho","YuMincho","Noto Serif JP","Noto Serif CJK JP",serif;
  letter-spacing:.06em;color:var(--sage-d);opacity:.075;pointer-events:none;user-select:none}
@media(max-width:700px){.st-kana{font-size:150px;right:-2%;top:50%;opacity:.06}}