/* ============================================================
   Warmflow Advertising — site styles
   Editorial system built on tokens.css
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  background:var(--color-bg-base);
  color:var(--color-text-primary);
  line-height:var(--leading-relaxed);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background var(--duration-slow) var(--ease-out),
             color var(--duration-slow) var(--ease-out);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#faf9f6}

/* ── theming hooks ─────────────────────────────────────── */
:root{ --accent:#6b7055; --accent-soft:rgba(107,112,85,.10); }
[data-accent="olive"]  { --accent:#6b7055; --accent-soft:rgba(107,112,85,.12); }
[data-accent="bronze"] { --accent:#8a7055; --accent-soft:rgba(138,112,85,.12); }
[data-accent="sand"]   { --accent:#a08a55; --accent-soft:rgba(160,138,85,.14); }

[data-theme="dark"]{
  --color-bg-base:#15140f;
  --color-bg-surface:#1d1c18;
  --color-bg-subtle:#222019;
  --color-bg-dark:#0e0d0b;
  --color-bg-dark-subtle:#1a1916;
  --color-text-primary:#f1efe8;
  --color-text-secondary:#a8a69d;
  --color-text-tertiary:#6f6d64;
  --color-text-inverse:#15140f;
  --color-border:#34322c;
  --color-border-light:#26241f;
  --color-border-strong:#4a4842;
}

/* ── type roles ────────────────────────────────────────── */
.label{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  font-weight:500;
  letter-spacing:var(--tracking-widest);
  text-transform:uppercase;
  color:var(--color-text-secondary);
}
.label .accent,.accent-text{color:var(--accent)}
.mono{font-family:var(--font-mono);letter-spacing:var(--tracking-wide)}
.serif{font-family:var(--font-serif)}

.ed-title{
  font-family:var(--font-sans);
  font-weight:600;
  letter-spacing:var(--tracking-tight);
  line-height:var(--leading-tight);
}
[data-heading="serif"] .ed-title,
[data-heading="serif"] .hero-line{
  font-family:var(--font-serif);
  font-weight:400;
  letter-spacing:var(--tracking-tightest);
}
.zh{ font-feature-settings:"palt" 1; }

/* ── layout ────────────────────────────────────────────── */
.wrap{ max-width:1240px; margin:0 auto; padding:0 40px; }
.wrap-narrow{ max-width:780px; margin:0 auto; padding:0 40px; }
.section{ padding:var(--space-8) 0; }
.section-sm{ padding:var(--space-7) 0; }
.divider{ height:1px; background:var(--color-border-light); border:0; }

.sec-head{ display:flex; align-items:baseline; gap:18px; margin-bottom:var(--space-5); }
.sec-head .idx{ font-family:var(--font-mono); font-size:var(--text-sm); color:var(--accent); letter-spacing:.1em; }
.sec-head h2{ font-size:var(--text-2xl); }
.eyebrow{ display:block; margin-bottom:18px; }

/* ── nav ───────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 40px;
  background:color-mix(in srgb, var(--color-bg-base) 86%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--color-border-light);
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand .mk{
  width:30px;height:30px;border:1px solid var(--color-border-strong);
  display:grid;place-items:center;border-radius:var(--radius-xs);
  color:var(--color-text-primary);
}
.brand .mk svg{ width:17px;height:17px;display:block; }
.brand .nm{ line-height:1.1; }
.brand .nm b{ font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; display:block; }
.brand .nm small{ font-size:10px; letter-spacing:.34em; color:var(--color-text-secondary); }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{
  font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-text-secondary);
  transition:color var(--duration-base) var(--ease-out);
  position:relative; padding:4px 0;
}
.nav-links a:hover,.nav-links a.active{ color:var(--color-text-primary); }
.nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px; background:var(--accent);
}
.nav-cta{
  border:1px solid var(--color-border-strong); border-radius:var(--radius-xs);
  padding:8px 16px !important; color:var(--color-text-primary) !important; white-space:nowrap;
}
.nav-cta:hover{ background:var(--color-text-primary); color:var(--color-bg-base) !important; }
.nav-burger{ display:none; }

/* ── hero (dark) ───────────────────────────────────────── */
.hero{
  background:var(--color-bg-dark); color:#f1efe8;
  position:relative; overflow:hidden;
  padding:118px 0 96px;
}
.hero .wrap{ position:relative; z-index:2; }
.hero .logo-mark{
  width:74px; height:74px; margin-bottom:48px; opacity:.92;
  border:1px solid rgba(241,239,232,.16); padding:10px; border-radius:var(--radius-xs);
}
.hero .logo-mark svg{ width:100%; height:100%; display:block; }
.hero .eyebrow{ color:rgba(241,239,232,.55); }
.hero-line{
  font-size:clamp(40px,6.6vw,92px);
  font-weight:600; letter-spacing:var(--tracking-tight); line-height:1.04;
  margin:6px 0 4px;
}
.hero-line.zh{ font-weight:500; letter-spacing:.01em; }
.hero-sub{
  max-width:560px; margin-top:30px;
  font-size:var(--text-md); line-height:var(--leading-loose); color:rgba(241,239,232,.72);
}
.hero-services{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:42px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(241,239,232,.5);
}
.hero-services span{ display:flex; align-items:center; gap:26px; }
.hero-services span::after{ content:"/"; color:rgba(241,239,232,.25); }
.hero-services span:last-child::after{ content:""; }
.hero-glow{
  position:absolute; right:-12%; top:-10%; width:62%; height:120%;
  background:radial-gradient(closest-side, var(--accent-soft), transparent 72%);
  opacity:.6; pointer-events:none; z-index:1;
}

/* ── buttons / links ───────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:13px 22px; border-radius:var(--radius-xs);
  border:1px solid currentColor; color:var(--color-text-primary);
  transition:all var(--duration-base) var(--ease-out);
}
.btn .arr{ transition:transform var(--duration-base) var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }
.btn.solid{ background:var(--color-text-primary); color:var(--color-bg-base); border-color:transparent; }
.btn.solid:hover{ opacity:.85; }
.btn.on-dark{ color:#f1efe8; }
.btn.on-dark.solid{ background:#f1efe8; color:#15140f; }
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
}
.link-arrow .arr{ transition:transform var(--duration-base) var(--ease-out); }
.link-arrow:hover .arr{ transform:translateX(4px); }

/* ── about teaser ──────────────────────────────────────── */
.about-feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-6); align-items:center; }
.about-feature .media{ aspect-ratio:16/7; overflow:hidden; border-radius:var(--radius-sm); }
.about-feature .media img{ width:100%; height:100%; object-fit:cover; }
.about-feature h2{ font-size:var(--text-2xl); line-height:var(--leading-snug); margin:14px 0 22px; }
.about-feature p{ color:var(--color-text-secondary); font-size:var(--text-md); max-width:48ch; margin-bottom:30px; }
.quote-mark{ font-family:var(--font-serif); color:var(--accent); }

/* ── services ──────────────────────────────────────────── */
.services{ display:grid; grid-template-columns:repeat(3,1fr); }
.svc{ padding:42px 32px 48px; border-left:1px solid var(--color-border-light); position:relative; }
.svc:first-child{ border-left:0; padding-left:0; }
.svc .idx{ font-family:var(--font-mono); font-size:var(--text-sm); color:var(--accent); }
.svc h3{ font-size:var(--text-xl); margin:26px 0 16px; }
.svc .zh-sub{ color:var(--color-text-secondary); font-size:14px; margin-bottom:18px; letter-spacing:.04em; }
.svc p{ color:var(--color-text-secondary); font-size:15px; line-height:var(--leading-relaxed); }
.svc ul{ list-style:none; margin-top:20px; }
.svc li{ font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--color-text-tertiary); padding:6px 0; border-top:1px solid var(--color-border-light); }

/* ── work grid ─────────────────────────────────────────── */
.work-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4) var(--space-3); }
.card{ display:block; cursor:pointer; }
.card .frame{
  position:relative; aspect-ratio:3/2; background:#faf9f6; overflow:hidden;
  border:1px solid var(--color-border-light); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-1);
  transition:box-shadow var(--duration-slow) var(--ease-out);
}
.card .frame img{
  width:100%; height:100%; object-fit:contain; padding:2px;
  transition:transform var(--duration-slower) var(--ease-out);
}
.card:hover .frame{ box-shadow:var(--shadow-3); }
.card:hover .frame img{ transform:scale(1.025); }
.card .meta{ display:flex; align-items:baseline; gap:12px; margin-top:16px; }
.card .meta .idx{ font-family:var(--font-mono); font-size:12px; color:var(--accent); flex:none; }
.card .meta .tt{ flex:1; }
.card .tt h3{ font-size:16px; font-weight:600; letter-spacing:.01em; transition:color var(--duration-base) var(--ease-out); }
.card:hover .tt h3{ color:var(--accent); }
.card .tt .en{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em; color:var(--color-text-tertiary); margin-top:4px; }
.card .tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-text-secondary); white-space:nowrap; padding-top:2px;
}

/* full-bleed layout variant */
[data-work="full"] .work-grid{ grid-template-columns:1fr; gap:var(--space-7); }
[data-work="full"] .card{ display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-5); align-items:center; }
[data-work="full"] .card:nth-child(even){ grid-template-columns:1fr 1.4fr; }
[data-work="full"] .card:nth-child(even) .frame{ order:2; }
[data-work="full"] .card .frame{ aspect-ratio:16/10; }
[data-work="full"] .card .meta{ flex-direction:column; align-items:flex-start; gap:14px; }
[data-work="full"] .card .tt h3{ font-size:var(--text-xl); }
[data-work="full"] .card .tag{ order:-1; }

/* ── work page filter ──────────────────────────────────── */
.cat-block{ margin-bottom:var(--space-8); }
.cat-block:last-child{ margin-bottom:0; }
.cat-head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding-bottom:22px; margin-bottom:var(--space-5); border-bottom:1px solid var(--color-border); }
.cat-head h2{ font-size:var(--text-2xl); }
.cat-head .ct{ font-family:var(--font-mono); font-size:12px; color:var(--color-text-secondary); letter-spacing:.06em; }
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:var(--space-6); }
.filters button{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  padding:9px 16px; border:1px solid var(--color-border); border-radius:var(--radius-full);
  background:transparent; color:var(--color-text-secondary); cursor:pointer;
  transition:all var(--duration-base) var(--ease-out);
}
.filters button:hover{ color:var(--color-text-primary); border-color:var(--color-border-strong); }
.filters button.active{ background:var(--color-text-primary); color:var(--color-bg-base); border-color:transparent; }
.is-hidden{ display:none !important; }

/* mock feature */
.feature-mock{ background:var(--color-bg-surface); border-bottom:1px solid var(--color-border-light); }
.feature-mock-grid{ display:grid; grid-template-columns:.82fr 1.18fr; gap:var(--space-6); align-items:center; }
.feature-copy h2{ font-size:clamp(28px,3.6vw,48px); line-height:var(--leading-snug); max-width:13ch; }
.feature-copy p{ color:var(--color-text-secondary); font-size:var(--text-md); line-height:var(--leading-loose); max-width:46ch; margin-top:26px; }
.feature-proof{ display:grid; gap:10px; margin-top:34px; max-width:420px; }
.feature-proof span{
  display:flex; align-items:center; gap:16px; padding:12px 0;
  border-top:1px solid var(--color-border-light);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-text-secondary);
}
.feature-proof span:last-child{ border-bottom:1px solid var(--color-border-light); }
.feature-proof b{ color:var(--accent); font-weight:500; }
.planner-ui{
  border:1px solid var(--color-border-light); border-radius:var(--radius-sm);
  background:var(--color-bg-base); box-shadow:var(--shadow-2); overflow:hidden;
}
.planner-top{
  display:flex; justify-content:space-between; align-items:flex-start; gap:20px;
  padding:28px 30px 24px; border-bottom:1px solid var(--color-border-light);
}
.planner-top h3{ font-size:var(--text-xl); margin-top:6px; }
.status{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--color-bg-base); background:var(--accent); border-radius:var(--radius-full); padding:6px 10px;
}
.brief-panel{ display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--color-border-light); }
.brief-field{ padding:24px 30px; }
.brief-field + .brief-field{ border-left:1px solid var(--color-border-light); }
.brief-field span{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-text-tertiary); margin-bottom:10px;
}
.brief-field strong{ display:block; font-size:17px; font-weight:500; line-height:var(--leading-snug); }
.channel-map{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:24px 30px; border-bottom:1px solid var(--color-border-light); }
.channel-map button{
  min-height:38px; border:1px solid var(--color-border); border-radius:var(--radius-xs);
  background:transparent; color:var(--color-text-secondary); cursor:pointer;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
}
.channel-map button.active{ background:var(--color-text-primary); color:var(--color-bg-base); border-color:var(--color-text-primary); }
.planner-output{ display:grid; grid-template-columns:1.08fr .92fr; gap:0; }
.output-card{ padding:30px; border-right:1px solid var(--color-border-light); }
.output-card h4{ font-size:var(--text-lg); margin:12px 0 14px; }
.output-card p{ color:var(--color-text-secondary); font-size:15px; line-height:var(--leading-relaxed); }
.output-list{ display:grid; }
.output-list div{ padding:20px 24px; border-top:1px solid var(--color-border-light); }
.output-list div:first-child{ border-top:0; }
.output-list span{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin-bottom:6px;
}
.output-list strong{ display:block; font-size:15px; font-weight:500; line-height:var(--leading-snug); }

/* ── clients ───────────────────────────────────────────── */
.clients-card{
  background:#faf9f6; border:1px solid var(--color-border-light); border-radius:var(--radius-sm);
  padding:48px 56px; box-shadow:var(--shadow-1);
}
.clients-card img{ width:100%; height:auto; mix-blend-mode:multiply; }

/* ── contact / footer ──────────────────────────────────── */
.footer{ background:var(--color-bg-dark); color:#e9e7e0; padding:var(--space-8) 0 var(--space-5); }
.footer-top{ display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-6); align-items:start; }
.footer .cta-line{ font-size:clamp(28px,4vw,52px); font-weight:600; letter-spacing:var(--tracking-tight); line-height:1.1; }
.footer .logo-mark{ width:60px;height:60px;border:1px solid rgba(233,231,224,.18); padding:9px; border-radius:var(--radius-xs); margin-bottom:30px; }
.footer .logo-mark svg{ width:100%;height:100%; }
.contact-list{ display:flex; flex-direction:column; gap:2px; }
.contact-list .row{ display:flex; gap:18px; padding:14px 0; border-top:1px solid rgba(233,231,224,.12); }
.contact-list .row:last-child{ border-bottom:1px solid rgba(233,231,224,.12); }
.contact-list .k{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,231,224,.5); width:74px; flex:none; padding-top:2px; }
.contact-list .v{ font-size:15px; color:#e9e7e0; }
.contact-list a.v{ transition:color var(--duration-base) var(--ease-out); }
.contact-list a.v:hover{ color:var(--accent); }
.footer-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
.footer-links a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(233,231,224,.7); border:1px solid rgba(233,231,224,.2); border-radius:var(--radius-xs); padding:9px 14px;
  display:inline-flex; gap:8px; align-items:center;
  transition:all var(--duration-base) var(--ease-out);
}
.footer-links a:hover{ color:#15140f; background:#e9e7e0; border-color:transparent; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; margin-top:var(--space-7); padding-top:26px; border-top:1px solid rgba(233,231,224,.12); }
.footer-bottom small{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:rgba(233,231,224,.45); }

/* ── page header (work/about) ──────────────────────────── */
.page-head{ padding:var(--space-8) 0 var(--space-6); border-bottom:1px solid var(--color-border-light); }
.page-head h1{ font-size:clamp(40px,6vw,80px); font-weight:600; letter-spacing:var(--tracking-tight); line-height:1.02; }
.page-head .zh-h{ font-size:clamp(26px,3.4vw,42px); font-weight:500; color:var(--color-text-secondary); margin-top:10px; letter-spacing:.04em; }
.page-head p{ max-width:60ch; margin-top:28px; color:var(--color-text-secondary); font-size:var(--text-md); }

/* ── about page ────────────────────────────────────────── */
.about-banner-full{ width:100%; aspect-ratio:24/7; object-fit:cover; border-radius:var(--radius-sm); }
.prose p{ font-size:var(--text-md); line-height:var(--leading-loose); color:var(--color-text-primary); margin-bottom:24px; }
.prose p.lead{ font-size:var(--text-xl); line-height:var(--leading-snug); font-weight:500; }
.prose .quote-mark{ font-size:1.2em; }
.two-col{ display:grid; grid-template-columns:.8fr 1.2fr; gap:var(--space-6); }
.two-col .k-label{ position:sticky; top:90px; }
.awards{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-4); }
.award{ border:1px solid var(--color-border-light); border-radius:var(--radius-sm); padding:28px 26px; background:var(--color-bg-surface); }
.award .yr{ font-family:var(--font-mono); font-size:12px; color:var(--accent); }
.award h4{ font-size:16px; margin:14px 0 8px; }
.award p{ font-size:13px; color:var(--color-text-secondary); line-height:1.5; }

/* ── lightbox ──────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:1000; display:none;
  align-items:center; justify-content:center; padding:40px;
  background:rgba(14,13,11,.86); backdrop-filter:blur(6px);
  opacity:0; transition:opacity var(--duration-base) var(--ease-out);
}
.lightbox.open{ display:flex; opacity:1; }
.lightbox .lb-inner{ max-width:1100px; width:100%; }
.lightbox img{ width:100%; max-height:74vh; object-fit:contain; background:#faf9f6; border-radius:var(--radius-sm); }
.lightbox .lb-meta{ display:flex; align-items:baseline; gap:16px; margin-top:20px; color:#e9e7e0; }
.lightbox .lb-meta h3{ font-size:var(--text-lg); font-weight:600; }
.lightbox .lb-meta .en{ font-family:var(--font-mono); font-size:12px; color:rgba(233,231,224,.6); }
.lightbox .lb-meta .tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-left:auto; }
.lb-close{ position:absolute; top:24px; right:30px; width:42px;height:42px; border:1px solid rgba(233,231,224,.3); border-radius:var(--radius-xs); background:transparent; color:#e9e7e0; font-size:18px; cursor:pointer; transition:all var(--duration-base) var(--ease-out); }
.lb-close:hover{ background:#e9e7e0; color:#15140f; }

/* ── scroll reveal ─────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
[data-motion="off"] .reveal{ opacity:1; transform:none; transition:none; }

/* ── responsive ────────────────────────────────────────── */
@media (max-width:1000px){
  .work-grid{ grid-template-columns:repeat(2,1fr); }
  .about-feature{ grid-template-columns:1fr; gap:var(--space-4); }
  .footer-top{ grid-template-columns:1fr; gap:var(--space-5); }
  .two-col{ grid-template-columns:1fr; gap:var(--space-3); }
  .two-col .k-label{ position:static; }
  .awards{ grid-template-columns:1fr; }
  [data-work="full"] .card{ grid-template-columns:1fr !important; }
  [data-work="full"] .card .frame{ order:0 !important; }
  .feature-mock-grid{ grid-template-columns:1fr; gap:var(--space-4); }
  .feature-copy h2{ max-width:18ch; }
  .planner-output{ grid-template-columns:1fr; }
  .output-card{ border-right:0; border-bottom:1px solid var(--color-border-light); }
}
@media (max-width:720px){
  .wrap,.wrap-narrow{ padding:0 22px; }
  .nav{ padding:14px 22px; }
  .nav-links{ gap:18px; }
  .nav-links a:not(.nav-cta){ display:none; }
  .services{ grid-template-columns:1fr; }
  .svc{ border-left:0; border-top:1px solid var(--color-border-light); padding:32px 0; }
  .svc:first-child{ border-top:0; }
  .work-grid{ grid-template-columns:1fr; }
  .section{ padding:var(--space-6) 0; }
  .clients-card{ padding:28px 24px; }
  .planner-top{ padding:22px; }
  .brief-panel{ grid-template-columns:1fr; }
  .brief-field{ padding:20px 22px; }
  .brief-field + .brief-field{ border-left:0; border-top:1px solid var(--color-border-light); }
  .channel-map{ grid-template-columns:repeat(2,1fr); padding:20px 22px; }
  .output-card{ padding:22px; }
  .output-list div{ padding:18px 22px; }
}