/*
Theme Name: Red Brick Kitchen Journal
Author: Red Brick Kitchen
Description: Editorial-first recipes, buying guides and WooCommerce shelf.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: rbk-journal
*/

/* Hallmark · job: explore recipes and shop · shape: magazine cover, shelf and story index · genre: editorial · theme: Red Brick Kitchen brand (by request) · redesign: full
 * hero: typographic cover over full-width outdoor photograph · nav: centred masthead and horizontal contents · footer: editorial colophon · imagery: five original RBK embedded photographs · signature: a cover story opening onto the kitchen shelf · posture: paper · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R5 V5 · weakest: E, composite story images carry baked-in type; displayed whole with object-fit contain rather than cropped */
/* Hallmark · waive 7b · surface: absolute, #ffffff is the fixed brand paper · The Red Brick Kitchen owner supplied white as a locked palette colour, so replacing it with a tint would change the brand */
:root {
  --ink:#040404; --brick:#b91e25; --yellow:#fffc00; --paper:#ffffff;
  --muted:#b8b8b8; --rule:#e8e8e8; --butter:#fffea8;
  --font-display:Georgia, 'Times New Roman', serif;
  --font-body:Arial, Helvetica, sans-serif;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:96px; --space-10:128px; --container:1440px; --gutter:40px;
  --columns:32px;
}
*,*::before,*::after { box-sizing:border-box; }
html,body { overflow-x:clip; }
[hidden] { display:none!important; }
html { scroll-behavior:smooth; scrollbar-color:var(--muted) var(--paper); }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 var(--font-body); caret-color:var(--brick); }
::selection { background:var(--butter); color:var(--ink); }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible { outline:3px solid var(--brick); outline-offset:4px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.wrap { max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
h1,h2,h3 { font-family:var(--font-display); font-weight:400; overflow-wrap:break-word; min-width:0; text-wrap:balance; }
p { text-wrap:pretty; }
.announcement { background:var(--brick); color:var(--paper); text-align:center; font-size:13px; padding:var(--space-2) var(--space-4); }
.masthead { position:relative; display:flex; justify-content:center; align-items:center; min-height:130px; }
.brand { display:block; text-align:center; }
.brandname { display:block; font:700 clamp(43px,6.2vw,93px)/1 var(--font-display); letter-spacing:-.055em; }
.brandname small { display:block; margin-top:var(--space-1); font:600 14px/1.2 var(--font-body); letter-spacing:0; }
.utility { position:absolute; right:0; top:var(--space-4); display:flex; gap:var(--space-5); align-items:center; font-size:14px; font-weight:600; }
.utility a:hover,.nav a:hover,.text-link:hover,.subcta:hover,.shop-section .product a:hover,.directory a:hover { color:var(--brick); }
.shop-button { border-bottom:2px solid var(--brick); min-height:44px; display:inline-flex; align-items:center; white-space:nowrap; }
.menu-toggle { display:none; border:1px solid var(--ink); background:var(--paper); color:var(--ink); min-width:46px; min-height:46px; }
.menu-toggle:hover,.menu-toggle:active { background:var(--rule); }
.nav { display:flex; justify-content:center; align-items:center; gap:var(--space-8); border-top:2px solid var(--ink); border-bottom:1px solid var(--rule); min-height:53px; font-size:14px; font-weight:600; }
.nav a { display:inline-flex; align-items:center; min-height:44px; white-space:nowrap; }
.hero { padding-top:var(--space-7); }
.cover-copy { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(0,.7fr); gap:var(--space-8); align-items:end; padding-bottom:var(--space-7); }
h1 { margin:0; max-width:14ch; font-size:clamp(55px,6.2vw,92px); line-height:1.01; letter-spacing:-.052em; }
.hero-side { max-width:31ch; padding-bottom:var(--space-2); }
.hero-side p { margin:0 0 var(--space-5); font-size:18px; line-height:1.45; }
.hero-actions { display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5); align-items:center; }
.cta { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:var(--space-3) var(--space-5); color:var(--paper); background:var(--brick); font-weight:700; white-space:nowrap; }
.cta:hover { background:var(--ink); }
.cta:active { transform:translateY(1px); }
.subcta,.text-link,.shop-section .product a { display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-decoration:underline; text-decoration-color:var(--brick); text-underline-offset:5px; white-space:nowrap; }
.cover-photo { margin:0; overflow:hidden; height:clamp(300px,25vw,440px); background:var(--rule); }
.cover-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center 57%; }
.section { padding-block:var(--space-10); }
.section-top { display:flex; justify-content:space-between; align-items:end; gap:var(--space-5); border-bottom:2px solid var(--ink); padding-bottom:var(--space-5); }
h2 { font-size:clamp(40px,4vw,58px); line-height:1.08; letter-spacing:-.035em; margin:0; }
.filters { display:flex; gap:var(--space-2); padding-block:var(--space-5) var(--space-6); flex-wrap:wrap; }
.filters button { min-height:44px; border:1px solid var(--muted); background:var(--paper); color:var(--ink); padding:var(--space-2) var(--space-4); font-size:14px; }
.filters button:hover { border-color:var(--brick); color:var(--brick); }
.filters button.active { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filters button.active:hover { background:var(--brick); border-color:var(--brick); color:var(--paper); }
.filters button:active { transform:translateY(1px); }
.feature-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:var(--space-8); align-items:start; }
.cards { min-width:0; }
.card { display:grid; grid-template-columns:170px minmax(0,1fr); gap:var(--space-5); align-items:center; border-top:1px solid var(--rule); padding-block:var(--space-5); min-width:0; }
.card:first-child { display:block; border-top:0; padding-top:0; padding-bottom:var(--space-7); }
.card img { display:block; width:100%; height:135px; object-fit:contain; background:var(--paper); }
.card:first-child img { height:auto; aspect-ratio:1.7; object-fit:contain; object-position:left center; }
.card h3 { font-size:clamp(22px,2vw,30px); line-height:1.17; margin:0; }
.card:first-child h3 { font-size:clamp(34px,3.3vw,48px); max-width:21ch; margin-top:var(--space-5); }
.card .meta { color:var(--brick); font-size:14px; font-weight:600; margin-top:var(--space-2); }
.card:hover h3 { text-decoration:underline; text-decoration-color:var(--brick); text-decoration-thickness:1px; text-underline-offset:5px; }
.card.hidden { display:none; }
.shop-section { background:var(--butter); padding:var(--space-6); }
.shop-intro h2 { font-size:clamp(32px,2.6vw,40px); }
.shop-intro p { margin:var(--space-3) 0 var(--space-4); max-width:39ch; font-size:15px; line-height:1.5; }
.shop-intro a { display:inline-flex; min-height:44px; align-items:center; font-weight:700; text-decoration:underline; text-decoration-color:var(--brick); text-underline-offset:5px; }
.shop-section .product { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:var(--space-5); align-items:center; border-top:1px solid var(--ink); margin-top:var(--space-5); padding-top:var(--space-5); }
.shop-section .product img { display:block; width:100%; height:200px; object-fit:contain; background:var(--paper); }
.shop-section .product small { font-size:13px; font-weight:600; }
.shop-section .product h3 { font-size:clamp(27px,2.2vw,36px); line-height:1.08; margin:var(--space-2) 0; }
.shop-section .product p { font-size:14px; line-height:1.45; margin:0 0 var(--space-3); }
.directory { background:var(--ink); color:var(--paper); padding-block:var(--space-9); }
.directory h2 { max-width:15ch; }
.directory p { margin:var(--space-4) 0 0; max-width:50ch; font-size:17px; }
.directory-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-8); }
.directory-links { border-top:1px solid var(--muted); }
.directory-links a { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:72px; border-bottom:1px solid var(--muted); font-size:18px; font-weight:600; }
.directory-links a:hover { color:var(--yellow); }
.directory-links a span { font-size:14px; font-weight:400; color:var(--paper); }
.footer { border-top:2px solid var(--ink); display:flex; justify-content:space-between; gap:var(--space-5); padding-block:var(--space-6) var(--space-8); font-size:13px; }
@media(max-width:1050px) {
  .utility { position:static; }
  .masthead { justify-content:space-between; min-height:100px; }
  .brand { text-align:left; }
  .brandname { font-size:clamp(38px,5vw,60px); }
  .nav { gap:var(--space-6); }
  .cover-copy { grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--space-7); }
  h1 { font-size:clamp(50px,6.2vw,75px); }
  .feature-layout { gap:var(--space-6); }
  .shop-section .product { grid-template-columns:minmax(0,.65fr) minmax(0,1fr); gap:var(--space-3); }
  .shop-section .product img { height:160px; }
}
@media(max-width:750px) {
  :root { --gutter:20px; --columns:20px; }
  .masthead { min-height:90px; }
  .brandname { font-size:clamp(30px,5.7vw,43px); }
  .brandname small { font-size:12px; }
  .utility a:not(.shop-button) { display:none; }
  .menu-toggle { display:inline-grid; place-items:center; }
  .nav { display:none; flex-direction:column; align-items:stretch; gap:0; min-height:0; }
  .nav.open { display:flex; }
  .nav a { border-bottom:1px solid var(--rule); min-height:46px; }
  .hero { padding-top:var(--space-6); }
  .cover-copy { grid-template-columns:minmax(0,1fr); gap:var(--space-5); padding-bottom:var(--space-6); }
  h1 { font-size:clamp(45px,9vw,68px); max-width:13ch; }
  .hero-side { max-width:45ch; padding:0; }
  .hero-side p { font-size:17px; margin-bottom:var(--space-4); }
  .cover-photo { height:340px; }
  .section { padding-block:var(--space-8); }
  .feature-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-8); }
  .directory { padding-block:var(--space-8); }
  .directory-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-7); }
  .footer { display:block; }
  .footer span { display:block; margin-bottom:var(--space-3); }
}
@media(max-width:470px) {
  .masthead { min-height:84px; }
  .brandname { font-size:29px; max-width:210px; line-height:.93; }
  .utility { gap:var(--space-2); }
  .shop-button { font-size:13px; }
  h1 { font-size:clamp(42px,12vw,55px); }
  .cover-photo { height:270px; }
  .section-top { display:block; }
  .section-top .text-link { margin-top:var(--space-3); }
  .card { grid-template-columns:105px minmax(0,1fr); gap:var(--space-4); }
  .card img { height:115px; }
  .card:first-child img { aspect-ratio:1; }
  .shop-section { padding:var(--space-5); }
  .shop-section .product { grid-template-columns:110px minmax(0,1fr); }
  .shop-section .product img { height:170px; }
  .shop-section .product p { font-size:13px; }
  .directory-links a { font-size:16px; }
  .directory-links a span { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }