/* ===================================================
   DISCOVER CONNECTICUT
   EDITORIAL SYSTEM
=================================================== */

:root{

--navy:#07111f;
--navy2:#0d1c2d;
--gold:#d3b06a;
--cream:#f7f3ea;
--paper:#faf8f3;
--text:#272727;

--radius:22px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:Inter,sans-serif;

background:#08131d;

overflow-x:hidden;

color:var(--text);

}

/*==========================
BACKGROUND VIDEO
===========================*/

.dc-video-bg{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:-5;

overflow:hidden;

}

.dc-video-bg video{

width:100%;
height:100%;

object-fit:cover;

transform:scale(1.08);

filter:
brightness(.45)
contrast(1.08)
saturate(.95);

}

.dc-video-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
180deg,
rgba(5,11,18,.55),
rgba(8,15,23,.80)
),

radial-gradient(
circle at top,
rgba(212,175,55,.10),
transparent 60%
);

}

/*==========================
MAIN PAGE
===========================*/

.dc-background{

width:100%;

padding:80px 40px;

}

.dc-magazine-shell{

width:100%;

max-width:none;

margin:0;

background:#08111c;

overflow:hidden;

}

/*==========================
TOP BAR
===========================*/

.dc-topbar{

display:flex;

justify-content:space-between;

align-items:center;

padding:28px 48px;

background:#08131d;

color:white;

letter-spacing:.18em;

text-transform:uppercase;

font-size:12px;

}

.dc-brand{

color:var(--gold);

font-weight:700;

}

.dc-issue{

opacity:.8;

}

/*==========================
MAGAZINE
===========================*/

.magazine{

display:flex;

flex-direction:column;

}


/* =======================================================
   CINEMATIC COVER
=======================================================*/

.dc-cover{

position:relative;

height:100vh;

overflow:hidden;

display:flex;

align-items:center;

justify-content:center;

background:#08111c;

}

.dc-cover-video{

position:absolute;

inset:0;

background:

linear-gradient(rgba(7,13,23,.55),rgba(7,13,23,.72)),

url("/discover-connecticut/assets/images/connecticut-waterfront.jpg");

background-size:cover;

background-position:center;

transform:scale(1.06);

animation:slowZoom 35s ease-in-out infinite alternate;

}

.dc-cover-glow{

position:absolute;

right:-180px;

top:-180px;

width:700px;

height:700px;

border-radius:50%;

background:radial-gradient(circle,rgba(212,175,55,.18),transparent 72%);

filter:blur(25px);

}

.dc-cover-content{

position:relative;

z-index:20;

width:min(1400px,92%);

display:grid;

grid-template-columns:1.1fr .9fr;

gap:80px;

align-items:center;

}

.dc-cover-left h1{

font-family:"Cormorant Garamond",serif;

font-size:82px;

line-height:.95;

font-weight:600;

color:white;

letter-spacing:-2px;

margin:18px 0;

text-shadow:0 10px 40px rgba(0,0,0,.45);

}

.dc-edition{

display:inline-block;

padding:8px 18px;

border:1px solid rgba(212,175,55,.55);

color:#d4af37;

letter-spacing:3px;

font-size:11px;

backdrop-filter:blur(12px);

text-transform:uppercase;

}

.dc-divider{

width:140px;

height:2px;

background:#d4af37;

margin:34px 0;

}

.dc-tagline{

font-size:20px;

color:#ece6d8;

letter-spacing:1px;

}

.dc-tagline span{

color:#d4af37;

padding:0 14px;

}

.dc-author{

margin-top:45px;

font-size:20px;

color:white;

line-height:1.8;

}

.dc-author small{

display:block;

font-size:16px;

opacity:.75;

margin-top:8px;

}

.dc-begin{

display:inline-block;

margin-top:45px;

padding:18px 34px;

background:#d4af37;

color:#08111c;

font-weight:700;

border-radius:999px;

text-decoration:none;

transition:.35s;

}

.dc-begin:hover{

transform:translateY(-4px);

box-shadow:0 18px 50px rgba(212,175,55,.4);

}

.dc-cover-right{

display:flex;

justify-content:flex-end;

}

.dc-portrait-frame{

position:relative;

width:470px;

height:640px;

border-radius:34px;

overflow:hidden;

background:rgba(255,255,255,.06);

backdrop-filter:blur(12px);

border:1px solid rgba(255,255,255,.15);

box-shadow:0 35px 90px rgba(0,0,0,.45);

}

.dc-portrait-frame img{

position:absolute;

bottom:0;

right:-40px;

height:100%;

width:auto;

object-fit:contain;

filter:

drop-shadow(0 40px 70px rgba(0,0,0,.45));

}
.dc-gold-ring{

position:absolute;

inset:18px;

border:1px solid rgba(212,175,55,.35);

border-radius:26px;

pointer-events:none;

}

.dc-scroll{

position:absolute;

bottom:36px;

left:50%;

transform:translateX(-50%);

font-size:12px;

letter-spacing:5px;

color:white;

opacity:.6;

}

@keyframes slowZoom{

from{

transform:scale(1.05);

}

to{

transform:scale(1.15);

}

}
.dc-cover-dark{

position:absolute;

inset:0;

background:

linear-gradient(

90deg,

rgba(5,12,20,.88) 0%,

rgba(5,12,20,.62) 34%,

rgba(5,12,20,.32) 62%,

rgba(5,12,20,.55) 100%

);

z-index:2;

}