/* ============================================================================
   „Всичко, което запазихме“ — хартиеният албум на Александър и Йоана
   Дизайн: Pressed & Kept. Съзнателно има само една тема — хартия.
   ========================================================================== */

:root{
  --paper:      #EDE4E2;
  --paper-lit:  #F7F1EF;
  --card:       #FFFDFC;
  --indigo:     #2E3350;
  --indigo-60:  rgba(46,51,80,.62);
  --indigo-40:  rgba(46,51,80,.42);
  --rose:       #B4707A;
  --rose-deep:  #96545E;
  --sage:       #8C9A82;
  --shadow:     #C9BAB6;

  --f-serif: 'Cormorant Garamond', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
  --f-ui: 'Segoe UI', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --gap: 30px;
  --tape: rgba(180,112,122,.22);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  min-height:100vh;
  background-color: var(--paper);
  background-image:
    radial-gradient(60% 45% at 12% 0%, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(55% 50% at 92% 88%, rgba(201,186,182,.5), transparent 72%);
  background-attachment: fixed;
  color: var(--indigo);
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* зърното на хартията */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.32;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/></filter><rect width='140' height='140' filter='url(%23p)' opacity='.42'/></svg>");
  mix-blend-mode: multiply;
}

.page{ position:relative; z-index:1; }
.wrap{ max-width: 1180px; margin: 0 auto; padding: 0 26px; }

a{ color: var(--rose-deep); }
:focus-visible{ outline: 2px solid var(--rose); outline-offset: 3px; }

/* ── ситни надписи ───────────────────────────────────────────────────────── */
.label{
  font-family: var(--f-ui);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--indigo-60);
}

/* ── горна лента ─────────────────────────────────────────────────────────── */
.top{
  display:flex; align-items:baseline; justify-content:space-between;
  gap: 20px; padding: 26px 0 22px;
  border-bottom: 1px solid var(--shadow);
}
.monogram{
  font-size: 27px; font-style: italic; color: var(--rose);
  text-decoration: none; letter-spacing: .04em; white-space: nowrap;
}
.top nav{ display:flex; gap: 26px; align-items: baseline; }
.top nav a{
  font-family: var(--f-ui); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--indigo-60);
  padding-bottom: 4px; border-bottom: 1px solid transparent;
}
.top nav a:hover{ color: var(--indigo); }
.top nav a[aria-current="page"]{ color: var(--indigo); border-bottom-color: var(--rose); }

/* ── заглавие на страница ────────────────────────────────────────────────── */
.masthead{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between;
  gap: 18px 30px; padding: 48px 0 6px;
}
.masthead h1{
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 500; line-height: 1.04; margin: 0; max-width: 12ch;
  text-wrap: balance;
}
.masthead h1 em{ font-style: italic; color: var(--rose); }
.masthead .meta{ text-align: right; line-height: 2; }
.masthead .meta .label{ display:block; }

.intro{
  margin: 18px 0 0; max-width: 58ch; font-size: 19px;
  font-style: italic; color: var(--indigo-60);
}

/* ── дъската със снимки ──────────────────────────────────────────────────── */
.board{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px var(--gap);
  padding: 40px 0 60px;
  align-items: start;
}

/* една закачена снимка */
.print{
  position: relative;
  margin: 0;
  background: var(--card);
  padding: 12px 12px 0;
  box-shadow: 0 12px 26px -16px rgba(46,51,80,.55);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
}
.board .print:nth-child(3n+1){ transform: rotate(-1.3deg); }
.board .print:nth-child(3n+2){ transform: rotate(.9deg);  margin-top: 26px; }
.board .print:nth-child(3n+3){ transform: rotate(-.4deg); margin-top: 10px; }

.print::before{           /* тиксото */
  content:"";
  position:absolute; top:-10px; left:50%;
  width: 78px; height: 20px;
  transform: translateX(-50%) rotate(-2deg);
  background: var(--tape);
  border-left: 1px dashed rgba(180,112,122,.4);
  border-right: 1px dashed rgba(180,112,122,.4);
}
.print:nth-child(even)::before{ transform: translateX(-50%) rotate(2.5deg); }

.print a.shot{
  display:block; position:relative; overflow:hidden; background: var(--shadow);
  text-decoration: none;
}
.print img{
  display:block; width:100%; height:auto;
  filter: sepia(.12) saturate(.94);
}
.print figcaption{ padding: 12px 4px 15px; }
.print .said{
  font-style: italic; font-size: 17px; line-height: 1.45; color: rgba(46,51,80,.85);
  margin: 0;
}
.print .when{
  display:flex; gap: 10px; align-items:baseline; margin-top: 7px;
  font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .17em;
  text-transform: uppercase; color: var(--sage);
}
.print .when .where{ color: var(--indigo-40); }

.board .print:hover,
.board .print:focus-within{
  transform: rotate(0deg) translateY(-4px);
  box-shadow: 0 24px 40px -20px rgba(46,51,80,.6);
  z-index: 2;
}

/* ── глави ───────────────────────────────────────────────────────────────── */
.chapter{ padding-top: 26px; }
.chapter-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap: 10px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--shadow);
}
.chapter-head h2{
  font-size: 34px; font-weight: 500; margin: 0; letter-spacing: .01em;
}
.chapter-head h2 span{ font-style: italic; color: var(--rose); }
.chapter-head .more{
  font-family: var(--f-ui); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; text-decoration: none; color: var(--rose-deep);
  border-bottom: 1px solid rgba(180,112,122,.45); padding-bottom: 3px;
}
.chapter + .chapter{ padding-top: 40px; }

/* ── бутони и полета ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block; font-family: var(--f-ui); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
  padding: 13px 26px; border: 1px solid var(--indigo); background: transparent;
  color: var(--indigo); cursor: pointer; transition: background .25s, color .25s;
}
.btn:hover{ background: var(--indigo); color: var(--paper-lit); }
.btn-rose{ border-color: var(--rose); background: var(--rose); color: #FFF9F8; }
.btn-rose:hover{ background: var(--rose-deep); border-color: var(--rose-deep); color:#FFF9F8; }
.btn-quiet{ border-color: var(--shadow); color: var(--indigo-60); }
.btn-danger{ border-color: #A2434B; color:#A2434B; }
.btn-danger:hover{ background:#A2434B; color:#FFF6F5; }

.field{ display:block; margin-bottom: 20px; }
.field > span{
  display:block; font-family: var(--f-ui); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--indigo-60); margin-bottom: 7px;
}
input[type=text], input[type=password], input[type=date], textarea, select{
  width: 100%; font-family: var(--f-serif); font-size: 17px; color: var(--indigo);
  background: var(--card); border: 1px solid var(--shadow); border-radius: 0;
  padding: 11px 13px;
}
textarea{ font-style: italic; line-height: 1.5; resize: vertical; min-height: 76px; }
input:focus, textarea:focus, select:focus{ border-color: var(--rose); outline: none; }

.paper-panel{
  background: var(--card); padding: 34px 34px 30px;
  box-shadow: 0 14px 30px -20px rgba(46,51,80,.5);
}

.note{
  font-style: italic; color: var(--indigo-60); font-size: 16px;
}
.flash{
  margin: 26px 0 0; padding: 14px 18px; background: var(--card);
  border-left: 2px solid var(--sage); font-style: italic;
}
.error{ border-left-color: #A2434B; color:#8E3A42; }

/* ── празен албум ────────────────────────────────────────────────────────── */
.empty{
  text-align:center; padding: 90px 20px 110px;
}
.empty p{ font-style: italic; font-size: 21px; color: var(--indigo-60); margin: 0 0 26px; }

/* ── подвал ──────────────────────────────────────────────────────────────── */
.bottom{
  border-top: 1px solid var(--shadow); margin-top: 20px;
  padding: 20px 0 40px; display:flex; justify-content:space-between; gap: 16px;
  flex-wrap: wrap;
}

/* ── лупа (цял екран) ────────────────────────────────────────────────────── */
.viewer{
  position: fixed; inset: 0; z-index: 50; display: none;
  background: rgba(30,33,52,.95);
  backdrop-filter: blur(3px);
}
.viewer[open], .viewer.on{ display: grid; grid-template-rows: 1fr auto; }
.viewer .stage{
  display:grid; place-items:center; padding: 34px 70px 10px; min-height: 0;
}
.viewer img{
  max-width: 100%; max-height: 78vh; display:block;
  background: var(--card); padding: 10px;
  box-shadow: 0 30px 60px -30px #000;
}
.viewer .said{
  font-style: italic; font-size: 19px; color: #F2E9E7; margin: 0;
}
.viewer .when{
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(242,233,231,.6); margin: 8px 0 0;
}
.viewer .caption-bar{
  text-align:center; padding: 14px 24px 32px;
}
.viewer .close, .viewer .prev, .viewer .next{
  position:absolute; background:none; border:0; cursor:pointer;
  color: rgba(242,233,231,.75); font-family: var(--f-serif); line-height:1;
}
.viewer .close{ top: 18px; right: 22px; font-size: 34px; }
.viewer .prev, .viewer .next{ top: 50%; transform: translateY(-50%); font-size: 44px; padding: 10px 16px; }
.viewer .prev{ left: 8px; }
.viewer .next{ right: 8px; }
.viewer .close:hover, .viewer .prev:hover, .viewer .next:hover{ color:#FFF; }
.viewer .edit-link{
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242,233,231,.55); text-decoration: none; border-bottom: 1px solid rgba(242,233,231,.3);
}

/* ── качване: списък с избрани снимки ────────────────────────────────────── */
.queue{ display:grid; gap: 18px; margin: 24px 0 0; }
.queue-item{
  display:grid; grid-template-columns: 132px 1fr; gap: 20px; align-items:start;
  background: var(--card); padding: 14px; box-shadow: 0 10px 22px -18px rgba(46,51,80,.5);
}
.queue-item img{ width:100%; height: 132px; object-fit: cover; display:block; background: var(--shadow); }
.queue-fields{ display:grid; gap: 12px; }
.queue-row{ display:grid; grid-template-columns: 1fr 190px; gap: 12px; }
.queue-item .field{ margin: 0; }
.queue-name{
  font-family: var(--f-ui); font-size: 10px; letter-spacing: .12em; color: var(--indigo-40);
  overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
}

.dropzone{
  border: 1px dashed var(--shadow); background: rgba(255,253,252,.6);
  padding: 42px 24px; text-align:center; cursor: pointer;
}
.dropzone.over{ border-color: var(--rose); background: rgba(255,253,252,.95); }
.dropzone p{ margin: 0 0 6px; font-style: italic; font-size: 19px; }

/* ── страницата за редакция ──────────────────────────────────────────────── */
.edit-layout{
  display:grid; grid-template-columns: minmax(240px, 380px) 1fr;
  gap: 34px; align-items: start; margin: 30px 0 60px;
}
.two-up{ display:grid; grid-template-columns: 1fr 200px; gap: 16px; }

/* ── долна лента на телефона ─────────────────────────────────────────────── */
.tabbar{ display: none; }

@media (max-width: 900px){
  .board{ grid-template-columns: repeat(2, 1fr); gap: 38px 22px; }
  .board .print:nth-child(3n+2),
  .board .print:nth-child(3n+3){ margin-top: 0; }
  .board .print:nth-child(even){ transform: rotate(1deg); margin-top: 22px; }
  .board .print:nth-child(odd){ transform: rotate(-1deg); }
  .queue-row{ grid-template-columns: 1fr; }
  .edit-layout{ grid-template-columns: 1fr; gap: 26px; }
  .two-up{ grid-template-columns: 1fr; }
}

@media (max-width: 620px){
  body{ font-size: 17px; }
  .wrap{ padding: 0 18px; }
  .top nav{ display:none; }
  .top{ justify-content:center; padding: 20px 0 16px; }
  .masthead{ padding: 30px 0 4px; }
  .masthead .meta{ text-align: left; }
  .board{ grid-template-columns: 1fr; gap: 34px; padding-bottom: 30px; }
  .board .print{ margin-top: 0 !important; }
  .paper-panel{ padding: 24px 20px 22px; }
  .queue-item{ grid-template-columns: 1fr; }
  .queue-item img{ height: 190px; }
  .viewer .stage{ padding: 20px 12px 4px; }
  .viewer .prev, .viewer .next{ font-size: 34px; }

  .page{ padding-bottom: 74px; }
  .tabbar{
    display:flex; position: fixed; left:0; right:0; bottom:0; z-index: 40;
    background: var(--card); border-top: 1px solid var(--shadow);
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .tabbar a{
    font-family: var(--f-ui); font-size: 9.5px; letter-spacing: .14em;
    text-transform: uppercase; text-decoration:none; color: var(--indigo-60);
  }
  .tabbar a[aria-current="page"]{ color: var(--rose); }
  .tabbar a.add{ color: var(--rose); font-weight: 600; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}

@media print{
  body::before, .top, .tabbar, .bottom, .viewer{ display:none !important; }
  .print{ transform: none !important; box-shadow: none; break-inside: avoid; }
}