/* GCCAV — magazine layout rebuilt to match the reference screenshot */
@import url("https://fonts.googleapis.com/css2?family=Arvo:wght@400;700&family=Kaushan+Script&family=Raleway:wght@300;400;500;600&display=swap");
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:Raleway,Helvetica,Arial,sans-serif;color:#222;background:#fff;font-size:15px;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:1400px;margin:0 auto;padding:0 30px}

/* masthead: script logo over faint line-art skyline */
.masthead{position:relative;height:222px;background:#fff url(/images/header-lineart.svg) repeat-x center bottom/auto 214px;text-align:center;overflow:hidden}
.masthead::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,.1))}
.brand{position:relative;z-index:1;display:inline-block;padding-top:38px}
.brand .logo{font-family:"Kaushan Script",cursive;font-size:86px;line-height:1;color:#111;letter-spacing:1px;display:block}
.brand .tagline{display:block;margin-top:10px;font-size:14px;font-weight:500;letter-spacing:.62em;text-transform:uppercase;color:#555;padding-left:.62em}

/* nav row */
.navrow{display:flex;align-items:center;justify-content:space-between;height:100px}
.social,.tools{display:flex;gap:16px;align-items:center;width:200px}
.tools{justify-content:flex-end;font-size:12px;color:#bbb}
.social svg,.tools svg{width:13px;height:13px;fill:#c2c2c2;display:block}
.social a:hover svg,.tools a:hover svg{fill:#222}
.lang{display:flex;align-items:center;gap:4px;color:#c2c2c2}
.mainnav{display:flex;gap:37px;align-items:center}
.mainnav a{font-size:17px;font-weight:500;text-transform:uppercase;color:#333;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.mainnav a:hover{color:#000}
.mainnav .chev{width:9px;height:9px;fill:none;stroke:#333;stroke-width:2.2}

/* the three-column magazine grid */
.magazine{display:grid;grid-template-columns:322px minmax(0,1fr) 322px;gap:37px;align-items:start;padding-bottom:70px}
.col{display:flex;flex-direction:column;gap:37px}
.card .thumb{position:relative;overflow:hidden}
.card .thumb img{width:100%;aspect-ratio:322/228;object-fit:cover;transition:transform .5s}
.card:hover .thumb img{transform:scale(1.04)}
.tag{position:absolute;left:18px;bottom:0;background:#fff;color:#222;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:6px 16px 3px}
.date{margin-top:30px;font-family:Arvo,Georgia,serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#777}
.card h2{font-family:Arvo,Georgia,serif;font-weight:400;font-size:26px;line-height:1.5;color:#111;margin-top:10px;letter-spacing:-.01em}
.card h2 a:hover{color:#555}
.excerpt{margin-top:22px;font-size:14px;line-height:2.1;color:#999;font-weight:400}

.hero{position:relative;display:block;height:820px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.hero .intro{position:absolute;left:55px;right:55px;bottom:0;background:#fff;text-align:center;padding:36px 30px 40px}
.hero .intro h1{font-family:Arvo,Georgia,serif;font-weight:400;font-size:37px;line-height:1.2;color:#111}
.hero .intro p{font-family:Arvo,Georgia,serif;font-size:25px;line-height:1.45;color:#111;margin-top:8px}

.tile{position:relative;display:block;overflow:hidden}
.tile img,.card .thumb.tile img{width:100%;aspect-ratio:322/313;object-fit:cover}
.tile .ad{position:absolute;top:18px;left:6px;background:#fff;font-size:11px;font-weight:600;padding:2px 7px;letter-spacing:.04em}
.tile .promo{position:absolute;left:0;right:0;top:34px;text-align:center;color:#fff3e0}
.tile .promo b{display:block;font-family:"Kaushan Script",cursive;font-weight:400;font-size:52px;line-height:1;text-shadow:0 2px 0 rgba(90,30,40,.25)}
.tile .promo small{display:block;margin-top:6px;font-size:10px;font-weight:600;letter-spacing:.55em;text-transform:uppercase;padding-left:.55em}

/* below the fold */
.section-title{text-align:center;font-family:Arvo,Georgia,serif;font-weight:400;font-size:28px;margin:10px 0 40px}
.section-title::after{content:"";display:block;width:40px;height:2px;background:#222;margin:16px auto 0}
.more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:37px;padding-bottom:80px}

footer.site{border-top:1px solid #eee;padding:50px 0 60px;text-align:center;color:#999;font-size:13px}
footer.site .logo{font-family:"Kaushan Script",cursive;font-size:40px;color:#111;display:block;margin-bottom:10px}
footer.site .credits{max-width:900px;margin:18px auto 0;font-size:11px;line-height:1.8;color:#aaa}
footer.site .credits a{text-decoration:underline}

/* article page */
.post{max-width:780px;margin:0 auto;padding:10px 0 80px}
.post .kicker{text-align:center}
.post .kicker .tagpill{display:inline-block;border:1px solid #222;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px 3px}
.post h1{font-family:Arvo,Georgia,serif;font-weight:400;font-size:44px;line-height:1.25;text-align:center;margin:22px 0 12px}
.post .date{text-align:center;margin:0 0 36px}
.post figure img{width:100%;max-height:560px;object-fit:cover}
.post figcaption{font-size:11px;color:#aaa;margin-top:8px}
.post .body{margin-top:36px;font-size:17px;line-height:1.95;color:#444}
.post .body p+p{margin-top:1.2em}
.post .note{margin-top:36px;padding:14px 18px;background:#f7f7f7;font-size:13px;color:#888}
.post .back{display:inline-block;margin-top:40px;font-size:13px;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid #222}

@media (max-width:1180px){
  .magazine{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);}
  .magazine .col.right{grid-column:1/-1;flex-direction:row}
  .magazine .col.right>*{flex:1}
  .hero{height:820px}
  .social,.tools{width:auto}
}
@media (max-width:820px){
  .container{padding:0 18px}
  .brand .logo{font-size:62px}
  .brand .tagline{font-size:11px}
  .navrow{flex-direction:column;height:auto;padding:18px 0 26px;gap:16px}
  .mainnav{flex-wrap:wrap;justify-content:center;gap:12px 22px}
  .mainnav a{font-size:14px}
  .magazine,.more-grid{grid-template-columns:1fr}
  .magazine .col.right{flex-direction:column}
  .hero{height:640px;order:-1}
  .hero .intro{left:18px;right:18px}
  .hero .intro h1{font-size:28px}.hero .intro p{font-size:19px}
  .post h1{font-size:32px}
}

/* single post: image header + centred reading column */
.single{padding-bottom:10px}
.post-hero{position:relative;height:560px;overflow:hidden;margin-bottom:0}
.post-hero img{width:100%;height:100%;object-fit:cover}
.post-titlebox{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(820px,calc(100% - 60px));background:#fff;text-align:center;padding:34px 44px 30px}
.tagpill{display:inline-block;border:1px solid #222;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:5px 14px 3px;color:#222}
.post-titlebox h1{font-family:Arvo,Georgia,serif;font-weight:400;font-size:42px;line-height:1.25;color:#111;margin:18px 0 12px}
.post-titlebox .meta{font-family:Arvo,Georgia,serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#888}
.post-caption{max-width:820px;margin:10px auto 0;text-align:center;font-size:11px;color:#aaa}
.post-caption a{text-decoration:underline}
.post-body{max-width:740px;margin:44px auto 90px;font-size:17px;line-height:1.95;color:#444}
.post-body>p+p{margin-top:1.3em}
.post-body>p:first-child{font-size:20px;line-height:1.8;color:#222}
.post-body>p:first-child::first-letter{float:left;font-family:Arvo,Georgia,serif;font-size:64px;line-height:.9;padding:6px 12px 0 0;color:#111}
.post-body .note{margin-top:36px;padding:14px 18px;background:#f7f7f7;font-size:13px;color:#888;line-height:1.6}
.post-foot{display:flex;justify-content:space-between;align-items:center;margin-top:44px;padding:22px 0;border-top:1px solid #eee;border-bottom:1px solid #eee;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#999}
.post-foot .share{display:flex;align-items:center;gap:14px}
.post-foot .share svg{width:14px;height:14px;fill:#999;display:block}
.post-foot .share a:hover svg{fill:#222}
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:30px}
.prevnext a{display:block}
.prevnext .next{text-align:right}
.prevnext small{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#999;margin-bottom:6px}
.prevnext span{font-family:Arvo,Georgia,serif;font-size:18px;line-height:1.4;color:#111}
.prevnext a:hover span{color:#555}
@media (max-width:820px){
  .post-hero{height:auto}
  .post-hero img{height:300px}
  .post-titlebox{position:static;transform:none;width:auto;padding:24px 4px 10px}
  .post-titlebox h1{font-size:30px}
  .post-body{margin-top:28px;font-size:16px}
  .prevnext{grid-template-columns:1fr}.prevnext .next{text-align:left}
}

/* animated G-CCAV line drawing in the masthead */
.masthead .flyer{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.masthead .brand{z-index:2}
@media (prefers-reduced-motion: reduce){.masthead .flyer{display:none}}
.masthead{margin-bottom:56px}