/* =====================================================================
   Ryan Outdoor Mystery - shared block styles
   Namespaced under .rom-scope so it never touches the theme.
   Every customizable property reads from a CSS variable that a block
   instance sets inline, so the editor and the front end look identical.
   ===================================================================== */

/* ---------- TOKENS (scoped, not global) ---------- */
.rom-scope{
  --pine-deep:#0C271D;
  --pine:#123528;
  --fern:#2E6E4E;
  --moss:#6FA07E;
  --sage-mist:#F3F7F3;
  --blaze:#E96D25;
  --blaze-soft:#F49A55;
  --amber:#F2B24A;
  --ink:#111E17;
  --slate:#4C5C53;
  --line:#E4EAE5;
  --white:#FFFFFF;

  --f-display:"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;

  --step--1:clamp(.78rem,.75rem + .15vw,.86rem);
  --step-0:clamp(1rem,.96rem + .2vw,1.09rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.45rem,1.25rem + 1vw,2rem);
  --step-3:clamp(1.9rem,1.5rem + 2vw,2.9rem);
  --step-4:clamp(2.4rem,1.7rem + 3.4vw,4.2rem);
  --step-5:clamp(3rem,2rem + 5vw,5.6rem);

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(17,30,23,.04),0 10px 30px -12px rgba(17,30,23,.18);
  --shadow-lg:0 20px 60px -20px rgba(12,39,29,.4);
  --wrap:1180px;
  --gap:clamp(1rem,.6rem + 2vw,2rem);

  font-family:var(--f-body);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.rom-scope *{box-sizing:border-box}
.rom-scope h1,.rom-scope h2,.rom-scope h3,.rom-scope h4{
  font-family:var(--f-display);line-height:1.05;letter-spacing:-.02em;font-weight:700;margin:0}
.rom-scope p{margin:0}
.rom-scope a{color:inherit;text-decoration:none}
.rom-scope img{max-width:100%;display:block}
.rom-scope ul{list-style:none;margin:0;padding:0}
.rom-scope :focus-visible{outline:3px solid var(--blaze);outline-offset:3px;border-radius:4px}

/* remove default block gaps so sections stack flush */
.rom-block{margin-top:0;margin-bottom:0}

/* ---------- shared layout ---------- */
.rom-wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1.1rem,.6rem + 2vw,2.2rem)}
.rom-block{
  padding-block:var(--rom-pad-top,clamp(3.2rem,2rem + 5vw,6rem)) var(--rom-pad-bottom,clamp(3.2rem,2rem + 5vw,6rem));
}
/* which blocks paint their full-width section background */
.rom-categories,.rom-featured,.rom-author-section,.rom-latest,.rom-faq-section{background:var(--rom-bg,transparent)}
.rom-gear{background:var(--rom-bg,var(--sage-mist))}
.rom-hero{background:var(--rom-bg,var(--pine))}
/* tightened top padding to match the stacked homepage flow (still overridable) */
.rom-featured,.rom-author-section,.rom-faq-section{--rom-pad-top:0}

/* eyebrow / field label */
.rom-eyebrow{
  font-family:var(--rom-eb-font,var(--f-mono));font-size:var(--rom-eb-size,var(--step--1));font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--rom-eb-color,var(--fern));
  display:inline-flex;align-items:center;gap:.55rem;
}
.rom-eyebrow::before{content:"";width:22px;height:2px;background:var(--rom-accent,var(--blaze));display:inline-block}
.rom-eyebrow.on-dark{color:var(--rom-eb-color,var(--amber))}
.rom-eyebrow.on-dark::before{background:var(--rom-accent,var(--amber))}

.rom-lede{font-size:var(--rom-b-size,var(--step-1));color:var(--rom-b-color,var(--slate));max-width:56ch;font-family:var(--rom-b-font,var(--f-body))}
.rom-scope .rom-section-head{max-width:60ch;margin-bottom:clamp(1.4rem,1rem + 1.5vw,2.2rem)}
.rom-scope .rom-section-head .rom-eyebrow{margin-bottom:.4rem}
.rom-scope .rom-section-head h2{font-size:var(--rom-h-size,var(--step-3));margin:0 0 .55rem !important;color:var(--rom-h-color,var(--pine));font-family:var(--rom-h-font,var(--f-display))}
.rom-scope .rom-section-head p{color:var(--rom-b-color,var(--slate));max-width:52ch;font-size:var(--rom-b-size,var(--step-0));font-family:var(--rom-b-font,var(--f-body));margin:0}

/* buttons */
.rom-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--rom-btn-font,var(--f-body));font-weight:600;font-size:var(--rom-btn-size,var(--step-0));
  padding:var(--rom-btn-py,.85rem) var(--rom-btn-px,1.4rem);
  border-radius:var(--rom-btn-radius,999px);border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  white-space:nowrap;text-align:center;
}
.rom-btn:hover{transform:translateY(-2px)}
.rom-scope .rom-btn-primary{background:var(--rom-btn-bg,var(--blaze));color:var(--rom-btn-color,#fff);box-shadow:0 8px 20px -8px rgba(233,109,37,.7)}
.rom-btn-primary:hover{filter:brightness(.94)}
.rom-scope .rom-btn-ghost{background:transparent;color:var(--rom-btn2-color,#fff);border-color:var(--rom-btn2-border,rgba(255,255,255,.4))}
.rom-btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.rom-scope .rom-btn-dark{background:var(--rom-btn-bg,var(--pine));color:var(--rom-btn-color,#fff)}
.rom-btn-dark:hover{filter:brightness(1.15)}
.rom-btn .arw{transition:transform .2s ease}
.rom-btn:hover .arw{transform:translateX(3px)}

/* ---------- CSS-drawn scenery ---------- */
.rom-scene{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--s1),var(--s2));isolation:isolate}
.rom-scene::before,.rom-scene::after{content:"";position:absolute;inset:0;z-index:1}
.rom-scene::before{clip-path:polygon(0 100%,0 58%,14% 44%,29% 60%,44% 38%,60% 57%,77% 34%,100% 52%,100% 100%);background:var(--s3);opacity:.92}
.rom-scene::after{clip-path:polygon(0 100%,0 78%,20% 63%,37% 80%,54% 60%,71% 78%,89% 64%,100% 74%,100% 100%);background:var(--s4)}
.rom-scene .sun{position:absolute;top:18%;right:16%;width:20%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--s5) 0 55%,transparent 72%);z-index:0}

.s-dawn   {--s1:#F2B24A;--s2:#2E6E4E;--s3:#1c4a37;--s4:#0e2c20;--s5:#ffe6ad}
.s-forest {--s1:#cfe3d4;--s2:#4b8163;--s3:#2E6E4E;--s4:#123528;--s5:#eef7ef}
.s-alpine {--s1:#dff0ef;--s2:#7fae9c;--s3:#bcd3cb;--s4:#1d4a39;--s5:#ffffff}
.s-canyon {--s1:#f6d9a8;--s2:#b5643c;--s3:#8a4a2c;--s4:#5c3020;--s5:#ffe9c2}
.s-dusk   {--s1:#5b6f8c;--s2:#233a33;--s3:#1a3a2c;--s4:#0b231a;--s5:#f2a06a}
.s-meadow {--s1:#e7efb9;--s2:#3f7d5c;--s3:#2E6E4E;--s4:#123528;--s5:#fbffdd}

/* contour overlay */
.rom-contours{position:absolute;inset:0;z-index:2;opacity:.16;mix-blend-mode:screen;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600' viewBox='0 0 600 600'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1'%3E%3Cpath d='M-20 300 C120 210 200 380 320 300 460 210 540 380 640 300'/%3E%3Cpath d='M-20 340 C120 250 200 420 320 340 460 250 540 420 640 340'/%3E%3Cpath d='M-20 380 C120 290 200 460 320 380 460 290 540 460 640 380'/%3E%3Cpath d='M-20 420 C120 330 200 500 320 420 460 330 540 500 640 420'/%3E%3Cpath d='M-20 260 C120 170 200 340 320 260 460 170 540 340 640 260'/%3E%3Cpath d='M-20 220 C120 130 200 300 320 220 460 130 540 300 640 220'/%3E%3C/g%3E%3C/svg%3E");
  background-size:620px}

/* =========================== HERO =========================== */
.rom-hero{position:relative;overflow:hidden;color:#fff;
  --rom-pad-top:clamp(4rem,3rem + 8vw,8.5rem);--rom-pad-bottom:clamp(4rem,3rem + 8vw,8.5rem)}
.rom-hero .rom-scene{position:absolute;inset:0;z-index:0}
.rom-hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,39,29,.35) 0%,rgba(12,39,29,.55) 45%,rgba(12,39,29,.92) 100%)}
.rom-hero .rom-contours{z-index:2}
.rom-hero-inner{position:relative;z-index:3}
.rom-scope .rom-hero-inner h1{font-size:var(--rom-h-size,var(--step-5));font-weight:800;max-width:16ch;margin:.4rem 0 1.1rem !important;
  color:var(--rom-h-color,#fff);font-family:var(--rom-h-font,var(--f-display))}
.rom-hero p.rom-lede{color:var(--rom-b-color,rgba(255,255,255,.86));max-width:52ch}
.rom-hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}
.rom-hero-stats{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:3.2rem;
  padding-top:1.8rem;border-top:1px solid rgba(255,255,255,.18)}
.rom-hero-stats .rom-stat{display:flex;flex-direction:column}
.rom-hero-stats .rom-num{font-family:var(--f-display);font-weight:700;font-size:var(--step-2);color:var(--rom-accent,var(--amber));line-height:1}
.rom-hero-stats .rom-lab{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.5rem}

/* =========================== CATEGORIES =========================== */
.rom-cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.rom-cat-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;background:var(--rom-card-bg,#fff);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column}
.rom-cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rom-cat-card .rom-scene{height:132px}
.rom-cat-body{padding:1.2rem 1.3rem 1.4rem}
.rom-cat-tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--rom-accent,var(--blaze));font-weight:600}
.rom-cat-card h3{font-size:var(--rom-h-size,var(--step-1));margin:.35rem 0 .5rem;color:var(--rom-card-title,var(--pine));font-family:var(--rom-h-font,var(--f-display))}
.rom-cat-card p{font-size:var(--rom-b-size,.94rem);color:var(--rom-card-text,var(--slate));margin-bottom:.9rem;font-family:var(--rom-b-font,var(--f-body))}
.rom-cat-link{font-family:var(--f-mono);font-size:.8rem;font-weight:600;color:var(--fern);display:inline-flex;gap:.4rem;align-items:center}
.rom-cat-card:hover .rom-cat-link{color:var(--blaze)}

/* =========================== FEATURED =========================== */
.rom-mag{display:grid;grid-template-columns:1.5fr 1fr;gap:var(--gap)}
.rom-mag-lead{position:relative;border-radius:var(--radius);overflow:hidden;min-height:460px;
  display:flex;align-items:flex-end;color:#fff;box-shadow:var(--shadow)}
.rom-mag-lead .rom-scene{position:absolute;inset:0}
.rom-mag-lead .grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,35,26,.9))}
.rom-mag-lead .m-body{position:relative;z-index:2;padding:clamp(1.4rem,1rem + 2vw,2.4rem)}
.rom-mag-lead h3{font-size:var(--rom-h-size,var(--step-3));max-width:16ch;margin:.6rem 0 .7rem;color:#fff;font-family:var(--rom-h-font,var(--f-display))}
.rom-mag-lead p{color:rgba(255,255,255,.85);max-width:46ch;font-family:var(--rom-b-font,var(--f-body))}
.rom-mag-side{display:flex;flex-direction:column;gap:var(--gap)}
.rom-mag-mini{display:grid;grid-template-columns:120px 1fr;gap:1rem;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--rom-card-bg,#fff);transition:box-shadow .2s,transform .2s}
.rom-mag-mini:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.rom-mag-mini .rom-scene{min-height:100%}
.rom-mag-mini .mm-body{padding:.9rem 1rem .9rem 0}
.rom-mag-mini h4{font-size:1.05rem;color:var(--rom-card-title,var(--pine));margin:.3rem 0 .35rem;line-height:1.2;font-family:var(--rom-h-font,var(--f-display))}
.rom-meta{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--slate);display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.rom-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--blaze)}
.rom-tag-pill{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;padding:.25rem .6rem;border-radius:999px}
.rom-tag-pill.solid{background:var(--sage-mist);border-color:var(--line);color:var(--fern)}

/* =========================== AUTHOR =========================== */
.rom-author{background:var(--rom-card-bg,var(--sage-mist));border-radius:var(--radius);padding:clamp(1.6rem,1rem + 3vw,3rem);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(1.4rem,1rem + 3vw,3rem);align-items:center;border:1px solid var(--line)}
.rom-avatar{width:clamp(120px,10vw,158px);aspect-ratio:1;border-radius:24px;position:relative;
  background:linear-gradient(160deg,var(--fern),var(--pine));display:grid;place-items:center;
  color:#fff;font-family:var(--f-display);font-weight:800;font-size:3rem;box-shadow:var(--shadow);border:3px solid #fff}
.rom-avatar .ring{position:absolute;inset:-3px;border-radius:24px;border:2px solid var(--amber);opacity:.6}
/* author photo variant (2:3 portrait) */
.rom-avatar-photo{display:block;width:clamp(150px,15vw,230px);height:auto;aspect-ratio:2 / 3;border-radius:20px;overflow:hidden;padding:0;background:var(--pine)}
.rom-avatar-photo img{width:100%;height:100%;object-fit:cover;display:block;border-radius:20px}
.rom-avatar-photo .ring{inset:-3px;border-radius:22px}
.rom-author h2{font-size:var(--rom-h-size,var(--step-2));color:var(--rom-h-color,var(--pine));margin:.4rem 0 .3rem;font-family:var(--rom-h-font,var(--f-display))}
.rom-author .who{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--rom-accent,var(--blaze))}
.rom-author p{color:var(--rom-b-color,var(--slate));margin:.7rem 0;font-size:var(--rom-b-size,var(--step-0));font-family:var(--rom-b-font,var(--f-body))}
.rom-trust{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 1.2rem}
.rom-trust span{font-family:var(--f-mono);font-size:.72rem;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:.35rem .75rem;color:var(--fern)}

/* =========================== GEAR =========================== */

.rom-gear-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:start}
.rom-gear-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--rom-card-bg,#fff);
  box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.rom-gear-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.rom-gear-card .rom-scene{height:190px;position:relative}
.rom-gear-card .rom-scene .badge{position:absolute;top:.7rem;left:.7rem;z-index:3;font-family:var(--f-mono);
  font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;background:var(--rom-accent,var(--blaze));color:#fff;padding:.3rem .55rem;border-radius:6px;font-weight:600}
.rom-gear-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column}
.rom-gear-body .rom-cat-tag{margin-bottom:.3rem}
.rom-gear-card h3{font-size:1.12rem;color:var(--rom-card-title,var(--pine));line-height:1.2;margin-bottom:.4rem;font-family:var(--rom-h-font,var(--f-display))}
.rom-gear-card p{font-size:var(--rom-b-size,.9rem);color:var(--rom-card-text,var(--slate));font-family:var(--rom-b-font,var(--f-body))}
.rom-gear-card .why{margin-top:.8rem;font-family:var(--f-mono);font-size:.74rem;color:var(--fern);
  border-top:1px dashed var(--line);padding-top:.7rem}
.rom-disclosure{font-family:var(--f-mono);font-size:.74rem;color:var(--slate);margin-top:1.4rem}

/* =========================== LATEST =========================== */
.rom-latest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem 3rem}
.rom-post{display:grid;grid-template-columns:88px 1fr;gap:1.1rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);align-items:center}
.rom-post .rom-scene{width:88px;height:88px;border-radius:12px}
.rom-post h3{font-size:1.12rem;color:var(--rom-card-title,var(--pine));line-height:1.25;margin:.35rem 0;font-family:var(--rom-h-font,var(--f-display))}
.rom-post:hover h3{color:var(--blaze)}

/* =========================== CTA BAND =========================== */
.rom-cta-wrap{position:relative;overflow:hidden;isolation:isolate;background:var(--rom-bg,var(--pine-deep));color:#fff;text-align:center;
  --rom-pad-top:clamp(3rem,2rem + 4vw,5rem);--rom-pad-bottom:clamp(3rem,2rem + 4vw,5rem)}
.rom-cta-wrap .rom-contours{opacity:.1}
.rom-cta-inner{position:relative;z-index:3}
.rom-cta-wrap.rom-scope h2{font-size:var(--rom-h-size,var(--step-3));display:inline-block;max-width:20ch;margin-inline:auto;text-align:center;color:var(--rom-h-color,#fff);font-family:var(--rom-h-font,var(--f-display))}
.rom-cta-wrap p{color:var(--rom-b-color,rgba(255,255,255,.82));max-width:48ch;margin:.9rem auto 1.7rem;font-size:var(--rom-b-size,var(--step-0));font-family:var(--rom-b-font,var(--f-body))}

/* =========================== NEWSLETTER =========================== */
.rom-newsletter{position:relative;overflow:hidden;background:var(--rom-bg,var(--pine));color:#fff;
  --rom-pad-top:clamp(2.4rem,1.6rem + 3vw,4rem);--rom-pad-bottom:clamp(2.4rem,1.6rem + 3vw,4rem)}
.rom-news{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap);align-items:center;position:relative;z-index:3}
.rom-news .rom-eyebrow.on-dark{margin-bottom:.7rem}
.rom-news h2{font-size:var(--rom-h-size,var(--step-2));max-width:16ch;color:var(--rom-h-color,#fff);font-family:var(--rom-h-font,var(--f-display))}
.rom-news p{color:var(--rom-b-color,rgba(255,255,255,.82));margin-top:.6rem;max-width:44ch;font-size:var(--rom-b-size,var(--step-0));font-family:var(--rom-b-font,var(--f-body))}
.rom-news-col{position:relative;z-index:3}
.rom-news-form{display:flex;gap:.6rem;background:#fff;border-radius:999px;padding:.4rem;box-shadow:var(--shadow-lg)}
.rom-news-form input{flex:1;border:0;background:transparent;padding:.7rem 1rem;font-family:var(--f-body);font-size:1rem;color:var(--ink);min-width:0}
.rom-news-form input:focus{outline:none}
.rom-news-note{font-family:var(--f-mono);font-size:.7rem;color:rgba(255,255,255,.6);margin-top:.8rem;letter-spacing:.04em}
.rom-news-msg{font-family:var(--f-mono);font-size:.8rem;margin-top:.8rem;min-height:1.1em}
.rom-news-msg.ok{color:var(--amber)}
.rom-news-msg.err{color:#ffb4a2}

/* =========================== FAQ =========================== */
.rom-faq{max-width:800px;margin-inline:auto}
.rom-faq details{border:1px solid var(--line);border-radius:12px;margin-bottom:.8rem;background:var(--rom-card-bg,#fff);overflow:hidden}
.rom-faq details[open]{border-color:var(--fern);box-shadow:var(--shadow)}
.rom-faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font-family:var(--rom-h-font,var(--f-display));
  font-weight:600;font-size:var(--rom-h-size,1.08rem);color:var(--rom-card-title,var(--pine));display:flex;justify-content:space-between;gap:1rem;align-items:center}
.rom-faq summary::-webkit-details-marker{display:none}
.rom-faq summary .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--sage-mist);
  display:grid;place-items:center;color:var(--fern);transition:transform .2s,background .2s}
.rom-faq details[open] summary .ic{transform:rotate(45deg);background:var(--rom-accent,var(--blaze));color:#fff}
.rom-faq .ans{padding:0 1.3rem 1.2rem;color:var(--rom-b-color,var(--slate));font-size:var(--rom-b-size,var(--step-0));font-family:var(--rom-b-font,var(--f-body))}
.rom-faq-section .rom-section-head{text-align:center;margin-inline:auto}
.rom-faq-section .rom-section-head .rom-eyebrow{justify-content:center}
/* editor-only open state so questions/answers stay editable */
.rom-faq .rom-faq-item-edit{border:1px solid var(--fern);border-radius:12px;margin-bottom:.8rem;background:var(--rom-card-bg,#fff);overflow:hidden;box-shadow:var(--shadow)}
.rom-faq .rom-faq-sum{padding:1.1rem 1.3rem;font-family:var(--rom-h-font,var(--f-display));font-weight:600;font-size:var(--rom-h-size,1.08rem);color:var(--rom-card-title,var(--pine));display:flex;justify-content:space-between;gap:1rem;align-items:center}
.rom-faq .rom-faq-sum .ic{flex:none;width:26px;height:26px;border-radius:50%;background:var(--rom-accent,var(--blaze));color:#fff;display:grid;place-items:center}

/* =========================== RESPONSIVE =========================== */
@media(max-width:960px){
  .rom-cat-grid{grid-template-columns:repeat(2,1fr)}
  .rom-gear-grid{grid-template-columns:repeat(2,1fr)}
  .rom-mag{grid-template-columns:1fr}
  .rom-news{grid-template-columns:1fr}
}
@media(max-width:620px){
  .rom-cat-grid,.rom-gear-grid,.rom-latest-grid{grid-template-columns:1fr}
  .rom-author{grid-template-columns:1fr;text-align:center;justify-items:center}
  .rom-avatar{margin-inline:auto}
  .rom-trust{justify-content:center}
  .rom-hero-stats{gap:1.4rem 2rem}
}
@media(prefers-reduced-motion:reduce){
  .rom-scope *{animation:none!important;transition:none!important}
}

/* editor niceties: keep blocks readable inside the canvas */
.editor-styles-wrapper .rom-block{max-width:none}
.rom-scope .rom-editable:empty::before{content:attr(data-ph);opacity:.5}

/* =========================== ABOUT: HERO =========================== */
.rom-about-hero{position:relative;overflow:hidden;color:#fff;background:var(--rom-bg,var(--pine));
  --rom-pad-top:clamp(3.4rem,2.4rem + 6vw,6.5rem);--rom-pad-bottom:clamp(3.4rem,2.4rem + 6vw,6.5rem)}
.rom-about-hero .rom-scene{position:absolute;inset:0;z-index:0}
.rom-about-hero .rom-hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,39,29,.45) 0%,rgba(12,39,29,.7) 55%,rgba(12,39,29,.92) 100%)}
.rom-about-hero .rom-contours{z-index:2}
.rom-about-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(1.6rem,1rem + 3vw,3.4rem);align-items:center}
.rom-about-copy h1{font-size:var(--rom-h-size,var(--step-4));font-weight:800;max-width:18ch;margin:.5rem 0 1rem !important;color:var(--rom-h-color,#fff);font-family:var(--rom-h-font,var(--f-display))}
.rom-about-copy p{color:var(--rom-b-color,rgba(255,255,255,.88));max-width:52ch;font-size:var(--rom-b-size,var(--step-1));font-family:var(--rom-b-font,var(--f-body))}
.rom-about-portrait{justify-self:center;width:min(320px,80%);aspect-ratio:2 / 3;border-radius:20px;overflow:hidden;position:relative;
  border:3px solid rgba(255,255,255,.9);box-shadow:var(--shadow-lg);background:var(--pine)}
.rom-about-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.rom-about-portrait .ring{position:absolute;inset:-3px;border-radius:22px;border:2px solid var(--amber);opacity:.65}
@media(max-width:820px){
  .rom-about-inner{grid-template-columns:1fr;text-align:left}
  .rom-about-portrait{order:-1;justify-self:start;width:min(240px,70%)}
}

/* =========================== ABOUT: PROSE =========================== */
.rom-prose{background:var(--rom-bg,transparent)}
.rom-prose-inner{max-width:760px}
.rom-prose-inner.is-center{margin-inline:auto;text-align:center}
.rom-prose-inner.is-center .rom-eyebrow{justify-content:center}
.rom-prose h2{font-size:var(--rom-h-size,var(--step-3));margin:.5rem 0 1rem !important;color:var(--rom-h-color,var(--pine));font-family:var(--rom-h-font,var(--f-display))}
.rom-prose p{color:var(--rom-b-color,var(--slate));font-size:var(--rom-b-size,var(--step-1));font-family:var(--rom-b-font,var(--f-body));margin:0 0 1.05rem}
.rom-prose p:last-child{margin-bottom:0}

/* =========================== ABOUT: PHOTO STRIP =========================== */
.rom-photostrip{background:var(--rom-bg,var(--sage-mist))}
.rom-photostrip .rom-section-head{text-align:center;margin-inline:auto}
.rom-photostrip .rom-section-head .rom-eyebrow{justify-content:center}
.rom-ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.rom-ps-item{border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow);border:1px solid var(--line)}
.rom-ps-item .rom-ps-photo{aspect-ratio:3 / 2;overflow:hidden;background:var(--pine)}
.rom-ps-item img{width:100%;height:100%;object-fit:cover;display:block}
.rom-ps-cap{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.04em;color:var(--slate);padding:.75rem .9rem}
@media(max-width:820px){.rom-ps-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.rom-ps-grid{grid-template-columns:1fr}}

/* =========================== CONTACT =========================== */
.rom-contact-inner{max-width:640px;margin-inline:auto}
.rom-contact h2{font-size:var(--rom-h-size,var(--step-3));margin:.5rem 0 .8rem !important;color:var(--rom-h-color,var(--pine));font-family:var(--rom-h-font,var(--f-display))}
.rom-contact p.rom-contact-lede{color:var(--rom-b-color,var(--slate));font-size:var(--rom-b-size,var(--step-1));font-family:var(--rom-b-font,var(--f-body));margin-bottom:1.6rem}
.rom-contact-form{display:grid;gap:1rem;background:var(--rom-card-bg,#fff);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.3rem,1rem + 2vw,2rem);box-shadow:var(--shadow);text-align:left}
.rom-field{display:flex;flex-direction:column;gap:.4rem}
.rom-field label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fern)}
.rom-field input,.rom-field textarea{border:1px solid var(--line);border-radius:10px;padding:.7rem .85rem;font-family:var(--f-body);font-size:1rem;color:var(--ink);background:#fff;width:100%}
.rom-field input:focus,.rom-field textarea:focus{outline:none;border-color:var(--fern);box-shadow:0 0 0 3px rgba(46,110,78,.14)}
.rom-field textarea{min-height:130px;resize:vertical}
.rom-contact-form .rom-btn{justify-self:start}
.rom-c-status{font-family:var(--f-mono);font-size:.8rem;min-height:1.1em;margin:0}
.rom-c-status.ok{color:var(--fern)}
.rom-c-status.err{color:#c0392b}