/* ORFloors — design option D "Field Note", owner-approved 2026-08-09.
 * See scratchpad/or_design_css.py for the full rationale and the load-bearing rules.
 */

:root{
  --or-bg:#0F1418;        /* the ground */
  --or-panel:#161D22;     /* cards */
  --or-panel2:#1B242A;
  --or-line:#26333A;
  --or-ink:#EDF2F4;
  --or-mut:#93A5AE;
  --or-acc:#E4712B;       /* Oregon clay */
  --or-acc-dk:#C75D1E;
  --or-ok:#5FBF8F;
}

body.or-page{
  background:var(--or-bg); color:var(--or-ink);
  font:16px/1.62 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;
}
body.or-page h1,body.or-page h2,body.or-page h3,body.or-page h4{
  font-family:"Archivo Narrow","Roboto Condensed",ui-sans-serif,system-ui,sans-serif;
  font-weight:700; letter-spacing:-.008em; color:var(--or-ink);
}
body.or-page a{color:inherit}
body.or-page a:hover{color:var(--or-acc)}
.or-wrap{max-width:1320px;margin:0 auto;padding:0 22px}

/* ---------------------------------------------------------------- top bar */
/* ⛔ OWNER 2026-08-09: "underline moto omitted under orfloors. Also the top menu has no
   padding/space from browser menu". Both were mine. The strapline was killed outright by a
   `display:none` left over from an earlier masthead, and the bar sat hard against the top of the
   viewport with the wordmark's own underline touching it. A masthead needs air above it. */
.or-hdr{background:var(--or-bg);border-bottom:1px solid var(--or-line);position:relative}
.or-hdr .or-wrap{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:14px}
.or-mh-rule{display:none}
.or-id{flex:0 0 auto;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.or-brand{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.or-brand .bn{font:700 20px/1 "Archivo Narrow","Roboto Condensed",sans-serif;
  letter-spacing:-.01em;border-bottom:2px solid var(--or-acc);padding-bottom:3px}
.or-brand .bn em{font-style:normal;color:var(--or-acc)}
.or-mh-sub{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--or-mut);
  white-space:nowrap}
@media(max-width:520px){.or-mh-sub{display:none}}
.or-nav{margin-left:auto;gap:20px;font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--or-mut);padding:0}
.or-nav a{border-bottom:0;text-decoration:none}
.or-nav a:hover{color:var(--or-acc)}
/* ⚠️ THE NAV DROPDOWN HAD NO BACKGROUND OF ITS OWN. I styled the bar and the links but never
   `.or-sub`, so its muted-grey labels sat on transparency over the hero photograph — a measured
   1.55:1. A dropdown is a floating panel: it needs its own opaque ground, always. */
/* ⛔ AND THE SAME EDIT DROPPED THE HIDE/HOVER RULES ALTOGETHER, so all five dropdowns rendered
   permanently open across the top of every page. Styling `.or-sub` without restating its
   positioning is not enough: on desktop this element only exists on hover, so the display,
   position and offset belong in THIS block, never inherited from a rule that may not survive
   the next rewrite. Owner caught it on the homepage: "this menus on top look odd". */
.or-nav > li{position:relative}
.or-sub{display:none;position:absolute;top:100%;left:0;z-index:60;list-style:none;margin:0;
  background:var(--or-panel);border:1px solid var(--or-line);border-top:2px solid var(--or-acc);
  border-radius:0 0 3px 3px;padding:6px 0;min-width:220px;box-shadow:0 16px 34px rgba(4,7,9,.55)}
.or-nav > li:hover > .or-sub,
.or-nav > li:focus-within > .or-sub{display:block}
.or-sub a{display:block;padding:8px 15px;font-size:13.5px;letter-spacing:0;text-transform:none;
  color:var(--or-ink);text-decoration:none;white-space:nowrap}
.or-sub a:hover{background:var(--or-panel2);color:var(--or-acc)}
.or-caret{margin-left:5px;opacity:.6}
@media(max-width:860px){
  /* the mobile drawer lists everything inline — there is nothing to hover, so it stays open */
  .or-sub{display:block;position:static;box-shadow:none;border:0;
    border-top:1px solid var(--or-line);border-radius:0;padding:0 0 0 12px;min-width:0;
    background:transparent}
  .or-sub a{padding:8px 0}
}

.or-navtoggle{margin-left:auto;background:none;border:1px solid var(--or-line);color:var(--or-ink);
  border-radius:3px;padding:7px 12px;font:12px inherit;letter-spacing:.1em;text-transform:uppercase}
@media(min-width:861px){.or-navtoggle{display:none}.or-nav{display:flex}}
@media(max-width:860px){
  .or-navtoggle{display:block}
  .or-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
    flex-direction:column;gap:0;background:var(--or-panel);border-bottom:2px solid var(--or-acc);
    padding:6px 22px 14px}
  .or-nav.open{display:flex}
  .or-nav > li{width:100%;border-top:1px solid var(--or-line)}
  .or-nav > li > a{display:block;padding:11px 0}
}

/* ---------------------------------------------------------------- hero card */
.or-hero{position:relative;margin:18px 0 0;background:transparent;min-height:0;padding:0}
.or-hero::after{display:none}
.or-hero .or-wrap{padding:0 22px}
.or-hero .inner{position:relative;z-index:2;padding:30px 28px;max-width:none}
/* ⛔ OWNER: "wider band showing hero image" — this was a 210px strip. */
.or-leadshot{position:absolute;inset:0;overflow:hidden;border-radius:4px}
.or-leadshot img{
  position:absolute !important;inset:0 !important;
  width:100% !important;height:100% !important;object-fit:cover;
  /* ⚠️ Tuned to THIS photograph (#8143679, herringbone living room): the floor runs across the
     lower half, so bias down. Re-check whenever the hero image changes. */
  object-position:var(--or-focus,50% 78%);display:block;max-width:none}
.or-herocard{position:relative;border:1px solid var(--or-line);border-radius:4px;overflow:hidden;
  min-height:clamp(320px,36vw,500px);display:flex;align-items:flex-start}
/* ⚠️ The scrim is confined to the headline block. At full width and 90% it covered the floor,
   which is the one thing a flooring hero must show. Text shadow holds the contrast. */
.or-herocard::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(9,12,15,.88) 0 26%,rgba(9,12,15,.58) 46%,
    rgba(9,12,15,.20) 66%,rgba(9,12,15,0) 84%)}
body.or-page .or-hero h1{font-size:clamp(26px,3.3vw,42px);line-height:1.07;max-width:19ch;
  margin:0;text-shadow:0 1px 14px rgba(6,9,11,.8)}
.or-hero p{margin:11px 0 0;color:#C8D6DD;font-size:16px;max-width:52ch;
  text-shadow:0 1px 12px rgba(6,9,11,.7)}
.or-eyebrow{color:var(--or-acc);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:10px;text-shadow:0 1px 10px rgba(6,9,11,.8)}
.or-hero.sm .or-herocard{min-height:clamp(230px,24vw,330px)}

/* ---------------------------------------------------------------- sections & cards */
.or-sec{padding:26px 0;border-bottom:1px solid var(--or-line)}
.or-sec > .or-wrap > *{min-width:0}
.or-sec h2{font-size:clamp(20px,2.4vw,28px)}
.or-num{color:var(--or-acc);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.or-lede{color:var(--or-mut);font-size:16px;max-width:62ch}
.or-alert{background:var(--or-panel);border:1px solid var(--or-line);border-left:3px solid var(--or-acc);
  border-radius:3px;padding:14px 16px;color:var(--or-mut);font-size:14.5px}

/* THE SIGNATURE: figures as monospace tiles */
.or-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}
.or-facts .f,.or-facts > div{background:var(--or-panel);border:1px solid var(--or-line);
  border-radius:3px;padding:14px 15px;min-width:0}
.or-facts .n{display:block;font:700 25px/1.1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  color:var(--or-acc);letter-spacing:-.02em}
.or-facts .t{display:block;margin-top:7px;color:var(--or-mut);font-size:13px;line-height:1.45}

/* tables: ruled, dark, monospace prices */
.or-tablewrap{overflow-x:auto}
.or-tablewrap table,table.or-costs,table.or-cities{min-width:0;width:100%;border-collapse:collapse;
  table-layout:fixed;font-size:15px}
table.or-costs th,table.or-cities th{text-align:left;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--or-mut);border-bottom:1px solid var(--or-line);
  padding:9px 10px 9px 0;font-weight:600}
table.or-costs td,table.or-cities td{padding:11px 10px 11px 0;border-bottom:1px solid var(--or-line);
  overflow-wrap:anywhere}
table.or-costs td.p,table.or-cities td.p{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--or-acc);text-align:right;white-space:nowrap}
@media(max-width:560px){
  table.or-costs .u,table.or-cities th:nth-child(3),table.or-cities td:nth-child(3){display:none}
  table.or-costs,table.or-cities{font-size:13.5px}
  table.or-cities th{white-space:normal;overflow-wrap:anywhere}
}

/* material + room tiles */
.or-mgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:16px}
.or-mcard{background:var(--or-panel);border:1px solid var(--or-line);border-radius:3px;
  overflow:hidden;text-decoration:none;display:block;min-width:0}
.or-mcard img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.or-mcard h3{font-size:16px;margin:0;padding:13px 14px 0}
.or-mcard p{margin:6px 0 0;padding:0 14px 14px;color:var(--or-mut);font-size:14px}
.or-mcard:hover{border-color:var(--or-acc)}
.or-rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:16px}
.or-room{position:relative;display:block;border-radius:3px;overflow:hidden;min-height:132px;
  text-decoration:none;border:1px solid var(--or-line)}
.or-room img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* ⚠️ A scrim that exists is not a scrim that works. This gradient ran transparent -> .9 across the
   label box, and the <h3> sits at the TOP of that box — so the heading glyphs landed where the
   gradient is still almost clear, over whatever the photograph happened to be. Measured under the
   glyphs: 'Kitchen' 2.53:1, 'Stairs' 3.96:1, 'Bedrooms' 4.06:1, each failing by a different amount
   because each tile has a different photo behind it. The ramp now reaches strength ABOVE the first
   line of type, and the extra top padding is the transparent part of it. */
.or-room .lab{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 13px 12px;
  background:linear-gradient(180deg,rgba(8,11,14,0) 0%,rgba(8,11,14,.42) 24%,
    rgba(8,11,14,.88) 46%,rgba(8,11,14,.97) 100%)}
.or-room h3{font-size:14.5px;margin:0;color:#fff}
.or-room p{margin:3px 0 0;font-size:12.5px;color:#C8D6DD}
.or-room:hover{border-color:var(--or-acc)}

/* cities + notes + faq */
.or-cities{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.or-cities a{background:var(--or-panel);border:1px solid var(--or-line);border-radius:3px;
  padding:8px 12px;font-size:14px;text-decoration:none}
.or-cities a:hover{border-color:var(--or-acc)}
.or-notes{margin-top:14px}
.or-note-row{background:var(--or-panel);border:1px solid var(--or-line);border-left:3px solid var(--or-acc);
  border-radius:3px;padding:15px 17px;margin-bottom:11px}
.or-note-row h3{font-size:17px;margin:0 0 7px}
.or-note-row p{margin:0;color:var(--or-mut);font-size:15px}
.or-faq details{border-bottom:1px solid var(--or-line);padding:12px 0}
.or-faq summary{cursor:pointer;font-weight:600;font-size:16px}
.or-faq p{color:var(--or-mut);margin:9px 0 0;font-size:15px}

/* buttons — ⚠️ body.or-page a{color:inherit} outranks .or-btn, so set colour at this specificity */
.or-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.or-btn{display:inline-block;background:#B4541A;padding:11px 20px;border-radius:3px;
  font-weight:600;font-size:15px;text-decoration:none;border:1px solid #B4541A}
.or-btn.alt{background:transparent;border-color:var(--or-line)}
/* ⚠️ WHITE ON THIS ORANGE IS 3.14:1 — it fails WCAG AA (4.5) and shipped that way on the first
   render. Dark ink on the same orange is 5.91:1, so the accent stays bright and the label
   becomes legible. Measured, not eyeballed: the verifier samples UNDER the glyphs. */
/* ⛔ OWNER 2026-08-09: "this estimate button background colors hides the writing". Dark ink on
   the bright orange measured 5.91:1 and still read badly at a glance. White on a DARKER orange is
   the conventional, unambiguous button: #fff on #B4541A = 4.97:1, hover #A34A14 = 5.92:1. The
   bright accent stays everywhere else. Legibility beats a measurement that technically passes. */
body.or-page a.or-btn{color:#fff}
body.or-page a.or-btn.alt{color:var(--or-ink)}
body.or-page a.or-btn:hover{background:#A34A14;color:#fff}

/* estimator — the tool leads in this design */
.or-est,.or-panel{background:var(--or-panel);border:1px solid var(--or-acc);border-radius:4px;padding:18px}
.or-est label,.or-panel label{color:var(--or-mut);font-size:12px;letter-spacing:.04em}
.or-est select,.or-est input,.or-panel select,.or-panel input{
  background:#0C1317;color:var(--or-ink);border:1px solid var(--or-line);border-radius:3px;
  padding:9px 10px;font:15px inherit;width:100%}
.or-est .go,.or-panel .go{background:#B4541A;color:#fff;border:0;border-radius:3px;
  padding:12px 18px;font:600 15px inherit;width:100%;cursor:pointer}
/* ⚠️ The result block needs LAYOUT, not just colour — four sites rendered
   "Materials$1,100 – $3,250" run together because only the colour was styled. */
.or-est-result{margin-top:14px}
.or-est-result .row{display:flex;justify-content:space-between;gap:14px;padding:8px 0;
  border-bottom:1px solid var(--or-line)}
.or-est-result .row .v{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--or-acc);
  white-space:nowrap}
.or-est-result .total{font-size:19px;font-weight:700}

/* footer */
.or-ft{background:#0B1014;border-top:1px solid var(--or-line);margin-top:26px;padding:26px 0 18px;
  color:var(--or-mut);font-size:14px}
.or-ft-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}
.or-ft-brand{font:700 18px "Archivo Narrow",sans-serif;color:#fff}
.or-ft-brand em{font-style:normal;color:var(--or-acc)}
.or-ft-tag{margin-top:5px;font-size:12.5px;color:var(--or-acc)}
.or-ft a{text-decoration:none;display:block;padding:3px 0}
.or-ft h4{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--or-mut);margin:0 0 7px}
.or-ft-sep{border-top:1px solid var(--or-line);margin-top:20px;padding-top:14px;font-size:12.5px}


/* ---------------------------------------------------------------- GENERATEPRESS OVERRIDES
   ⚠️ I DROPPED THESE when I replaced the whole stylesheet with option D, and the theme's own
   header, sidebar, entry title and body colours came straight back through — a WordPress search
   widget and "Recent Comments" appeared beside a dark dashboard. Rewriting a design layer means
   re-carrying every rule that suppresses the theme, not just the ones that style our own markup.
   The site is DARK now, so the theme's light defaults have to be beaten on colour too. */
body.or-page .site-header,
body.or-page .site-info,
body.or-page #right-sidebar,
body.or-page #left-sidebar,
body.or-page .widget-area,
body.or-page .sidebar,
body.or-page .page-header,
body.or-page footer.site-footer,
body.or-page .footer-widgets{ display:none !important; }

body.or-page .site-content{ display:block; }
body.or-page .site,
body.or-page #page,
body.or-page .site-content,
body.or-page #content,
body.or-page #primary,
body.or-page .content-area{ background:var(--or-bg); color:var(--or-ink); max-width:none;
  width:100%; margin:0; padding:0; float:none; }
body.or-fullbleed .inside-article{ padding:0; background:transparent; border:0; box-shadow:none; }
body.or-fullbleed .entry-content{ margin:0; }
body.or-fullbleed .entry-title{ display:none; }

/* article pages keep a readable measure, on the same dark ground */
body.or-article .inside-article{ max-width:820px; margin:0 auto; padding:34px 22px 26px;
  background:transparent; border:0; box-shadow:none; }
/* ⛔ was `body.or-article .entry-title` — see the or-hashero note in sc-or-design.php. Only hide
   the theme's title where a hero renders one; otherwise the page ships with no visible h1. */
/* ⛔ `.entry-header` was in the blanket hide list above, which meant hiding the title was decided
   in two places at once — so scoping `.entry-title` to or-hashero changed nothing and the page
   still shipped headless. Hide the WRAPPER on the same condition as the thing inside it. */
body.or-hashero .entry-title,
body.or-hashero .entry-header,
body.or-fullbleed .entry-header{ display:none !important; }
body.or-article .entry-content{ margin:0; font-size:16.5px; line-height:1.72; color:var(--or-ink); }
body.or-article .entry-content h2{ font-size:24px; margin:38px 0 0; }
body.or-article .entry-content h3{ font-size:18px; margin:28px 0 0; }
body.or-article .entry-content p{ margin:14px 0 0; color:#D6E1E6; }
body.or-article .entry-content ul,body.or-article .entry-content ol{ margin:14px 0 0; padding-left:22px; }
body.or-article .entry-content li{ margin-bottom:7px; color:#D6E1E6; }
body.or-article .entry-content li::marker{ color:var(--or-acc); }
body.or-article .entry-content strong{ color:var(--or-ink); }
body.or-article .entry-content a{ color:var(--or-acc); text-underline-offset:2px; }
/* ⚠️ ...but NOT the button. The rule above is (0,2,1) and sits AFTER `body.or-page a.or-btn`,
   which is also (0,2,1) — so it won, and painted the button label the same orange as its own
   background: a measured 1.0:1. Re-assert the button here, after it. */
body.or-article .entry-content a.or-btn{ color:#fff; text-decoration:none; }
body.or-article .entry-content a.or-btn.alt{ color:var(--or-ink); }
body.or-article .entry-content img{ max-width:100%; height:auto; display:block; }

/* ⚠️ GeneratePress ships `img{height:auto}`, which beats height:100% on the hero image. */
body.or-page .or-leadshot img{ height:100% !important; }

/* ── Post meta ────────────────────────────────────────────────────────────────
   Added 2026-08-16 after verify_live.py failed the first autoblog post at 2.59:1
   on the entry date and author name — GeneratePress's default meta grey was never
   restyled for this dark ground, and no page carried post meta until the blog went
   live, so nothing had exercised it.

   The BYLINE IS HIDDEN, not merely recoloured. This site has no humans in it by
   design — no phone, no lead form, no named staff — so an author credit is a claim
   the site does not make anywhere else. It was also rendering the raw admin login
   ("orfloorsadm") on every post, which is both off-brand and free reconnaissance
   for anyone probing wp-login. The ownership page carries the real disclosure. */
.entry-meta,
.entry-meta a,
.entry-meta .entry-date,
.posted-on,
.posted-on a { color: var(--or-mut); }          /* #93A5AE on #0F1418 — clears 4.5:1 */
.entry-meta a:hover,
.posted-on a:hover { color: var(--or-ink); }
.entry-meta .byline,
.entry-meta .author,
.author-name,
.entry-meta .avatar { display: none !important; }