:root { --ink:#081522; --ink-2:#112334; --paper:#f4eddf; --paper-2:#e9dcc7; --coral:#dc735f; --gold:#c9a66b; --muted:#a9b1b7; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--ink); color:var(--paper); font-family:"DM Sans",sans-serif; } .page-shell { overflow:hidden; }
.site-header { height:84px; display:grid; grid-template-columns:auto minmax(220px,430px) 1fr auto; align-items:center; gap:27px; padding:0 clamp(24px,7vw,110px); border-bottom:1px solid rgba(244,237,223,.12); background:rgba(8,21,34,.95); position:sticky; z-index:4; top:0; backdrop-filter:blur(12px); }
.wordmark { color:var(--paper); font:600 26px/1 "Playfair Display",serif; letter-spacing:.08em; text-decoration:none; } .search { border:1px solid rgba(244,237,223,.32); border-radius:30px; height:42px; display:flex; align-items:center; gap:10px; padding:0 16px; color:var(--paper-2); } .search input { min-width:0; width:100%; color:var(--paper); background:transparent; border:0; outline:0; font:14px "DM Sans",sans-serif; } .search input::placeholder{color:#b6b4ac;}
nav { display:flex; justify-content:flex-end; gap:22px; } nav a { color:#d7d1c5; text-decoration:none; font-size:14px; padding:30px 0 25px; border-bottom:2px solid transparent; } nav .active { color:var(--paper); border-color:var(--coral); } nav small { display:block; color:#8d9295; font-size:10px; text-align:center; margin-top:3px; }.locale-picker{display:flex;gap:6px;align-items:center;color:var(--paper-2);font-size:17px}.locale-picker select{color:var(--paper);background:transparent;border:0;outline:0;font:13px "DM Sans",sans-serif;cursor:pointer}.locale-picker option{background:var(--ink);}
.hero { min-height:620px; padding:90px clamp(24px,7vw,110px) 76px; display:grid; grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr); align-items:center; gap:70px; background:radial-gradient(circle at 72% 25%,#263b50 0,transparent 30%),linear-gradient(108deg,#081522 20%,#10263a 100%); }
.eyebrow { margin:0 0 11px; color:var(--coral); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:11px; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:"Playfair Display",serif; } h1 { font-size:clamp(52px,6vw,84px); font-weight:500; line-height:.98; letter-spacing:-.045em; margin-bottom:24px; } h1 em { color:var(--coral); font-style:normal; } .intro { max-width:410px; color:#d0d0c8; line-height:1.65; font-size:16px; } .hero-actions { display:flex; align-items:center; gap:26px; margin-top:31px; } .button { text-decoration:none; font-weight:600; padding:14px 18px; } .button-primary { background:var(--coral); color:#fff7ef; } .button span { margin-left:18px; } .text-link { color:var(--paper); text-underline-offset:5px; }
.hero-cover-stage{min-height:470px;display:grid;place-items:center;position:relative;background:radial-gradient(circle at 72% 25%,rgba(244,227,185,.5) 0 7%,transparent 8%),linear-gradient(140deg,transparent 8%,rgba(201,166,107,.15)),linear-gradient(#162d42,#091420);border:1px solid rgba(244,237,223,.18);box-shadow:inset 0 0 80px rgba(0,0,0,.65),0 28px 60px rgba(0,0,0,.27)}.hero-cover{width:min(68%,285px);aspect-ratio:2/3;display:flex;align-items:flex-end;padding:25px;position:relative;box-shadow:20px 17px 18px rgba(0,0,0,.5);font:600 30px/1.05 "Playfair Display",serif;color:#f8edcf}.hero-cover:after{content:"";position:absolute;inset:13px;border:1px solid rgba(221,187,120,.7)}.hero-cover span{position:relative;z-index:1}.cover-caption{position:absolute;bottom:16px;right:18px;margin:0;color:rgba(244,237,223,.55);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.genre-row { display:flex; gap:11px; padding:23px clamp(24px,7vw,110px); overflow:auto; background:var(--paper); border-bottom:1px solid #d8cdbd; } .genre { flex:0 0 auto; border:1px solid #cfc0aa; color:#453b35; background:transparent; padding:10px 16px; font:500 13px "DM Sans",sans-serif; cursor:pointer; } .genre.selected { color:#fff7ed; background:var(--coral); border-color:var(--coral); }
.reading-section,.future-section { padding:78px clamp(24px,7vw,110px); } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:35px; margin-bottom:32px; } h2 { font-size:42px; line-height:1; letter-spacing:-.04em; margin-bottom:0; font-weight:500; } .section-note { max-width:345px; color:var(--muted); line-height:1.5; font-size:13px; margin-bottom:0; }
.book-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:19px; } .story-card { min-width:0; } .cover { width:100%; aspect-ratio:2/3; display:flex; align-items:end; padding:18px; border:1px solid rgba(230,212,171,.35); position:relative; overflow:hidden; box-shadow:0 14px 24px rgba(0,0,0,.2); color:#f8edcf; font:600 21px/1.07 "Playfair Display",serif; } .cover:before { content:""; position:absolute; inset:9px; border:1px solid currentColor; opacity:.5; } .cover span { z-index:1; } .cover-one{background:radial-gradient(circle at 66% 25%,#ddd2b2 0 7%,transparent 8%),linear-gradient(155deg,#12283b,#305b67 50%,#0c1a2c)}.cover-two{background:linear-gradient(155deg,#2a1218,#9e2823 52%,#110c19)}.cover-three{background:radial-gradient(circle at 50% 60%,#d2b777 0 1%,transparent 2%),linear-gradient(155deg,#0e2735,#56777c 50%,#172019)}.cover-four{background:linear-gradient(160deg,#dd9a6e,#96626b 48%,#3d3548)}.cover-five{background:radial-gradient(circle at 45% 20%,#e9dfb9 0 8%,transparent 9%),linear-gradient(150deg,#08241f,#356151,#061b18)} .story-card h3 { margin:15px 0 5px; font:600 17px/1.15 "Playfair Display",serif; } .story-card p { margin:0; color:#a9b1b7; font-size:12px; } .empty-state{color:var(--paper-2);}
.future-section { color:#1b242b; background:var(--paper); position:relative; } .future-section:before { content:""; position:absolute; inset:0; opacity:.45; background:radial-gradient(ellipse at 0 40%,#e0c7b0,transparent 26%),radial-gradient(ellipse at 100% 66%,#e0c7b0,transparent 28%); pointer-events:none; } .future-section > * { position:relative; } .future-heading .eyebrow { color:#a65247; } .future-heading .section-note { color:#5b5a54; }
.future-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .future-card { min-height:245px; padding:22px; border:1px solid #cfbfa7; background:rgba(247,241,228,.6); } .future-poster{width:84px;aspect-ratio:2/3;display:grid;place-items:center;border:1px solid #a38768;background:linear-gradient(145deg,#172b3a,#5e6d70);color:#ecd5a4;font-size:34px;box-shadow:7px 8px 12px rgba(38,28,18,.16)}.updates .future-poster{background:linear-gradient(145deg,#c9ad8d,#9e5e53)}.people .future-poster{background:linear-gradient(145deg,#8e7d73,#373d4b)}.future-card .eyebrow { color:#a75f50; margin-top:16px; }.future-card h3 { font:500 30px/1 "Playfair Display",serif; margin-bottom:13px; }.future-card > p:last-child { color:#5d625e; font-size:13px; line-height:1.6; max-width:290px; }
footer { display:flex; justify-content:space-between; gap:25px; padding:29px clamp(24px,7vw,110px); color:#b9b2a7; background:#07111b; font-size:12px; } footer span:first-child { font:600 18px "Playfair Display",serif; letter-spacing:.08em; color:var(--paper); }
@media (max-width:980px) { .site-header { grid-template-columns:auto 1fr auto; gap:20px; height:auto; padding-block:17px; }.site-header nav{grid-column:1/-1;justify-content:flex-start;overflow:auto;gap:22px;}.site-header nav a{padding:0 0 8px;white-space:nowrap;}.hero{grid-template-columns:1fr;gap:42px;padding-top:65px;}.hero-cover-stage{min-height:390px;}.book-grid{grid-template-columns:repeat(3,1fr);}.future-grid{grid-template-columns:1fr;} }
@media (max-width:620px) { .site-header{grid-template-columns:1fr auto;}.wordmark{font-size:23px;}.search{grid-row:2;grid-column:1/-1}.site-header nav{grid-row:3;}.hero{min-height:auto;padding-block:54px;}.hero-cover-stage{min-height:330px;}.hero-cover{width:180px;padding:17px;font-size:22px;}h1{font-size:54px;}h2{font-size:36px;}.section-heading,footer{display:block;}.section-note{margin-top:18px;}.book-grid{grid-template-columns:repeat(2,1fr);gap:16px;}.cover{font-size:18px;}.reading-section,.future-section{padding-block:58px;}.future-card{min-height:0;}.genre-row{padding-inline:20px;} }