/* ═══════════════════════════════════════════════════════════════════
   Bobimshow — a private letter app. Mobile only. Red + cream.
   ═══════════════════════════════════════════════════════════════════ */

/* Be Vietnam Pro — self-hosted, full Vietnamese coverage.
   Served in three subsets so a phone only downloads what it draws.   */
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/bvp-vietnamese-300.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/bvp-latin-ext-300.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/bvp-latin-300.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/bvp-vietnamese-400.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/bvp-latin-ext-400.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/bvp-latin-400.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/bvp-vietnamese-500.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/bvp-latin-ext-500.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/bvp-latin-500.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/bvp-vietnamese-600.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/bvp-latin-ext-600.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/bvp-latin-600.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/bvp-vietnamese-700.woff2) format("woff2");
  unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/bvp-latin-ext-700.woff2) format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Be Vietnam Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/bvp-latin-700.woff2) format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}


:root{
  /* dark brown · dusty blue · pale sage on cream paper */
  --red:#2E1D14;          /* the dark: backdrop */
  --red-2:#3D2A1D;       /* buttons */
  --red-3:#4A3628;
  --red-ink:#33221A;     /* headings and strong type */
  --red-deep:#221510;
  --cream:#F3EFE5;
  --cream-2:#E9E6D6;     /* sage-tinted paper */
  --cream-3:#DCDCC4;
  --blush:#CFE3E8;       /* the blue, soft */
  --blush-2:#B3D2DA;     /* the blue */
  --ink:#4A382C;
  --ink-2:#6B584A;
  --ink-3:#9A8B7C;
  --gold:#8FB9C4;
  --btn:#B3D2DA;         /* filled buttons */
  --btn-on:#9AC1CE;      /* …while pressed */
  --onred:#F3EFE5;
  --onred-2:rgba(243,239,229,.72);
  --onred-3:rgba(243,239,229,.52);
  --hair:rgba(243,239,229,.20);
  /* the real cloth, cut from the bottom of the poster so every red
     surface lines up with the artwork rib for rib                  */
  --rib:url(assets/img/fabric-0907.png);
  --sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --sans-vi:var(--sans);   /* kept so older rules still resolve */
  /* one typeface for the whole app */
  --serif:var(--sans);
  --script:var(--sans);
  --mono:var(--sans);
  --ease:cubic-bezier(.22,.61,.36,1);
  --pad:22px;
  --torn-down:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2026%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C0%20L1200%2C0%20L1200%2C16.3%20L1200.0%2C16.3%20L1187.0%2C9.1%20L1146.0%2C20.6%20L1105.0%2C13.6%20L1050.0%2C15.3%20L1004.0%2C14.7%20L944.0%2C15.8%20L905.0%2C16.9%20L875.0%2C9.4%20L826.0%2C18.1%20L764.0%2C9.5%20L727.0%2C12.8%20L665.0%2C16.5%20L630.0%2C12.5%20L596.0%2C8.6%20L556.0%2C8.6%20L505.0%2C17.1%20L476.0%2C18.0%20L436.0%2C9.8%20L374.0%2C8.8%20L321.0%2C9.3%20L280.0%2C14.5%20L227.0%2C8.4%20L188.0%2C22.5%20L159.0%2C13.7%20L127.0%2C21.0%20L97.0%2C18.3%20L46.0%2C23.1%20L0%2C19.5%20Z%27%20fill%3D%27%23F4EEE2%27%2F%3E%3C%2Fsvg%3E");
  --torn-up:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%201200%2026%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M0%2C26%20L1200%2C26%20L1200%2C4.3%20L1200.0%2C4.3%20L1161.0%2C4.0%20L1118.0%2C11.7%20L1064.0%2C16.9%20L1007.0%2C11.9%20L956.0%2C6.3%20L922.0%2C5.8%20L883.0%2C10.2%20L850.0%2C12.5%20L795.0%2C17.8%20L747.0%2C3.9%20L697.0%2C13.6%20L643.0%2C7.8%20L598.0%2C17.2%20L568.0%2C7.0%20L512.0%2C3.0%20L481.0%2C17.1%20L426.0%2C8.6%20L378.0%2C12.7%20L332.0%2C5.5%20L270.0%2C5.9%20L240.0%2C11.4%20L183.0%2C15.8%20L136.0%2C15.5%20L84.0%2C16.3%20L54.0%2C13.6%20L0%2C12.7%20Z%27%20fill%3D%27%23F4EEE2%27%2F%3E%3C%2Fsvg%3E");
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--red) var(--rib) center top/100% auto repeat-y fixed;
  color:var(--onred);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;overflow:hidden;
}
button,input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}
button{cursor:pointer}
a{text-decoration:none;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}

/* paper grain over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.34;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='150' height='150' filter='url(%23n)' opacity='.5'/></svg>");
  mix-blend-mode:overlay;
}

#app{position:relative;height:100%;z-index:1}
@media (min-width:520px){
  #app{max-width:460px;margin:0 auto;box-shadow:0 0 100px rgba(0,0,0,.55)}
  .reader{left:50%;right:auto;transform:translateX(-50%);width:100%;max-width:460px}
}

/* ── views ───────────────────────────────────────────────────────── */
.view{position:absolute;inset:0;display:none;flex-direction:column}
.view.on{display:flex;animation:viewIn .45s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view.red{background:none}   /* the fabric on <body> shows through */
/* Home is the poster itself: full width, anchored top, and the CSS fabric
   below it carries on at the same rib width so the join barely reads.   */
#view-home{background:
    url(assets/img/0907.gif) center top/100% auto no-repeat,
    var(--rib) center top/100% auto repeat-y}
#view-home .scroll{padding-top:0}
.poster{height:97vw}
.view.cream{background:var(--cream);color:var(--ink)}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top) + 20px) var(--pad) 128px}

.hr-heart{display:flex;align-items:center;justify-content:center;margin:16px 0}
.hr-heart span{font-size:13px;color:var(--red-ink)}
.hr-heart.light span{color:rgba(246,234,218,.75)}
.hr-heart.rule{gap:12px}
.hr-heart.rule::before,.hr-heart.rule::after{
  content:"";height:1px;width:38px;background:rgba(51,34,26,.28)}

/* ── home ────────────────────────────────────────────────────────── */
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.brand{font-family:var(--script);font-size:27px;line-height:.95;color:var(--onred);
  display:inline-block;letter-spacing:.01em}
.brand em{display:block;font-style:normal;padding-left:16px}
.statRow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.days.right{text-align:right;margin-left:auto}
.days{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--onred-3);text-align:left;line-height:1.7;
  margin-bottom:16px}

.collage{position:relative;height:232px;margin:4px 0 20px}
.polaroid{
  position:absolute;background:var(--cream);padding:7px 7px 24px;
  box-shadow:0 16px 30px -14px rgba(0,0,0,.6);
}
.polaroid .ph{
  display:block;width:100%;aspect-ratio:1.2/1;object-fit:cover;
  background:var(--cream-3);filter:grayscale(1) contrast(1.06);
}
.polaroid.p0{width:50%;left:1%;top:0;transform:rotate(-6deg)}
.polaroid.p1{width:46%;right:2%;top:58px;transform:rotate(5deg)}
.polaroid .tape{
  position:absolute;top:-9px;left:50%;width:56px;height:19px;
  transform:translateX(-50%) rotate(-4deg);
  background:rgba(226,213,191,.62);box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.polaroid.p1 .tape{transform:translateX(-50%) rotate(6deg)}
.polaroid .empty{
  aspect-ratio:1.2/1;background:var(--cream-3);
  display:flex;align-items:center;justify-content:center;font-size:9.5px;
  font-family:var(--mono);letter-spacing:.1em;color:var(--ink-3);text-align:center;padding:8px;
}

.homeline{text-align:center;font-family:var(--serif);font-size:16.5px;line-height:1.62;
  color:var(--onred);font-weight:400}
.homeline .vi{display:block;margin-top:8px;font-size:14px;font-family:var(--sans);
  color:rgba(246,234,218,.6)}

/* cream cards on red */
.paperCard{
  display:block;width:100%;text-align:center;color:var(--ink);
  background:var(--cream);border-radius:2px 18px 2px 2px;
  padding:26px 22px 24px;margin-bottom:16px;position:relative;
  box-shadow:0 18px 34px -20px rgba(0,0,0,.65);
  transition:transform .4s var(--ease);
}
.paperCard:active{transform:scale(.985)}
.paperCard::before{ /* deckled left edge */
  content:"";position:absolute;left:-3px;top:0;bottom:0;width:4px;
  background:var(--cream);
  -webkit-mask:var(--torn-down);mask:var(--torn-down);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;opacity:.9;
}
.paperCard .kicker{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--red-ink);opacity:.75;text-transform:uppercase}
.paperCard h3{font-family:var(--serif);font-size:25px;font-weight:500;color:var(--red-ink);
  margin-top:9px;letter-spacing:-.01em}
.paperCard p{margin-top:9px;font-size:13.5px;font-weight:300;line-height:1.65;color:var(--ink-2)}
.paperCard p.vi{margin-top:4px;font-size:12.5px;color:var(--ink-3)}
.paperCard .pc-heart{font-size:17px;color:var(--red-ink);display:block}
.paperCard .btn{margin-top:22px}
.paperCard .btn + .btn{margin-top:10px}


.home-foot{margin-top:24px;text-align:center;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--onred-3);line-height:2}
.home-foot .vi{display:block;text-transform:none;letter-spacing:.02em;font-family:var(--sans);font-size:11.5px}
.view.cream .home-foot{color:var(--ink-3)}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:14px 26px;border-radius:30px;background:var(--btn);color:var(--red-ink);
  font-size:14px;font-weight:500;letter-spacing:.01em;
  box-shadow:0 10px 20px -12px rgba(46,29,20,.55);
  transition:transform .25s var(--ease),background .25s;
}
.btn:active{transform:scale(.97);background:var(--btn-on)}
.btn b{font-weight:500;font-size:14px;line-height:1.3}
.btn i{font-style:normal;font-weight:300;font-size:11.5px;line-height:1.35;opacity:.66}
.btn.wide{display:flex;width:100%}
.btn.ghostRed{background:none;color:var(--red-ink);border:1px solid rgba(51,34,26,.4);
  box-shadow:none;padding:12px 24px;font-size:13.5px}
.btn.ghostRed:active{background:rgba(51,34,26,.07)}
.btn.onRed{background:var(--cream);color:var(--red-ink)}
.btn.onRed:active{background:var(--cream-2)}
.btn.ghostCream{background:none;border:1px solid var(--hair);color:var(--onred-2);box-shadow:none}

/* ── the 100 grid ────────────────────────────────────────────────── */
.sheetHead{text-align:center;margin-bottom:22px}
.sheetHead h2{font-family:var(--serif);font-size:30px;font-weight:500;color:var(--red-ink)}
.count{margin-top:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase}
.bar{display:flex;gap:3px;margin:14px 0 12px}
.bar i{flex:1;height:7px;border-radius:1px;background:rgba(51,34,26,.14)}
.bar i.on{background:var(--red-2)}
.hint{font-size:12px;font-weight:300;color:var(--ink-3)}
.todayLeft{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--red-ink);opacity:.75;margin-bottom:8px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.cell{
  aspect-ratio:1/1.06;border-radius:3px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;position:relative;
  background:var(--cream-2);border:1px solid rgba(51,34,26,.10);
  transition:transform .3s var(--ease);
}
.cell:active{transform:scale(.94)}
.cell .n{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--red-ink)}
.cell .m{font-size:12px;line-height:1}
.cell.open{background:var(--cream-2)}
.cell.open .m{color:var(--red-2);font-size:13px}
.cell.locked{background:rgba(226,213,191,.42);border-color:rgba(51,34,26,.06)}
.cell.locked .n{color:var(--ink-3);opacity:.75}
.cell.locked .m{opacity:.5;font-size:11px}
.cell.today{
  background:var(--blush);border:1.5px solid var(--red-2);
  box-shadow:0 6px 16px -8px rgba(61,42,29,.6);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{box-shadow:0 5px 14px -9px rgba(61,42,29,.55)}
                 50%{box-shadow:0 8px 22px -6px rgba(61,42,29,.85)}}
.cell.today .n{font-weight:600}
.cell.gap{background:none;border:none;color:var(--ink-3);opacity:.4;font-size:14px;
  letter-spacing:.2em;pointer-events:none}

.legend{display:flex;justify-content:center;gap:18px;margin-top:26px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.legend i{font-style:normal;margin-right:5px}
.legend .lg-heart{color:var(--red-2)}

/* ── emergency list ──────────────────────────────────────────────── */
.redHead{text-align:center;margin:10px 0 24px}
.redHead h2{font-family:var(--serif);font-size:27px;font-weight:500;color:var(--onred)}
.redHead p{margin-top:9px;font-size:13px;font-weight:300;line-height:1.6;
  color:var(--onred-3);font-family:var(--sans-vi)}
.eList{display:flex;flex-direction:column;gap:9px}
.eRow{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:17px 15px;background:var(--cream);border-radius:3px;color:var(--ink);
  box-shadow:0 8px 18px -14px rgba(0,0,0,.7);
  transition:transform .3s var(--ease);
}
.eRow:active{transform:scale(.985)}
.eRow .em{font-size:19px;line-height:1;flex:0 0 auto}
.eRow .no{font-family:var(--mono);font-size:11px;color:var(--ink-3);flex:0 0 auto}
.eRow .tx{flex:1;min-width:0}
.eRow .tx b{display:block;font-size:14.5px;font-weight:500;color:var(--red-ink);line-height:1.35}
.eRow .tx i{display:block;font-style:normal;font-size:12px;font-weight:300;color:var(--ink-3);margin-top:2px}
.eRow .ar{color:var(--ink-3);font-size:15px}
.eRow.vault{background:linear-gradient(120deg,var(--blush),var(--cream));
  border:1px solid rgba(61,42,29,.35);box-shadow:0 12px 26px -14px rgba(0,0,0,.8)}
.eRow.vault .tx b{font-weight:600}

/* ── tab bar ─────────────────────────────────────────────────────── */
.tabs{
  position:absolute;left:0;right:0;bottom:0;z-index:50;display:flex;
  padding:10px 8px calc(env(safe-area-inset-bottom) + 10px);
  background:var(--cream);border-top:1px solid rgba(51,34,26,.12);
  box-shadow:0 -14px 30px -20px rgba(0,0,0,.6);
}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 2px;color:var(--ink-3);transition:color .3s}
.tabs button svg{width:21px;height:21px}
.tabs button span{font-size:10px;letter-spacing:.03em}
.tabs button.on{color:var(--red-2)}
.tabs button.on svg{fill:rgba(61,42,29,.12)}

/* ═══════════════════════════ READER ═══════════════════════════════ */
.reader{position:fixed;inset:0;z-index:200;display:none;background:var(--cream);color:var(--ink)}
.reader.on{display:block}
.reader-inner{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
.reader.onRed{background:var(--red) var(--rib) center top/100% auto repeat-y;color:var(--onred)}

.rTop{
  position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 12px) var(--pad) 10px;
  background:linear-gradient(to bottom,var(--cream) 66%,transparent);
}
.rTop .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3)}
.rBack{display:flex;align-items:center;color:var(--red-ink);padding:4px 12px 4px 0}
.rBack svg{width:20px;height:20px}
.rTop .hearty{color:var(--red-2);font-size:15px;opacity:.85}

/* ── envelope ceremony ───────────────────────────────────────────── */
.cerWrap{min-height:100%;display:flex;flex-direction:column}
.ceremony{flex:1;display:flex;flex-direction:column;background:var(--cream)}
.cer-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px var(--pad) 40px;text-align:center}
.cer-day{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--red-ink)}
.cer-title{font-family:var(--serif);font-size:33px;font-weight:500;line-height:1.22;
  color:var(--red-ink);margin-top:12px}
.cer-title .vi{display:block;font-family:var(--sans);font-size:15px;font-weight:300;
  color:var(--ink-3);margin-top:10px}
.envelope{
  width:min(66vw,250px);aspect-ratio:1.42/1;position:relative;margin:34px auto 26px;
  transition:transform .4s var(--ease);
}
.envelope:active{transform:scale(.97)}
.envelope .body{position:absolute;inset:0;border-radius:3px;
  background:linear-gradient(168deg,var(--cream),var(--cream-2) 60%,var(--cream-3));
  box-shadow:0 22px 40px -22px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.5) inset}
.envelope .wing{position:absolute;inset:0;overflow:hidden;border-radius:3px}
.envelope .wing::before,.envelope .wing::after{content:"";position:absolute;top:0;bottom:0;width:52%}
.envelope .wing::before{left:0;background:linear-gradient(102deg,rgba(90,42,40,.09),transparent 62%);
  clip-path:polygon(0 0,0 100%,100% 100%)}
.envelope .wing::after{right:0;background:linear-gradient(258deg,rgba(90,42,40,.09),transparent 62%);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.envelope .flap{
  position:absolute;left:0;right:0;top:0;height:62%;transform-origin:top center;
  background:linear-gradient(178deg,var(--cream),var(--cream-2));
  clip-path:polygon(0 0,100% 0,50% 100%);
  filter:drop-shadow(0 3px 5px rgba(90,42,40,.18));
  transition:transform .9s var(--ease);
}
.envelope .seal{
  position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:21px;
  color:var(--cream);
  background:radial-gradient(circle at 34% 30%,#5A4433,var(--red-2) 46%,var(--red-deep));
  box-shadow:0 5px 12px rgba(94,7,11,.5),0 1px 0 rgba(255,255,255,.28) inset;
  transition:opacity .4s,transform .5s var(--ease);
}
.envelope.opened .flap{transform:rotateX(-172deg)}
.envelope.opened .seal{opacity:0;transform:translate(-50%,-50%) scale(.6)}
.cer-tap{font-size:14px;font-weight:300;color:var(--ink-2);line-height:1.6}
.cer-tap .vi{display:block;font-size:12.5px;color:var(--ink-3);margin-top:3px}
.cer-bottom{
  background:var(--red) var(--rib) center top/100% auto repeat-y;
  padding:44px 22px calc(env(safe-area-inset-bottom) + 40px);
  text-align:center;position:relative;
}
.cer-bottom::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:26px;
  background:var(--torn-down);background-size:100% 100%;
}
.cer-bottom .script{font-family:var(--script);font-size:29px;color:var(--onred-2);line-height:1.2}
.cer-bottom .heart{margin-top:10px;color:var(--onred-3);font-size:12px}

/* ── the letter ──────────────────────────────────────────────────── */
.letter{padding:4px var(--pad) 0;text-align:center;animation:letterIn .7s var(--ease) both}
@keyframes letterIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.l-no{font-family:var(--mono);font-size:12px;letter-spacing:.22em;color:var(--red-ink)}
.l-date{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);margin-top:7px}
.l-cat{font-family:var(--serif);font-size:29px;font-weight:500;color:var(--red-ink);margin-top:6px}
.l-cat .vi{display:block;font-family:var(--sans);font-size:13px;font-weight:300;
  color:var(--ink-3);margin-top:5px;letter-spacing:.02em}
.l-line{font-family:var(--serif);font-size:19px;font-style:italic;line-height:1.62;
  color:var(--ink);margin-top:20px}
.l-lineVi{font-size:15px;font-weight:300;line-height:1.7;color:var(--ink-2);margin-top:10px}
.l-prompt{font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.5;
  color:var(--red-ink);margin-top:22px}
.l-promptVi{font-size:16px;font-weight:300;line-height:1.7;color:var(--ink-2);margin-top:16px}
.l-kicker{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:14px}
.l-photo{margin:28px auto 0;width:74%;position:relative}
.l-photo .polaroid{position:relative;width:100%;transform:rotate(-2.5deg)}
.l-save{margin-top:26px;font-size:13px;font-weight:300;color:var(--ink-2)}
.l-save .vi{display:block;font-size:12px;color:var(--ink-3);margin-top:3px}
.l-sign{margin-top:34px;font-family:var(--script);font-size:22px;color:var(--red-ink)}
.rFoot{padding:44px var(--pad) calc(env(safe-area-inset-bottom) + 44px);text-align:center}
.rFoot .note{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);line-height:2;margin-bottom:16px}
.rFoot .btn{width:100%}

/* ═════════════════════ emergency experiences ══════════════════════ */
.eWrap{padding:4px var(--pad) calc(env(safe-area-inset-bottom) + 56px);
  animation:letterIn .6s var(--ease) both}
.eHead{text-align:center;margin-bottom:26px}
.eHead .em{font-size:30px;display:block;margin-bottom:10px}
.eHead h3{font-family:var(--serif);font-size:28px;font-weight:500;line-height:1.24;color:var(--red-ink)}
.eHead .vi{margin-top:8px;font-size:15px;font-weight:300;color:var(--ink-3)}
.eHead .intro{white-space:pre-line;margin-top:18px;font-size:14px;font-weight:300;line-height:1.72;color:var(--ink-2)}
.eHead .introVi{margin-top:7px;font-size:13px;font-weight:300;line-height:1.72;color:var(--ink-3)}

.sec-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);text-align:center;margin:26px 0 14px}

/* audio menu */
.aList{display:flex;flex-direction:column;gap:9px}
.aItem{display:flex;align-items:center;gap:13px;padding:15px 16px;width:100%;text-align:left;
  background:var(--cream-2);border-radius:3px;transition:background .25s}
.aItem.playing{background:var(--blush);box-shadow:0 0 0 1px rgba(61,42,29,.35) inset}
.aItem .pl{flex:0 0 36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(51,34,26,.35);color:var(--red-ink)}
.aItem.playing .pl{background:var(--red-2);color:var(--cream);border-color:var(--red-2)}
.aItem .tx b{display:block;font-size:14.5px;font-weight:500;color:var(--red-ink)}
.aItem .tx i{display:block;font-style:normal;font-size:12.5px;font-weight:300;color:var(--ink-2);margin-top:2px}
.aItem .tx u{display:block;text-decoration:none;font-size:11.5px;font-weight:300;color:var(--ink-3);margin-top:2px}
.aItem.missing{opacity:.45}
.bars{display:flex;align-items:flex-end;gap:2px;height:13px}
.bars i{width:2px;background:currentColor;border-radius:1px;height:4px}
.aItem.playing .bars i{animation:bar .9s ease-in-out infinite}
.aItem.playing .bars i:nth-child(2){animation-delay:.15s}
.aItem.playing .bars i:nth-child(3){animation-delay:.3s}
.aItem.playing .bars i:nth-child(4){animation-delay:.45s}
@keyframes bar{0%,100%{height:4px}50%{height:13px}}
.aNote{margin-top:20px;font-size:11.5px;font-weight:300;color:var(--ink-3);line-height:1.8;
  padding:13px 15px;border:1px dashed rgba(51,34,26,.22);border-radius:3px;text-align:center}

/* confirm gate */
.confirmCard{
  padding:38px 24px;border-radius:2px 18px 2px 2px;text-align:center;
  background:linear-gradient(150deg,var(--blush),var(--cream));
  border:1px solid rgba(61,42,29,.2);
}
.confirmCard h3{font-family:var(--serif);font-size:24px;font-weight:500;line-height:1.32;color:var(--red-ink)}
.confirmCard .vi{margin-top:7px;font-size:15px;font-weight:300;color:var(--ink-2)}
.confirmCard .body{margin-top:20px;font-size:13.5px;font-weight:300;line-height:1.85;
  color:var(--ink-2);white-space:pre-line;text-align:left}
.confirmCard .bodyVi{margin-top:12px;font-size:13px;font-weight:300;line-height:1.85;
  color:var(--ink-3);white-space:pre-line;text-align:left}
.confirmBtns{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.btn.ghostRed.wide{display:flex;width:100%}

.dots{display:flex;justify-content:center;gap:5px;margin-bottom:22px}
.dots i{width:5px;height:5px;border-radius:50%;background:rgba(51,34,26,.25);transition:all .4s}
.dots i.on{background:var(--red-2);width:16px;border-radius:3px}
.stepNav{margin-top:28px;display:flex;flex-direction:column;gap:9px}

/* video */
.vidWrap{border-radius:3px;overflow:hidden;background:#221510;box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
.vidWrap video{display:block;width:100%}
.vidMissing{padding:48px 22px;text-align:center;border:1px dashed rgba(51,34,26,.25);
  border-radius:3px;font-size:12.5px;font-weight:300;line-height:1.8;color:var(--ink-3)}
.cap{margin-top:15px;font-size:14px;font-weight:300;color:var(--ink-2);text-align:center}
.capVi{margin-top:4px;font-size:12.5px;font-weight:300;color:var(--ink-3);text-align:center}

/* long letter */
.longLetter{background:var(--cream-2);border-radius:2px 18px 2px 2px;padding:28px 22px 30px}
.longLetter p{font-size:16px;font-weight:400;line-height:1.78;color:var(--ink);margin-bottom:17px}
.longLetter p:first-child{font-family:var(--serif);font-size:19px;font-style:italic;color:var(--red-ink)}
.longLetter .vi p{font-size:15px;font-weight:300;line-height:1.82;color:var(--ink-2)}
.longLetter .vi p:first-child{font-family:var(--serif);font-size:18px}
.langTabs{display:flex;gap:4px;justify-content:center;margin-bottom:22px}
.langTabs button{padding:7px 15px;border-radius:20px;font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);border:1px solid transparent}
.langTabs button.on{color:var(--red-ink);border-color:rgba(51,34,26,.3);background:var(--blush)}

/* memory box */
.mbGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb{
  aspect-ratio:1/1;border-radius:3px;padding:14px;text-align:left;position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--cream-2);border:1px solid rgba(51,34,26,.12);
  transition:all .45s var(--ease);
}
.mb .t{font-size:13px;font-weight:500;color:var(--red-ink);line-height:1.35}
.mb .tv{font-size:11.5px;font-weight:300;color:var(--ink-3);margin-top:3px}
.mb .b{font-size:13px;font-weight:300;line-height:1.7;color:var(--ink-2);display:none}
.mb .bv{color:var(--ink-3)}
.mb.open{grid-column:span 2;aspect-ratio:auto;min-height:140px;justify-content:flex-start;
  background:var(--blush)}
.mb.open .t{margin-bottom:8px}
.mb.open .tv{display:none}
.mb.open .b{display:block}
.mbHint{margin-top:12px;font-size:11.5px;font-weight:300;color:var(--ink-3);text-align:center}

/* the pink "before you leave" box + call */
.ctaCard{
  padding:30px 22px;border-radius:3px;text-align:center;
  background:var(--blush);border:1px solid rgba(61,42,29,.2);
}
.ctaCard h3{font-family:var(--serif);font-size:23px;font-weight:500;color:var(--red-ink)}
.ctaCard .vi{margin-top:6px;font-size:15px;font-weight:300;color:var(--ink-2)}
.ctaCard .b{margin-top:14px;font-size:13px;font-weight:300;color:var(--ink-2);line-height:1.7}
.ctaCard .b .vi2{display:block;color:var(--ink-3);margin-top:3px}
.ctaCard .btn{margin-top:22px;width:100%}

/* breathe */
.breathe{display:grid;place-items:center;padding:26px 0 14px}
.circle{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(61,42,29,.3);
  background:radial-gradient(circle,var(--blush),transparent 70%);
  animation:breathe 11s cubic-bezier(.4,0,.2,1) infinite}
@keyframes breathe{0%,100%{transform:scale(.76);opacity:.6}45%,55%{transform:scale(1);opacity:1}}
.circle span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red-ink)}
.bLines{margin-top:28px;text-align:center;min-height:92px}
.bLines .l{font-family:var(--serif);font-size:19px;font-style:italic;line-height:1.5;
  color:var(--red-ink);animation:fadeSlow 1s var(--ease) both}
.bLines .lv{margin-top:9px;font-size:14.5px;font-weight:300;color:var(--ink-2);
  animation:fadeSlow 1s var(--ease) .25s both}
@keyframes fadeSlow{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

/* reveal one line at a time */
.revList{display:flex;flex-direction:column;gap:22px}
.rev{animation:letterIn .75s var(--ease) both;text-align:center}
.rev .l{font-size:17.5px;font-weight:400;line-height:1.6;color:var(--red-ink);
  white-space:pre-line}
.rev .lv{margin-top:8px;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink-2)}
.tapMore{margin-top:32px;width:100%;padding:18px;border:1px dashed rgba(51,34,26,.3);
  border-radius:3px;font-size:12.5px;font-weight:300;color:var(--ink-3);transition:background .3s}
.tapMore:active{background:rgba(51,34,26,.05)}

/* cool-down points */
.pts{display:flex;flex-direction:column;gap:10px}
.pt{padding:20px 18px;border-radius:3px;background:var(--cream-2);
  animation:letterIn .6s var(--ease) both}
.pt .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--red-ink);opacity:.7}
.pt h4{margin-top:9px;font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.4;color:var(--red-ink)}
.pt .hv{margin-top:5px;font-size:14px;font-weight:300;color:var(--ink-2)}
.pt p{margin-top:11px;font-size:13.5px;font-weight:300;line-height:1.78;color:var(--ink-2)}
.pt .pv{margin-top:7px;font-size:13px;font-weight:300;line-height:1.78;color:var(--ink-3)}

/* proof cards */
.proof{min-height:250px;display:grid;place-items:center;padding:30px 22px;text-align:center;
  border-radius:2px 18px 2px 2px;background:var(--cream-2)}
.proof .l{font-family:var(--serif);font-size:20px;line-height:1.55;color:var(--red-ink);
  white-space:pre-line;
  animation:fadeSlow .8s var(--ease) both}
.proof .lv{margin-top:14px;font-size:14.5px;font-weight:300;line-height:1.7;color:var(--ink-2);
  animation:fadeSlow .8s var(--ease) .2s both}
.counter{margin-top:16px;text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.2em;color:var(--ink-3)}



/* ── the picture shuffle ───────────────────────────────────────────── */
.gallery{min-height:240px;border-radius:2px 18px 2px 2px;overflow:hidden;
  display:grid;place-items:center;background:var(--blush);
  box-shadow:0 18px 34px -24px rgba(0,0,0,.6)}
.gallery img{display:block;width:100%;max-height:62vh;object-fit:contain;background:var(--cream-2)}
.galNote{padding:48px 24px;text-align:center;font-family:var(--sans-vi);font-size:14px;
  font-weight:300;color:var(--ink-3)}

/* grounding */
.gSteps{display:flex;flex-direction:column;gap:9px}
.gStep{display:flex;gap:15px;padding:18px 16px;border-radius:3px;width:100%;text-align:left;
  background:var(--cream-2);opacity:.4;transition:all .5s var(--ease)}
.gStep.on{opacity:1;background:var(--blush)}
.gStep.done{opacity:.6}
.gStep .num{flex:0 0 auto;min-width:50px;font-family:var(--serif);font-size:17px;color:var(--red-ink)}
.gStep .num small{display:block;font-family:var(--sans);font-size:11px;font-weight:300;
  color:var(--ink-3);margin-top:2px}
.gStep .tx b{display:block;font-size:14.5px;font-weight:400;color:var(--ink);line-height:1.5}
.gStep .tx i{display:block;font-style:normal;margin-top:5px;font-size:13px;font-weight:300;
  color:var(--ink-3);line-height:1.6}

/* flip cards */
.flipGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.flip{aspect-ratio:1/1.2;position:relative;perspective:900px;padding:0}
/* an odd last card takes the whole row — it is the closing one */
.flip:last-child:nth-child(odd){grid-column:span 2;aspect-ratio:2.7/1}
.flipIn{position:absolute;inset:0;transition:transform .7s var(--ease);transform-style:preserve-3d}
.flip.on .flipIn{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:3px;display:flex;padding:14px}
.face.front{align-items:center;justify-content:center;background:var(--cream-2);
  border:1px solid rgba(51,34,26,.12);color:var(--ink-3);font-family:var(--mono);font-size:15px}
.face.back{transform:rotateY(180deg);flex-direction:column;justify-content:center;text-align:left;
  background:var(--blush);color:var(--ink);overflow:hidden}
.face.back b{font-size:12.5px;font-weight:600;line-height:1.35;color:var(--red-ink)}
.face.back i{font-style:normal;display:block;margin-top:6px;font-size:11px;font-weight:300;
  line-height:1.5;color:var(--ink-2);white-space:pre-line}

/* vent box */
.vent textarea{width:100%;min-height:200px;padding:20px;border-radius:3px;resize:none;
  background:var(--cream-2);border:1px solid rgba(51,34,26,.12);
  font-size:15px;font-weight:300;line-height:1.7;color:var(--ink)}
.vent textarea::placeholder{color:var(--ink-3);opacity:.7}
/* the lid closes, then he gets them back one card at a time */
.ventReply{display:flex;flex-direction:column;gap:10px}
.vCard{padding:20px 18px;border-radius:3px;background:var(--cream-2);
  border:1px solid rgba(51,34,26,.07);animation:letterIn .8s var(--ease) both}
.vCard .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--red-ink);opacity:.7}
.vCard p{margin-top:9px;font-size:15.5px;font-weight:300;line-height:1.72;
  color:var(--red-ink);white-space:pre-line}
.lidAnim{padding:44px 0;text-align:center;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;color:var(--ink-3);animation:fadeSlow .8s var(--ease) both}






/* ═══════════════════════════ LOCK ═════════════════════════════════ */
.lock{position:fixed;inset:0;z-index:400;display:none;
  background:var(--red) var(--rib) center top/100% auto repeat-y;
  align-items:center;justify-content:center;padding:calc(env(safe-area-inset-top) + 20px) 24px}
.lock.on{display:flex}
.lock.out{animation:lockOut .5s var(--ease) both}
@keyframes lockOut{to{opacity:0;transform:scale(1.04);visibility:hidden}}
.lock-in{width:100%;max-width:320px;text-align:center}
.lock .brand{display:inline-block;text-align:left;margin-bottom:34px}
.lock-hint{font-family:var(--sans-vi);font-size:13.5px;font-weight:300;color:var(--onred-3);
  letter-spacing:.02em;min-height:20px}
.lock-hint.err{color:#E4C8B8}
.pin{display:flex;justify-content:center;gap:13px;margin:22px 0 34px}
.pin i{width:11px;height:11px;border-radius:50%;border:1px solid rgba(246,234,218,.45);
  transition:all .25s var(--ease)}
.pin i.on{background:var(--cream);border-color:var(--cream);transform:scale(1.1)}
.pin.shake{animation:shake .45s}
@keyframes shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}40%,60%{transform:translateX(7px)}}
.pad{display:grid;grid-template-columns:repeat(3,72px);justify-content:center;gap:18px}
.pad button{width:72px;height:72px;border-radius:50%;font-size:23px;font-weight:300;color:var(--onred);
  border:1px solid var(--hair);transition:background .2s,transform .2s}
.pad button:active{background:rgba(246,234,218,.16);transform:scale(.94)}
.pad button.blank{border:none;pointer-events:none}
.pad button.act{font-size:17px;border:none}

/* the way back to the lock: press and hold "our space" */
.brand{-webkit-user-select:none;user-select:none}

/* ══════════════════════════ STUDIO ════════════════════════════════ */
.authorOnly{display:none !important}
body.author .authorOnly{display:flex !important}

.stCard{background:var(--cream-2);border-radius:3px;padding:20px;margin-bottom:12px}
.stCard h4{font-family:var(--serif);font-size:18px;font-weight:500;color:var(--red-ink);margin-bottom:12px}
.stStat{display:flex;gap:10px;margin-bottom:12px}
.stStat div{flex:1;background:var(--cream);border-radius:3px;padding:14px 10px;text-align:center}
.stStat b{display:block;font-family:var(--serif);font-size:26px;font-weight:500;color:var(--red-ink)}
.stStat span{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.stLine{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:13.5px;
  border-bottom:1px solid rgba(51,34,26,.09);font-family:var(--sans-vi)}
.stLine:last-child{border-bottom:none}
.stLine span{color:var(--ink-3);text-align:right;flex:0 0 auto}
.stLine b{font-weight:400;color:var(--ink)}
.stGrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:4px}
.stCell{aspect-ratio:1;border-radius:2px;display:grid;place-items:center;font-family:var(--mono);
  font-size:10px;background:rgba(226,213,191,.5);color:var(--ink-3)}
.stCell.seen{background:var(--red-2);color:var(--cream)}
.stCell.edited{box-shadow:0 0 0 1.5px var(--gold) inset}
.stKey{display:flex;gap:16px;justify-content:center;margin-top:14px;font-family:var(--mono);
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.stKey i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;
  vertical-align:-1px;background:rgba(226,213,191,.9)}
.stKey i.seen{background:var(--red-2)}
.stKey i.edited{background:none;box-shadow:0 0 0 1.5px var(--gold) inset}

.stPick{display:flex;gap:8px;align-items:center;margin-bottom:14px}
.stPick input{flex:1;padding:12px 14px;border-radius:3px;background:var(--cream);
  border:1px solid rgba(51,34,26,.18);font-size:15px;color:var(--ink);font-family:var(--mono)}
.stEdit label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:14px 0 6px}
.stEdit textarea,.stEdit select{width:100%;padding:13px 14px;border-radius:3px;background:var(--cream);
  border:1px solid rgba(51,34,26,.18);font-size:15px;line-height:1.6;color:var(--ink);resize:vertical;
  font-family:var(--sans-vi)}
.stEdit textarea{min-height:84px}
.stNote{font-size:11.5px;font-weight:300;line-height:1.75;color:var(--ink-3);margin-top:14px;
  font-family:var(--sans-vi)}
.stBtns{display:flex;gap:9px;margin-top:16px}
.stBtns .btn{flex:1;padding:13px 12px;font-size:13.5px}


/* ── baby's note ───────────────────────────────────────────────────── */
.noteBox{text-align:left;background:var(--cream-2);border-radius:3px;padding:18px 18px 14px;
  border:1px solid rgba(51,34,26,.10)}
.noteBox label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--red-ink);opacity:.75;margin-bottom:10px}
.noteBox textarea{width:100%;min-height:130px;padding:0;border:none;background:none;resize:vertical;
  font-family:var(--sans-vi);font-size:15.5px;font-weight:300;line-height:1.7;color:var(--ink)}
.noteBox textarea::placeholder{color:var(--ink-3);opacity:.65}
.noteFoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  padding-top:11px;border-top:1px solid rgba(51,34,26,.12)}
.noteFoot #noteCount{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3)}
.noteFoot #noteCount.full{color:var(--red-2)}
.noteFoot #noteSave{padding:8px 20px;border-radius:20px;background:var(--btn);color:var(--red-ink);
  font-size:12.5px;font-weight:500;transition:all .25s}
.noteFoot #noteSave.done{background:none;color:var(--ink-3);font-weight:300}

.fightBox{margin:14px 0 4px;background:var(--cream)}
.fightBox textarea{min-height:100px}

/* the notes, read back in Studio */
.stNote-item{padding:14px 0;border-bottom:1px solid rgba(51,34,26,.09)}
.stNote-item:last-child{border-bottom:none}
.stNote-item .h{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--ink-3);margin-bottom:7px}
.stNote-item .q{font-size:12.5px;font-weight:300;color:var(--ink-3);font-family:var(--sans-vi);
  margin-bottom:6px;line-height:1.5}
.stNote-item .a{font-family:var(--sans-vi);font-size:14.5px;font-weight:300;line-height:1.7;
  color:var(--ink);white-space:pre-wrap}


/* ── the upload rows in Studio ─────────────────────────────────────── */
.mediaRow{display:flex;align-items:center;gap:10px;padding:12px 0;
  border-bottom:1px solid rgba(51,34,26,.09)}
.mediaRow:last-child{border-bottom:none}
.mediaRow .mx{flex:1;min-width:0}
.mediaRow .mx b{display:block;font-size:14px;font-weight:500;color:var(--ink);line-height:1.35}
.mediaRow .mx i{display:block;font-style:normal;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.mediaRow.has .mx i{color:var(--red-ink);opacity:.8}
.mbtn{flex:0 0 auto;padding:8px 14px;border-radius:20px;font-size:12px;font-weight:500;
  background:var(--btn);color:var(--red-ink);cursor:pointer;transition:background .25s}
.mbtn:active{background:var(--btn-on)}
.mbtn.del{background:none;color:var(--ink-3);border:1px solid rgba(51,34,26,.25);font-weight:300}

/* toast */
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 94px);
  z-index:300;padding:14px 22px;border-radius:3px;max-width:80vw;text-align:center;
  background:var(--cream);color:var(--red-ink);border:1px solid rgba(61,42,29,.25);
  box-shadow:0 18px 36px -16px rgba(0,0,0,.8);
  font-size:13.5px;font-weight:400;line-height:1.5;animation:toastIn .4s var(--ease) both;
}
.toast .vi{display:block;font-size:12.5px;font-weight:300;color:var(--ink-2);margin-top:4px}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
.toast.out{animation:toastOut .35s var(--ease) both}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,8px)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* baby scores each picture out of five */
.rate{display:flex;align-items:center;justify-content:center;gap:14px;
  flex-wrap:wrap;margin-top:16px}
.rate .rl{font-size:14px;font-weight:300;color:var(--ink-2)}
.rate .rl b{font-weight:500;color:var(--red-ink);font-size:16px}
.rate .rd{display:flex;gap:7px}
.rate .rd button{width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(51,34,26,.16);background:transparent;
  font-family:inherit;font-size:14px;font-weight:400;color:var(--ink-3);
  transition:background .18s,color .18s,border-color .18s}
.rate .rd button.on{background:var(--btn);border-color:transparent;color:var(--red-ink)}
.rate .rd button:active{transform:scale(.94)}