:root{
  --bg:#0b0f18;
  --panel:#111827;
  --panel-2:#151e31;
  --ink:#edf1f7;
  --muted:#aab3c3;
  --gold:#d2aa5e;
  --gold-2:#f0d590;
  --line:rgba(255,255,255,.09);
  --light-bg:#f5f1e8;
  --light-panel:#ffffff;
  --dark-copy:#202636;
  --shadow:0 20px 60px rgba(0,0,0,.35);
  --radius:20px;
  --container:min(1180px, calc(100vw - 2rem));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,Segoe UI,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
.container{width:var(--container); margin-inline:auto}
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(240,213,144,.12), transparent 25%),
    radial-gradient(circle at 80% 10%, rgba(113,142,255,.10), transparent 22%),
    linear-gradient(180deg, #0a0d14 0%, #0d1321 100%);
}
.hero__bg::before,
.hero__bg::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
}
.hero__bg::before{
  background-image:
    radial-gradient(circle at 10% 18%, rgba(255,255,255,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 30% 50%, rgba(255,255,255,.6) 0 1px, transparent 2px),
    radial-gradient(circle at 60% 22%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 42%, rgba(255,255,255,.7) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,.5) 0 1px, transparent 2px),
    radial-gradient(circle at 15% 75%, rgba(255,255,255,.4) 0 1px, transparent 2px);
  opacity:.65;
}
.nav{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:space-between; align-items:center;
  width:var(--container); margin:0 auto; padding:1rem 0;
  backdrop-filter: blur(10px);
}
.nav__brand{font-weight:800; letter-spacing:.03em}
.nav__links{display:flex; gap:1rem; flex-wrap:wrap}
.nav__links a{color:var(--muted); font-size:.95rem}
.nav__links a:hover{color:var(--ink)}
.hero__content{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:2.5rem;
  align-items:center;
  padding:4rem 0 5rem;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--gold-2);
  font-size:.78rem;
  margin:0 0 .75rem;
}
h1,h2,h3,h4{line-height:1.08; margin:0 0 .85rem}
h1{font-size:clamp(2.3rem, 6vw, 4.8rem); max-width:12ch}
h2{font-size:clamp(1.8rem, 4vw, 3.2rem); color:#101522}
.section--dark h2,.section--accent h2{color:#fff}

.section:not(.section--dark) .eyebrow{color:var(--bg)}
.lede{font-size:1.1rem; color:var(--muted); max-width:62ch}
.hero__cta{display:flex; gap:1rem; flex-wrap:wrap; margin:1.75rem 0 2rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:50px; padding:.9rem 1.25rem; border-radius:999px; font-weight:800;
  border:1px solid transparent; transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--small{min-height:42px; padding:.65rem 1rem}
.btn--gold{background:linear-gradient(180deg, var(--gold-2), var(--gold)); color:#17120a; box-shadow:var(--shadow)}
.btn--ghost{border-color:var(--line); color:var(--ink); background:rgba(255,255,255,.04)}
.btn--wide{width:100%}
.hero__stats{
  list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(3,1fr); gap:1rem;
}
.hero__stats li{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem;
}
.hero__stats strong{display:block; font-size:1.15rem}
.hero__stats span{display:block; color:var(--muted); font-size:.92rem; margin-top:.35rem}
.hero__art img{
  border-radius:28px;
  box-shadow:0 40px 120px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
}
.section{padding:5.5rem 0; background:var(--light-bg); color:var(--dark-copy); overflow:hidden}
.section:not(.section--dark):not(.section--accent){padding-block:1.65rem;}
.section--dark{background:linear-gradient(180deg,#0c1220,#0a0f18); color:var(--ink)}
.section--accent{background:linear-gradient(180deg,#1a2133,#121927); color:var(--ink)}
.section__intro{margin-bottom:2rem}
.section__intro p:last-child{max-width:70ch; color:inherit; opacity:.85}
.grid{display:grid; gap:1.25rem}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--light-panel);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  border-radius:var(--radius);
  padding:1.5rem;
}
.card--dark{
  background:rgba(255,255,255,.04);
  border-color:var(--line);
  box-shadow:none;
}

.section--accent .card,
.section--dark .card:not(.card--dark){
  color:var(--dark-copy);
}
.section--accent .card h3,
.section--accent .card h4,
.section--dark .card:not(.card--dark) h3,
.section--dark .card:not(.card--dark) h4{
  color:#111827;
}
.section--accent .card p,
.section--accent .card li,
.section--dark .card:not(.card--dark) p,
.section--dark .card:not(.card--dark) li{
  color:#202636;
}
.spec-list{list-style:none; padding:0; margin:0}
.spec-list li{
  display:grid; grid-template-columns:170px 1fr; gap:1rem;
  padding:.8rem 0; border-bottom:1px solid rgba(0,0,0,.08)
}
.spec-list li:last-child{border-bottom:0}
.spec-list span{color:#666e7f}
.flipbook-wrap{
  display:grid;
  gap:1rem;
}
.flipbook-shell{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1rem;
  align-items:center;
}
.flipbook{
  perspective:2600px;
}
.flipbook__book{
  position:relative;
  aspect-ratio:1.55/1;
  width:100%;
  border-radius:24px;
  background:linear-gradient(180deg,#1a2236,#0f1524);
  box-shadow:0 30px 100px rgba(0,0,0,.45);
  overflow:hidden;
  isolation:isolate;
}
.flipbook__stack{
  position:absolute;
  top:3%; bottom:3%;
  width:3.5%;
  border-radius:16px;
  background:linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.08));
  opacity:.35;
  z-index:1;
}
.flipbook__stack--left{left:1.3%}
.flipbook__stack--right{right:1.3%}
.flipbook__page{
  position:absolute;
  inset:2.8%;
  border-radius:18px;
  overflow:hidden;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.28);
}
.flipbook__page img{
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}
.flipbook__page--next{
  z-index:2;
  opacity:1;
}
.flipbook__page--current{
  z-index:3;
  transform-origin:right center;
}
.flipbook__gutter{
  position:absolute;
  top:2.8%; bottom:2.8%;
  left:50%; width:2.2%;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,.30), rgba(255,255,255,.14), rgba(0,0,0,.35));
  z-index:4;
  border-radius:999px;
  opacity:.8;
  pointer-events:none;
}
.flipbook__gloss{
  position:absolute;
  inset:2.8%;
  z-index:5;
  pointer-events:none;
  background:
    linear-gradient(110deg, rgba(255,255,255,.16), transparent 18%, transparent 82%, rgba(255,255,255,.08)),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%, rgba(0,0,0,.08));
  border-radius:18px;
}
.flipbook.is-forward .flipbook__page--current{
  animation:turnForward .8s cubic-bezier(.35,.02,.2,1);
}
.flipbook.is-backward .flipbook__page--current{
  animation:turnBackward .8s cubic-bezier(.35,.02,.2,1);
  transform-origin:left center;
}
@keyframes turnForward{
  0%{transform:rotateY(0deg); filter:brightness(1)}
  45%{filter:brightness(.92)}
  100%{transform:rotateY(-88deg); filter:brightness(.78)}
}
@keyframes turnBackward{
  0%{transform:rotateY(0deg); filter:brightness(1)}
  45%{filter:brightness(.92)}
  100%{transform:rotateY(88deg); filter:brightness(.78)}
}
.flipbook-nav{
  width:58px;
  height:88px;
  border-radius:20px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:2.2rem;
  cursor:pointer;
}
.flipbook-nav:disabled,
.btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
}
.flipbook-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
}
.flipbook-toolbar__label{
  margin:0 0 .25rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.72rem;
  color:#c7cfde;
}
.flipbook-toolbar__meta{
  color:#f1f4fa;
  font-weight:700;
}
.flipbook-toolbar__actions{display:flex; gap:.75rem; flex-wrap:wrap}
.dot{opacity:.55; margin:0 .4rem}
.buy-box{
  margin-top:1.25rem; padding:1.1rem;
  border-radius:18px; background:#f7f1e5; border:1px solid rgba(210,170,94,.35)
}
.buy-box__label{margin:0 0 .35rem; text-transform:uppercase; letter-spacing:.12em; color:#7a6437; font-size:.72rem}
.code-note summary{cursor:pointer; font-weight:700}
.stack-list article + article{padding-top:1rem; margin-top:1rem; border-top:1px solid rgba(0,0,0,.08)}
.text-link{font-weight:700; color:var(--gold)}
.footer{
  background:#080c14; color:var(--muted); padding:1.4rem 0 2.8rem;
  border-top:1px solid var(--line);
}
.footer__inner{display:flex; justify-content:space-between; gap:1rem; align-items:center}
@media (max-width: 980px){
  .hero__content, .grid--2, .grid--3{grid-template-columns:1fr}
  .hero__stats{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .nav{position:relative; padding:.9rem 0}
  .nav__links{display:none}
  .section{padding:4rem 0}
  .section:not(.section--dark):not(.section--accent){padding-block:1.2rem;}
  .spec-list li{grid-template-columns:1fr}
  .flipbook-shell{grid-template-columns:1fr;}
  .flipbook-nav{
    width:100%;
    height:48px;
    font-size:1.6rem;
  }
  .flipbook-nav--prev{order:2}
  .flipbook{order:1}
  .flipbook-nav--next{order:3}
  .flipbook__book{aspect-ratio:1.3/1}
  .footer__inner{flex-direction:column; align-items:flex-start}
}


code{font-family:Consolas,Monaco,monospace; font-size:.95em}
.section-frame{padding-inline:10px}

.section.container > .section__intro:first-child{padding-top:0}
.section.container:last-of-type{margin-bottom:0}
.panel-grid{margin:0}
.card,
.hero__art img,
.hero__stats li,
.flipbook__book,
.flipbook-toolbar,
.flipbook-nav,
.buy-box,
.code-note,
.gallery-card,
.gallery-empty{margin:10px}
.random-gallery{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.gallery-card{
  position:relative;
  background:var(--light-panel);
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 18px 40px rgba(15,23,42,.08);
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
}
.gallery-card > img:first-child{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.gallery-protect-overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  z-index:2;
  user-select:none;
  -webkit-user-drag:none;
}
.gallery-empty{max-width:unset}

@media (max-width: 767px){
  :root{
    --container:min(690px, calc(100vw - 20px));
  }
  .section.container{margin-block:10px; border-radius:0 0 16px 16px;}
  .nav{
    width:var(--container);
    padding-inline:0;
  }
  .hero__content,
  .grid--2,
  .grid--3,
  .flipbook-shell,
  .author-grid{
    grid-template-columns:1fr;
  }
  .hero__stats{grid-template-columns:1fr}
  .spec-list li{grid-template-columns:1fr; gap:.35rem}
  .random-gallery{grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
  .gallery-card,
  .card,
  .flipbook__book,
  .flipbook-toolbar,
  .buy-box,
  .gallery-empty{margin:10px}
  .flipbook-nav{
    width:100%;
    height:54px;
    margin:10px;
  }
  .flipbook{
    width:100%;
  }
  .flipbook__book{
    aspect-ratio:1.55/1;
    width:100%;
    max-width:100%;
  }
  .flipbook__page img{
    object-fit:contain;
    background:#0f1524;
  }
}


.gallery-actions{
  display:flex;
  justify-content:center;
  margin:10px;
}
#randomGalleryRegion{
  transition:opacity .18s ease;
}
#randomGalleryRegion.is-refreshing{
  opacity:.35;
}


.section.container{
  margin-block:14px;
  border-radius:18px;
}

.section:not(.section--dark):not(.section--accent){
  border-radius:18px;
}


.other-titles-note{
  margin:0 0 1rem;
  font-weight:600;
  color:#4b5563;
}
.other-titles-grid{
  display:grid;
  gap:1rem;
}
.titles-row{
  display:grid;
  gap:1rem;
}
.titles-row--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.titles-row--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.title-card{
  background:#f8fafc;
  border:1px solid rgba(0,0,0,.07);
  border-radius:0 0 16px 16px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
}
.title-card a{
  display:flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  padding:8px;
}
.title-card img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  max-height:none;
  object-fit:contain;
}
.title-card__body{
  padding:.85rem .85rem 1rem;
}
.title-card__body h4{
  margin:0 0 .35rem;
  font-size:1rem;
  color:#111827;
}
.title-card__body p{
  margin:0;
  line-height:1.35;
  color:#202636;
}
.title-card__body span{
  color:#4b5563;
  font-style:italic;
}
@media (max-width: 980px){
  .titles-row--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 767px){
  .titles-row--3,
  .titles-row--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 520px){
  .titles-row--3,
  .titles-row--4{grid-template-columns:1fr;}
}

.author-intro{
  display:grid;
}
.author-columns{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.5rem;
  align-items:start;
}
.author-columns p{
  margin:0;
}
.author-columns p + p{
  margin-top:0;
}

.other-titles-grid--five{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:1rem;
}

@media (max-width: 1100px){
  .other-titles-grid--five{grid-template-columns:repeat(4, minmax(0,1fr));}
}
@media (max-width: 900px){
  .author-columns{grid-template-columns:1fr;}
  .other-titles-grid--five{grid-template-columns:repeat(3, minmax(0,1fr));}
}
@media (max-width: 767px){
  .other-titles-grid--five{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 520px){
  .other-titles-grid--five{grid-template-columns:repeat(2, minmax(0,1fr));}
}


.form-status{
  width:var(--container);
  margin:0 auto 1rem;
  padding:1rem 1.25rem;
  border-radius:16px;
  font-weight:700;
}
.form-status--success{
  background:rgba(72, 187, 120, .16);
  border:1px solid rgba(72, 187, 120, .35);
  color:#d8ffe6;
}
.form-status--error{
  background:rgba(245, 101, 101, .14);
  border:1px solid rgba(245, 101, 101, .35);
  color:#ffe0e0;
}
.contact-form{
  display:grid;
  gap:.9rem;
  margin-top:1rem;
}
.form-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:.9rem;
}
.contact-form label{
  display:grid;
  gap:.35rem;
}
.contact-form label span{
  font-size:.92rem;
  font-weight:700;
  color:#f4f7fb;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:.9rem 1rem;
  outline:none;
}
.contact-form textarea{
  resize:vertical;
  min-height:132px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{
  color:rgba(255,255,255,.55);
}
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:rgba(240,213,144,.7);
  box-shadow:0 0 0 3px rgba(240,213,144,.18);
}
.form-honeypot{
  position:absolute !important;
  left:-9999px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}
@media (max-width: 700px){
  .form-grid{grid-template-columns:1fr;}
}


@media (max-width: 720px){
  .flipbook-shell{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
  }
  .flipbook{
    grid-column:1 / -1;
    order:1;
  }
  .flipbook-nav{
    width:100%;
    height:54px;
    margin:10px 0 0;
  }
  .flipbook-nav--prev{order:2; grid-column:1;}
  .flipbook-nav--next{order:3; grid-column:2;}
}