@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=PT+Mono&display=swap');

:root {
    color-scheme: dark;
    --ink: #070a08;
    --paper: #d9d5c9;
    --muted: #8d9991;
    --line: rgba(126, 174, 151, 0.26);
    --green: #74d2ac;
    --red: #d35245;
    --amber: #d49a5d;
}

* { box-sizing: border-box; }

html { background: var(--ink); }

body {
    margin: 0;
    min-width: 320px;
    min-height: 100vh;
    color: var(--paper);
    background: var(--ink);
    font-family: 'PT Mono', Consolas, monospace;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .22;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.035) 3px 4px);
    mix-blend-mode: overlay;
}

.landing-shell {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    padding: clamp(22px, 4vw, 58px) clamp(20px, 5vw, 78px) 24px;
}

.scene, .scene::after, .scene-shade, .scene-grain {
    position: absolute;
    inset: 0;
}

.scene { z-index: -3; background: #050706; }
.scene img { width: 100%; height: 100%; object-fit: cover; object-position: 59% center; filter: saturate(.45) contrast(1.12) brightness(.27) blur(2px); transform:scale(1.015); }
.scene::after { content: ""; background: radial-gradient(circle at 58% 45%, transparent 0 17%, rgba(1,4,3,.18) 39%, rgba(1,3,2,.9) 93%); }
.scene-shade { background: linear-gradient(90deg, rgba(3,7,5,.96) 0 21%, rgba(3,7,5,.7) 42%, rgba(3,7,5,.08) 70%), linear-gradient(0deg, rgba(2,4,3,.82), transparent 45%); }
.scene-grain { opacity: .14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.lamp { position: absolute; width: 18vw; height: 18vw; border-radius: 50%; filter: blur(28px); opacity: .12; animation: breathe 6s ease-in-out infinite; }
.lamp-a { left: 45%; top: 18%; background: #d79b5f; }
.lamp-b { right: 5%; bottom: 5%; background: #7ab39a; animation-delay: -2.2s; }

.site-header, .site-footer, .hero, .stories-preview, .signal-strip { width: min(1460px, 100%); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.garden-mark { display: flex; align-items: center; gap: 13px; color: #eee8dc; text-decoration: none; }
.garden-flower { display: grid; place-items: center; width: 42px; aspect-ratio: 1; border: 1px solid rgba(211,82,69,.65); border-radius: 50%; color: #ffc2b6; background: rgba(80,16,15,.45); box-shadow: 0 0 22px rgba(211,82,69,.18); font-size: 24px; }
.garden-flower img { display:block; width:25px; height:25px; }
.garden-mark strong { display: block; font: 500 clamp(15px,1.5vw,21px)/1.1 Georgia,serif; letter-spacing: .19em; }
.garden-mark small { display: block; margin-top: 4px; color: #a8aaa3; font-size: 9px; letter-spacing: .09em; }
.classification { padding: 10px 13px; border: 1px solid var(--line); background: rgba(3,10,7,.6); color: #aeb9b1; font: 11px/1 'Oswald',sans-serif; letter-spacing: .14em; }
.classification span { display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); }

.hero { display: grid; grid-template-columns: minmax(390px,.8fr) minmax(430px,.72fr); gap: clamp(42px,7vw,112px); align-items:center; min-height:calc(100vh - 150px); padding:clamp(55px,8vh,100px) 0 90px; }
.hero-copy { max-width: 650px; }
.eyebrow { margin: 0 0 14px; color: #e36b5c; font: 600 13px/1.3 'Oswald',sans-serif; letter-spacing: .26em; }
.hero-copy h1 { margin:0; color:#e7c1bc; font:700 clamp(72px,9vw,150px)/.74 'Oswald',sans-serif; letter-spacing:-.055em; text-shadow:0 8px 40px rgba(0,0,0,.75),3px 0 rgba(211,82,69,.24); }
.hero-copy h1 span { color:#d95653; }
.lead { margin: 38px 0 10px; font: 500 clamp(28px,4.3vw,62px)/1.02 'Oswald',sans-serif; letter-spacing: .025em; color: #eee9dd; }
.intro { max-width: 620px; margin: 0; color: #aab1aa; font-size: clamp(13px,1.15vw,17px); line-height: 1.75; }

.sealed-entry { display: inline-grid; grid-template-columns: auto 1fr; column-gap: 13px; margin-top: 34px; padding: 15px 22px 14px 17px; border: 1px solid rgba(211,82,69,.56); background: linear-gradient(90deg,rgba(80,18,15,.42),rgba(8,15,11,.68)); box-shadow: inset 3px 0 0 var(--red), 0 12px 32px rgba(0,0,0,.35); }
.seal-light { grid-row: span 2; align-self: center; width: 10px; height: 10px; border-radius: 50%; background: var(--red); box-shadow: 0 0 13px var(--red); animation: signal 2.2s steps(1) infinite; }
.sealed-title { font: 600 16px/1.1 'Oswald',sans-serif; letter-spacing: .13em; }
.sealed-note { margin-top: 5px; color: #aaa69c; font-size: 11px; }

.cover-stack { position:relative; width:min(520px,100%); justify-self:end; padding-bottom:145px; }
.cover-art { position:relative; margin:0; border:1px solid rgba(212,154,93,.34); background:#080b09; box-shadow:0 35px 90px rgba(0,0,0,.72),0 0 45px rgba(219,78,128,.12); }
.cover-art::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 55px rgba(0,0,0,.45); }
.cover-art img { display:block; width:100%; height:auto; aspect-ratio:853/1280; object-fit:cover; }
.cover-art figcaption { position:absolute; right:10px; bottom:9px; z-index:2; padding:5px 7px; background:rgba(3,7,5,.74); color:rgba(220,224,216,.7); font-size:8px; letter-spacing:.07em; }
.case-file { position:absolute; z-index:3; left:-74px; right:34px; bottom:0; padding:22px 24px 24px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(5,13,9,.96),rgba(10,13,11,.92)); box-shadow:0 24px 60px rgba(0,0,0,.58),inset 0 0 38px rgba(97,151,121,.035); backdrop-filter:blur(8px); }
.case-file::before, .case-file::after { content: ""; position: absolute; width: 20px; height: 20px; border-color: var(--green); opacity: .55; }
.case-file::before { left: -7px; top: -7px; border-left: 1px solid; border-top: 1px solid; }
.case-file::after { right: -7px; bottom: -7px; border-right: 1px solid; border-bottom: 1px solid; }
.case-top { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--line); color: #738a7d; font-size: 10px; letter-spacing: .12em; }
.case-number-secret {
    position: relative;
    color: inherit;
    text-decoration: none;
    cursor: default;
    transition: color .16s ease, text-shadow .16s ease;
}
.case-number-secret::after {
    content: "УРОВЕНЬ −1";
    position: absolute;
    left: 0;
    top: calc(100% + 10px);
    width: max-content;
    padding: 4px 7px;
    border: 1px solid rgba(211,82,69,.38);
    background: rgba(24,5,4,.92);
    color: rgba(241,126,110,.92);
    font: 9px/1 'PT Mono',monospace;
    letter-spacing: .11em;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}
.case-number-secret:hover,
.case-number-secret:focus-visible {
    color: #e46c5e;
    text-shadow: 1px 0 #6dbd9b, -1px 0 #d35245, 0 0 9px rgba(211,82,69,.62);
    outline: none;
}
.case-number-secret:hover::after,
.case-number-secret:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}
.case-file h2 { margin: 22px 0 18px; font: 600 22px/1 'Oswald',sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.case-file ul { margin: 0; padding: 0; list-style: none; }
.case-file li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid rgba(126,174,151,.12); color: #bec5bf; font-size: 12px; line-height: 1.55; }
.case-file li span { color: var(--red); font: 500 12px/1.5 'Oswald',sans-serif; }
.case-warning { margin: 19px 0 0; padding: 13px 14px; border-left: 2px solid var(--amber); background: rgba(121,75,33,.14); color: #d0b895; font-size: 11px; line-height: 1.6; }
.case-stamp { position: absolute; right: 20px; top: 54px; padding: 5px 9px; border: 3px double rgba(180,63,50,.2); color: rgba(203,75,60,.22); font: 700 12px/1.2 'Oswald',sans-serif; text-align: center; transform: rotate(8deg); }

.stories-preview { margin-bottom:28px; padding:clamp(28px,4vw,48px); border:1px solid var(--line); background:linear-gradient(110deg,rgba(3,10,7,.9),rgba(19,12,9,.78)); box-shadow:0 25px 70px rgba(0,0,0,.35); }
.section-kicker { margin:0 0 10px; color:var(--red); font:600 11px/1.3 'Oswald',sans-serif; letter-spacing:.2em; }
.stories-heading-wrap { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.stories-heading-wrap h2 { margin:0 0 13px; color:#ece6d9; font:600 clamp(27px,3.2vw,46px)/1 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.03em; }
.stories-heading-wrap p:last-child { max-width:570px; margin:0; color:#909b94; font-size:11px; line-height:1.75; }
.stories-all { flex:0 0 auto; padding:10px 0; color:#b98b5b; font:500 11px/1 'Oswald',sans-serif; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; }
.stories-all span { padding-left:7px; font-size:16px; }
.stories-all:hover,.stories-all:focus-visible { color:#f0b778; }
.story-grid { display:grid; grid-template-columns:1fr; gap:14px; }
.story-card { position:relative; display:flex; min-height:260px; flex-direction:column; padding:24px 24px 22px; overflow:hidden; border:1px solid rgba(212,154,93,.25); color:#d8d7cf; text-decoration:none; background:linear-gradient(145deg,rgba(52,34,22,.34),rgba(5,12,8,.94)); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.story-card::before { content:""; position:absolute; width:120px; height:120px; right:-55px; top:-58px; border:1px solid rgba(212,154,93,.13); border-radius:50%; box-shadow:0 0 0 18px rgba(212,154,93,.025); }
.story-card:hover,.story-card:focus-visible { transform:translateY(-3px); border-color:rgba(212,154,93,.7); box-shadow:0 15px 35px rgba(0,0,0,.32),inset 3px 0 var(--amber); outline:none; }
.story-index { color:#b78555; font-size:9px; letter-spacing:.12em; }
.story-card strong { margin:15px 0 13px; color:#eee7d8; font:600 clamp(21px,2vw,30px)/1.08 'Oswald',sans-serif; text-transform:uppercase; }
.story-excerpt { max-width:650px; color:#959d97; font-size:11px; line-height:1.65; }
.story-read { margin-top:auto; padding-top:22px; color:#d1a16d; font:500 10px/1 'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.12em; }
.story-read b { padding-left:6px; font-size:16px; }

.signal-strip { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(2,8,5,.56); }
.signal-strip article { display: flex; align-items: center; gap: 15px; min-height: 76px; padding: 14px 22px; border-right: 1px solid var(--line); }
.signal-strip article:last-child { border-right: 0; }
.signal-icon { color: var(--green); font-size: 19px; text-shadow: 0 0 10px rgba(116,210,172,.4); }
.signal-strip strong, .signal-strip small { display: block; }
.signal-strip strong { color: #d9ddd8; font: 500 13px/1.3 'Oswald',sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.signal-strip small { margin-top: 3px; color: #77837c; font-size: 9px; }

.site-footer { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; color: #657069; font-size: 9px; letter-spacing: .05em; }
.site-footer p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

@keyframes breathe { 0%,100% { opacity:.08; transform:scale(.9); } 50% { opacity:.16; transform:scale(1.08); } }
@keyframes signal { 0%,72%,100% { opacity:1; } 74%,82% { opacity:.22; } }

@media (max-width: 860px) {
    .landing-shell { padding-inline: 20px; overflow: auto; }
    .scene img { object-position: 62% center; }
    .scene-shade { background: linear-gradient(0deg,rgba(3,7,5,.97) 0 28%,rgba(3,7,5,.54) 65%,rgba(3,7,5,.62)); }
    .classification { display: none; }
    .hero { grid-template-columns: 1fr; min-height: auto; padding: 78px 0 60px; gap: 58px; }
    .hero-copy { max-width: 620px; }
    .cover-stack { justify-self:center; width:min(500px,100%); }
    .case-file { left:18px; right:18px; }
    .story-grid { grid-template-columns:1fr; }
    .story-card { min-height:210px; }
    .signal-strip { grid-template-columns: 1fr; }
    .signal-strip article { border-right: 0; border-bottom: 1px solid var(--line); }
    .signal-strip article:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
    .landing-shell { padding: 17px 15px 22px; }
    .garden-mark strong { font-size: 14px; }
    .garden-mark small { font-size: 8px; }
    .hero { padding-top: 64px; }
    .hero-copy h1 { font-size:76px; }
    .lead { font-size: 34px; }
    .intro { font-size: 12px; }
    .sealed-entry { display: grid; width: 100%; }
    .stories-heading-wrap { align-items:flex-start; flex-direction:column; gap:8px; }
    .case-file { padding: 22px 18px; }
    .site-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}