/*
Theme Name: Fred Chong Rutherford
Theme URI: https://fredchongrutherford.com
Author: Fred Chong Rutherford
Description: A warm, literary block theme — golden-hour Brooklyn brand. Reuses the approved mockup design system so WordPress renders the real design.
Version: 0.3.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: fcr
*/

:root{
  --paper:#F4EFE5; --paper-2:#EBE3D4; --paper-3:#E3D9C6;
  --ink:#221C16; --ink-soft:#574E43; --ink-faint:#938977;
  --amber:#C9701F; --amber-soft:rgba(161,85,19,.38); --dusk:#46566A; --cream:#F6F0E4;
  --rule:rgba(34,28,22,.15); --rule-strong:rgba(34,28,22,.30);
  --display:"Fraunces",Georgia,serif; --body:"Newsreader",Georgia,serif; --maxw:1100px;
}
*{box-sizing:border-box}
body.wp-singular, body{ background:var(--paper); color:var(--ink); font-family:var(--body); font-size:19px; line-height:1.62; font-weight:380; -webkit-font-smoothing:antialiased; letter-spacing:.003em; margin:0; }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(22px,6vw,72px); }
a{ color:inherit; text-decoration:none; }
.label{ font-family:var(--body); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); font-weight:480; }
.amberlink{ font-style:italic; color:var(--amber); border-bottom:1px solid var(--amber-soft); padding-bottom:1px; }
.amberlink:hover{ border-color:var(--amber); }
.inklink{ font-style:italic; border-bottom:1px solid var(--rule-strong); padding-bottom:2px; }
.inklink:hover{ border-color:var(--ink); }

/* ---------- header (solid default; transparent overlay on home) ---------- */
.site-header{ position:sticky; top:0; z-index:10; background:rgba(244,239,229,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-bottom:1px solid var(--rule); }
.site-header .nav{ display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding-block:18px; }
.site-header .mark{ font-family:var(--display); font-weight:480; font-size:1.08rem; letter-spacing:.01em; }
.site-header nav ul{ display:flex; gap:26px; list-style:none; font-size:.95rem; margin:0; padding:0; }
.site-header nav a{ color:var(--ink-soft); padding-bottom:3px; border-bottom:1px solid transparent; transition:color .25s,border-color .25s; }
.site-header nav a:hover,.site-header nav a[aria-current]{ color:var(--ink); border-color:var(--ink); }

.home .site-header{ position:absolute; left:0; right:0; top:0; background:transparent; border-bottom:0; backdrop-filter:none; }
.home .site-header .mark{ color:var(--cream); text-shadow:0 1px 14px rgba(0,0,0,.5); }
.home .site-header nav a{ color:var(--cream); opacity:.92; text-shadow:0 1px 12px rgba(0,0,0,.55); }
.home .site-header nav a:hover{ opacity:1; border-color:var(--cream); }

/* ---------- hero (home) ---------- */
.fcr-hero{ position:relative; min-height:92vh; display:flex; align-items:flex-end; background:#2a2320 center 32% / cover no-repeat; }
.fcr-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(20,16,12,.34) 0%, rgba(20,16,12,0) 26%, rgba(20,16,12,.18) 56%, rgba(18,13,9,.84) 100%); }
.fcr-hero__in{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto; padding:0 clamp(22px,6vw,72px) clamp(46px,8vh,86px); color:var(--cream); }
.fcr-hero .eyebrow{ font-size:.74rem; letter-spacing:.28em; text-transform:uppercase; color:#F0D9B8; }
.fcr-hero h1{ font-family:var(--display); font-weight:330; font-size:clamp(2rem,4.6vw,3.6rem); line-height:1.12; letter-spacing:-.014em; max-width:20ch; margin:.4em 0 0; text-shadow:0 2px 30px rgba(0,0,0,.5); }
.fcr-hero .sub{ margin-top:1.1em; max-width:46ch; color:#EDE3D2; font-size:1.02rem; font-style:italic; }
.fcr-hero .read{ display:inline-block; margin-top:1.5em; font-style:italic; color:var(--cream); border-bottom:1px solid rgba(246,240,228,.5); padding-bottom:2px; }
.fcr-hero .read:hover{ border-color:var(--cream); }
.fcr-hero .credit{ position:absolute; right:14px; bottom:10px; z-index:2; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(246,240,228,.6); }

/* ---------- generic section ---------- */
section{ padding-block:clamp(54px,8vh,98px); }
.sec > .label{ display:block; margin-bottom:26px; }

/* ---------- epigraph ---------- */
.epigraph{ padding-block:clamp(46px,7vh,82px); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.epigraph blockquote{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.32; max-width:30ch; margin:.6em 0 0; }
.epigraph cite{ display:block; margin-top:1em; font-style:normal; font-size:.8rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }

/* ---------- the work / areas (doors) ---------- */
.areas{ border-top:1px solid var(--rule); }
.area{ display:grid; grid-template-columns:minmax(140px,210px) 1fr auto; gap:28px; align-items:baseline; padding:26px 2px; border-bottom:1px solid var(--rule); transition:padding-left .3s ease; }
.area:hover{ padding-left:14px; }
.area h3{ font-family:var(--display); font-weight:420; font-size:clamp(1.3rem,2vw,1.6rem); margin:0; }
.area p{ color:var(--ink-soft); font-size:1rem; max-width:46ch; margin:0; }
.area .more{ font-style:italic; color:var(--amber); white-space:nowrap; font-size:.95rem; }

/* ---------- about (home) ---------- */
.about{ background:var(--paper-2); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.about .grid{ display:grid; grid-template-columns:300px 1fr; gap:clamp(28px,5vw,64px); align-items:start; }
.about .portrait{ width:100%; aspect-ratio:4/5; object-fit:cover; display:block; }
.about .pcap{ font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-top:10px; }
.about p{ font-family:var(--display); font-weight:320; font-size:clamp(1.2rem,2.1vw,1.6rem); line-height:1.42; max-width:34ch; margin:0; }
.about p.body{ font-family:var(--body); font-size:clamp(1.02rem,1.6vw,1.15rem); color:var(--ink-soft); margin-top:1em; max-width:46ch; }
.about .bridge{ font-family:var(--body); font-size:1rem; color:var(--ink-soft); margin-top:1.6em; padding-top:1.2em; border-top:1px solid var(--rule); max-width:48ch; }

/* ---------- post list (writing index + recent), incl. Query Loop output ---------- */
.list{ border-top:1px solid var(--rule); }
.post-row{ display:grid; grid-template-columns:minmax(120px,160px) 1fr; gap:24px; align-items:baseline; padding:22px 2px; border-bottom:1px solid var(--rule); transition:padding-left .3s ease; }
.post-row:hover{ padding-left:12px; }
.post-row .wp-block-post-date{ font-size:.82rem; letter-spacing:.05em; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.post-row .wp-block-post-title{ font-family:var(--display); font-weight:420; font-size:clamp(1.2rem,1.9vw,1.5rem); line-height:1.16; margin:0; }
.post-row .wp-block-post-title a:hover{ color:var(--amber); }
.post-row .wp-block-post-excerpt{ color:var(--ink-soft); font-size:.95rem; margin-top:4px; }
.post-row .wp-block-post-excerpt__excerpt{ margin:0; }
.post-row .wp-block-post-excerpt__more-text{ display:none; }

/* ---------- subscribe (dark) ---------- */
.subscribe{ background:var(--ink); color:var(--cream); }
.subscribe .label{ color:#E7C9A0; }
.subscribe h2{ font-family:var(--display); font-weight:340; font-size:clamp(1.5rem,2.6vw,2rem); line-height:1.2; max-width:22ch; letter-spacing:-.01em; margin:.4em 0 0; }
.subscribe .note{ color:#D9CDB9; margin:1em 0 1.4em; max-width:42ch; font-size:1rem; }
.subscribe .form{ display:flex; max-width:440px; border:1px solid rgba(246,240,228,.5); }
.subscribe .form input{ flex:1; padding:13px 16px; border:0; background:transparent; font-family:var(--body); font-size:1rem; color:var(--cream); }
.subscribe .form input::placeholder{ color:#B7AC97; }
.subscribe .form button{ border:0; background:var(--amber); color:#1a1206; padding:13px 22px; font-family:var(--body); font-size:.95rem; cursor:pointer; font-weight:500; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--rule); padding-block:46px 38px; color:var(--ink-soft); }
.site-footer .mark{ font-family:var(--display); font-weight:480; font-size:1.08rem; color:var(--ink); }
.site-footer .legal{ margin-top:30px; font-size:.82rem; color:var(--ink-faint); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }

/* ---------- sub-pages ---------- */
.crumb{ font-size:.8rem; letter-spacing:.04em; color:var(--ink-faint); }
.crumb a:hover{ color:var(--amber); }
.page-head{ padding-top:.4em; padding-bottom:clamp(24px,4vh,44px); border-bottom:1px solid var(--rule); }
.page-head h1{ font-family:var(--display); font-weight:330; font-size:clamp(2rem,4.2vw,3rem); letter-spacing:-.014em; max-width:20ch; margin:.25em 0 0; }
.page-head .tag{ color:var(--ink-soft); margin-top:.7em; max-width:54ch; }
.lead{ font-family:var(--display); font-weight:330; font-size:clamp(1.3rem,2.4vw,1.9rem); line-height:1.26; max-width:26ch; margin:0; }
.muscle{ margin-top:1.1em; color:var(--ink-soft); max-width:56ch; }
.qline{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(1.3rem,2.5vw,1.95rem); line-height:1.32; max-width:28ch; margin:1.4em 0 0; }
.credits{ border-top:1px solid var(--rule); margin-top:1.6em; }
.credit{ display:grid; grid-template-columns:minmax(150px,230px) 1fr; gap:30px; padding:24px 2px; border-bottom:1px solid var(--rule); }
.credit h3{ font-family:var(--display); font-weight:420; font-size:clamp(1.25rem,2vw,1.6rem); margin:0; }
.credit .scene{ color:var(--ink-faint); font-size:.9rem; margin-top:5px; font-style:italic; max-width:34ch; }
.credit p{ font-size:1.02rem; max-width:52ch; color:var(--ink-soft); margin:0; }
.credit h3 a,.ulink{ border-bottom:1px solid var(--rule-strong); padding-bottom:1px; transition:color .2s,border-color .2s; }
.credit h3 a:hover,.ulink:hover{ color:var(--amber); border-color:var(--amber); }
/* performance — watch / reel block (lead with proof of presence) */
.reel{ display:flex; flex-wrap:wrap; gap:14px; margin-top:20px; }
.reel-card{ display:inline-flex; align-items:center; gap:9px; padding:13px 22px; border:1px solid var(--rule-strong); font-size:1rem; color:var(--ink); transition:background .2s,border-color .2s; }
.reel-card:hover{ border-color:var(--ink); background:var(--paper-2); }
.reel-note{ color:var(--ink-faint); font-style:italic; margin-top:16px; max-width:48ch; font-size:.95rem; }
.topics{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--rule); border:1px solid var(--rule); margin-top:1.4em; }
.topic{ background:var(--paper); padding:28px; }
.topic h3{ font-family:var(--display); font-weight:420; font-size:1.4rem; margin:0 0 .4em; }
.topic p{ color:var(--ink-soft); font-size:.98rem; max-width:42ch; margin:0; }
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:1.6em; }
.shot{ position:relative; overflow:hidden; background:var(--paper-2); aspect-ratio:3/2; }
.shot.wide{ grid-column:1 / -1; aspect-ratio:16/7; }
.shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.shot.empty{ display:flex; align-items:center; justify-content:center; border:1px dashed var(--rule-strong); color:var(--ink-faint); font-style:italic; font-size:.9rem; }
.chips{ display:flex; gap:10px; flex-wrap:wrap; margin:1.6em 0 0; }
.chip{ font-size:.82rem; padding:6px 14px; border:1px solid var(--rule-strong); border-radius:999px; color:var(--ink-soft); }
.chip.on{ background:var(--ink); color:var(--cream); border-color:var(--ink); }

/* single essay reading column */
.essay{ max-width:680px; margin-inline:auto; }
.essay .wp-block-post-title{ font-family:var(--display); font-weight:340; font-size:clamp(2rem,4.2vw,3rem); letter-spacing:-.014em; line-height:1.12; }
.essay .wp-block-post-date{ font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); }

/* hide the admin-bar gap effect on the absolute home header is handled by WP; keep hero full */
@media(max-width:760px){
  .site-header nav ul{ display:none; }
  .area{ grid-template-columns:1fr; gap:8px; } .area .more{ display:none; }
  .about .grid,.topics,.gallery,.credit,.post-row{ grid-template-columns:1fr; }
  .about .portrait{ max-width:260px; }
  .shot.wide{ grid-column:auto; }
}
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---------- Software room: dense, recruiter-first ---------- */
.skills{ display:flex; flex-wrap:wrap; align-items:baseline; margin-top:1.1em; font-size:.92rem; color:var(--ink-soft) }
.skills span:not(:last-child)::after{ content:"·"; margin:0 .55em; color:var(--ink-faint) }
.topcta{ margin-top:1.1em; font-size:.92rem; color:var(--ink-soft) }
.work-group{ margin-top:1.6em }
.work-group .label{ display:block; margin-bottom:.15em }
.work-list{ border-top:1px solid var(--rule) }
/* card = one anchor; company+title left, impact middle, dates right (recruiter F-pattern scan layer) */
.work-card{ display:grid; grid-template-columns:minmax(150px,232px) 1fr auto; column-gap:28px; row-gap:2px; align-items:baseline; padding:15px 2px; border-bottom:1px solid var(--rule); color:inherit; transition:padding-left .2s ease }
.work-card:hover{ padding-left:10px }
.work-card .work-co{ font-family:var(--display); font-weight:470; font-size:clamp(1.1rem,1.55vw,1.32rem); line-height:1.12 }
.work-card:hover .work-co{ color:var(--amber) }
.work-card .work-sub{ display:block; font-family:var(--body); font-weight:400; font-size:.78rem; letter-spacing:.01em; color:var(--ink-faint); margin-top:3px }
.work-card .work-impact{ color:var(--ink); font-size:.98rem; line-height:1.42 }
.work-card .work-date{ font-size:.78rem; letter-spacing:.04em; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right }
@media(max-width:680px){ .work-card{ grid-template-columns:1fr; row-gap:4px } .work-card .work-date{ text-align:left } }
/* portfolio item (standalone page) header */
.item-head{ border-bottom:1px solid var(--rule); padding-bottom:1.3em }
.item-head .meta{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:.7em }
.item-head .impact{ font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,3vw,2.2rem); line-height:1.16; margin-top:.5em; max-width:24ch }

/* ---------- CPT single pages: structured `_fcr_*` meta (talk / story / case_study) ---------- */
/* The substance of a talk/story/case_study lives in meta, not the editor body.
   These render those facts plainly: a serif lead, a checkable metric, a fact list. */
.cpt-single .crumb{ margin-bottom:1.3em }
.cpt-lead{ font-family:var(--display); font-weight:330; font-size:clamp(1.22rem,2.2vw,1.66rem); line-height:1.3; color:var(--ink); max-width:32ch; margin:.15em 0 }
.cpt-metric{ font-family:var(--display); font-weight:400; font-style:italic; color:var(--amber); font-size:clamp(1.05rem,1.8vw,1.32rem); line-height:1.3; margin:.4em 0; max-width:34ch }
.factlist{ border-top:1px solid var(--rule); margin:1.6em 0 }
.factlist .fact{ display:grid; grid-template-columns:minmax(120px,180px) 1fr; gap:18px; padding:11px 2px; border-bottom:1px solid var(--rule); margin:0 }
.factlist dt{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); font-weight:480 }
.factlist dd{ margin:0; color:var(--ink); font-size:1rem }
.cpt-takeaway{ margin-top:1.3em; color:var(--ink-soft); max-width:54ch }
.cpt-takeaway .label{ display:block; margin-bottom:.3em }
.cpt-video{ margin-top:1.2em }
.cpt-back{ margin-top:2.5rem; border-top:1px solid var(--rule); padding-top:1.2rem }
@media(max-width:680px){ .factlist .fact{ grid-template-columns:1fr; gap:3px } }

/* ---------- Selected Performances credential block (Speaking ▸ Storytelling) ---------- */
/* A venue/credit list + clip slots + press — a credential, not a calendar.
   Venue list reuses .credits/.credit; clips reuse .reel/.reel-card. */
.perf-press{ margin-top:1.9em }
.perf-quote{ font-family:var(--display); font-style:italic; font-weight:300; font-size:clamp(1.12rem,2vw,1.5rem); line-height:1.36; max-width:36ch; margin:.6em 0 0; color:var(--ink) }
.perf-quote cite{ display:block; margin-top:.55em; font-style:normal; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint) }