/* Per-letter themes. Airmail is the default in style.css; diary and sky override it here. */
:root {
  --gr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .2 0 0 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --grw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .12 0 0 0 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --lth: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .9 .11 0 0 0 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23l)'/%3E%3C/svg%3E");
  --stars1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='22' cy='30' r='1.2' opacity='.85'/%3E%3Ccircle cx='118' cy='14' r='.8' opacity='.5'/%3E%3Ccircle cx='210' cy='62' r='1' opacity='.7'/%3E%3Ccircle cx='330' cy='20' r='1.3' opacity='.9'/%3E%3Ccircle cx='398' cy='96' r='.8' opacity='.45'/%3E%3Ccircle cx='60' cy='150' r='.9' opacity='.6'/%3E%3Ccircle cx='170' cy='190' r='.7' opacity='.4'/%3E%3Ccircle cx='284' cy='160' r='1.1' opacity='.75'/%3E%3Ccircle cx='380' cy='240' r='.9' opacity='.55'/%3E%3Ccircle cx='30' cy='300' r='1.1' opacity='.7'/%3E%3Ccircle cx='140' cy='330' r='.8' opacity='.45'/%3E%3Ccircle cx='250' cy='290' r='.7' opacity='.4'/%3E%3Ccircle cx='320' cy='380' r='1.2' opacity='.8'/%3E%3Ccircle cx='96' cy='402' r='.8' opacity='.5'/%3E%3C/g%3E%3C/svg%3E");
  --stars2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='610' height='610'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='80' cy='60' r='.7' opacity='.35'/%3E%3Ccircle cx='300' cy='110' r='.6' opacity='.3'/%3E%3Ccircle cx='520' cy='40' r='.8' opacity='.4'/%3E%3Ccircle cx='190' cy='280' r='.6' opacity='.3'/%3E%3Ccircle cx='450' cy='330' r='.7' opacity='.35'/%3E%3Ccircle cx='40' cy='480' r='.8' opacity='.4'/%3E%3Ccircle cx='360' cy='540' r='.6' opacity='.3'/%3E%3Ccircle cx='580' cy='470' r='.7' opacity='.35'/%3E%3C/g%3E%3Cpolyline points='22,30 118,14 210,62 330,20' fill='none' stroke='%23fff' stroke-opacity='.12' stroke-width='.7'/%3E%3C/svg%3E");
}

.lockobj { display: none; }
.t-airmail .lockobj.airmail, .t-diary .lockobj.diary, .t-sky .lockobj.sky { display: block; }
.flourish::before { content: '\2708\00a0\00a0\2708\00a0\00a0\2708'; }

/* ============================== LOCKED DIARY ============================== */
body.t-diary {
  color: #ead9c6;
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 18px;
  background:
    var(--grw),
    radial-gradient(ellipse 75% 60% at 16% -4%, rgba(255, 196, 128, .3), rgba(255, 170, 100, .1) 42%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 100% 104%, rgba(96, 60, 110, .28), transparent 60%),
    linear-gradient(168deg, #2a2029, #160f18 58%, #0e0a10);
  background-attachment: fixed;
}
.t-diary ::selection { background: rgba(154, 52, 87, .3); }

/* the closed diary (drawn at mockup size, scaled up) */
.lockobj.diary { position: relative; width: 279px; height: 345px; margin: 0 auto; transition: opacity .5s ease .85s; }
.diary .book { position: absolute; left: 0; top: 0; width: 186px; height: 216px; transform: scale(1.5); transform-origin: top left; transform-style: preserve-3d; }
.diary .pages { position: absolute; left: 10px; top: 7px; right: -7px; bottom: -6px; border-radius: 2px 7px 7px 2px; background: #eadfca; box-shadow: 0 22px 34px -14px rgba(0, 0, 0, .9); }
.diary .pages::before { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 7px; border-radius: 0 7px 7px 0; background: repeating-linear-gradient(90deg, #f3ead8 0 1px, #cdbfa3 1px 2px); }
.diary .pages::after { content: ''; position: absolute; left: 0; right: 7px; bottom: 0; height: 6px; background: repeating-linear-gradient(0deg, #f3ead8 0 1px, #cdbfa3 1px 2px); }
.diary .tail { position: absolute; left: 118px; bottom: -26px; width: 9px; height: 40px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(90deg, #5e1a35, #9a3457 50%, #5e1a35); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); }
.diary .cover {
  position: absolute; inset: 0;
  border-radius: 3px 9px 9px 3px;
  background: var(--gr), var(--lth), linear-gradient(135deg, rgba(255, 220, 190, .18), transparent 44%), linear-gradient(160deg, #602c47, #3f1a2f 55%, #2b1122);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset -1px 0 0 rgba(0, 0, 0, .35), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .6);
  transform-origin: left center;
  transition: transform 1s cubic-bezier(.55, .05, .3, 1) .25s, opacity .4s ease .9s;
}
.diary .cover::before { content: ''; position: absolute; inset: 12px 12px 12px 30px; border-radius: 2px; border: 1px solid rgba(222, 186, 104, .55); box-shadow: inset 0 0 0 4px rgba(222, 186, 104, .2); }
.diary .spine { position: absolute; left: 0; top: 0; bottom: 0; width: 22px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .12) 50%, rgba(255, 255, 255, .08) 82%, rgba(0, 0, 0, .28)); }
.diary .spine::before { content: ''; position: absolute; left: 3px; right: 4px; top: 36px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .12); box-shadow: 0 1px 0 rgba(0, 0, 0, .45), 0 56px 0 rgba(255, 255, 255, .12), 0 57px 0 rgba(0, 0, 0, .45), 0 112px 0 rgba(255, 255, 255, .12), 0 113px 0 rgba(0, 0, 0, .45); }
.diary .foil { position: absolute; left: 36px; right: 18px; top: 50px; text-align: center; line-height: 1.15; font-family: 'Crimson Pro', serif; }
.diary .foil .to { display: block; font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase; color: #d2ab5e; opacity: .8; margin-bottom: 6px; }
.diary .foil .name { display: block; font-style: italic; font-size: 26px; line-height: 1.1; background: linear-gradient(100deg, #b88a3a, #f3dc93 42%, #c9a04a 68%, #efd68c); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.diary .foil .where { display: block; font-size: 12.5px; letter-spacing: .08em; color: #d2ab5e; opacity: .72; margin-top: 5px; font-style: italic; }
.diary .strap { position: absolute; right: -9px; top: 134px; width: 60px; height: 24px; border-radius: 5px 0 0 5px; background: var(--gr), linear-gradient(#4d2436, #2c1120); box-shadow: 0 3px 5px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .1); transition: transform .35s ease, opacity .35s ease; }
.diary .strap::before { content: ''; position: absolute; inset: 4px 0 4px 5px; border: 1px dashed rgba(222, 186, 104, .38); border-right: 0; border-radius: 3px 0 0 3px; }
.diary .clasp { position: absolute; left: -6px; top: -6px; width: 26px; height: 36px; border-radius: 4px; background: linear-gradient(160deg, #f6e2a4, #cfa24c 42%, #8f6524 78%, #dcb860); box-shadow: 0 2px 3px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(0, 0, 0, .35), inset 1px 0 0 rgba(255, 255, 255, .25); }
.diary .clasp::before { content: ''; position: absolute; left: 50%; top: 10px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #261405; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8); }
.diary .clasp::after { content: ''; position: absolute; left: 50%; top: 15px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 0 0 1px 1px; background: #261405; }
/* unlocking: strap slides off, cover swings open, then it all fades */
.lockobj.diary.open .strap { transform: translateX(22px); opacity: 0; }
.lockobj.diary.open .cover { transform: perspective(900px) rotateY(-150deg); opacity: 0; }
.lockobj.diary.open { opacity: 0; }

.t-diary .lock-form { color: #ead9c6; }
.t-diary .lock-form label { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 18px; text-transform: none; letter-spacing: .02em; color: rgba(234, 217, 198, .72); }
.t-diary .pin {
  font-family: 'Crimson Pro', serif; font-size: 26px; letter-spacing: .4em;
  color: #f3e8d6; background: rgba(255, 246, 230, .06);
  border: 1px solid rgba(222, 186, 104, .35); border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
  padding: 8px 0 8px .4em;
}
.t-diary .pin:focus { border-color: rgba(222, 186, 104, .7); }
.t-diary .pin::placeholder { color: rgba(234, 217, 198, .35); }
.t-diary .btn {
  font-family: 'Crimson Pro', serif; font-size: 18px; letter-spacing: .07em; text-transform: none;
  background: linear-gradient(#62304a, #3a172a); border: 1px solid rgba(222, 186, 104, .55); color: #efd68c; border-radius: 4px;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.t-diary .btn:hover { background: linear-gradient(#6e3854, #45203a); color: #f6e2a4; }
.t-diary .err { color: #f0a28f; font-family: 'Crimson Pro', serif; font-style: italic; }

/* the open diary page */
.t-diary .sheet {
  background:
    radial-gradient(circle, rgba(110, 90, 70, .2) .8px, transparent 1.4px) 9px 9px / 16px 16px,
    linear-gradient(90deg, rgba(60, 30, 20, .22), rgba(60, 30, 20, .06) 28px, transparent 60px),
    linear-gradient(170deg, #fbf6ea, #f1e9d7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 2px 2px 0 #e9dfc9, 3px 3px 0 #cfc3a8, 5px 5px 0 #e9dfc9, 6px 6px 0 #cfc3a8, 0 30px 50px -20px rgba(0, 0, 0, .95);
  border-radius: 2px 8px 8px 2px;
  color: #2d2a33;
}
.t-diary .sheet::before {
  left: auto; right: 44px; top: -1px; bottom: auto;
  width: 16px; height: 110px; border-left: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px), linear-gradient(90deg, #5e1a35, #9a3457 50%, #5e1a35);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  z-index: 2;
}
.t-diary .sheet::after { background: var(--gr); opacity: .5; }
.t-diary .letter { border-image: none; border-top: 0; padding: 60px 64px 64px 72px; line-height: 1.65; transform: rotate(-.3deg); }
.t-diary .date { text-align: left; height: auto; font-style: italic; font-size: 17px; color: #8a6a3f; margin-bottom: 22px; }
.t-diary .title { font-family: 'Crimson Pro', serif; text-transform: none; letter-spacing: .01em; font-size: 28px; line-height: 1.25; margin: 0 0 18px; color: #241c26; }
.t-diary .greeting { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 38px; line-height: 1.1; color: #241c26; margin: 0 0 20px; }
.t-diary .body { font-size: 20px; }
.t-diary .body p { margin: 0 0 1em; }
.t-diary .signoff { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 25px; line-height: 1.35; color: #241c26; margin-top: 30px; }
.t-diary .unwritten { color: #6a5a4a; padding: 10px 0 0; line-height: 1.6; }
.t-diary .unwritten .big { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 32px; line-height: 1.25; color: #241c26; margin-bottom: 14px; }
.t-diary .flourish { color: #9a3457; opacity: .55; font-size: 22px; letter-spacing: 0; margin-top: 34px; }
.t-diary .flourish::before { content: '\2766'; }

.t-diary .board h2 { font-family: 'Crimson Pro', serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 30px; color: #ead9c6; }
.t-diary .board .sub { color: #b79b74; font-style: italic; font-size: 17px; }
.t-diary .polaroid { background: var(--gr), linear-gradient(#f6f1e6, #ebe3d2); box-shadow: 0 18px 28px -14px rgba(0, 0, 0, .95); }
.t-diary .polaroid img { filter: sepia(.12); }
.t-diary .polaroid .cap { font-family: 'Homemade Apple', cursive; font-size: 15px; line-height: 1.7; color: #2f3356; }
.t-diary .polaroid.her .cap { font-family: 'Reenie Beanie', cursive; font-size: 27px; line-height: 1.1; color: #6b1f3b; }
.t-diary .note { background: var(--gr), linear-gradient(170deg, #f7f1e4, #ece3d0); box-shadow: 0 18px 28px -14px rgba(0, 0, 0, .95); padding: 32px 20px 28px; font-family: 'Homemade Apple', cursive; font-size: 15px; line-height: 1.8; color: #2f3356; }
.t-diary .note.her { font-family: 'Reenie Beanie', cursive; font-size: 28px; line-height: 1.15; color: #6b1f3b; }
.t-diary .who { font-family: 'Crimson Pro', serif; font-style: italic; font-size: 14px; letter-spacing: .02em; text-transform: none; color: rgba(60, 40, 50, .5); }
/* attachments: his = brass photo corners, hers = plum ribbon over the corner */
.t-diary .pushpin { inset: 0; top: 0; left: 0; width: 100%; height: 100%; margin: 0; background: none; clip-path: none; box-shadow: none; transform: none; pointer-events: none; }
.t-diary .him::before, .t-diary .him::after, .t-diary .him .pushpin::before, .t-diary .him .pushpin::after {
  content: ''; position: absolute; width: 26px; height: 26px; z-index: 3; pointer-events: none;
  background: linear-gradient(135deg, #f6e2a4 0, #d3a752 28%, #8f6524 49%, transparent 50%);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
.t-diary .him::before { left: -3px; top: -3px; }
.t-diary .him::after { right: -3px; top: -3px; transform: rotate(90deg); }
.t-diary .him .pushpin::before { left: -3px; bottom: -3px; transform: rotate(-90deg); }
.t-diary .him .pushpin::after { right: -3px; bottom: -3px; transform: rotate(180deg); }
.t-diary .her .pushpin::before {
  content: ''; position: absolute; left: -20px; top: 18px; width: 92px; height: 18px; transform: rotate(-45deg);
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 1px, transparent 1px 3px), linear-gradient(#8d2f52, #5e1a35);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.t-diary .reply { padding: 46px 46px 42px; line-height: 1.5; transform: rotate(.3deg); }
.t-diary .reply::before { display: none; }
.t-diary .reply h3 { font-family: 'Crimson Pro', serif; font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 30px; color: #241c26; }
.t-diary .reply .sub { color: #8a6a3f; font-style: italic; font-size: 17px; margin-bottom: 24px; }
.t-diary .field > span { font-family: 'Crimson Pro', serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 15px; color: #8a6a3f; }
.t-diary .field textarea, .t-diary .field input[type=text] { font-family: 'Reenie Beanie', cursive; font-size: 30px; line-height: 1.2; color: #6b1f3b; border-bottom: 1px solid rgba(138, 106, 63, .3); }
.t-diary .field textarea { min-height: 170px; }
.t-diary .dropzone { border-color: rgba(154, 52, 87, .45); background: rgba(255, 255, 255, .4); color: #6b1f3b; font-family: 'Crimson Pro', serif; font-style: italic; font-size: 18px; }
.t-diary .previews img { border-color: #f6f1e6; }
.t-diary .status { color: #8a6a3f; font-family: 'Crimson Pro', serif; font-style: italic; }
.t-diary footer.end { font-family: 'Crimson Pro', serif; font-style: italic; text-transform: none; letter-spacing: .05em; font-size: 16px; color: rgba(234, 217, 198, .45); }

/* ============================== SAME SKY ============================== */
body.t-sky {
  color: #dfe3f1;
  font-family: 'EB Garamond', Georgia, serif;
  font-size: 18px;
  background:
    var(--stars1), var(--stars2), var(--grw),
    radial-gradient(ellipse at 15% 0%, #263266 0, transparent 55%),
    radial-gradient(ellipse at 95% 100%, #1b2650 0, transparent 55%),
    linear-gradient(#121833, #0b0f24);
  background-attachment: fixed;
}
.t-sky ::selection { background: rgba(201, 168, 106, .3); }

.lockobj.sky {
  position: relative;
  width: 100%;
  aspect-ratio: 1.55;
  border-radius: 4px;
  background: var(--gr), linear-gradient(168deg, #2b3b70, #1a2550 70%, #172047);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px rgba(0, 0, 0, .35), 0 34px 60px -20px rgba(0, 0, 0, .9);
  transition: transform .9s ease, opacity .9s ease;
}
.lockobj.sky::before {
  content: ''; position: absolute; inset: 0; border-radius: 4px; pointer-events: none;
  background:
    linear-gradient(to top right, transparent 49.7%, rgba(255, 255, 255, .07) 50%, transparent 50.4%),
    linear-gradient(to top left, transparent 49.7%, rgba(255, 255, 255, .07) 50%, transparent 50.4%);
}
.sky .sstamp { position: absolute; top: 8%; right: 5%; width: 13%; aspect-ratio: .83; background: #e8e3d2; border-radius: 1px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transform: rotate(3deg); }
.sky .sstamp::before { content: ''; position: absolute; inset: 7%; border: 1.5px dotted #243063; }
.sky .sstamp::after { content: ''; position: absolute; left: 28%; top: 28%; width: 46%; aspect-ratio: 1; border-radius: 50%; background: #2d3c74; box-shadow: inset 7px -5px 0 0 #e8e3d2; }
.sky .spm { position: absolute; top: 11%; right: 21%; width: 14%; aspect-ratio: 1; border: 1px solid rgba(223, 227, 241, .45); border-radius: 50%; }
.sky .spm::after { content: ''; position: absolute; right: 100%; top: 35%; width: 90%; height: 30%; background: repeating-linear-gradient(rgba(223, 227, 241, .45) 0 1px, transparent 1px 5px); }
.sky .saddr { position: absolute; left: 10%; right: 8%; bottom: 14%; font-style: italic; font-size: clamp(24px, 5.6vw, 34px); line-height: 1.3; color: #e3e7f4; }
.sky .saddr span { color: #c9a86a; }
.sky .saddr small { display: block; font-size: .7em; color: #9aa3c7; }
.lockobj.sky.open { transform: translateY(-30px) scale(.96); opacity: 0; }

.t-sky .lock-form { color: #dfe3f1; }
.t-sky .lock-form label { font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; text-transform: none; letter-spacing: .02em; color: #9aa3c7; }
.t-sky .pin {
  font-family: 'EB Garamond', serif; font-size: 26px; letter-spacing: .4em;
  color: #eef0f7; background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(223, 227, 241, .28); border-radius: 6px;
  padding: 8px 0 8px .4em;
}
.t-sky .pin:focus { border-color: rgba(223, 227, 241, .6); }
.t-sky .pin::placeholder { color: rgba(223, 227, 241, .35); }
.t-sky .btn {
  font-family: 'EB Garamond', serif; font-size: 18px; letter-spacing: .04em; text-transform: none;
  background: linear-gradient(#f0ecdd, #ddd7c2); color: #141a36; border: 0; border-radius: 6px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .8);
}
.t-sky .btn:hover { background: #fff; color: #141a36; }
.t-sky .err { color: #f0b8a8; font-family: 'EB Garamond', serif; font-style: italic; }

.t-sky .sheet {
  background: radial-gradient(circle at 92% 6%, rgba(201, 168, 106, .16) 0 44px, transparent 46px), linear-gradient(165deg, #f4f3ef, #e6e8ee);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 30px 50px -20px rgba(0, 0, 0, .9);
  border-radius: 2px;
  color: #2a2f45;
}
.t-sky .sheet::before { display: none; }
.t-sky .sheet::after { background: var(--gr); opacity: .5; }
.t-sky .letter { border-image: none; border-top: 0; padding: 60px 66px 64px; line-height: 1.65; }
.t-sky .date { text-align: left; height: auto; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: #5c6690; margin-bottom: 24px; }
.t-sky .title { font-family: 'EB Garamond', serif; text-transform: none; letter-spacing: .01em; font-size: 28px; line-height: 1.25; margin: 0 0 18px; color: #1b203a; }
.t-sky .greeting { font-family: 'EB Garamond', serif; font-style: italic; font-size: 38px; line-height: 1.1; color: #1b203a; margin: 0 0 20px; }
.t-sky .body { font-size: 20px; }
.t-sky .body p { margin: 0 0 1em; }
.t-sky .signoff { font-family: 'EB Garamond', serif; font-style: italic; font-size: 24px; line-height: 1.35; color: #1b203a; margin-top: 30px; }
.t-sky .unwritten { color: #5c6690; padding: 10px 0 0; line-height: 1.6; }
.t-sky .unwritten .big { font-family: 'EB Garamond', serif; font-style: italic; font-size: 32px; line-height: 1.25; color: #1b203a; margin-bottom: 14px; }
.t-sky .flourish { color: #c9a86a; opacity: .85; font-size: 14px; letter-spacing: .3em; margin-top: 34px; }
.t-sky .flourish::before { content: '\2726\00a0\00a0\2726\00a0\00a0\2726'; }

.t-sky .board h2 { font-family: 'EB Garamond', serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 30px; color: #e3e7f4; }
.t-sky .board .sub { color: #9aa3c7; font-style: italic; font-size: 17px; }
.t-sky .polaroid { background: var(--gr), linear-gradient(#f3f1ea, #e9e6dc); box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .9); }
.t-sky .polaroid .cap { font-family: 'La Belle Aurore', cursive; font-size: 19px; line-height: 1.4; color: #2b3150; }
.t-sky .polaroid.her .cap, .t-sky .note.her { color: #4a3461; }
.t-sky .note { background: var(--gr), linear-gradient(170deg, #f0ecdf, #e3dece); box-shadow: 0 16px 26px -14px rgba(0, 0, 0, .9); padding: 32px 20px 28px; font-family: 'La Belle Aurore', cursive; font-size: 19px; line-height: 1.55; color: #2b3150; }
.t-sky .who { font-family: 'EB Garamond', serif; font-style: italic; font-size: 14px; letter-spacing: .02em; text-transform: none; color: rgba(40, 45, 70, .5); }
/* round tacks: his brass, hers pearl */
.t-sky .pushpin { top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; clip-path: none; transform: none; box-shadow: 0 3px 5px rgba(0, 0, 0, .5); background: radial-gradient(circle at 35% 30%, #f6e4b0, #c0923f 55%, #6c4a16); }
.t-sky .her .pushpin { background: radial-gradient(circle at 35% 30%, #fff, #d8d8e2 55%, #8a8a9e); transform: none; }

.t-sky .reply { padding: 46px 46px 42px; line-height: 1.5; }
.t-sky .reply h3 { font-family: 'EB Garamond', serif; font-style: italic; text-transform: none; letter-spacing: .01em; font-size: 30px; color: #1b203a; }
.t-sky .reply .sub { color: #5c6690; font-style: italic; font-size: 17px; margin-bottom: 24px; }
.t-sky .field > span { font-family: 'EB Garamond', serif; font-style: italic; text-transform: none; letter-spacing: .02em; font-size: 15px; color: #5c6690; }
.t-sky .field textarea, .t-sky .field input[type=text] { font-family: 'EB Garamond', serif; font-style: italic; font-size: 22px; line-height: 1.5; color: #4a3461; border-bottom: 1px solid rgba(43, 49, 80, .2); }
.t-sky .field textarea { min-height: 160px; }
.t-sky .dropzone { border-color: rgba(43, 49, 80, .35); background: rgba(255, 255, 255, .45); color: #2b3150; font-family: 'EB Garamond', serif; font-style: italic; font-size: 18px; }
.t-sky .btn.solid { background: #1a2550; color: #f0ecdd; }
.t-sky .btn.solid:hover { background: #2b3b70; color: #fff; }
.t-sky .status { color: #5c6690; font-family: 'EB Garamond', serif; font-style: italic; }
.t-sky footer.end { font-family: 'EB Garamond', serif; font-style: italic; text-transform: none; letter-spacing: .05em; font-size: 16px; color: rgba(223, 227, 241, .45); }

@media (max-width: 640px) {
  .lockobj.diary { width: 242px; height: 300px; }
  .diary .book { transform: scale(1.3); }
  .t-diary .letter, .t-sky .letter { padding: 40px 24px 44px 28px; transform: none; }
  .t-diary .sheet::before { right: 20px; height: 80px; width: 13px; }
  .t-diary .reply, .t-sky .reply { padding: 34px 22px 30px; transform: none; }
  .t-diary .body, .t-sky .body { font-size: 18px; }
  .t-diary .greeting, .t-sky .greeting { font-size: 32px; }
  .t-diary .note.her { font-size: 23px; }
  .t-diary .polaroid.her .cap { font-size: 22px; }
  .t-diary .polaroid .cap, .t-diary .note { font-size: 13px; }
  .t-sky .note, .t-sky .polaroid .cap { font-size: 16px; }
}
.t-diary .note.her { padding: 44px 20px 28px 26px; }
.t-diary .polaroid.her .cap { padding-left: 4px; }