/* VXQN — brand unification layer.
   Loaded LAST on sub-pages (after enterprise.css + pages.css + prod.css).
   Remaps the Enterprise "blue" token system onto the Version-N champagne-gold
   brand so every inner page matches the homepage without rewriting markup. */

:root{
  /* surfaces — Version-N near-black graphite */
  --bg:#0A0B0F;
  --bg-1:#0E1014;
  --bg-2:#12151C;
  --bg-3:#1A1F29;
  --bg-4:#222834;
  --line:rgba(255,255,255,0.06);
  --line-2:rgba(255,255,255,0.10);
  --line-3:rgba(255,255,255,0.16);

  /* text scale */
  --fg:#F8F8F5;
  --fg-2:#C6CCD4;
  --fg-3:#9EA6B2;
  --fg-4:#646C78;
  --fg-5:#414853;

  /* accent — champagne gold */
  --accent:#C7A86D;
  --accent-2:#B89858;
  --accent-soft:rgba(199,168,109,0.12);
  --accent-line:rgba(199,168,109,0.30);

  /* semantic */
  --moss:#2F9E44;
  --warn:#D97706;
  --crit:#DC2626;

  /* type — Version-N: Instrument Serif display, Inter body, JetBrains mono */
  --sans:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --display:"Instrument Serif","Canela",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* Instrument Serif ships weight 400 only — never synthesize faux-bold (keeps the
   editorial serif looking exactly like the Version-N homepage). Inter/JetBrains
   have real weights so this only affects the serif. */
*{font-synthesis:none}

/* Display headings render at the serif's natural 400, like Version-N. */
.h-display,.h1,.h2{font-family:var(--display);font-weight:400}
.h-display{letter-spacing:-0.018em;line-height:1.02}
.h1{letter-spacing:-0.015em;line-height:1.06}
.h2{letter-spacing:-0.012em;line-height:1.12}
/* h3 stays sans (matches Version-N's Inter 600 sub-heads). */
.h3{font-family:var(--sans);font-weight:600;letter-spacing:-0.012em}

/* Gold accent needs dark text for AA contrast (Version-N uses #08090B on gold). */
.btn.accent{color:#08090B}
.btn.accent:hover{color:#08090B}
.btn.solid:hover{color:#08090B}
.skip{color:#08090B}

/* Italicised accent emphasis in display headings → gold italic, like the homepage. */
.h-display em,.h1 em,.hero-l .h-display em{color:var(--accent);font-style:italic}

/* Brand wordmark in nav/footer: image, not the old blue chevron text. */
.brand img{height:20px;width:auto;display:block}
.site-foot-brand .brand img{height:22px}

/* ===== form controls — readable dropdowns on the dark theme ===== */
/* The native <option> popup defaults to a white background; with light text that
   made dropdowns white-on-white. Force solid dark surfaces + a custom gold chevron. */
.field select{
  background-color:#12151C;color:var(--fg);
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23C7A86D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:12px;
  padding-right:38px;cursor:pointer;
}
.field select option,
select option{
  background-color:#12151C;color:#F8F8F5;
}
/* champagne-gold focus glow (replaces the leftover blue) */
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(199,168,109,0.14);
}

/* ===== Field Notes (blog) ===== */
.blog-head{max-width:760px;margin:0 auto;padding:84px 32px 36px;text-align:center}
.blog-head .lede{margin:18px auto 0}
.blog-wrap{max-width:1120px;margin:0 auto;padding:0 32px 104px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.post-card{display:flex;flex-direction:column;background:var(--bg-2);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;transition:border-color .18s,transform .18s,box-shadow .18s}
.post-card:hover{border-color:var(--line-3);transform:translateY(-2px);box-shadow:0 18px 40px rgba(0,0,0,0.35)}
.post-card a{display:flex;flex-direction:column;flex:1;color:inherit}
.post-card .pc-thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--bg-3);display:block}
.post-card .pc-body{padding:22px;display:flex;flex-direction:column;gap:11px;flex:1}
.post-card .pc-meta{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--fg-4)}
.post-card .pc-title{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.2;letter-spacing:-0.012em;color:var(--fg)}
.post-card:hover .pc-title{color:var(--accent)}
.post-card .pc-ex{font-size:14px;color:var(--fg-3);line-height:1.55;flex:1}
.post-card .pc-more{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent)}
.blog-empty{text-align:center;color:var(--fg-3);padding:64px 24px;border:1px dashed var(--line-2);border-radius:14px}

.post-article{max-width:720px;margin:0 auto;padding:72px 32px 104px}
.post-article .post-back{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:14px;margin-bottom:28px}
.post-article .post-meta{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:var(--fg-4);margin-bottom:14px}
.post-article .post-title{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-0.02em;margin-bottom:18px;color:var(--ink,var(--fg))}
.post-article .post-thumb{width:100%;border-radius:14px;margin:8px 0 32px}
.post-article .post-foot{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap;align-items:center}

.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line-2);border-radius:8px;color:var(--fg-2);margin:4px;font-size:14px;text-decoration:none}
.page-numbers.current{background:var(--accent);color:#08090B;border-color:var(--accent)}
.page-numbers:hover:not(.current){border-color:var(--accent);color:var(--fg)}
nav.pagination,.posts-navigation,.nav-links{margin-top:48px;text-align:center}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}

/* =====================================================================
   Responsive — Field Notes blog (tablet ~820px, phone ~480/640px,
   small-phone ~400px). Desktop layout above is untouched; these blocks
   only ADD/REFINE at max-width breakpoints. Goals: single-column grids,
   no horizontal overflow, smaller headings + reduced padding on phones.
   ===================================================================== */

/* Tablet — trim oversized section padding so wide blocks breathe. */
@media(max-width:820px){
  .blog-head{padding:64px 24px 32px}
  .blog-wrap{padding:0 24px 80px}
  .post-article{padding:56px 24px 80px}
}

/* Phone — collapse padding to container side gutters (~20px), make sure
   cards and rich content inside .doc-body / post bodies never overflow. */
@media(max-width:640px){
  .blog-head{padding:48px 20px 28px}
  .blog-wrap{padding:0 20px 64px}
  /* shrink the centered lede so it reads as intentional, not oversized */
  .blog-head .lede{font-size:16px;line-height:1.6;margin-top:14px}
  .post-grid{gap:16px}
  /* keep auto-fill cards from forcing a 320px track wider than the viewport */
  .post-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}

  /* card is a link — give the body comfortable padding + readable excerpt */
  .post-card .pc-body{padding:20px;gap:10px}
  .post-card .pc-ex{font-size:14px;line-height:1.55}
  /* let long titles/excerpts wrap rather than spill the card */
  .post-card .pc-title,.post-card .pc-ex,.post-card .pc-meta{overflow-wrap:anywhere}

  .post-article{padding:44px 20px 64px}
  /* back link: comfortable tap target on phones */
  .post-article .post-back{min-height:44px}
  /* long words, URLs and inline code wrap instead of pushing the page wide */
  .post-article .post-title{font-size:clamp(28px,7vw,40px);overflow-wrap:break-word;word-break:break-word}
  /* article body type stays comfortable on small screens */
  .post-article .doc-body{font-size:16px;line-height:1.7;overflow-wrap:break-word;word-break:break-word}
  .post-article .doc-body p,.post-article .doc-body li{font-size:16px;line-height:1.7}
  .post-article .doc-body img,.post-article .doc-body svg,.post-article .doc-body video,.post-article .doc-body iframe{max-width:100%;height:auto}
  .post-article .doc-body iframe{width:100%}
  .post-article .doc-body table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* code blocks scroll horizontally; inline code wraps */
  .post-article .doc-body pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .post-article .doc-body code{overflow-wrap:break-word;word-break:break-word}
  /* article footer (share / tags) wraps; links wrap long handles + tap-friendly */
  .post-article .post-foot{gap:10px 14px}
  .post-article .post-foot a{min-height:44px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
  /* tighten the empty-state and let it breathe less on phones */
  .blog-empty{padding:48px 20px}

  /* form controls: full width, 16px to avoid iOS zoom, 44px tap target */
  .field input,.field select,.field textarea{width:100%;font-size:16px}
  .field input,.field select{min-height:44px}
  /* textarea: floor the visible height so a rows="1" / short textarea still
     presents a comfortable tap target (it can only grow, never clips). */
  .field textarea{min-height:88px}

  /* pagination wraps and each control stays a comfortable tap target */
  nav.pagination,.posts-navigation,.nav-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:36px}
  .page-numbers{min-width:44px;min-height:44px;height:auto;margin:0;display:inline-flex;align-items:center;justify-content:center}
}

/* Phone (narrower) — fully single column, ensure cards fill the row. */
@media(max-width:480px){
  .post-grid{grid-template-columns:1fr}
  .post-card .pc-body{padding:18px}
  .post-card .pc-title{font-size:20px}
  /* keep the centered blog heading from looking comically large on phones */
  .blog-head .h1,.blog-head .h-display{font-size:clamp(30px,9vw,40px)}
}

/* Small-phone tuning (~360–400px) — final padding trim, keep headings sane. */
@media(max-width:400px){
  .blog-head{padding:44px 18px 24px}
  .blog-wrap{padding:0 18px 56px}
  .post-grid{gap:14px}
  .post-card .pc-body{padding:16px}
  .post-article{padding:40px 18px 56px}
  .post-article .post-title{font-size:clamp(26px,8vw,34px)}
}

/* ===== inner-page nav: logo + hamburger only on phones (Sign in / Book a
   walkthrough live in the mobile drawer, so the .tnav doesn't crowd) ===== */
@media (max-width:880px){
  .tnav .right .btn{display:none}
}