/*
Theme Name: Interessia Editorial
Theme URI: https://interessia.com/
Author: Interessia
Description: A clean editorial magazine theme designed for Interessia, with strong visual hierarchy, responsive topic sections and a Discover-friendly homepage.
Version: 1.0.13
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: interessia
*/

:root {
  --bg: #f7f3ec;
  --paper: #fffdf8;
  --ink: #171514;
  --muted: #6f6a64;
  --line: #d9d2c8;
  --accent: #8a1730;
  --accent-dark: #691123;
  --max: 1380px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Manrope, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button, input, textarea, select { font: inherit; }

/* Prevent card rows from visually colliding when titles have different lengths */
.start-grid, .card-grid, .mini-grid, .compact-list, .feature-list, .split-sections { align-items:start; }
.card, .feature-primary, .split-section, .compact-item { min-width:0; }
.card { display:flex; flex-direction:column; }
.card > * { width:100%; }

.site-shell { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.site-main { min-height: 60vh; }

.site-header {
  background: rgba(247,243,236,.97);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
}
.header-main {
  min-height: 88px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.site-branding { text-align: center; }
.site-title { font: 500 clamp(2rem, 4vw, 3.35rem)/.95 var(--serif); letter-spacing: .02em; text-transform: uppercase; }
.site-tagline { margin-top: 8px; color: var(--muted); font-size: 1.05rem; line-height:1.25; font-style: italic; }
.header-tools { display:flex; gap:14px; align-items:center; }
.mobile-tools { display:none; }
.search-toggle, .menu-toggle { border:0; background:none; padding:8px; cursor:pointer; color:var(--ink); }
.search-toggle { display:inline-flex; align-items:center; justify-content:center; }
.search-icon { display:block; width:28px; height:28px; }
.menu-toggle { display:none; }

.primary-nav { border-top: 1px solid var(--line); }
.nav-row { display:flex; align-items:center; gap:18px; }
.nav-menu-wrap { flex:1; min-width:0; }
.primary-nav ul { list-style:none; padding:0; margin:0; display:flex; justify-content:center; flex-wrap:wrap; }
.primary-nav a { display:block; padding:16px 20px; font: 600 1.05rem/1.15 var(--sans); letter-spacing:.005em; }
.nav-search-toggle { flex:0 0 64px; width:64px; height:64px; margin-left:auto; padding:4px; }
.nav-search-toggle .search-icon { width:48px; height:48px; }

.home-wrap { padding-top: 24px; padding-bottom: 60px; }
.hero-grid { display:grid; grid-template-columns: 2fr 1fr; gap:14px; }
.hero-secondary { display:grid; gap:14px; }
.story-overlay { position:relative; overflow:hidden; background:#111; }
.story-overlay img { width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.story-overlay:hover img { transform: scale(1.015); }
.story-overlay:after { content:''; position:absolute; inset:25% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.82)); }
.story-overlay .overlay-copy { position:absolute; z-index:2; left:24px; right:24px; bottom:22px; color:#fff; }
.hero-main { min-height: 520px; }
.hero-secondary .story-overlay { min-height: 250px; }
.kicker { display:block; font:700 .68rem/1.2 var(--sans); text-transform:uppercase; letter-spacing:.09em; color:var(--accent); }
.story-overlay .kicker { color:#fff; }
.hero-title { margin:8px 0 8px; font-size:clamp(2rem,4vw,4.2rem); line-height:.99; max-width:900px; }
.hero-secondary .hero-title { font-size:clamp(1.35rem,2vw,2rem); line-height:1.04; }
.dek { margin:0; max-width:760px; font-size:1.05rem; }
.story-overlay .dek { color:rgba(255,255,255,.9); }
.read-link, .section-link { color:var(--accent); font:600 .8rem/1.2 var(--sans); }
.story-overlay .read-link { color:#fff; }

.section { border-top:1px solid var(--line); padding:34px 0 36px; margin-top:24px; clear:both; }
.section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:24px; }
.section-title-wrap { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
.section-title { margin:0; font-size:clamp(2rem,3vw,3rem); font-weight:500; line-height:1; }
.section-subtitle { margin:0; color:var(--muted); font-style:italic; font-size:.93rem; }

.start-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; }
.card-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:20px; }
.card { min-width:0; }
.card-image { aspect-ratio: 16/9; overflow:hidden; background:#ddd; }
.card-image img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.card:hover .card-image img { transform:scale(1.02); }
.card .kicker { margin-top:10px; }
.card-title { margin:6px 0 6px; font-size:1.22rem; line-height:1.18; font-weight:500; overflow-wrap:anywhere; }
.card-meta { color:#8c857e; font:500 .72rem/1.2 var(--sans); }
.card .kicker, .card .desktop-card-title { display:none; }
.mobile-article-title { display:block; margin:9px 0 4px; font:700 .86rem/1.25 var(--serif); color:var(--accent); }
.mobile-article-title a { color:inherit; }
.mobile-card-excerpt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:0 0 7px; font-size:1.18rem; line-height:1.2; color:var(--ink); }
.mobile-card-excerpt a { color:inherit; }
.start-grid .card, .card-grid .card, .mini-grid .card { height:100%; }
.compact-item h3 { overflow-wrap:anywhere; }

.feature-list { display:grid; grid-template-columns:1.3fr 1fr; gap:28px; align-items:start; }
.feature-primary .card-title { font-size:1.65rem; }
.feature-primary .kicker, .feature-primary .desktop-card-title { display:none; }
.feature-primary .mobile-article-title { display:block; margin:10px 0 5px; font:700 .9rem/1.25 var(--serif); color:var(--accent); }
.feature-primary .mobile-card-excerpt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; margin:0 0 8px; font-size:1.35rem; line-height:1.2; color:var(--ink); }
.compact-list { display:grid; gap:0; }
.compact-item { display:grid; grid-template-columns:115px 1fr; gap:13px; padding:0 0 12px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.compact-item:last-child { border-bottom:0; }
.compact-item img { width:115px; aspect-ratio: 4/3; object-fit:cover; }
.compact-item h3 { margin:0; font-size:1rem; line-height:1.15; font-weight:500; }

.curiosity { display:grid; grid-template-columns:1fr 1.25fr 1.25fr; gap:24px; align-items:center; }
.curiosity-copy h2 { margin:0 0 8px; font-size:clamp(2rem,3vw,3rem); font-weight:500; line-height:1; }
.curiosity-image img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.curiosity-story h3 { margin:7px 0 9px; font-size:clamp(1.7rem,2.7vw,2.6rem); line-height:1.03; font-weight:500; }
.curiosity-story p { margin:0 0 12px; color:#514d48; }

.split-sections { display:grid; grid-template-columns:1fr 1fr; gap:34px; }
.split-section { border-top:1px solid var(--line); padding-top:30px; }
.mini-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; }
.mini-grid .card-title { font-size:1.03rem; }

.newsletter { background:#efe6db; padding:26px 30px; display:grid; grid-template-columns:1fr 1.2fr; gap:30px; align-items:center; margin-top:26px; }
.newsletter h2 { margin:0 0 5px; font-size:2rem; font-weight:500; }
.newsletter p { margin:0; color:#4e4945; }
.newsletter-form { display:flex; gap:8px; }
.newsletter-form input[type=email] { flex:1; min-width:0; padding:13px 14px; border:1px solid #cfc3b7; background:#fff; }
.newsletter-form button { padding:13px 18px; border:0; background:var(--accent); color:#fff; cursor:pointer; font:600 .78rem var(--sans); }
.newsletter-form button:hover { background:var(--accent-dark); }

.site-footer { border-top:1px solid var(--line); padding:36px 0 26px; }
.footer-grid { display:grid; grid-template-columns:1.1fr 2fr; gap:40px; }
.footer-brand .site-title { text-align:left; font-size:2rem; }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; font:500 .8rem/1.8 var(--sans); }
.footer-nav ul { list-style:none; padding:0; margin:0; }
.copyright { border-top:1px solid var(--line); margin-top:26px; padding-top:14px; color:#746e68; font:500 .7rem var(--sans); }

.content-wrap { width:min(860px, calc(100% - 48px)); margin:0 auto; padding:42px 0 70px; }
.entry-header { margin-bottom:28px; }
.entry-title { margin:8px 0 14px; font-size:clamp(2.5rem,6vw,5rem); line-height:.98; font-weight:500; }
.entry-dek { color:#4f4a46; font-size:1.25rem; max-width:760px; }
.entry-meta { font:500 .76rem var(--sans); color:#7d766f; margin-top:16px; }
.entry-hero { margin:0 0 34px; }
.entry-hero img { width:100%; max-height:720px; object-fit:cover; }
.entry-content { font-size:1.18rem; }
.entry-content > * { margin-top:0; margin-bottom:1.35em; }
.entry-content h2 { margin-top:1.8em; font-size:2rem; line-height:1.12; font-weight:500; }
.entry-content h3 { margin-top:1.6em; font-size:1.45rem; line-height:1.2; }
.entry-content a { color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.entry-content blockquote { border-left:3px solid var(--accent); margin-left:0; padding-left:22px; font-size:1.4rem; font-style:italic; }
.entry-content figcaption { color:#77706a; font:500 .75rem var(--sans); }
.entry-content .alignwide { width:min(1100px, calc(100vw - 48px)); max-width:none; margin-left:50%; transform:translateX(-50%); }
.entry-content .alignfull { width:100vw; max-width:none; margin-left:50%; transform:translateX(-50%); }

.archive-header { padding:42px 0 16px; }
.archive-title { margin:0 0 8px; font-size:clamp(2.5rem,5vw,4.6rem); font-weight:500; }
.archive-description { color:var(--muted); max-width:700px; }
.pagination { margin:36px 0 10px; font:600 .82rem var(--sans); }
.nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.page-numbers { border:1px solid var(--line); padding:8px 12px; }
.page-numbers.current { background:var(--ink); color:#fff; }

.search-panel { display:none; border-top:1px solid var(--line); padding:14px 0; }
.search-panel.open { display:block; }
.search-form { display:flex; max-width:720px; margin:0 auto; }
.search-field { flex:1; padding:12px 14px; border:1px solid var(--line); background:#fff; }
.search-submit { border:0; background:var(--ink); color:#fff; padding:0 18px; }

.screen-reader-text { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media (max-width: 1024px) {
  .site-shell { width:min(var(--max), calc(100% - 32px)); }
  .header-main { min-height:76px; justify-content:space-between; }
  .site-branding { text-align:left; }
  .site-title { font-size:2.4rem; }
  .primary-nav { display:none; }
  .primary-nav.open { display:block; }
  .primary-nav ul { flex-direction:column; padding:8px 0 14px; }
  .primary-nav a { padding:12px 0; font-size:1rem; }
  .menu-toggle { display:inline-block; }
  .mobile-tools { display:flex; margin-left:auto; }
  .nav-search-toggle { display:none; }
  .mobile-tools .search-toggle .search-icon { width:30px; height:30px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-main { min-height:480px; }
  .hero-secondary { grid-template-columns:1fr 1fr; }
  .hero-secondary .story-overlay { min-height:240px; }
  .start-grid, .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .feature-list { grid-template-columns:1fr; }
  .curiosity { grid-template-columns:1fr 1fr; }
  .curiosity-copy { grid-column:1/-1; }
  .split-sections { grid-template-columns:1fr; gap:26px; }
  .footer-grid { grid-template-columns:1fr; }
}

@media (max-width: 640px) {
  body { font-size:16px; }
  .site-shell, .content-wrap { width:calc(100% - 28px); }
  .header-main { min-height:72px; gap:10px; }
  .site-title { font-size:2rem; text-transform:none; }
  .site-tagline { font-size:.9rem; line-height:1.25; margin-top:4px; }

  /* Mobile hero: one clear lead story, image first, copy below. */
  .hero-grid { display:block; }
  .hero-secondary { display:none; }
  .hero-main { min-height:0; background:transparent; overflow:visible; }
  .hero-main:after { display:none; }
  .hero-main > a { display:block; }
  .hero-main > a img { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
  .hero-main .overlay-copy {
    position:static;
    color:var(--ink);
    padding:16px 0 2px;
  }
  .hero-main .kicker { color:var(--accent); font-size:.8rem; }
  .hero-main .hero-title { margin:7px 0 9px; font-size:2.45rem; line-height:1.01; }
  .hero-main .dek { color:#5a544f; font-size:1.08rem; line-height:1.35; }
  .hero-main .read-link { color:var(--accent); font-size:.9rem; }

  .section { padding:30px 0; margin-top:20px; }
  .section-heading { align-items:flex-start; margin-bottom:18px; }
  .section-title-wrap { gap:4px; }
  .section-title { font-size:2.05rem; }
  .section-subtitle { display:block; width:100%; font-size:1rem; line-height:1.3; }
  .kicker { font-size:.78rem; }
  .card-meta { font-size:.92rem; line-height:1.35; }
  .read-link, .section-link { font-size:.88rem; }

  /* Mobile cards: every article uses the same full-width editorial card. */
  .start-grid, .mini-grid, .card-grid { grid-template-columns:1fr; gap:30px; }
  .start-grid .card, .mini-grid .card, .card-grid .card, .feature-primary {
    display:flex;
    flex-direction:column;
    gap:0;
    height:auto;
  }
  .start-grid .card .card-image,
  .mini-grid .card .card-image,
  .card-grid .card .card-image,
  .feature-primary .card-image {
    width:100%;
    aspect-ratio:16/9;
    margin:0 0 14px;
  }
  .start-grid .card .card-image img,
  .mini-grid .card .card-image img,
  .card-grid .card .card-image img,
  .feature-primary .card-image img {
    width:100%; height:100%; object-fit:cover;
  }
  .start-grid .card .kicker,
  .mini-grid .card .kicker,
  .card-grid .card .kicker,
  .feature-primary .kicker,
  .start-grid .desktop-card-title,
  .mini-grid .desktop-card-title,
  .card-grid .desktop-card-title,
  .feature-primary .desktop-card-title { display:none; }
  .start-grid .mobile-article-title,
  .mini-grid .mobile-article-title,
  .card-grid .mobile-article-title,
  .feature-primary .mobile-article-title {
    display:block;
    margin:0 0 8px;
    font-size:1.28rem;
    line-height:1.18;
  }
  .start-grid .mobile-card-excerpt,
  .mini-grid .mobile-card-excerpt,
  .card-grid .mobile-card-excerpt,
  .feature-primary .mobile-card-excerpt {
    display:block;
    font-size:1.7rem;
    line-height:1.16;
    margin:0 0 12px;
    color:var(--ink);
  }

  /* Britain supporting stories use the same full-width card format. */
  .feature-list { gap:28px; }
  .compact-list { gap:28px; }
  .compact-item {
    display:flex;
    flex-direction:column;
    gap:0;
    padding:0;
    margin:0;
    border-bottom:0;
  }
  .compact-item .compact-image { display:block; width:100%; margin:0 0 14px; }
  .compact-item img { width:100%; aspect-ratio:16/9; object-fit:cover; }
  .compact-item .desktop-compact-title { display:none; }
  .compact-item .mobile-article-title {
    display:block;
    margin:0 0 8px;
    font-size:1.28rem;
    line-height:1.18;
  }
  .compact-item .mobile-card-excerpt {
    display:block;
    font-size:1.7rem;
    line-height:1.16;
    margin:0 0 12px;
    color:var(--ink);
  }

  .curiosity { grid-template-columns:1fr; gap:16px; }
  .curiosity-copy h2 { font-size:2.05rem; }
  .curiosity-image img { aspect-ratio:16/9; }
  .curiosity-story h3 { font-size:1.7rem; }
  .curiosity-story p { font-size:1rem; }

  .split-sections { grid-template-columns:1fr; gap:0; }
  .split-section { padding-top:30px; }

  .newsletter { grid-template-columns:1fr; padding:24px 18px; }
  .newsletter h2 { font-size:1.8rem; }
  .newsletter p { font-size:1rem; }
  .newsletter-form { flex-direction:column; }
  .newsletter-form input[type=email], .newsletter-form button { font-size:.95rem; }

  .footer-nav { grid-template-columns:1fr 1fr; font-size:.88rem; }
  .copyright { font-size:.8rem; }
  .entry-content { font-size:1.08rem; }
  .entry-title { font-size:2.55rem; }
}