/* Danny Lund — Stillwater (Direction A / Nocturne). Tokens & rules per design manual. */
:root{
  --ink:#0B1F22;        /* page background — pre-dawn water */
  --ink-2:#102B2F;      /* card / panel surfaces */
  --mist:#E9EFED;       /* primary text */
  --heron:#8FA5A2;      /* secondary text, captions */
  --kingfisher:#3FB4C4; /* THE accent — links, active states, em words */
  --reed:#B98A3C;       /* edition / scarcity labels ONLY */
  --hairline:rgba(233,239,237,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--mist);font-family:'Archivo',sans-serif;font-weight:300;letter-spacing:.01em;overflow-x:hidden}
::selection{background:var(--kingfisher);color:var(--ink)}
img{display:block}
a{color:var(--kingfisher)}
a:focus-visible,button:focus-visible{outline:1.5px solid var(--kingfisher);outline-offset:3px}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:1.6rem 3rem;mix-blend-mode:difference}
.wordmark{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.25rem;letter-spacing:.32em;text-transform:uppercase;color:#fff;text-decoration:none}
nav ul{display:flex;gap:2.4rem;list-style:none}
nav a{color:#fff;text-decoration:none;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;opacity:.75;transition:opacity .3s}
nav a:hover{opacity:1}

/* hero — photograph + living reflection */
.hero{position:relative;height:100vh;min-height:640px;overflow:hidden}
.hero-scene{position:absolute;inset:0;height:62%;overflow:hidden}
.hero-scene img{width:100%;height:100%;object-fit:cover;object-position:center 70%}
.hero-water{position:absolute;top:62%;left:0;right:0;bottom:0;overflow:hidden}
.hero-water img{width:100%;height:163%;object-fit:cover;object-position:center 70%;transform:scaleY(-1);filter:url(#ripple);opacity:.55}
.hero-water::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,31,34,.25),var(--ink) 92%)}
.hero-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,31,34,.35),transparent 45%)}
.waterline{position:absolute;top:62%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(233,239,237,.55),transparent);z-index:3}
.hero-copy{position:absolute;z-index:5;left:3rem;bottom:14%;max-width:640px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--heron);margin-bottom:1.2rem}
h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04}
h1 em{font-style:italic;color:var(--kingfisher)}
.hero-copy p{margin-top:1.4rem;color:var(--mist);opacity:.85;font-size:1rem;line-height:1.7;max-width:48ch}
.scroll-hint{position:absolute;right:3rem;bottom:3rem;z-index:5;font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--heron);writing-mode:vertical-rl}

/* reveals */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* sections */
section{padding:7rem 3rem}
.section-head{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--hairline);padding-top:1.4rem;margin-bottom:3.4rem}
h2{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.section-head span{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--heron)}

/* gallery */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(380px,78vw);gap:1.6rem;overflow-x:auto;padding-bottom:1.6rem;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--hairline) transparent}
.card{scroll-snap-align:start;cursor:pointer;text-decoration:none;color:inherit}
.card figure{aspect-ratio:4/5;overflow:hidden;background:var(--ink-2)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,1,.36,1)}
.card:hover img{transform:scale(1.045)}
.card figcaption{display:flex;justify-content:space-between;align-items:baseline;padding-top:1rem}
.card .name{font-family:'Cormorant Garamond',serif;font-size:1.3rem}
.card .latin{font-style:italic;color:var(--heron);font-size:.85rem;font-family:'Cormorant Garamond',serif}
.card .meta{font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.16em;color:var(--heron);text-transform:uppercase;margin-top:.3rem}

/* print PDP */
.print{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:start}
.print-frame{background:var(--ink-2);padding:6%;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.print-frame .matte{background:#f4f3ef;padding:7%}
.print-frame img{width:100%}
.spec{font-family:'IBM Plex Mono',monospace;font-weight:300;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--heron);line-height:2.1}
.spec b{color:var(--mist);font-weight:400}
.print h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2.1rem;margin:.6rem 0 .2rem}
.print .latin{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--heron);margin-bottom:2rem}
.opt-group{margin:1.8rem 0}
.opt-label{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--heron);margin-bottom:.8rem}
.opts{display:flex;flex-wrap:wrap;gap:.6rem}
.opt{background:transparent;border:1px solid var(--hairline);color:var(--mist);font-family:'Archivo',sans-serif;font-weight:300;font-size:.82rem;padding:.65rem 1.1rem;cursor:pointer;transition:border-color .25s,color .25s}
.opt[aria-pressed="true"]{border-color:var(--kingfisher);color:var(--kingfisher)}
.price-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hairline);margin-top:2.2rem;padding-top:1.6rem}
.price{font-family:'Cormorant Garamond',serif;font-size:2.2rem}
.edition{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.18em;color:var(--reed)}
.buy{margin-top:1.6rem;width:100%;padding:1.1rem;background:var(--mist);color:var(--ink);border:0;cursor:pointer;font-family:'Archivo',sans-serif;font-weight:400;font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;transition:background .3s}
.buy:hover{background:var(--kingfisher)}
.ship-note{margin-top:1rem;text-align:center;font-size:.78rem;color:var(--heron)}
.ship-note.live{color:var(--kingfisher)}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:4rem;align-items:center}
.about-portrait{overflow:hidden;background:var(--ink-2)}
.about-portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.about-body p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.15rem,2vw,1.45rem);line-height:1.7;margin-bottom:1.4rem}
.about-body p em{color:var(--kingfisher);font-style:italic}
.about-body .spec{margin-top:1.4rem}

/* book */
.book{display:grid;grid-template-columns:.7fr 1.3fr;gap:4rem;align-items:center}
.book-cover{background:var(--ink-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.6);aspect-ratio:2/3;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2.5rem;gap:1rem}
.book-cover .bk-mark{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.28em;text-transform:uppercase;color:var(--heron)}
.book-cover .bk-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.7rem;line-height:1.25;color:var(--mist)}
.book-cover .bk-rule{width:34px;height:1px;background:var(--hairline)}
.book-body h3{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.3rem}
.book-body .latin{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--heron);margin-bottom:1.6rem}
.book-body p{line-height:1.7;color:var(--mist);opacity:.9;margin-bottom:1.2rem;max-width:60ch}
.book-body .spec{margin:1.6rem 0}
.book-cta{display:inline-block;margin-top:.6rem;padding:1rem 2rem;background:var(--mist);color:var(--ink);text-decoration:none;font-family:'Archivo',sans-serif;font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;transition:background .3s}
.book-cta:hover{background:var(--kingfisher)}

/* craft */
.craft{max-width:760px;margin:0 auto;text-align:center}
.craft p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.3rem,2.4vw,1.7rem);line-height:1.7}
.craft p em{color:var(--kingfisher)}
.craft .spec{margin-top:2.6rem}

/* footer */
footer{border-top:1px solid var(--hairline);padding:3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
footer span{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--heron)}

@media(max-width:880px){
  nav{padding:1.2rem 1.4rem}
  section{padding:4.5rem 1.4rem}
  .hero-copy{left:1.4rem;right:1.4rem}
  .scroll-hint{display:none}
  .print,.about,.book{grid-template-columns:1fr;gap:2.6rem}
  .about-portrait img{aspect-ratio:4/3}
}
@media(prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none}
  .card img{transition:none}
  #rippleAnim{display:none}
}

/* book cover image (real cover replaces the typographic stand-in) */
.book-cover-img{display:block;background:var(--ink-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.book-cover-img img{width:100%;height:auto;aspect-ratio:376/500;object-fit:cover}

/* ---- admin ---- */
.admin{max-width:1100px;margin:0 auto;padding:6.5rem 3rem 5rem}
.admin h1{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:2.4rem;margin-bottom:.4rem}
.admin .sub{font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--heron);margin-bottom:2.4rem}
.admin-nav{display:flex;gap:1.8rem;border-bottom:1px solid var(--hairline);padding-bottom:1rem;margin-bottom:2.6rem;flex-wrap:wrap}
.admin-nav a{font-family:'IBM Plex Mono',monospace;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--heron);text-decoration:none}
.admin-nav a.active,.admin-nav a:hover{color:var(--kingfisher)}
.admin-nav .right{margin-left:auto}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.4rem;margin-bottom:3rem}
.stat{border:1px solid var(--hairline);padding:1.6rem}
.stat .n{font-family:'Cormorant Garamond',serif;font-size:2.4rem}
.stat .l{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--heron);margin-top:.3rem}
table.tbl{width:100%;border-collapse:collapse;margin:1rem 0 2.4rem}
table.tbl th,table.tbl td{text-align:left;padding:.7rem .6rem;border-bottom:1px solid var(--hairline);font-size:.86rem}
table.tbl th{font-family:'IBM Plex Mono',monospace;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--heron);font-weight:400}
table.tbl td .thumb{width:54px;height:68px;object-fit:cover;background:var(--ink-2)}
.field{margin-bottom:1.3rem}
.field label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--heron);margin-bottom:.5rem}
.field input[type=text],.field input[type=number],.field input[type=password],.field textarea,.field select{width:100%;background:var(--ink-2);border:1px solid var(--hairline);color:var(--mist);font-family:'Archivo',sans-serif;font-size:.92rem;padding:.7rem .8rem}
.field textarea{min-height:5rem;resize:vertical}
.btn{display:inline-block;padding:.85rem 1.8rem;background:var(--mist);color:var(--ink);border:0;cursor:pointer;font-family:'Archivo',sans-serif;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;transition:background .3s}
.btn:hover{background:var(--kingfisher)}
.btn.ghost{background:transparent;border:1px solid var(--hairline);color:var(--mist)}
.btn.ghost:hover{border-color:var(--kingfisher);color:var(--kingfisher);background:transparent}
.btn.danger:hover{background:#c0473f;color:#fff}
.flash{border:1px solid var(--kingfisher);color:var(--kingfisher);padding:.8rem 1rem;margin-bottom:1.6rem;font-size:.86rem}
.flash.err{border-color:#c0473f;color:#e08a84}
.admin-login{max-width:380px;margin:14vh auto;padding:0 2rem}
.pill{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;padding:.25rem .6rem;border:1px solid var(--hairline)}
.pill.ok{color:var(--kingfisher);border-color:var(--kingfisher)}
.pill.off{color:var(--reed);border-color:var(--reed)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
@media(max-width:880px){.admin{padding:6rem 1.4rem 4rem}.two-col{grid-template-columns:1fr}}