/* Moonlight / red sea skin, matched to mockup/mockup-colori.png.
   Separate from the scrapbook's layout and authored page treatments. */
@font-face {
  font-family: 'Lilith Japanese';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/noto-serif-jp-verse.ttf') format('truetype');
  unicode-range: U+3001, U+3059, U+3066, U+306B, U+306F, U+3079, U+308B, U+30B9, U+30EA, U+5E30, U+7121;
}
:root {
  --night: #e8eef5;
  --deep: #e0e8f2;
  --panel: #d7e1ee;
  --blue: #6485b8;
  --red: #be2544;
  --red-bright: #d83253;
  --bone: #344d72;
  --ink: #282a34;
  --muted: #7489a8;
  --line: #a3b7d2;
  --paper: #eff3f8;
  --japanese: 'Lilith Japanese', 'Yu Mincho', 'Hiragino Mincho ProN', 'Noto Serif CJK JP', serif;
  color-scheme: light;
}
html, body { background: var(--night); }
body {
  color: var(--bone);
  background-image: radial-gradient(ellipse at 50% 20%, #f8fbff 10%, #e2eaf4 60%, #a7b9d3 100%);
}
body::before {
  background: url('assets/backdrop-blur.jpg') center top / cover no-repeat;
  opacity: .16;
}
body::after { background: linear-gradient(180deg, #758eaf33, #eef3f8aa 50%, #bacbe155); }
.site-wrap {
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  border: 1px solid #9aafca;
  background: var(--paper);
  box-shadow: 0 0 45px #eff6ff70, 0 12px 70px #30496a35;
  isolation: isolate;
}
/* The transparent landscape climbs behind the last leaves, not into a black bar. */
.site-wrap::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: min(760px, 65vw);
  background: url('assets/footer-sito.png') center calc(100% + 150px) / 100% auto no-repeat;
  pointer-events: none;
}
.masthead {
  height: clamp(285px, 27vw, 400px);
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 25px 8.5%;
  overflow: hidden;
  background: url('assets/header-sito.jpg') center 49% / cover no-repeat;
  border-bottom: 1px solid #8da4c1;
}
.masthead::before { left: 18px; border-color: #9ebde333; }
.masthead-copy { min-height: 0; display: block; padding-top: 20px; }
.masthead h1 {
  font: 500 clamp(90px, 12vw, 174px)/.95 var(--serif);
  margin: 0;
  letter-spacing: -.055em;
  color: #f7faff;
  text-shadow: 0 0 3px #fff, 0 0 18px #a1c4ff, 0 4px 18px #23477866;
}
.masthead-label { margin: 10px 0 0; text-align: center; font: 120px/1.5 var(--mono); letter-spacing: .20em; color: #f7faff; text-shadow: 1px 1px 6px #a5c4ed; }
.masthead-kana { position: absolute; left: 25px; top: 25px; writing-mode: vertical-rl; font: 30px/1.4 var(--japanese); letter-spacing: .12em; color: #a5c4ed; opacity: .85; }
.impact-cross { display: block; width: 88px; height: 115px; background: var(--red); clip-path: polygon(49% 0, 53% 43%, 100% 48%, 54% 51%, 50% 100%, 46% 52%, 0 49%, 46% 46%); }
.header-cross { position: absolute; top: 13%; left: 46%; width: 95px; height: 130px; filter: drop-shadow(0 0 5px #dd284c55); }
.vertical-verse {
  margin: 0;
  position: absolute;
  z-index: 5;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font: 32px/1.2 var(--japanese);
  letter-spacing: .13em;
  pointer-events: none;
}
.verse-header { top: clamp(150px, 14vw, 210px); right: 18px; color: var(--red); text-shadow: 0 0 7px #ffffffbd; }
.layout { position: relative; grid-template-columns: 215px minmax(0, 1fr); background: transparent; border-top: 0; }
.sidebar { background: linear-gradient(180deg, #edf2f8ed 0%, #e9f0f8c9 55%, #e7eff955 100%); border-right: 1px solid #8ea5c6; padding: 26px 20px; }
.portrait-frame { background: #f8f9f8; border-color: #bfcddd; box-shadow: 3px 5px 2px #53688935; padding: 7px 7px 12px; }
.portrait-frame img { filter: saturate(.8) contrast(1.02); }
.portrait-tape { background: #be213ee6; }
.source-image:hover { outline-color: var(--red); }
.side-nav { margin-top: 30px; }
.nav-link { border-bottom: 1px solid #adbed77a; }
.nav-link > span { color: #354c77; }
.nav-link:hover { background: #d3dfed; color: #344d72; }
.nav-link.active { background: #d0dded99; border-color: #9aafd0; }
.small-shrine { border-color: #a5b9d080; }
.small-shrine img { filter: drop-shadow(0 0 3px #fff); }
.binder-tools button { background: #f0f5fa88; border-color: #b4334e; color: #5c7eaf; box-shadow: none; }
.binder-tools button:hover { background: #dce7f3; border-color: var(--red-bright); }
.main-column {
  min-height: 70vh;
  padding: 16px 12px 26px 14px;
  background: linear-gradient(180deg, #edf2f8ed, #e8eff8c4 65%, #e8eff820);
  background-size: auto;
}
.make-button { background: #ba2643; border-color: #d7556c; color: #fff6f8; box-shadow: 2px 3px 0 #94a6c04d; }
.make-button:hover { background: #d23451; }
.binder-meta { margin: 6px 0 0; border-color: #c57a8a66; }
.search-box > span { color: var(--red); }
.search-box input { border-color: #c86a7d; caret-color: var(--red); color: var(--bone); font-size: 10px; }
.post-actions button:disabled { opacity: .3; cursor: default; box-shadow: none; }
.post-actions button { border-color: #95b0d4; background: #263b58df; color: #edf5ff; box-shadow: 1px 2px 3px #56709144; }
.post-actions button:hover { background: #be2544; }
.empty-state > span { color: var(--red); }
/* Keep the paper, lettering and images authored inside each collage unchanged. */
.landscape-footer { position: relative; min-height: 300px; background: transparent; display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.footer-signature { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto; width: max-content; text-align: center; }
.footer-signature .impact-cross { width: 65px; height: 105px; margin: 0 auto 16px; }
.footer-signature p { font: 600 25px/1.2 var(--serif); letter-spacing: .4em; margin: 0 0 18px .4em; color: #455e86; text-shadow: 0 1px 0 #ffffffd0, 0 0 16px #ffffffe0; }
.footer-label { font: 28px/1.6 var(--mono); letter-spacing: .7em; color: #5574a1; text-shadow: 0 1px 0 #ffffffd0, 0 0 16px #ffffffe0; }
.verse-footer { right: 18px; bottom: 170px; color: #6188c4; text-shadow: 0 0 8px #fff; }
/* The making desk shares the light palette; authored ink/effects are not recoloured. */
dialog { background: var(--paper); color: var(--bone); border-color: #91a9ca; box-shadow: 0 20px 90px #263e6870; }
dialog::backdrop { background: #23395899; }
.composer-top, .desk-workbench, .layer-panel, .layers-details { border-color: #a9bcd4; }
.close-button { color: #556f98; }
.close-button:hover { color: var(--red); }
#reader-close { border-color: #9bb2d0; background: linear-gradient(#f4f8fe, #dde8f6); color: #4d6b96; box-shadow: 3px 4px 0 #aec2da; }
#reader-close:hover { color: var(--red); border-color: #d08b98; }
#reader-close:active { box-shadow: 1px 1px 0 #aec2da; }
.paper-desk { background: radial-gradient(ellipse, #f5f8fd, #c9d7e9); }
.desk-date { padding: 12px 0 2px; color: #6f88ab; }.desk-date label { letter-spacing: .12em; }.desk-date input { border: 1px solid #9bb2d0; color: #344d72; background: #f4f7fc; height: 32px; padding: 4px 8px; font: 11px var(--mono); }
.layer-panel { background: #e4ebf5; }
.toy-tray button, .toy-tray button:nth-child(2n), .toy-tray button:nth-child(3n) { background: #e1eaf6; border-color: #93abcd; color: #46628a; box-shadow: 2px 3px 0 #8ba0c144; }
.toy-tray button:hover { background: #f6f9fd; }
.toy-tray #add-text-layer span { color: var(--red); }
.sticker-drawer, .media-link-tray, #layer-src-tray { background: #e0e8f3; border-color: #9ab0ce; }
.layer-row > button:first-child, .layer-row .row-lock,
.shape-icons button, .icon-control-group button, .link-type-icons button,
.text-font-icons button, .text-effect-icons button, .text-style-buttons button,
.piece-actions button, .history-buttons button, #tape-controls input[type="color"],
.asset-chip, .media-link-tray button.asset-chip { background: #edf3fa; border-color: #9bb2d0; color: #45618c; box-shadow: 1px 2px 0 #8fa5c344; }
.layer-row > button:first-child span, .control-label::before, .link-field-glyph,
#layer-src-tray .link-field-glyph, .layers-details summary::before { color: #557bab; }
.layer-row.selected > button:first-child, .shape-icons button.active,
.icon-control-group button.active, .link-type-icons button.active,
.text-font-icons button.active, .text-effect-icons button.active,
#layer-pan[aria-pressed="true"], .text-style-buttons button[aria-pressed="true"] { background: #d0def0; color: #344e7c; border-color: #bf3d58; box-shadow: 0 0 0 1px #bf3d5855; }
.layer-row .row-lock::before { color: #7390b6; }
.layer-row .row-lock[aria-pressed="true"]::before { color: var(--red); }
.layer-panel input[type="range"] { accent-color: #bb2946; }
.paper-swatches button { border-color: #98acc6; box-shadow: 1px 2px 0 #94a8c044; }
.paper-swatches button.active { outline-color: var(--red); }
#text-controls #layer-text { background: #f4f7fc !important; color: #344d72 !important; caret-color: var(--red) !important; border-color: #9bb2d0; }
#media-link-tray #media-url, #layer-src-tray #layer-src-url { background: #f4f7fc; border-color: #9bb2d0; color: #344d72 !important; caret-color: var(--red) !important; }
#media-link-tray #media-url::placeholder, #layer-src-tray #layer-src-url::placeholder { color: #778caa !important; }
#layer-src-apply, .media-link-tray #link-add { background: #ba2643; border-color: #d7556c; color: #fff6f8; }
.asset-chip:hover, .media-link-tray button.asset-chip:hover { background: #d2e0f2; border-color: var(--red); }
.stage-placeholder span { color: var(--red); }
/* The album wears the shrine's paper: warm ivory leaves, powder-blue binding. */
.book-leaf { border-color: #d3cbbd; }
.book-gutter { background: linear-gradient(90deg, #0000, #5a7ba42b 38%, #3d5a8345 50%, #5a7ba42b 62%, #0000); }
.book-leaf::after { background: radial-gradient(circle, #5a7ba436 0 2.6px, #0000 3.2px) center top / 9px 30px repeat-y; }
.leaf-post .canvas-shell { background: #f7fafd; box-shadow: 1px 2px 6px #4d6a9440; }
.leaf-post-tape { background: #9fb8d6c4; color: #2c4062; text-shadow: 0 1px 0 #ffffffb0; }
.leaf-blank { border-color: #c3d1e2; color: #a9bbd2; }
.leaf-mark { color: #9aabc2; }
.book-spread { filter: drop-shadow(0 16px 20px #38527b33); }
.book-arrow { border-color: #c06a7f; background: #f7fafd; color: var(--red); box-shadow: 1px 2px 0 #a9bacd55; }
.book-arrow:hover { background: #fbe9ee; border-color: var(--red); }
.book-flower { color: #b3415c; }
.strip-page { border-color: #b8c8dc; background: #f4f8fc; color: #55719a; }
.strip-page:hover { background: #e4edf7; border-color: var(--red); }
.strip-page.active { background: #fbe9ee; border-color: var(--red); color: #a3223e; box-shadow: 0 0 0 1px #be25445c; }
@media (max-width: 1000px) {
  .layout { grid-template-columns: 175px minmax(0, 1fr); }
  .sidebar { padding: 24px 14px; }
  .main-column { padding: 16px 14px; }
  .vertical-verse { font-size: 27px; }
  .verse-header, .verse-footer { right: 13px; }
}
@media (max-width: 760px) {
  .site-wrap { width: calc(100% - 24px); margin-top: 0; }
  .masthead { height: 285px; padding-left: 9%; background-position: 55% center; }
  .masthead h1 { font-size: clamp(85px, 16vw, 120px); }
  .masthead-label { font-size: 7px; letter-spacing: .4em; }
  .masthead-kana { left: 16px; font-size: 23px; }
  .header-cross { left: 48%; width: 65px; height: 95px; }
  .layout { grid-template-columns: 135px minmax(0, 1fr); }
  .sidebar { padding: 20px 12px; }
  .main-column { padding: 14px 12px; }
  .vertical-verse { font-size: 24px; }
  .verse-header { top: 140px; right: 10px; }
  .landscape-footer { min-height: 210px; }
  .footer-signature { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto; padding: 0 0 60px; }
  .verse-footer { bottom: 85px; right: 10px; }
}
@media (max-width: 540px) {
  .site-wrap { width: 100%; margin: 0; border-left: 0; border-right: 0; }
  .masthead { height: 265px; padding-left: 25px; align-items: flex-end; padding-bottom: 38px; background-position: 57% center; }
  .masthead-copy { padding: 0; }
  .masthead h1 { font-size: clamp(78px, 21vw, 110px); margin: 0; }
  .masthead-label { margin-top: 18px; font-size: 6px; }
  .masthead-kana { left: 10px; top: 16px; font-size: 18px; }
  .header-cross { top: 9%; left: 44%; width: 48px; height: 70px; }
  .vertical-verse { font-size: 20px; letter-spacing: .08em; }
  .verse-header { top: 75px; right: 9px; }
  .layout { display: block; }
  .sidebar { grid-template-columns: 72px minmax(0, 1fr); padding: 20px 22px 13px; border-right: 0; border-bottom: 1px solid #a3b7d2; }
  .portrait-frame { width: 68px; padding: 4px; }
  .side-nav { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 5px; margin: 0; overflow: visible; }
  .nav-link { min-width: 37px; min-height: 32px; }
  .nav-link.active { border-bottom-color: #9aafd0; }
  .binder-tools { grid-column: 2; justify-content: center; margin-top: 6px; gap: 12px; }
  .binder-tools button { width: 32px; height: 29px; border: 1px solid #b4334e; background: #f0f5fa88; color: #5c7eaf; }
  .main-column { padding: 12px 14px 22px 8px; }
  .site-wrap::before { height: 330px; background-size: auto 330px; background-position: center calc(100% + 50px); }
  .landscape-footer { min-height: 240px; }
  .footer-signature { position: relative; left: auto; bottom: auto; transform: none; margin: 0 auto; padding: 20px 0 85px; }
  .footer-signature .impact-cross { width: 45px; height: 75px; margin: 0 auto 10px; }
  .footer-signature p { font-size: 22px; }
  .footer-label { font-size: 7px; letter-spacing: .45em; }
  .verse-footer { bottom: 70px; right: 12px; }
}

/* Black-hole dots on the i's of the masthead wordmark
   (dot center measured for Cormorant Garamond: x .133em, y .232em, ø .093em) */
.masthead h1 .bh { position: relative; display: inline-block; }
.masthead h1 .bh::after {
  content: '';
  position: absolute;
  top: .176em;
  left: .074em;
  width: .115em;
  height: .115em;
  border-radius: 50%;
  background: radial-gradient(circle, #000 0 58%, #01040f 78%, transparent 100%);
}

/* Guests browse; the desk tools belong to the keeper only (#desk / #lock in the address). */
body.guest #compose-open, body.guest #export-open, body.guest #import-open, body.guest #sync-open, body.guest #empty-compose { display: none; }

/* YouTube windows: a poster that becomes a real player only when played. */
.layer-embed { padding: 8px; background: #efebe2; box-shadow: 4px 7px 8px #09050f42; }
.layer-embed .embed-frame { position: relative; width: 100%; height: 100%; background: #161521; overflow: hidden; }
.layer-embed .embed-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; background: none; cursor: pointer; }
.layer-embed .embed-poster:not([data-embed-src]) { cursor: inherit; }
.layer-embed .embed-thumb { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85) brightness(.9); }
.layer-embed .embed-poster:hover .embed-thumb { filter: none; }
.layer-embed .embed-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 58px; height: 40px; display: grid; place-items: center; background: #d92d3f; color: #fff; border-radius: 8px; font-size: 15px; box-shadow: 0 3px 12px #000000aa; transition: transform .15s; }
.layer-embed .embed-poster:hover .embed-play { transform: translate(-50%, -50%) scale(1.08); }
.layer-embed .embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-body a { color: #d88ca6; text-decoration: underline; text-underline-offset: 2px; }
.post-body a:hover { color: #f2b8cc; }

/* A phone paints the album while a thumb drags it. Keep the same composition,
   but drop full-screen blur and the most expensive moving filters/shadows. */
@media (max-width: 760px) {
  .book-spread { filter: none; }
  .site-wrap { box-shadow: 0 0 18px #eff6ff70, 0 6px 24px #30496a25; }
  .layer-content { box-shadow: 2px 4px 6px #09050f33; }
  .sigil-sticker img { filter: none; }
  dialog::backdrop { backdrop-filter: none; background: #233958cc; }
  .slide-snake-track, .slide-snake-body { filter: none; }
  .slide-snake-track { stroke-width: 2.5; }
  .slide-snake-body { stroke-width: 3.5; }
  .slide-snake-head { box-shadow: 0 0 0 2px #8e2454, 0 0 7px 2px #ff6289; }
}

@media (max-width: 540px) {
  /* The full-width paper covers these two fixed layers completely. */
  body::before, body::after { display: none; }
}