/* Writing page specific styles. Shared tokens, nav, buttons and footer live in site.css. */

.page-writing .nav-links a[aria-current="page"]{color:var(--accent);font-weight:500}

.writing-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:72px;
  align-items:end;
  padding-top:104px;
  padding-bottom:82px;
}
.writing-hero h1{max-width:11.5ch}
.writing-hero .eyebrow{margin-bottom:22px}
.writing-hero-lede{margin-top:28px;max-width:690px;font-size:21px;line-height:1.62;color:#344054}
.writing-hero-note{
  border-top:1px solid var(--line);
  padding-top:22px;
  color:var(--muted);
  font-size:15px;
  max-width:42ch;
}
.writing-hero-note strong{display:block;color:var(--ink);font-family:Archivo,sans-serif;font-size:17px;margin-bottom:8px}

.writing-intro-strip{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.writing-intro-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.writing-intro-grid>div{padding:23px 24px;border-right:1px solid var(--line)}
.writing-intro-grid>div:first-child{padding-left:0}
.writing-intro-grid>div:last-child{border-right:0}
.writing-intro-grid strong{display:block;color:var(--ink);font-family:Archivo,sans-serif;font-size:15px;margin-bottom:4px}
.writing-intro-grid span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

.flagship-section{padding-top:92px;padding-bottom:96px}
.flagship-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 220px;
  gap:56px;
  padding:38px 40px;
  border:1px solid var(--line);
  border-top:4px solid var(--accent);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 18px 52px rgba(16,24,40,.05);
}
.flagship-kicker{font-family:"IBM Plex Mono",monospace;color:var(--accent);font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:500;margin-bottom:18px}
.flagship-card h2{font-size:clamp(31px,4vw,48px);max-width:18ch}
.flagship-card .summary{margin-top:21px;max-width:720px;color:#475467;font-size:17px;line-height:1.7}
.flagship-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}
.flagship-meta span{font:500 10.5px "IBM Plex Mono",monospace;color:#596579;border:1px solid var(--line);border-radius:999px;padding:5px 9px;background:#FBFCFD}
.flagship-action{display:inline-flex;margin-top:29px;color:var(--accent);font:500 12px "IBM Plex Mono",monospace}
.flagship-action:hover{color:var(--accent-dark)}
.flagship-result{border-left:1px solid var(--line);padding-left:30px;display:flex;flex-direction:column;justify-content:center}
.flagship-result strong{display:block;color:var(--ink);font:600 54px Archivo,sans-serif;letter-spacing:-.05em;line-height:1}
.flagship-result span{display:block;color:var(--muted);font-size:13px;margin-top:9px}
.flagship-result small{display:block;color:#475467;font-size:13.5px;line-height:1.55;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
/* Text value instead of a figure. The 54px above assumes something short like "78%";
   a phrase needs a heading size and real line-height or it stacks into a column.
   Mirrors the .text-result modifier already used on .work-result in site.css.
   Specificity 0,2,1 beats the 46px override in the media query below. */
.flagship-result.text-result strong{font-size:27px;letter-spacing:-.02em;line-height:1.18}

.secondary-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:20px}
.secondary-feature-card{display:flex;flex-direction:column;min-height:300px;padding:30px 30px 28px;border:1px solid var(--line);border-radius:10px;background:var(--surface);transition:border-color .18s,transform .18s,box-shadow .18s}
.secondary-feature-card:hover{border-color:#AFC3D8;transform:translateY(-2px);box-shadow:0 14px 38px rgba(16,24,40,.045)}
.secondary-feature-kicker{font:500 10.5px "IBM Plex Mono",monospace;color:var(--accent);text-transform:uppercase;letter-spacing:.11em;margin-bottom:22px}
.secondary-feature-card h3{font-size:clamp(24px,2.8vw,32px);max-width:19ch;margin-bottom:14px}
.secondary-feature-card>p:not(.secondary-feature-kicker){color:#475467;font-size:15px;line-height:1.65;max-width:58ch}
.secondary-feature-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.secondary-feature-meta span{font:500 10px "IBM Plex Mono",monospace;color:#596579;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:#FBFCFD}
.secondary-feature-action{display:inline-flex;margin-top:auto;padding-top:26px;color:var(--accent);font:500 11.5px "IBM Plex Mono",monospace}
.secondary-feature-action:hover{color:var(--accent-dark)}

.topic-section{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.topic-card{padding:25px 22px;border:1px solid var(--line);border-radius:8px;background:var(--paper);min-height:190px}
.topic-card span{display:block;font:500 10.5px "IBM Plex Mono",monospace;color:var(--accent);margin-bottom:30px}
.topic-card h3{font-size:19px;margin-bottom:9px}
.topic-card p{color:var(--muted);font-size:13.5px;line-height:1.55}

.recent-list{border-top:1px solid var(--line)}
.recent-item{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 165px;
  gap:30px;
  align-items:start;
  padding:30px 4px;
  border-bottom:1px solid var(--line);
}
.recent-type{font:500 10.5px "IBM Plex Mono",monospace;color:var(--accent);text-transform:uppercase;letter-spacing:.1em;padding-top:5px}
.recent-copy h3{font-size:24px;margin-bottom:9px}
.recent-copy p{color:#475467;font-size:15px;max-width:720px}
.recent-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.recent-tags span{font:500 10px "IBM Plex Mono",monospace;color:#596579;border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:var(--surface)}
.recent-action{justify-self:end;color:var(--accent);font:500 11.5px "IBM Plex Mono",monospace;padding-top:4px;white-space:nowrap}
.recent-action:hover{color:var(--accent-dark)}

.archive-empty{padding:30px 32px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;background:var(--surface);max-width:780px}
.archive-empty strong{display:block;font-family:Archivo,sans-serif;color:var(--ink);font-size:18px;margin-bottom:7px}
.archive-empty p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.65;max-width:66ch}

.writing-principles{background:var(--deep);color:var(--deep-text)}
.writing-principles .section-head h2{color:#F8FAFC}
.writing-principles .section-head p:not(.eyebrow){color:#AAB4C3}
.writing-principles .eyebrow{color:#7CC3F7}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #344054;border-bottom:1px solid #344054}
.principle-grid article{padding:28px 30px;border-right:1px solid #344054}
.principle-grid article:first-child{padding-left:0}
.principle-grid article:last-child{border-right:0}
.principle-grid span{display:block;font:500 10.5px "IBM Plex Mono",monospace;color:#7CC3F7;margin-bottom:38px}
.principle-grid h3{color:#F8FAFC;font-size:20px;margin-bottom:10px}
.principle-grid p{color:#AAB4C3;font-size:14.5px;line-height:1.6}

.writer-note{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:72px;align-items:start}
.writer-note h2{margin-top:14px;max-width:17ch}
.writer-note-copy{padding-top:18px}
.writer-note-copy p{color:var(--muted);font-size:16px;max-width:58ch}
.writer-note-copy p+p{margin-top:16px}
.writer-note-copy .text-link{margin-top:24px}
.writer-stat{margin-top:28px;padding:20px 22px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;background:var(--surface)}
.writer-stat strong{display:block;color:var(--ink);font:600 25px Archivo,sans-serif;margin-bottom:3px}
.writer-stat span{display:block;color:var(--muted);font-size:12.5px}

@media (max-width:1000px){
  .writing-hero{grid-template-columns:1fr;gap:34px;padding-top:76px}
  .writing-hero-note{max-width:700px}
  .writing-intro-grid{grid-template-columns:1fr 1fr}
  .writing-intro-grid>div{border-bottom:1px solid var(--line)}
  .writing-intro-grid>div:nth-child(2){border-right:0}
  .writing-intro-grid>div:nth-last-child(-n+2){border-bottom:0}
  .flagship-card{grid-template-columns:1fr;gap:30px}
  .flagship-result{border-left:0;border-top:1px solid var(--line);padding:26px 0 0;display:block}
  .flagship-result small{max-width:620px}
  .secondary-feature-grid{grid-template-columns:1fr}
  .secondary-feature-card{min-height:0}
  .topic-grid{grid-template-columns:1fr 1fr}
  .recent-item{grid-template-columns:110px minmax(0,1fr);gap:24px}
  .recent-action{grid-column:2;justify-self:start;padding-top:0}
  .principle-grid{grid-template-columns:1fr}
  .principle-grid article,.principle-grid article:first-child{padding:24px 0;border-right:0;border-bottom:1px solid #344054}
  .principle-grid article:last-child{border-bottom:0}
  .principle-grid span{margin-bottom:18px}
  .writer-note{grid-template-columns:1fr;gap:28px}
  .writer-note-copy{padding-top:0}
}

@media (max-width:760px){
  .writing-hero{padding-top:58px;padding-bottom:58px}
  .writing-hero h1{font-size:clamp(40px,12vw,58px)}
  .writing-hero-lede{font-size:19px}
  .writing-intro-grid{grid-template-columns:1fr}
  .writing-intro-grid>div,.writing-intro-grid>div:first-child,.writing-intro-grid>div:nth-child(2),.writing-intro-grid>div:nth-last-child(-n+2){padding:17px 0;border-right:0;border-bottom:1px solid var(--line)}
  .writing-intro-grid>div:last-child{border-bottom:0}
  .flagship-section{padding-top:66px;padding-bottom:66px}
  .flagship-card{padding:26px 22px}
  .flagship-result strong{font-size:46px}
  .secondary-feature-card{padding:24px 22px}
  .topic-grid{grid-template-columns:1fr}
  .topic-card{min-height:0}
  .topic-card span{margin-bottom:18px}
  .recent-item{grid-template-columns:1fr;gap:9px;padding:24px 0}
  .recent-action{grid-column:1}
}

.archive-preview-note{
  margin-top:16px;
  color:var(--muted);
  font:400 11px "IBM Plex Mono",monospace;
}

/* ---------------------------------------------------- subscribe block
   Not part of the v5 mockup, which dropped list capture entirely. Kept
   because the subscribers table holds real signups and nothing else on the
   site collects them. Styled with the existing tokens so it reads as native. */
.subscribe-block{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
.subscribe-label{
  margin:0 0 12px;color:var(--muted);
  font:500 11px "IBM Plex Mono",monospace;letter-spacing:.11em;text-transform:uppercase;
}
.subscribe-form{display:flex;flex-wrap:wrap;gap:10px}
.subscribe-form .field{
  flex:1;min-width:210px;padding:11px 14px;
  border:1px solid var(--line);border-radius:6px;background:var(--surface);
  color:var(--ink);font:400 15px "IBM Plex Sans",sans-serif;
}
.subscribe-form .field::placeholder{color:var(--muted)}
.subscribe-form .field:focus{outline:none;border-color:var(--accent)}
.subscribe-note{
  margin:0 0 14px;padding-left:12px;border-left:2px solid var(--accent);
  color:#475467;font-size:13.5px;line-height:1.5;
}
.subscribe-note.bad{border-left-color:#B42318}