/* ============================================================
   STUDIO FARRELLI — "Oxblood" V3 shared theme
   ------------------------------------------------------------
   Single source of truth for the audit-flow look (report /
   preview / sample). Defines the brand tokens AND maps the
   legacy dark-theme variable NAMES used by the existing chrome
   + audit-components.css onto Oxblood LIGHT values, so the
   components re-theme in place. Locked direction per brand:
   oxblood + cream + gold, Fraunces display, rotating maker's
   seal, "Built right. Built to last."
   ============================================================ */
:root{
  /* Brand tokens */
  --ox1:#5b1414; --ox2:#360c0c; --ox3:#1c0707;        /* dark hero ground */
  --paper:#F6F1E7; --paper2:#FCFAF4; --ink:#160F09; --soft:#3A322A;
  --ox:#8A2B22; --gold:#B07A2E; --gold-l:#F2B27A;
  --good:#2F9E6B; --warn:#C98A2B; --cost:#C44536; --line:#E5DCCC;
  --head:'Fraunces',serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
  --on-ox:#FBEFE0;                                      /* cream text on oxblood/gold */

  /* ---- Legacy aliases -> Oxblood LIGHT ----
     Old names kept so existing rules + audit-components.css work.
     KEY: the component accent (old --gold) maps to oxblood --ox, so
     `color: var(--bg)` (now cream) reads correctly on the dark accent. */
  --bg: var(--on-ox);            /* cream — used as on-accent contrast colour */
  --surface: var(--paper2);      /* cards */
  --surface-elevated:#FFFFFF;    /* elevated cards */
  --border: var(--line);
  --border-light:#DCD0BA;
  --text: var(--ink);
  --text-muted: var(--soft);
  --text-dim:#8A7D68;
  --legacy-gold: var(--ox);      /* component accent on the light sheet = oxblood */
  --gold-bright:#A8392C;         /* lighter oxblood for hover */
  --comp-ink:#433A2C;            /* body text on light (replaces old #d4d8e0) */
}
/* audit-components.css + page chrome reference --gold as the accent.
   Re-point it to oxblood for the light sheet. (Brand --gold stays --gold-l for dark.) */
:root{ --gold: var(--legacy-gold); }

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--ox3);               /* dark behind the light sheet */
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'kern','liga','calt';
}

/* Film-grain overlay (whole page) */
.grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.26;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:880px;margin:0 auto;padding:0 32px}

/* ===== DARK OXBLOOD HERO ===== */
.sf-hero{position:relative;overflow:hidden;color:#F1ECE1;
  background:radial-gradient(125% 110% at 50% 0%,var(--ox1),var(--ox2) 46%,var(--ox3));
  padding:26px 0 96px}
.sf-hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 40% at 50% 0%,rgba(255,180,120,.16),transparent 60%);
  animation:sfdrift 16s ease-in-out infinite alternate}
.sf-hero>*{position:relative}
.sf-topb{display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#d9a98f}
.sf-topb a{color:#d9a98f;text-decoration:none;transition:color .2s}
.sf-topb a:hover{color:#F1ECE1}
.sf-brand{display:flex;align-items:center;gap:10px}
.sf-seal{position:relative;width:38px;height:38px;flex:none}
.sf-seal svg{width:100%;height:100%;animation:sfspin 30s linear infinite}
.sf-seal .c{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-style:italic;font-weight:600;font-size:14px;color:var(--gold-l)}
.sf-brand .nm{font-family:var(--head);font-weight:600;font-size:16px;letter-spacing:.01em}
.sf-brand .nm em{font-style:italic;color:var(--gold-l)}

.sf-id{margin:48px 0 4px}
.sf-id .ey{font-family:var(--mono);font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-l);margin-bottom:14px}
.sf-id .ey:before{content:"";display:inline-block;width:30px;height:1px;background:var(--gold-l);margin-right:14px;vertical-align:middle}
.sf-id h1{font-family:var(--head);font-weight:300;font-size:clamp(36px,6vw,60px);line-height:1.02;
  letter-spacing:-.02em;font-variation-settings:'opsz' 144}
.sf-id .loc{font-family:var(--head);font-style:italic;font-size:16px;color:#e3c3b1;margin-top:10px}

/* Meta row inside hero */
.sf-meta{display:flex;gap:36px;flex-wrap:wrap;margin-top:30px;padding-top:22px;
  border-top:1px solid rgba(242,178,122,.22)}
.sf-meta .label{font-family:var(--mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#cfa48f;margin-bottom:5px}
.sf-meta .value{font-family:var(--head);font-size:16px;font-weight:500;color:#F1ECE1}

/* ===== LIGHT REPORT SHEET ===== */
.sf-sheet{position:relative;z-index:2;background:var(--paper);border-radius:30px 30px 0 0;
  margin-top:-44px;box-shadow:0 -20px 50px -20px rgba(0,0,0,.5)}
.sf-sheet .grainL{position:absolute;inset:0;border-radius:30px 30px 0 0;pointer-events:none;
  opacity:.18;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E")}
.sf-grip{width:46px;height:4px;border-radius:4px;background:var(--line);margin:14px auto 0}
.sf-sheet .wrap{position:relative;padding-top:8px;padding-bottom:8px}

/* ===== OXBLOOD FOOTER ===== */
.sf-footer{text-align:center;padding:40px 0 56px;background:var(--paper);color:var(--soft)}
.sf-footer .fm{font-family:var(--head);font-weight:600;font-size:19px;color:var(--ink)}
.sf-footer .fm em{font-style:italic;color:var(--ox)}
.sf-footer .tl{font-family:var(--head);font-style:italic;color:var(--ox);margin:5px 0 12px;font-size:15px}
.sf-footer .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:#6f6151}
.sf-footer a{color:var(--ox);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.sf-footer a:hover{border-bottom-color:var(--ox)}

/* ===== PRIMARY BUTTON (oxblood) ===== */
.sf-btn{display:inline-flex;align-items:center;gap:10px;background:var(--ox);color:var(--on-ox);
  font-family:var(--head);font-weight:600;font-size:16px;text-decoration:none;border:none;cursor:pointer;
  padding:15px 34px;border-radius:12px;box-shadow:0 12px 26px -12px rgba(138,43,34,.6);
  transition:transform .15s,background .2s}
.sf-btn:hover{transform:translateY(-2px);background:var(--gold-bright)}
.sf-btn .arrow{font-family:var(--head);font-style:italic}

/* Scroll-reveal */
.rv{opacity:0;transform:translateY(16px);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}

@keyframes sfspin{to{transform:rotate(360deg)}}
@keyframes sfdrift{to{transform:translate3d(0,-3%,0) scale(1.05)}}
@media (prefers-reduced-motion:reduce){
  .sf-seal svg,.sf-hero:before{animation:none}
  .rv{opacity:1;transform:none}
}
/* Never let scroll-reveal hide content when printing */
@media print{
  .rv{opacity:1 !important;transform:none !important}
  .grain,.sf-sheet .grainL{display:none}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .sf-hero{padding:22px 0 80px}
  .sf-meta{gap:22px}
}