/* Cards, Doll, Pig — an editorial field guide */

:root{
  --paper:#FBFAF6; --ink:#1C1810; --soft:#5C554A; --gray:#8C8578;
  --accent:#A5392A; --accent-dark:#8A2E20; --rule:#DAD4C7; --field:#EDEAE2;
  --display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --body:'EB Garamond',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin',system-ui,-apple-system,sans-serif;
  --wrap:1000px; --measure:34rem;
}
*,*::before,*::after{box-sizing:border-box;}
html{font-size:118%;-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1rem;line-height:1.66;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:rgba(165,57,42,0.16);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}

/* kickers + bylines */
.kicker{font-family:var(--sans);font-weight:600;font-size:0.62rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);}
.byline{font-family:var(--sans);font-weight:500;font-size:0.6rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--gray);}

/* masthead */
.masthead{max-width:1080px;margin:0 auto;padding:0 24px;}
.mast-top{text-align:center;padding:2rem 0 1rem;border-bottom:2px solid var(--ink);}
.nameplate{font-family:var(--display);font-size:clamp(2.4rem,7vw,4rem);line-height:0.98;letter-spacing:0.02em;color:var(--ink);}
.mast-sub{font-family:var(--sans);font-size:0.68rem;letter-spacing:0.34em;text-transform:uppercase;color:var(--gray);margin:0.9rem 0 0;}
.mast-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:1.6rem;padding:0.85rem 0;border-bottom:1px solid var(--rule);}
.nav-item{font-family:var(--sans);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);}
.nav-item:hover{color:var(--accent);}

/* lead story */
.lead{text-align:center;padding:2.4rem 0 2rem;}
.lead-img{margin-bottom:1.7rem;aspect-ratio:16/9;overflow:hidden;background:var(--field);}
.lead-img img{width:100%;height:100%;object-fit:cover;}
.lead-title{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.08;margin:0.6rem auto 0.6rem;max-width:20ch;}
.lead-link:hover .lead-title{color:var(--accent);}
.lead-sf{font-family:var(--body);font-style:italic;font-size:1.18rem;color:var(--soft);max-width:46ch;margin:0 auto 0.9rem;line-height:1.45;}

/* grid */
.grid{display:flex;flex-wrap:wrap;gap:2.2rem;padding:1.8rem 0 1rem;border-top:1px solid var(--rule);}
.grid-top{border-top:none;padding-top:2rem;}
.card{flex:1 1 260px;}
.card-img{margin-bottom:0.85rem;aspect-ratio:3/2;overflow:hidden;background:var(--field);}
.card-img img{width:100%;height:100%;object-fit:cover;}
.card-title{font-family:var(--display);font-size:1.32rem;line-height:1.15;margin:0.45rem 0 0.45rem;}
.card-link:hover .card-title{color:var(--accent);}
.card-sf{font-family:var(--body);font-size:0.98rem;color:var(--soft);margin:0 0 0.7rem;line-height:1.5;}

/* essay */
.essay{padding:2.5rem 0 1rem;}
.essay-head{text-align:center;max-width:640px;margin:0 auto 1.4rem;padding:0 24px;}
.essay-title{font-family:var(--display);font-size:clamp(2rem,5vw,3rem);line-height:1.06;margin:0.7rem auto 0.7rem;max-width:18ch;}
.essay-sf{font-family:var(--body);font-style:italic;font-size:1.25rem;color:var(--soft);max-width:44ch;margin:0 auto 0.85rem;line-height:1.45;}
.essay-feature{margin:0.5rem auto 0.4rem;max-width:var(--wrap);padding:0 24px;}
.essay-feature img{width:100%;height:auto;}
.essay-feature figcaption{font-family:var(--sans);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray);text-align:center;margin-top:0.6rem;}

.essay-body{max-width:var(--measure);margin:1.8rem auto 0;padding:0 24px;font-size:1.16rem;line-height:1.7;}
.essay-body p{margin:0 0 1.35rem;}
.essay-body > p:first-of-type::first-letter{font-family:var(--display);float:left;font-size:3.6rem;line-height:0.62;padding:0.12rem 0.55rem 0 0;color:var(--ink);}
.essay-body h2{font-family:var(--display);font-size:1.6rem;margin:2.5rem 0 0.7rem;line-height:1.16;}
.essay-body h3{font-family:var(--body);font-weight:500;font-size:1.3rem;margin:2rem 0 0.5rem;}
.essay-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;}
.essay-body a:hover{color:var(--accent-dark);}
.essay-body blockquote{font-family:var(--display);font-size:1.6rem;line-height:1.34;text-align:center;color:var(--ink);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:1.4rem 0;margin:2.2rem 0;}
.essay-body blockquote p{margin:0;}
.essay-body figure{margin:2.2rem 0;}
.essay-body figcaption{font-family:var(--sans);font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--gray);text-align:center;margin-top:0.6rem;}
.essay-body ul,.essay-body ol{padding-left:1.3rem;margin:0 0 1.35rem;}
.essay-body li{margin:0 0 0.4rem;}
.essay-body hr{border:none;border-top:1px solid var(--rule);margin:2.5rem 0;}

.kg-width-wide{position:relative;left:50%;transform:translateX(-50%);width:min(92vw,52rem);margin-top:2.2rem;margin-bottom:2.2rem;}
.kg-width-full{position:relative;left:50%;transform:translateX(-50%);width:100vw;margin-top:2.2rem;margin-bottom:2.2rem;}
.kg-image{margin-left:auto;margin-right:auto;}

/* sign-off — all three marks */
.essay-signoff{max-width:var(--measure);margin:2.6rem auto 0;padding:1.6rem 24px 0;border-top:1px solid var(--rule);text-align:center;}
.marks-row{display:flex;justify-content:center;align-items:center;gap:1.7rem;color:var(--ink);}
.mark{display:block;}
.mark svg{display:block;height:100%;width:auto;}
.mark-cards{height:44px;}
.mark-doll{height:60px;}
.mark-pig{height:44px;}
.signoff-text{font-family:var(--body);font-style:italic;color:var(--gray);font-size:0.95rem;margin:1rem 0 0;}

/* section (tag) header */
.section-head{text-align:center;max-width:640px;margin:0 auto;padding:2.6rem 24px 1.6rem;border-bottom:1px solid var(--rule);}
.section-mark{display:flex;justify-content:center;margin-bottom:0.9rem;color:var(--gray);}
.section-mark .mark-cards{height:38px;}
.section-mark .mark-doll{height:52px;}
.section-mark .mark-pig{height:38px;}
.section-title{font-family:var(--display);font-size:clamp(2rem,5vw,2.6rem);margin:0.4rem 0 0.4rem;}
.section-desc{font-family:var(--body);color:var(--soft);max-width:44ch;margin:0 auto;}

/* subscribe */
.subscribe{max-width:820px;margin:3rem auto;padding:2.2rem 24px;text-align:center;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.sub-kicker{font-family:var(--sans);font-weight:600;font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--accent);margin-bottom:0.6rem;}
.sub-title{font-family:var(--display);font-size:1.9rem;line-height:1.05;margin:0 0 0.45rem;}
.sub-text{font-family:var(--body);font-size:1.08rem;color:var(--soft);max-width:46ch;margin:0 auto 1.3rem;}
.sub-form{display:flex;max-width:440px;margin:0 auto;}
.sub-input{flex:1;min-width:0;border:1px solid #B9B2A4;border-right:none;padding:0.8rem 1rem;font-family:var(--body);font-size:1rem;background:#fff;color:var(--ink);}
.sub-input:focus{outline:none;border-color:var(--accent);}
.sub-btn{background:var(--accent);color:#fff;border:none;font-family:var(--sans);font-weight:600;font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;padding:0 1.6rem;cursor:pointer;white-space:nowrap;}
.sub-btn:hover{background:var(--accent-dark);}
.sub-success{display:none;font-family:var(--body);font-style:italic;color:var(--soft);margin:0.9rem 0 0;}
.sub-form.success ~ .sub-success{display:block;}
.sub-note{font-family:var(--sans);font-size:0.7rem;color:var(--accent);margin:0.6rem 0 0;min-height:0;}

.subscribe-slim{max-width:var(--measure);margin:2.2rem auto;padding:1.5rem 24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);text-align:center;}
.slim-line{font-family:var(--body);font-style:italic;color:var(--soft);font-size:1.08rem;margin:0 0 0.9rem;}

/* footer */
.site-footer{max-width:var(--wrap);margin:2.5rem auto 0;padding:1.4rem 24px;border-top:1px solid var(--rule);text-align:center;}
.site-footer p{font-family:var(--sans);font-size:0.62rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--gray);margin:0;}

a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media(max-width:680px){
  html{font-size:110%;}
  .marks-row{gap:1.2rem;}
  .mark-cards,.mark-pig{height:34px;}
  .mark-doll{height:46px;}
  .grid{gap:1.8rem;}
  .card{flex:1 1 100%;}
  .mast-nav{gap:1.1rem;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}