/* Naslovnica: ostatak stranice na herojevom papiru. Hero (.film) se ovdje ne dira. */

main, .footer {
  --t-h2: clamp(2rem, 3.4vw, 3.4rem);   /* jedna veličina za sve H2 */
}
.relief h2, .spreads-title, .book h2, .author-note h2 { font-size: var(--t-h2); }

/* Papir: iste mrlje kao u heroju, slabije */
main {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.25 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E") 0 0 / 900px 900px,
    var(--paper);
}
.spreads { background: rgb(120 90 50 / 0.06); }

/* Fotografije: sepija kao printovi u heroju */
.bleed img, .relief-side img { filter: grayscale(1) sepia(0.3) contrast(0.9) brightness(1.03); }
.spread img { box-shadow: 0 30px 60px -24px rgb(60 42 20 / 0.35); }

/* Naslovi: uklesani kao h1 */
.spreads-title {
  color: transparent;
  background: var(--carved);
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  filter: var(--carved-shadow);
}
.book h2 {
  color: transparent;
  background: var(--carved);
  -webkit-background-clip: text; background-clip: text;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  filter: drop-shadow(0 1px 0 rgb(255 252 244 / 0.7)) drop-shadow(0 -1px 0 rgb(40 30 15 / 0.28));
}

/* Potpisi ispod slika: kurziv (Cinzel samo za kratke naslove) */
.cap {
  font: italic 400 1rem/1.4 var(--font-sans);
  letter-spacing: 0;
  color: var(--muted);
  border-left: 0;
  padding-left: 0;
}
.cap-onimage { color: var(--cream); text-shadow: 0 0 2px rgb(30 20 8 / 0.8), 0 1px 14px rgb(30 20 8 / 0.9); }
.cap-light { color: color-mix(in srgb, var(--cream) 62%, transparent); }

/* Knjiga: mockup se utiskuje u papir */
.book { background: none; }
.book-figure img {
  mix-blend-mode: multiply;
  filter: brightness(1.2);
  --fade: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent),
    linear-gradient(to bottom, transparent, #000 18%, #000 88%, transparent);
  -webkit-mask-image: var(--fade); -webkit-mask-composite: source-in;
  mask-image: var(--fade); mask-composite: intersect;
}

/* Kupnja: cilj trake s vrha. scroll-margin spušta blok na sredinu ekrana da se vidi i naslov iznad */
.buy { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent); max-width: 26rem; scroll-margin-top: 40svh; }
.book .buy-price { margin: 0 0 0.75rem; font: 400 clamp(2rem, 3vw, 2.6rem)/1 var(--font-display); color: var(--blue); letter-spacing: 0.02em; }
.buy-btn { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.8rem 1.6rem; border-radius: 2px;
  background: var(--blue); color: var(--paper-light); text-decoration: none; transition: background-color 0.15s var(--ease);
  font: 400 1.15rem/1 var(--font-sans); font-variant-caps: all-small-caps; letter-spacing: 0.08em; }
.buy-btn:hover { background: var(--blue-dark); }
.buy-btn:active { background: var(--blue-deep); }
.buy-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Footer: tekst 1rem, malo veći od --ui */
.footer { font: 400 1rem/1.4 var(--font-sans); color: var(--muted); }

/* O autoru: portret u sepiji kao arhivske fotke u heroju (Gemini upscale s Academia.edu, 640 px) */
.author-note { padding: var(--section) var(--pad); border-top: 1px solid var(--line); }
.author-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; max-width: 900px; margin: 0 auto; }
.author-photo { width: clamp(140px, 16vw, 220px); height: auto; border-radius: 50%; filter: grayscale(1) sepia(0.35) contrast(0.95);
  box-shadow: 0 0 0 1px var(--line), 0 10px 24px rgb(40 30 15 / 0.12); }
.author-note h2 { font: 400 var(--t-h2)/1.15 var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; color: var(--blue); margin-bottom: 1.25rem; }
.author-bio { margin: 0 0 1.75rem; font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.55; max-width: 52ch; text-wrap: pretty; }
@media (max-width: 640px) { .author-grid { grid-template-columns: 1fr; } }

/* Visoka fotka skele: slika u toku stranice (oko dva ekrana), tekst sticky na sredini preko nje */
.tower { position: relative; background: var(--ink); }
.tower-img { width: 100%; height: auto; min-height: 190svh; object-fit: cover; object-position: 35% 0; }   /* 35 %: skela je lijevo od sredine fotke */
.tower-overlay { position: absolute; inset: 0; padding: 0 var(--pad);
  /* zatamnjenje jače u sredini gdje stoji tekst, fotka ostaje čitljiva na rubovima */
  background: linear-gradient(to bottom, rgb(20 16 10 / 0.15), rgb(20 16 10 / 0.45) 30%, rgb(20 16 10 / 0.45) 70%, rgb(20 16 10 / 0.2)); }
.tower-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.tower-overlay .statement-text { margin: 0 auto; color: var(--cream); max-width: 30ch; text-shadow: 0 2px 24px rgb(0 0 0 / 0.45); }

/* Stog radova autora: knjige leže jedna na drugoj, hrbat prema nama, korica gore.
   Svaka knjiga je CSS 3D kutija; klik je izvuče prema nama i otvori modal. */
.works { max-width: 760px; margin: clamp(3.5rem, 7vw, 6rem) auto 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.stack { container-type: inline-size; list-style: none; margin: 0 auto; padding: 0; width: min(640px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 18px;   /* jednak razmak, vide se korice odozgo */
  perspective: 1600px; perspective-origin: 50% -40%;   /* odozgo: vide se korice na vrhu knjiga */
  transform-style: preserve-3d; }   /* jedan 3D prostor: gornja knjiga zakloni koricu donje */
.stack li { transform-style: preserve-3d; position: relative; }

.stack-book { --th: 54px; --l: calc(0.92 * 100cqw);   /* sve knjige iste debljine i duljine */ --w: calc(var(--l) * 0.62);   /* duljina, širina korice (u dubinu) */
  position: relative; display: block; width: var(--l); height: var(--th); padding: 0; border: 0; background: none; cursor: pointer;
  transform-style: preserve-3d; }
.stack-book:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.book-3d { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d;
  transform: translateZ(calc(var(--w) / -2));
  transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1); }   /* povratak u stog: kraći od izvlačenja. Bez filtera: filter poništava preserve-3d */
.stack-book.is-out .book-3d { transform: translateZ(calc(var(--w) / -2 + 70px)); transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* pritisak: knjiga se jedva utisne u stog (samo na pritisak, ne na hover) */
.stack-book:active:not(.is-out) .book-3d { transform: translateZ(calc(var(--w) / -2 - 6px)); transition-duration: 0.1s; }

.face { position: absolute; left: 0; top: 0; backface-visibility: hidden; }
/* knjigoveško platno: tkanje obojeno bojom knjige, zaobljen hrbat (svjetlo gore, sjena dolje) */
.spine { background:
    linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 30%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / 0.3)),
    url(../img/teksture/platno.webp) 0 0 / 96px,
    var(--c);
  background-blend-mode: normal, multiply, normal; }
.spine { width: 100%; height: 100%; transform: translateZ(calc(var(--w) / 2));
  display: flex; align-items: center; justify-content: flex-start; padding: 0 1.25rem 0 var(--title-x, 18%); border-radius: 1px;
  /* samo naslov; svi naslovi počinju na istoj crti, a stupac naslova stoji u sredini hrpta (--title-x postavlja skripta) */
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(0 0 0 / 0.35),
    0 2px 3px rgb(20 12 4 / 0.3);   /* tamni procjep prema knjizi ispod */
  transition: filter 0.15s var(--ease); }
.spine-text { font: 600 clamp(0.88rem, 3cqw, 1.1rem)/1.1 var(--font-sans); font-variant-caps: all-small-caps; letter-spacing: 0.08em; text-align: left;   /* glumljene kapitalke su tanke: deblji rez i više zraka da se čitaju */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  /* zlatotisak: metalni gradijent kroz slova i blago utisnuće */
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, #F4E2A6 0%, #D2AD5A 42%, #C09A48 58%, #E6CE86 100%);
}
/* korica leži gore, vidi se odozgo */
.cover { width: 100%; height: var(--w); top: calc((var(--th) - var(--w)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--th) / 2));
  /* tamnjenje gradijentom, ne filterom: filter na 3D plohi = zaseban sloj koji se iscrta tek na ekranu */
  background: linear-gradient(rgb(0 0 0 / 0.18), rgb(0 0 0 / 0.18)), url(../img/teksture/platno.webp) 0 0 / 96px, var(--c);
  background-blend-mode: normal, multiply, normal;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.3); }
/* gornja knjiga: bez naslovnice, vidi se samo hrbat */
.stack li:first-child .cover { display: none; }
/* krajevi: rub stranica */
.edge { width: var(--w); height: 100%; left: calc(50% - var(--w) / 2);
  background: repeating-linear-gradient(0deg, #F3ECDD 0 1px, #D8CBAF 1px 2px); box-shadow: inset 0 0 0 2px var(--c); }
.edge-l { transform: rotateY(-90deg) translateZ(calc(var(--l) / 2)); background-image: linear-gradient(rgb(0 0 0 / 0.25), rgb(0 0 0 / 0.25)), repeating-linear-gradient(0deg, #F3ECDD 0 1px, #D8CBAF 1px 2px); }
.edge-r { transform: rotateY(90deg) translateZ(calc(var(--l) / 2)); background-image: linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.1)), repeating-linear-gradient(0deg, #F3ECDD 0 1px, #D8CBAF 1px 2px); }

@media (hover: hover) { .stack-book:hover .spine { filter: brightness(1.15); } }

/* Modal rada: izlazi iz izvučene knjige (GSAP), pozadina toplo zatamnjena i zamućena */
.work-modal { width: min(640px, calc(100vw - 2rem)); max-height: calc(100svh - 2rem); padding: 0; border: 0; border-radius: 16px;
  background: var(--paper-light); color: var(--ink); overflow: auto;
  box-shadow: 0 1px 2px rgb(40 30 15 / 0.08), 0 12px 30px rgb(40 30 15 / 0.18), 0 40px 90px rgb(40 30 15 / 0.28); }
.work-modal::backdrop { background: rgb(40 30 15 / 0.42); backdrop-filter: blur(6px); }
.work-modal[open]::backdrop { animation: work-fade 0.3s ease-out; }   /* okvir animira GSAP (index.html) */
.work-modal.is-closing::backdrop { opacity: 0; transition: opacity 0.16s ease-in; }
@keyframes work-fade { from { opacity: 0; } }
.work-modal-inner { position: relative; padding: clamp(1.75rem, 4vw, 3rem); }
.work-pub { margin: 0 0 0.6rem; font: italic 400 1rem/1.4 var(--font-sans); color: var(--muted); }
.work-pub:empty { display: none; }
.work-title { margin: 0 0 1.25rem; font: 500 clamp(1.6rem, 2.8vw, 2.2rem)/1.2 var(--font-sans); color: var(--blue); text-wrap: balance; }
.work-abstract { margin: 0 0 1.25rem; font: 400 1.1rem/1.55 var(--font-sans); color: var(--ink-soft); text-wrap: pretty; }
.work-abstract:empty { display: none; }
.work-keywords { margin: 0 0 1.25rem; font: italic 400 0.95rem/1.45 var(--font-sans); color: var(--muted); }
.work-keywords span:first-child { font-style: normal; font-variant-caps: all-small-caps; letter-spacing: 0.08em; }
.work-author { margin: 0 0 1.5rem; font: italic 400 1.05rem/1.3 var(--font-sans); color: var(--ink); }
.work-close { position: sticky; z-index: 2; top: 0.5rem; float: right; margin: -1.25rem -1.25rem 0 0.75rem; width: 44px;   /* sticky: ostaje vidljiv kad se dugi sažetak scrolla */ height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  display: grid; place-items: center;   /* SVG ikona: geometrijski u sredini kruga, glif iz fonta to nije */
  color: var(--muted); transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
.work-close:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.work-close:active { background: color-mix(in srgb, var(--ink) 15%, transparent); }
.work-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .book-3d, .spine { transition: none; }
  .work-modal[open]::backdrop { animation: none; }
}

@media (max-width: 640px) {
  .stack-book { height: calc(var(--th) * 0.85); }
  .spine { padding: 0 0.75rem; }
}

/* Desktop: o autoru lijevo (zalijepljeno dok se stog scrolla), radovi desno */
@media (min-width: 1000px) {
  .author-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(3rem, 6vw, 6rem);
    max-width: 1240px; margin: 0 auto; align-items: start; }
  .author-layout .author-grid { grid-template-columns: 1fr; max-width: none; margin: 0; position: sticky; top: 6rem; }
  .author-layout .works { max-width: none; margin: 0; }
}

/* Mobitel: fotka iz ljevaonice uz reljef preko cijele širine (od ruba do ruba), potpis ostaje uz tekst */
@media (max-width: 899px) {
  .relief-side { max-width: none; margin-inline: calc(-1 * var(--pad)); }
  .relief-side img { width: 100%; }
  .relief-side .cap { padding-inline: var(--pad); }
}

/* Footer: fotka povorke preko cijele širine, u punom omjeru; tekst leži na dnu fotke */
.footer:has(.footer-photo) { position: relative; display: block; padding: 0; border-top: 0; }
.footer-photo { margin: 0; }
.footer-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 2rem;
  padding: 4rem var(--pad) 1.25rem; color: color-mix(in srgb, var(--cream) 88%, transparent);
  background: linear-gradient(to bottom, rgb(20 16 10 / 0), rgb(20 16 10 / 0.75) 40%); }   /* zatamnjenje pri dnu, da se tekst čita i na svijetloj cesti */
/* od 641 px tekst stoji iznad potpisa spomeniktomislavu.com u kutu fotke */
@media (min-width: 641px) { .footer-text { padding-bottom: 3.25rem; } }
.footer-text a { color: inherit; }
.footer-photo img { display: block; width: 100%; height: auto; filter: grayscale(1) sepia(0.3) contrast(0.9) brightness(1.03); }

/* Okupljanje oko spomenika: uspravna fotka u širokom kadru, fokus na reljefu s vijencem */
.bleed .img-otkrivanje { object-position: 50% 55%; }
@media (max-width: 640px) {
  .footer-text { font-size: 0.8rem; line-height: 1.35; padding: 3rem var(--pad) 0.9rem;
    background: linear-gradient(to bottom, rgb(20 16 10 / 0), rgb(20 16 10 / 0.75) 55%); }
}

/* =====================================================================
   GRID IZ KNJIGE (izmjeren iz spreadova, 23.09.2026.)
   Knjiga: živo polje 82 % stranice, potpisi 8,9-28 %, tekst 31,3-90,9 %,
   dvije polovice 8,9-48,1 / 51,4-90,9 %. To je 12 stupaca:
   potpisi 1-3, tekst 4-12, polovice 1-6 / 7-12, razmak 3,5 % živog polja.
   Na webu: najviše 1240 px, rubovi = --edge. Tipka G uključuje pomoćni prikaz.
   ===================================================================== */
:root {
  --grid-max: 1240px;
  --grid-gap: clamp(16px, 3.5vw, 44px);
  --edge: max(var(--pad), calc((100vw - var(--grid-max)) / 2));
}
@media (min-width: 900px) {
  .statement, .years, .relief, .book, .author-note { padding-inline: var(--edge); }
  .statement, .relief-grid, .book-grid, .author-layout, .years-list {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap);
    max-width: none; margin-inline: 0;
  }
  /* izjave: u sredini, simetrično na stupcima 3-10 */
  .statement .statement-text { grid-column: 3 / 11; margin: 0 auto; text-align: center; }
  /* godine: četiri po tri stupca */
  .years-list > li { grid-column: span 3; }
  /* reljef i knjiga: dvije polovice kao slike u knjizi */
  .relief-figure, .book-figure { grid-column: 1 / 7; }
  .relief-text, .book-text { grid-column: 8 / 13; }
  /* autor: lijevo polovica, radovi desno polovica */
  .author-layout .author-grid { grid-column: 1 / 6; }
  .author-layout .works { grid-column: 7 / 13; }
  /* hero, spreadovi, potpisi na fotkama i footer počinju na istoj lijevoj crti */
  .film-pin .copy { padding-left: var(--edge); }
  .spreads-head, .spreads-track { padding-inline: var(--edge); }
  .spreads-track { scroll-padding-inline: var(--edge); }
  .cap-onimage { left: var(--edge); }
  .footer-text { padding-inline: var(--edge); }
  .tower-overlay { padding-inline: var(--edge); }
}

/* Pomoćni prikaz grida (tipka G): 12 stupaca preko cijele stranice */
.grid-overlay { position: fixed; inset: 0 var(--edge); z-index: 9999; pointer-events: none; display: none;
  grid-template-columns: repeat(12, 1fr); column-gap: var(--grid-gap); }
.grid-overlay span { background: color-mix(in srgb, var(--red) 8%, transparent); border-inline: 1px solid color-mix(in srgb, var(--red) 25%, transparent); }
.grid-overlay.is-on { display: grid; }