/* carliecorlettchronicles.com — the design Carlie chose.
   Lifted verbatim from public/designs/d-composite.html so the built site
   and the approved mockup cannot drift apart. */
:root{
  --navy:#16324F; --deep:#0E2138; --sea:#2E7A8C; --brass:#B98A47;
  --sand:#E9DFCD; --paper:#FBF7EF; --warm:#F3EADA;
  --ink:#1E1B16; --mute:#736C61;
  --disp:"Fraunces",Georgia,serif;
  --body:"Karla",-apple-system,BlinkMacSystemFont,sans-serif;
  --gut:clamp(22px,4.6vw,64px);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
.tab{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ============ 1. HERO — from A ============ */
.nav{position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:32px var(--gut);color:#fff;text-shadow:0 1px 14px rgba(8,12,18,.5)}
.nav .wordmark{font-family:var(--disp);font-size:19px;font-weight:400;letter-spacing:.005em}
.nav ul{display:flex;gap:26px;list-style:none;font-size:13px}
.nav ul a{opacity:.9;padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s}
.nav ul a:hover{opacity:1;border-bottom-color:currentColor}

.hero{position:relative;height:100vh;min-height:620px;overflow:hidden}
.hero>img{position:absolute;inset:0;transform:scale(1.03)}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,20,.36) 0%,rgba(10,14,20,.04) 38%,rgba(10,14,20,.74) 100%)}
.hero-txt{position:absolute;left:0;right:0;bottom:0;z-index:5;
  padding:0 var(--gut) 58px;color:#fff;max-width:1020px}
.eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.74);margin-bottom:20px;font-weight:500}
.hero h1{font-family:var(--disp);font-weight:300;
  font-size:clamp(38px,7.2vw,104px);line-height:.98;letter-spacing:-.028em;
  text-wrap:balance;max-width:15ch}
.hero-txt>p{margin-top:22px;font-size:17px;max-width:44ch;
  color:rgba(255,255,255,.84);font-weight:300}
.read{display:inline-block;margin-top:28px;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:5px}

/* ============ 2. THREE ACROSS — from C ============ */
.rooms{padding:clamp(72px,9vw,130px) var(--gut) clamp(40px,5vw,70px)}
.rooms h2{font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(26px,3.4vw,42px);color:var(--navy);text-align:center;
  margin-bottom:clamp(36px,4.4vw,60px);letter-spacing:-.02em}
.rooms .set{display:grid;gap:clamp(26px,3.4vw,48px);grid-template-columns:1fr}
@media(min-width:800px){.rooms .set{grid-template-columns:repeat(3,1fr)}}
.room{text-align:center}
.room .im{height:clamp(230px,25vw,320px);overflow:hidden;margin-bottom:20px;background:var(--sand)}
.room .im img{transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.room:hover .im img{transform:scale(1.05)}
.room h3{font-family:var(--disp);font-weight:400;font-size:23px;color:var(--navy);margin-bottom:9px}
.room p{font-size:14.5px;color:var(--mute);max-width:32ch;margin:0 auto}

/* ============ 3. LATELY — post treatment from C ============ */
.journal{padding:clamp(48px,6vw,90px) var(--gut) clamp(56px,7vw,100px)}
.journal h2{font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(26px,3.4vw,42px);color:var(--navy);
  margin-bottom:clamp(32px,4vw,54px);letter-spacing:-.02em}
.entry{display:grid;gap:24px;grid-template-columns:1fr;
  padding-bottom:clamp(32px,4vw,52px);margin-bottom:clamp(32px,4vw,52px);
  border-bottom:1px solid var(--sand)}
@media(min-width:820px){.entry{grid-template-columns:.9fr 1.1fr;align-items:center;gap:44px}
  .entry.flip .im{order:2}}
.entry:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.entry .im{height:clamp(230px,26vw,340px);overflow:hidden;background:var(--sand)}
.entry .im img{transition:transform 1s cubic-bezier(.2,.7,.3,1)}
.entry:hover .im img{transform:scale(1.04)}
.entry .kick{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);font-weight:600}
.entry h3{font-family:var(--disp);font-weight:300;font-size:clamp(24px,2.7vw,36px);
  line-height:1.12;color:var(--navy);margin:14px 0;letter-spacing:-.02em;text-wrap:balance}
.entry p{color:var(--mute);font-size:16px;max-width:46ch}
.entry .when{margin-top:16px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ============ 4. THE CHRONICLES — index from B ============ */
.contents{padding:clamp(56px,7vw,96px) var(--gut) clamp(56px,7vw,96px)}
.sec-head{display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:2px solid var(--navy);padding-bottom:11px;margin-bottom:6px}
.sec-head h2{font-family:var(--disp);font-weight:500;font-size:clamp(22px,2.4vw,31px);
  color:var(--navy);letter-spacing:-.014em}
.sec-head span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.line{display:grid;gap:16px;padding:22px 0;border-bottom:1px solid rgba(22,50,79,.13);
  align-items:center;grid-template-columns:1fr;transition:.2s}
@media(min-width:820px){.line{grid-template-columns:158px 1fr 128px}}
.line .where{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sea);font-weight:600}
.line h3{font-family:var(--disp);font-weight:500;font-size:clamp(19px,1.9vw,25px);
  color:var(--navy);line-height:1.2;letter-spacing:-.012em;transition:.2s}
.line p{font-size:14.5px;color:var(--mute);margin-top:5px;max-width:62ch}
.line .thumb{height:82px;overflow:hidden;background:var(--sand)}
.line .stat{display:inline-block;margin-top:8px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brass);font-weight:700}
.line:hover h3{color:var(--sea)}

/* ============ 5. WHERE — regions grid from B ============ */
.regions{padding:clamp(56px,7vw,96px) var(--gut) clamp(56px,7vw,96px);background:var(--warm)}
.grid{display:grid;gap:1px;background:var(--sand);grid-template-columns:1fr}
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--paper);display:flex;flex-direction:column}
.card .im{height:172px;overflow:hidden;background:var(--sand)}
.card .im img{transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.card:hover .im img{transform:scale(1.06)}
.card .txt{padding:22px 22px 26px;flex:1;display:flex;flex-direction:column}
.card h4{font-family:var(--disp);font-weight:500;font-size:20px;color:var(--navy);margin-bottom:7px}
.card p{font-size:14px;color:var(--mute);flex:1}
.card .count{margin-top:16px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);font-weight:700}

/* ============ 6. SOCIAL STRIP — the running footer ============ */
.social{margin-top:clamp(64px,8vw,110px);background:var(--deep);color:#fff;
  padding:clamp(46px,5.5vw,76px) 0 clamp(38px,4.6vw,60px);overflow:hidden}
.social .head{padding:0 var(--gut);text-align:center;margin-bottom:clamp(30px,3.6vw,48px)}
.social .head h2{font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(25px,3.2vw,40px);letter-spacing:-.02em;margin-bottom:10px}
.social .head p{color:rgba(255,255,255,.6);font-size:15px;font-weight:300}

/* the marquee */
.ticker{position:relative;width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;gap:14px;width:max-content;animation:slide 46s linear infinite}
.ticker:hover .track{animation-play-state:paused}
.track .cell{width:236px;height:158px;flex:none;overflow:hidden;background:#1b2a3d}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media(prefers-reduced-motion:reduce){
  .track{animation:none}
  .ticker{overflow-x:auto}
}

.handles{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,44px);
  padding:clamp(32px,3.8vw,52px) var(--gut) 0}
.handle{display:flex;align-items:center;gap:10px;font-size:14px;
  color:rgba(255,255,255,.82);transition:.2s;padding-bottom:4px;
  border-bottom:1px solid transparent}
.handle:hover{color:#fff;border-bottom-color:var(--brass)}
.handle svg{width:19px;height:19px;flex:none;fill:currentColor}
.handle b{font-weight:500}

/* ============ 7. NEWSLETTER ============ */
.sub{background:var(--navy);color:#fff;padding:clamp(56px,7vw,100px) var(--gut);text-align:center}
.sub h3{font-family:var(--disp);font-weight:300;font-style:italic;
  font-size:clamp(26px,3.6vw,44px);letter-spacing:-.022em;margin-bottom:14px}
.sub>p{color:rgba(255,255,255,.72);max-width:44ch;margin:0 auto 30px;font-weight:300}
.sub form{display:flex;max-width:420px;margin:0 auto;border-bottom:1px solid rgba(255,255,255,.42)}
.sub input{flex:1;border:0;background:transparent;font:inherit;font-size:16px;padding:12px 2px;color:#fff}
.sub input::placeholder{color:rgba(255,255,255,.42)}
.sub input:focus{outline:none}
.sub button{border:0;background:transparent;font:inherit;cursor:pointer;color:var(--brass);
  font-family:var(--disp);font-style:italic;font-size:17px;padding:12px 6px}

footer{padding:46px var(--gut);display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:20px;font-size:13.5px;color:var(--mute)}
footer .wordmark{font-family:var(--disp);color:var(--navy);font-size:17px}

@media(max-width:760px){ .nav ul{display:none} }

/* ============ ARTICLE ============ */
.art{max-width:1100px;margin:0 auto}
.art .lead{height:clamp(320px,56vw,620px);overflow:hidden;background:var(--sand);
  margin-top:0}
.art .head{max-width:760px;margin:0 auto;padding:clamp(38px,4.6vw,68px) var(--gut) 0}
.art .head h1{font-family:var(--disp);font-weight:300;
  font-size:clamp(31px,4.6vw,56px);color:var(--navy);line-height:1.05;
  margin:14px 0 16px;letter-spacing:-.026em;text-wrap:balance}
.art .head .meta{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.art .body{max-width:660px;margin:0 auto;padding:clamp(22px,2.6vw,34px) var(--gut) 0;
  font-size:17.5px;line-height:1.8}
.art .body p{margin-bottom:22px}
.art .body p.first::first-letter{font-family:var(--disp);font-size:62px;float:left;line-height:.82;
  padding:6px 11px 0 0;color:var(--sea);font-weight:300}
.art .body h2{font-family:var(--disp);font-size:clamp(23px,2.5vw,31px);color:var(--navy);
  font-weight:400;margin:40px 0 15px;letter-spacing:-.018em;line-height:1.16}
.art .body blockquote{border-left:3px solid var(--brass);padding-left:22px;margin:32px 0;
  font-family:var(--disp);font-size:22px;line-height:1.42;color:var(--navy);
  font-style:italic;font-weight:300}
.art .body ul{padding-left:1.2em;margin-bottom:22px}
.art .body li{margin-bottom:9px}

.factbox{background:var(--warm);padding:24px 26px;margin:32px 0;font-size:15px;line-height:1.6}
.factbox h4{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  margin-bottom:13px;font-weight:700}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.factbox dt{color:var(--navy);font-weight:700}
.factbox dd{margin:0}

/* comparison tables — scroll in their own box, never the page */
.tablewrap{overflow-x:auto;margin:30px 0;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:430px}
table.cmp caption{text-align:left;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);font-weight:700;padding-bottom:11px}
table.cmp th,table.cmp td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--sand);
  font-variant-numeric:tabular-nums}
table.cmp thead th{background:var(--navy);color:#fff;font-weight:700;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-bottom:0}
table.cmp tbody th{font-weight:400;color:#4d4d4d}
table.cmp tbody tr:nth-child(even){background:var(--warm)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{
  border-top:2px solid var(--navy);border-bottom:0;font-weight:700;color:var(--navy)}

.gal{max-width:1000px;margin:36px auto;padding:0 var(--gut);display:grid;gap:12px}
@media(min-width:700px){.gal{grid-template-columns:1fr 1fr}}
.gal .slot{height:280px}
.gal .slot.wide{grid-column:1/-1;height:390px}

/* ============ MEDIA SLOTS ============ */
.slot{background-color:var(--sand);position:relative;display:flex;flex-direction:column;
  justify-content:center;align-items:center;gap:5px;text-align:center;padding:18px;
  min-height:120px;color:#8A7B60;overflow:hidden}
.slot::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 11px,rgba(0,0,0,.015) 11px 22px);z-index:0}
.slot>span{position:relative;z-index:1}
.slot .s-id{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:var(--brass)}
.slot .s-what{font-family:var(--disp);font-size:17px;color:var(--navy);font-weight:400;
  line-height:1.25;max-width:26ch}
.slot .s-spec{font-size:11.5px;color:#7E7156;max-width:34ch;line-height:1.4}
.slot .s-file{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:#9A8B70;
  background:rgba(255,255,255,.65);padding:2px 7px;margin-top:2px}
.slot.filled{padding:0;gap:0}
.slot.filled::before{display:none}
.slot.vid{min-height:300px;margin:30px 0;border:2px dashed var(--brass);background-color:#FFF9EE}
.slot.vid .s-what{color:var(--brass)}

/* ============ WORK WITH ME ============ */
.wtop{background:var(--navy);color:#fff;padding:clamp(56px,7vw,110px) var(--gut)}
.wtop h1{font-family:var(--disp);font-size:clamp(31px,5vw,56px);font-weight:300;line-height:1.04;
  max-width:20ch;margin-top:12px;letter-spacing:-.026em;text-wrap:balance}
.wtop p{color:rgba(255,255,255,.78);font-size:17px;max-width:56ch;margin-top:18px;font-weight:300}
.nums{display:grid;border-bottom:1px solid var(--sand)}
@media(min-width:700px){.nums{grid-template-columns:repeat(4,1fr)}}
.nums>div{padding:26px var(--gut);border-right:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.nums .big{font-family:var(--disp);font-size:38px;color:var(--sea);line-height:1;font-weight:400;
  font-variant-numeric:tabular-nums}
.nums .lbl{font-size:12.5px;color:var(--mute);margin-top:8px}
.svcs{display:grid;padding:0 var(--gut)}
@media(min-width:820px){.svcs{grid-template-columns:1fr 1fr}}
.svc{padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--sand)}
@media(min-width:820px){.svc{padding-right:clamp(24px,3vw,44px)}
  .svc:nth-child(even){padding-right:0;padding-left:clamp(24px,3vw,44px);border-left:1px solid var(--sand)}}
.svc h3{font-family:var(--disp);font-size:23px;color:var(--navy);font-weight:400;margin-bottom:9px}
.svc p{font-size:14.5px;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:8px;padding:clamp(24px,3vw,40px) var(--gut) 0}
.tags span{border:1px solid var(--sand);padding:8px 15px;font-size:13px;color:var(--mute)}
.wwm-portrait{max-width:430px;min-height:520px;margin:clamp(28px,3.4vw,48px) var(--gut) 0}

/* ============ SHARED BITS ============ */
.backlink{display:inline-block;margin-top:22px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sea);border-bottom:1px solid var(--sand);padding-bottom:4px}
.soon-tag{display:inline-block;margin-top:9px;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);font-weight:700}
.emptynote{color:var(--mute);font-style:italic;padding:26px 0}

/* The brand line, over the hero. Set in the display italic so it reads as a
   voice rather than a label, and sized between the eyebrow and the headline. */
.hero-txt .slogan{
  font-family:var(--disp);font-style:italic;font-weight:300;
  font-size:clamp(17px,2.1vw,27px);line-height:1.2;letter-spacing:-.012em;
  color:#fff;margin-bottom:14px;max-width:22ch;text-wrap:balance;
  text-shadow:0 1px 18px rgba(8,12,18,.45);
}