/*
Theme Name: PhillPhill Magazine
Theme URI: https://phillphill.com/
Author: Pamella (+ Claude)
Description: Clean editorial magazine theme for the Phillip Phillips fan site. Custom-built, lightweight, accessible.
Version: 1.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phillphill
*/

:root{
  --bg:#F6F2EC; --ink:#23211E; --muted:#7C766C; --line:rgba(35,33,30,.13);
  --accent:#9A6B5A; --paper:#FFFFFF;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Jost',sans-serif;background:var(--bg);color:var(--ink);line-height:1.7;font-weight:300;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
.serif{font-family:'Cormorant Garamond',serif}
.container{max-width:1200px;margin:0 auto;padding:0 32px}
.container-narrow{max-width:760px;margin:0 auto;padding:0 32px}
.label{font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.28em;color:var(--accent)}

/* ---------- Header ---------- */
.site-header{padding:26px 0 22px;border-bottom:1px solid var(--line)}
.site-header .container{text-align:center}
.util{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.util span{flex:1}
.util span:first-child{text-align:left}
.util span:last-child{text-align:right}
.brand .logo,.logo{font-family:'Cormorant Garamond',serif;font-size:2.6rem;font-weight:500;letter-spacing:.04em;display:inline-block}
.custom-logo{max-height:64px;width:auto;margin:0 auto}
.main-nav .menu{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:38px;margin-top:18px}
.main-nav a{font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink);font-weight:400;padding-bottom:4px;transition:.2s}
.main-nav a:hover,.main-nav .current-menu-item>a{color:var(--accent)}
.search-form{display:inline-flex;align-items:center;gap:6px}
.search-form input[type=search]{border:none;border-bottom:1px solid var(--line);background:none;font-family:'Jost';font-size:.72rem;padding:2px 0;width:90px;outline:none;color:var(--ink)}
.search-form input[type=submit]{border:none;background:none;cursor:pointer;color:var(--accent);font-size:.7rem;text-transform:uppercase;letter-spacing:.18em}
@media(max-width:760px){.brand .logo,.logo{font-size:2rem}.main-nav .menu{gap:18px}.util{font-size:.6rem}}

/* ---------- Hero ---------- */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:74vh}
.hero-img{position:relative;background:linear-gradient(180deg,rgba(35,33,30,.05),rgba(35,33,30,.28)),radial-gradient(120% 100% at 30% 20%,#cdb4a3,#9a6b5a 55%,#5b4035);overflow:hidden}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-img .cap{position:absolute;left:24px;bottom:20px;color:rgba(255,255,255,.7);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;z-index:2}
.hero-txt{display:flex;flex-direction:column;justify-content:center;padding:64px 8%}
.hero-txt .label{margin-bottom:22px}
.hero-txt h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,4.4vw,4rem);font-weight:500;line-height:1.04;letter-spacing:.005em}
.hero-txt h1 a:hover{color:var(--accent)}
.hero-txt h1 em{font-style:italic;color:var(--accent)}
.hero-txt p{color:var(--muted);max-width:42ch;margin:24px 0 28px;font-size:1rem}
.read{font-size:.74rem;text-transform:uppercase;letter-spacing:.22em;border-bottom:1px solid var(--ink);padding-bottom:5px;align-self:flex-start;transition:.2s}
.read:hover{color:var(--accent);border-color:var(--accent)}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero-img{min-height:46vh}.hero-txt{padding:48px 32px}}

/* ---------- Section title ---------- */
.sec-title{text-align:center;padding:72px 0 6px}
.sec-title .label{display:block;margin-bottom:14px}
.sec-title h2{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:500}

/* ---------- Magazine grid ---------- */
.mag{display:grid;grid-template-columns:repeat(3,1fr);gap:46px 38px;padding:44px 0 30px}
.post .ph{aspect-ratio:4/5;margin-bottom:20px;position:relative;overflow:hidden;background:var(--line)}
.post .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post:hover .ph img{transform:scale(1.04)}
.mag .post:nth-child(6n+1) .ph{background:linear-gradient(160deg,#d8c3b2,#9a6b5a)}
.mag .post:nth-child(6n+2) .ph{background:linear-gradient(160deg,#c9ccc0,#7e8a76)}
.mag .post:nth-child(6n+3) .ph{background:linear-gradient(160deg,#dccab2,#b08f63)}
.mag .post:nth-child(6n+4) .ph{background:linear-gradient(160deg,#cdbfc6,#8a7480)}
.mag .post:nth-child(6n+5) .ph{background:linear-gradient(160deg,#d9c6b0,#a07a5a)}
.mag .post:nth-child(6n) .ph{background:linear-gradient(160deg,#cdc4b0,#8f8468)}
.post .label{font-size:.66rem;letter-spacing:.22em}
.post h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;line-height:1.16;margin:10px 0 8px}
.post:hover h3{color:var(--accent)}
.post .date{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.mag{grid-template-columns:1fr 1fr;gap:40px 28px}}
@media(max-width:520px){.mag{grid-template-columns:1fr}}

.more-row{text-align:center;padding:20px 0 60px}
.btn-more{display:inline-block;font-size:.74rem;text-transform:uppercase;letter-spacing:.22em;border:1px solid var(--ink);padding:14px 30px;border-radius:999px;transition:.2s}
.btn-more:hover{background:var(--ink);color:var(--bg)}

/* ---------- Quote ---------- */
.quote{text-align:center;padding:80px 32px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:30px 0 0}
.quote p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400;max-width:24ch;margin:0 auto;line-height:1.25}
.quote .label{display:block;margin-top:24px}

/* ---------- Newsletter ---------- */
.signup{text-align:center;padding:84px 0}
.signup h2{font-family:'Cormorant Garamond',serif;font-size:2.3rem;font-weight:500;margin:14px 0 10px}
.signup p{color:var(--muted);max-width:40ch;margin:0 auto 26px}
.signup form{display:flex;max-width:420px;margin:0 auto;border-bottom:1px solid var(--ink)}
.signup input[type=email],.signup input[type=text]{flex:1;border:none;background:none;padding:12px 4px;font-family:'Jost';font-size:.95rem;outline:none;color:var(--ink)}
.signup button,.signup input[type=submit]{border:none;background:none;font-size:.72rem;text-transform:uppercase;letter-spacing:.22em;cursor:pointer;color:var(--accent)}

/* ---------- Single / Page ---------- */
.single,.page-article{padding-bottom:40px}
.single-head{text-align:center;padding:64px 32px 30px}
.single-head .label{display:block;margin-bottom:16px}
.single-head h1{font-family:'Cormorant Garamond',serif;font-size:clamp(2.2rem,4vw,3.4rem);font-weight:500;line-height:1.08}
.single-meta{font-size:.74rem;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);margin-top:18px}
.single-hero{max-width:1000px;margin:20px auto 48px;padding:0 32px}
.single-hero img{width:100%;border-radius:4px}
.single-content{font-size:1.06rem}
.single-content p{margin:0 0 1.4em}
.single-content h2{font-family:'Cormorant Garamond',serif;font-size:1.9rem;font-weight:500;margin:1.6em 0 .5em}
.single-content h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;margin:1.4em 0 .4em}
.single-content a{color:var(--accent);border-bottom:1px solid var(--line)}
.single-content img{border-radius:4px;margin:1.5em 0}
.single-content blockquote{border-left:2px solid var(--accent);margin:1.6em 0;padding:.4em 0 .4em 1.4em;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.4rem;color:var(--ink)}
.single-content ul,.single-content ol{margin:0 0 1.4em 1.3em}
.single-content li{margin-bottom:.4em}
.single-content figure{margin:1.5em 0}
.single-content figcaption{font-size:.78rem;color:var(--muted);text-align:center;margin-top:8px;letter-spacing:.04em}
.single-foot{margin-top:40px}
.tags a{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);border:1px solid var(--line);padding:5px 12px;border-radius:999px;margin:0 6px 6px 0}
.post-nav{display:flex;justify-content:space-between;gap:20px;margin:48px auto;font-family:'Cormorant Garamond',serif;font-size:1.15rem}
.post-nav a:hover{color:var(--accent)}

/* ---------- Pagination ---------- */
.pagination{display:flex;justify-content:center;gap:10px;margin:20px 0 70px}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;border:1px solid var(--line);border-radius:50%;font-size:.85rem;transition:.2s}
.pagination .page-numbers.current,.pagination .page-numbers:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ---------- Misc ---------- */
.empty,.error404{text-align:center;padding:90px 32px}
.error404 .label{display:block;margin-bottom:14px}
.error404 h2{font-family:'Cormorant Garamond',serif;font-size:2.4rem;font-weight:500;margin-bottom:10px}
.error404 p{color:var(--muted);max-width:38ch;margin:0 auto 26px}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:48px 32px;text-align:center;color:var(--muted)}
.site-footer .logo{font-size:1.7rem;margin-bottom:14px}
.site-footer .custom-logo{max-height:46px;margin-bottom:14px}
.socials{display:flex;justify-content:center;gap:26px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:18px}
.socials a:hover{color:var(--accent)}
.site-footer small{font-size:.7rem;letter-spacing:.08em}

/* ---------- Instagram section ---------- */
.ig-section{padding:86px 0 90px;text-align:center;border-top:1px solid var(--line)}
.ig-section .label{display:block;margin-bottom:12px}
.ig-section h2{font-family:'Cormorant Garamond',serif;font-size:2.3rem;font-weight:500;margin-bottom:6px}
.ig-handle{color:var(--muted);font-size:.95rem;margin-bottom:38px}
.ig-marquee{overflow:hidden;width:100%;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ig-track{display:flex;gap:16px;width:max-content;animation:ig-scroll 60s linear infinite}
.ig-marquee:hover .ig-track{animation-play-state:paused}
@keyframes ig-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ig-item{width:230px;height:230px;border-radius:8px;overflow:hidden;flex:none;position:relative;box-shadow:0 14px 30px -20px rgba(35,33,30,.5)}
.ig-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;transition:transform .5s ease}
.ig-item:hover img{transform:scale(1.06)}
.ig-follow{display:inline-flex;align-items:center;gap:9px;margin-top:42px;font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;border:1px solid var(--ink);border-radius:999px;padding:14px 28px;color:var(--ink);transition:.2s}
.ig-follow:hover{background:var(--ink);color:var(--bg)}
.ig-follow svg{width:16px;height:16px}
@media(prefers-reduced-motion:reduce){.ig-track{animation:none;flex-wrap:wrap;justify-content:center}}

/* accessibility */
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}