*{box-sizing:border-box}
:root{
 --bg-start:#eafffb;
 --bg-mid:#f8fdfd;
 --bg-end:#fff8ef;
 --ink:#173032;
 --muted:#607174;
 --line:#dce9e8;
 --accent:#267a75;
 --accent-dark:#155c58;
 --soft:#eaf7f5;
 --radius:26px;
 --shadow:0 22px 60px rgba(20,50,54,.12);
 --shadow-soft:0 12px 34px rgba(20,50,54,.08);
 --font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

html{scroll-behavior:smooth}

body{
 margin:0;
 min-height:100vh;
 font-family:var(--font);
 background:radial-gradient(circle at top left,var(--bg-start) 0,var(--bg-mid) 36%,var(--bg-end) 100%);
 color:var(--ink);
 line-height:1.55;
 overflow-x:hidden;
 display:flex;
 flex-direction:column;
}

body:before,
body:after{
 content:"";
 position:fixed;
 border-radius:999px;
 filter:blur(6px);
 opacity:.45;
 pointer-events:none;
 z-index:-1;
}

body:before{
 width:360px;
 height:360px;
 background:#ccefe9;
 left:-130px;
 top:100px;
 animation:drift 12s ease-in-out infinite alternate;
}

body:after{
 width:420px;
 height:420px;
 background:#ffe4cf;
 right:-160px;
 bottom:20px;
 animation:drift 15s ease-in-out infinite alternate-reverse;
}

@keyframes drift{
 from{transform:translateY(-10px)}
 to{transform:translateY(28px)}
}

.wrap{
 width:min(1080px,calc(100% - 32px));
 margin:0 auto;
 padding:36px 0;
 flex:1;
 display:flex;
 align-items:center;
}

.card{
 background:rgba(255,255,255,.90);
 border:1px solid rgba(220,233,232,.94);
 border-radius:var(--radius);
 box-shadow:var(--shadow);
 backdrop-filter:blur(14px);
}

.hero{
 width:100%;
 min-height:55vh;
 display:flex;
 align-items:center;
 padding:50px;
 overflow:hidden;
}

.archive-hero{
 justify-content:center;
 text-align:center;
}

.hero-copy{
 max-width:760px;
 margin:auto;
}

.kicker{
 display:inline-flex;
 align-items:center;
 color:var(--accent-dark);
 font-weight:850;
 text-transform:uppercase;
 letter-spacing:.12em;
 font-size:.78rem;
}

.hero-copy h1{
 font-size:clamp(2.8rem,6vw,5.8rem);
 line-height:.96;
 margin:12px 0 18px;
 letter-spacing:-.06em;
}

.hero-copy p{
 color:var(--muted);
 font-size:1.15rem;
 margin:0 auto 24px;
}

.notice{
 padding:18px 22px;
 border-radius:18px;
 background:var(--soft);
 border:1px solid #cfe9e6;
 color:var(--ink);
 max-width:650px;
 margin:auto;
}

.footer{
 text-align:center;
 color:var(--muted);
 font-size:.9rem;
 padding:20px;
}

@media(max-width:760px){
 .wrap{width:calc(100% - 22px);padding:18px 0}
 .hero{padding:30px 22px;min-height:auto}
}