/*
Theme Name: Herring Journal
Theme URI: https://journal.herringshoes.co.uk
Author: Herring
Description: The editorial "Vitrine" theme for the Herring Shoes Journal. Warm paper grounds, near-black carbon ink, a single quiet jade accent, high-contrast Fraunces display type and JetBrains Mono labels. Built to match the Herring Design System.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: herring-journal
*/

/* ─────────────────────────────────────────────────────────────
   Tokens — lifted from the Herring Design System (the "Vitrine" palette)
   ───────────────────────────────────────────────────────────── */
:root{
  --paper:#FAFAF7; --paper-2:#F2F0EA; --paper-3:#E8E5DD; --bone:#E3E2DC;
  --carbon:#0B0B0C;
  --carbon-80:rgba(11,11,12,.80); --carbon-60:rgba(11,11,12,.60);
  --carbon-40:rgba(11,11,12,.40); --carbon-20:rgba(11,11,12,.20);
  --carbon-12:rgba(11,11,12,.12); --carbon-08:rgba(11,11,12,.08);
  --jade:#2E4F46; --jade-dark:#243C36;

  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter Tight",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --gutter:32px; --max:1440px; --rail-h:72px;
  --ease:cubic-bezier(0.2,0,0,1); --dur:240ms; --dur-l:480ms; --dur-img:800ms;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--carbon);
  font-family:var(--sans); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--carbon); text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif); font-weight:400; font-variation-settings:"opsz" 144; margin:0;}
p{margin:0 0 24px;}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.mono{font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em;}

@keyframes jFadeUp{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
.fade{animation:jFadeUp var(--dur-l) var(--ease) both;}

/* skip link */
.skip-link{position:absolute; left:-9999px;}
.skip-link:focus{left:16px; top:16px; background:var(--carbon); color:var(--paper); padding:10px 16px; z-index:999; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;}

/* ── Announcement ── */
.announcement{background:var(--carbon); color:var(--paper); font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:10px 0;}
.announcement .wrap{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;}
.announcement .a-left{opacity:.6;} .announcement .a-mid{opacity:.92;} .announcement .a-right{text-align:right; opacity:.6;}

/* ── Header ── */
.site-header{background:var(--paper); border-bottom:1px solid var(--carbon-12); height:var(--rail-h); position:sticky; top:0; z-index:100;}
.site-header .wrap{height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px;}
.brand{justify-self:center; text-align:center; line-height:1;}
.brand-name{font-family:var(--serif); font-size:26px; letter-spacing:-.02em;}
.brand-sub{font-family:var(--mono); font-size:9px; letter-spacing:.34em; text-transform:uppercase; opacity:.55; margin-top:3px;}
.header-right{display:flex; align-items:center; justify-content:flex-end; gap:16px;}
.header-right .main-site{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.62; transition:opacity var(--dur) var(--ease);}
.header-right .main-site:hover{opacity:1;}
.icon-btn{width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--carbon); cursor:pointer; border-radius:2px; transition:background var(--dur);}
.icon-btn:hover{background:var(--carbon-08);}

/* ── Primary nav + mega ── */
.primary-nav{display:flex; align-items:center; height:100%;}
.primary-nav > ul{display:flex; gap:26px; height:100%; margin:0; padding:0; list-style:none;}
.primary-nav > ul > li{height:100%; display:flex; align-items:center; position:static;}
.primary-nav a{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; opacity:.62; transition:opacity var(--dur) var(--ease);}
.primary-nav > ul > li:hover > a, .primary-nav .current-menu-item > a, .primary-nav .current_page_item > a{opacity:1;}
.primary-nav .sub-menu{
  position:absolute; top:var(--rail-h); left:0; right:0; margin:0; padding:32px var(--gutter);
  height:auto; max-width:var(--max); margin-inline:auto; list-style:none;
  background:var(--paper); border-bottom:1px solid var(--carbon-12); box-shadow:0 32px 56px -28px rgba(11,11,12,.22);
  display:none; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:28px 40px; z-index:90;
  animation:jFadeUp var(--dur) var(--ease) both;
}
.primary-nav .menu-item-has-children:hover > .sub-menu{display:grid;}
.primary-nav .sub-menu li{display:block;}
.primary-nav .sub-menu a{display:block; font-family:var(--serif); font-size:24px; line-height:1.1; letter-spacing:-.008em; text-transform:none; opacity:.72;}
.primary-nav .sub-menu a:hover{opacity:1;}

/* ── Link underline draw ── */
.jlink{background-image:linear-gradient(currentColor,currentColor); background-size:0 1px; background-repeat:no-repeat; background-position:0 100%; transition:background-size var(--dur) var(--ease); padding-bottom:2px;}
.jlink:hover{background-size:100% 1px;}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 22px; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:500; border:1px solid var(--carbon); background:transparent; color:var(--carbon); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.btn:hover{background:var(--carbon); color:var(--paper);}
.btn--solid{background:var(--carbon); color:var(--paper);}
.btn--solid:hover{background:var(--jade); border-color:var(--jade); color:var(--paper);}
.btn svg{width:15px; height:15px;}

/* ── Hero ── */
.hero{display:block; position:relative; height:78vh; min-height:560px; max-height:820px; overflow:hidden; background:var(--bone);}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform var(--dur-img) var(--ease);}
.hero:hover img{transform:scale(1.03);}
.hero .scrim{position:absolute; inset:0; background:linear-gradient(to top, rgba(11,11,12,.82) 0%, rgba(11,11,12,.25) 45%, rgba(11,11,12,0) 72%);}
.hero .hero-body{position:absolute; left:0; right:0; bottom:0; padding:0 var(--gutter) 64px; color:var(--paper);}
.hero .hero-body .wrap{padding:0 var(--gutter);}
.hero .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.85; display:flex; gap:16px; align-items:center;}
.hero h1{font-size:clamp(48px,6.4vw,108px); line-height:.96; letter-spacing:-.022em; margin:20px 0 0; max-width:15ch;}
.hero p{font-size:17px; line-height:1.6; max-width:56ch; margin:22px 0 28px; opacity:.9;}
.hero .btn{border-color:rgba(250,250,247,.7); color:var(--paper);}
.hero .btn:hover{background:var(--paper); color:var(--carbon);}

/* ── Section head ── */
.section-head{display:flex; align-items:baseline; gap:24px; padding-bottom:32px; border-bottom:1px solid var(--carbon-20); margin-bottom:48px;}
.section-head .folio{font-family:var(--mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase; opacity:.62;}
.section-head .title{font-family:var(--serif); font-size:22px; letter-spacing:-.005em; flex:1;}

/* ── Chips ── */
.chips{display:flex; flex-wrap:wrap; gap:10px; margin:-16px 0 48px;}
.chip{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:10px 16px; border:1px solid var(--carbon-20); background:transparent; color:var(--carbon); transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);}
.chip:hover{border-color:var(--carbon);}
.chip.is-active{background:var(--carbon); color:var(--paper); border-color:var(--carbon);}

/* ── Post grid + card ── */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:40px; row-gap:64px;}
.card{display:block;}
.card .plate{position:relative; overflow:hidden; aspect-ratio:4/5; outline:1px solid var(--carbon-08); outline-offset:-1px; background:var(--bone);}
.card .plate img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-img) var(--ease);}
.card:hover .plate img{transform:scale(1.045);}
.card .cat-tag{position:absolute; top:14px; left:14px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; background:rgba(11,11,12,.82); color:var(--paper); padding:5px 9px;}
.card .meta{padding-top:18px;}
.card .date{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.5;}
.card h3{font-size:26px; line-height:1.12; letter-spacing:-.01em; margin:10px 0 0; display:inline;}
.card .excerpt{font-size:14px; line-height:1.55; color:var(--carbon-60); margin:12px 0 0;}

/* ── Pagination ── */
.pagination{padding:80px 0 48px; display:flex; justify-content:center;}
.pagination .nav-links{display:flex; gap:8px; align-items:center;}
.pagination .page-numbers{width:40px; height:40px; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:12px; letter-spacing:.12em; border:1px solid transparent; color:var(--carbon); transition:border-color var(--dur), background var(--dur);}
.pagination .page-numbers:hover, .pagination .page-numbers.current{border-color:var(--carbon); background:var(--carbon); color:var(--paper);}

/* ── Breadcrumb ── */
.breadcrumb{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.62; padding:24px 0;}
.breadcrumb .sep{opacity:.4;}

/* ── Single article ── */
.article-head{max-width:820px; margin:0 auto; padding:0 var(--gutter);}
.article-head .cat{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.6;}
.article-head h1{font-size:clamp(40px,5vw,72px); line-height:1.0; letter-spacing:-.022em; margin:18px 0 0;}
.article-head .standfirst{font-family:var(--serif); font-size:24px; line-height:1.4; letter-spacing:-.008em; color:var(--carbon-60); margin:24px 0 0;}
.article-head .byline{display:flex; gap:20px; align-items:center; margin:28px 0 40px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; opacity:.6;}
.article-figure{max-width:var(--max); margin:0 auto; padding:0 var(--gutter);}
.article-figure .frame{aspect-ratio:16/9; overflow:hidden; outline:1px solid var(--carbon-08); outline-offset:-1px; background:var(--bone);}
.article-figure .frame img{width:100%; height:100%; object-fit:cover;}
.article-figure figcaption{font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.5; margin-top:12px;}
.article-body{max-width:680px; margin:0 auto; padding:56px var(--gutter) 0;}
.article-body p{font-size:18px; line-height:1.75; color:var(--carbon-80);}
.article-body h2{font-size:36px; line-height:1.1; letter-spacing:-.012em; margin:48px 0 20px;}
.article-body h3{font-size:26px; margin:36px 0 16px;}
.article-body blockquote{margin:44px 0; padding-left:28px; border-left:2px solid var(--carbon); font-family:var(--serif); font-size:30px; line-height:1.3; letter-spacing:-.01em;}
.article-body img{margin:32px 0; outline:1px solid var(--carbon-08); outline-offset:-1px;}
.article-body a{ text-decoration:underline; text-underline-offset:3px; }
.article-actions{border-top:1px solid var(--carbon-12); margin-top:48px; padding-top:32px; display:flex; gap:12px; flex-wrap:wrap;}

/* ── Archive / category head ── */
.archive-head{border-bottom:1px solid var(--carbon-20); padding-bottom:40px; margin-bottom:48px;}
.archive-head .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.6;}
.archive-head h1{font-size:clamp(44px,5.5vw,80px); line-height:1.0; letter-spacing:-.02em; margin:16px 0 0;}
.archive-head .blurb{font-size:17px; line-height:1.6; color:var(--carbon-60); max-width:56ch; margin:20px 0 0;}

/* ── Search ── */
.search-page{max-width:820px; margin:0 auto; padding:72px var(--gutter) 80px;}
.search-page .kicker{font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; opacity:.6;}
.search-page h1{font-size:clamp(40px,5vw,72px); line-height:1.0; letter-spacing:-.02em; margin:14px 0 32px;}
.search-form{position:relative; border-bottom:2px solid var(--carbon); display:flex; align-items:center; gap:14px; padding-bottom:14px;}
.search-form svg{opacity:.6;}
.search-form input[type=search]{flex:1; border:none; outline:none; background:transparent; font-family:var(--serif); font-size:32px; letter-spacing:-.01em; color:var(--carbon);}
.search-form button{border:none; background:transparent; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;}
.search-summary{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.55; margin:20px 0 40px;}
.search-list{display:flex; flex-direction:column;}
.search-result{display:grid; grid-template-columns:160px 1fr; gap:28px; padding:28px 0; border-top:1px solid var(--carbon-12); align-items:center;}
.search-result .plate{position:relative; overflow:hidden; aspect-ratio:4/3; outline:1px solid var(--carbon-08); outline-offset:-1px; background:var(--bone);}
.search-result .plate img{width:100%; height:100%; object-fit:cover; transition:transform var(--dur-img) var(--ease);}
.search-result:hover .plate img{transform:scale(1.045);}
.search-result h3{font-size:28px; line-height:1.1; letter-spacing:-.01em; margin:8px 0 0; display:inline;}

/* ── 404 ── */
.error-404{max-width:var(--max); margin:0 auto; padding:120px var(--gutter) 140px; text-align:center; display:flex; flex-direction:column; align-items:center;}
.error-404 .code{font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; opacity:.55;}
.error-404 h1{font-size:clamp(80px,16vw,192px); line-height:.86; letter-spacing:-.035em; margin:24px 0 0;}
.error-404 p{font-size:18px; line-height:1.6; color:var(--carbon-60); max-width:44ch; margin:28px 0 36px;}

/* ── Footer ── */
.site-footer{background:var(--carbon); color:var(--paper); margin-top:8px;}
.site-footer .wrap{padding:88px var(--gutter) 44px;}
.footer-cols{display:grid; grid-template-columns:1.7fr 1fr; gap:56px; padding-bottom:72px;}
.footer-cols .f-name{font-family:var(--serif); font-size:40px; letter-spacing:-.02em; line-height:1;}
.footer-cols .f-sub{font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; opacity:.55; margin-top:8px;}
.footer-cols p{font-size:14px; line-height:1.6; opacity:.7; max-width:340px; margin-top:24px;}
.footer-cols h4{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; opacity:.6; margin:0 0 18px; font-weight:500;}
.footer-cols ul{display:flex; flex-direction:column; gap:12px; margin:0; padding:0; list-style:none;}
.footer-cols ul a{color:var(--paper); opacity:.85; font-size:14px;}
.footer-newsletter{display:flex; border:1px solid rgba(250,250,247,.4);}
.footer-newsletter input{flex:1; border:none; outline:none; background:transparent; color:var(--paper); font-family:var(--sans); font-size:13px; padding:12px 14px;}
.footer-newsletter button{border:none; background:var(--paper); color:var(--carbon); font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; padding:0 16px; cursor:pointer;}
.footer-legal{border-top:1px solid rgba(250,250,247,.18); padding-top:24px; display:flex; justify-content:center; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.55;}

/* WP core alignments */
.alignwide{max-width:1100px; margin-inline:auto;}
.alignfull{max-width:none;}
.wp-caption-text, figcaption{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; opacity:.5;}
.sticky, .bypostauthor{}

/* ── Responsive ── */
@media(max-width:1024px){ :root{--gutter:24px;} .post-grid{grid-template-columns:repeat(2,1fr);} .footer-cols{grid-template-columns:1fr 1fr;} }
@media(max-width:760px){
  :root{--gutter:16px;}
  .announcement .wrap{grid-template-columns:1fr;} .announcement .a-left,.announcement .a-right{display:none;} .announcement .a-mid{text-align:center;}
  .site-header .wrap{grid-template-columns:auto 1fr auto; gap:16px;}
  .primary-nav{display:none;}
  .post-grid{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:1fr;}
  .footer-legal{flex-direction:column; gap:10px;}
  .search-result{grid-template-columns:100px 1fr; gap:16px;}
}