/* ==========================================================================
   The Answer Layer - Editorial Design System
   A prestigious independent publication on digital strategy & brand building
   ========================================================================== */

/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0c0c1d;
  --body:#2e2e48;
  --muted:#6c6c8a;
  --accent:#e85d26;
  --accent-hover:#d14f1c;
  --accent-light:#fff4ef;
  --bg:#fefefe;
  --bg2:#f6f5f3;
  --border:#e4e2de;
  --dark:#161625;
  --radius:6px;
  --max:720px;
}

body{
  font-family:'Charter','Georgia','Times New Roman',serif;
  color:var(--body);
  background:var(--bg);
  line-height:1.82;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:17px;
}

h1,h2,h3,h4,h5,h6{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  line-height:1.25;
  letter-spacing:-.02em;
}

a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(232,93,38,.3);
  transition:border-color .2s,color .2s;
}
a:hover{
  border-bottom-color:var(--accent);
  color:var(--accent-hover);
}

img{max-width:100%;height:auto;display:block}
ul,ol{margin-left:20px;margin-bottom:20px}
li{margin-bottom:6px}

/* ==========================================================================
   MASTHEAD / HEADER
   ========================================================================== */
.masthead{
  border-bottom:3px solid var(--ink);
  padding:24px;
  text-align:center;
}
.masthead .name{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:1.6rem;
  font-weight:800;
  color:var(--ink);
  letter-spacing:-.04em;
  text-transform:uppercase;
}
.masthead .name a{
  color:var(--ink);
  border:none;
}
.masthead .name a:hover{
  color:var(--accent);
}
.masthead .tagline{
  font-size:.82rem;
  color:var(--muted);
  margin-top:2px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.masthead nav{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:24px;
  flex-wrap:wrap;
}
.masthead nav a{
  color:var(--muted);
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.82rem;
  border:none;
  letter-spacing:.02em;
  transition:color .2s;
}
.masthead nav a:hover{color:var(--ink)}
.masthead nav a.active{color:var(--ink);font-weight:600}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.breadcrumbs{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 24px 0;
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.78rem;
  color:var(--muted);
  letter-spacing:.02em;
}
.breadcrumbs a{
  color:var(--muted);
  border:none;
}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs .sep{margin:0 8px;opacity:.5}

/* ==========================================================================
   PAGE / MAIN CONTENT
   ========================================================================== */
.page{
  max-width:var(--max);
  margin:0 auto;
  padding:56px 24px 80px;
}
.page .issue{
  font-size:.78rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:8px;
}
.page h1{
  font-size:clamp(1.9rem,4.5vw,2.6rem);
  margin-bottom:16px;
}
.page .deck{
  font-size:1.1rem;
  color:var(--muted);
  margin-bottom:48px;
  line-height:1.65;
}
.page h2{
  font-size:1.5rem;
  margin:52px 0 16px;
}
.page h3{
  font-size:1.15rem;
  margin:36px 0 10px;
}
.page p{margin-bottom:20px}

/* Article metadata */
.article-meta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.82rem;
  color:var(--muted);
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid var(--border);
}
.article-meta .author{font-weight:600;color:var(--ink)}
.article-meta .divider{
  width:3px;height:3px;
  border-radius:50%;
  background:var(--muted);
  opacity:.5;
}

/* ==========================================================================
   PULL QUOTE
   ========================================================================== */
.pull{
  font-size:1.4rem;
  font-style:italic;
  color:var(--ink);
  border-left:4px solid var(--accent);
  padding:8px 0 8px 24px;
  margin:40px 0;
  line-height:1.5;
}

/* ==========================================================================
   HIGHLIGHT BOX
   ========================================================================== */
.highlight{
  background:var(--accent-light);
  border-radius:var(--radius);
  padding:24px 28px;
  margin:32px 0;
}
.highlight h4{
  font-size:.95rem;
  margin-bottom:8px;
  color:var(--accent);
}
.highlight p{
  margin-bottom:0;
  font-size:.95rem;
}
.highlight p+p{margin-top:12px}

/* ==========================================================================
   DATA TABLE
   ========================================================================== */
table{
  width:100%;
  border-collapse:collapse;
  margin:28px 0;
  font-size:.9rem;
}
th,td{
  padding:11px 14px;
  text-align:left;
  border-bottom:1px solid var(--border);
}
th{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-weight:600;
  background:var(--bg2);
  color:var(--ink);
}

/* ==========================================================================
   CASE STUDY / CARD
   ========================================================================== */
.case{
  background:var(--bg2);
  border-radius:var(--radius);
  padding:28px;
  margin:32px 0;
}
.case .label{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.7rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:8px;
}
.case h3{margin:0 0 10px}
.case p{font-size:.95rem;color:var(--body);margin-bottom:0}
.case p+p{margin-top:10px}
.case a{font-weight:600;display:inline-block;margin-top:12px}

/* ==========================================================================
   SIGNAL BOX (brand-authority-signals)
   ========================================================================== */
.signal{
  background:var(--bg2);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  padding:24px;
  margin:28px 0;
}
.signal .num{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:2.2rem;
  font-weight:800;
  color:var(--accent);
  line-height:1;
  margin-bottom:6px;
}
.signal h3{margin:0 0 12px;font-size:1.2rem}
.signal p{margin-bottom:10px;font-size:.95rem}

/* ==========================================================================
   TOOL BOX (resources)
   ========================================================================== */
.tool{
  background:var(--bg2);
  border-radius:var(--radius);
  padding:20px;
  margin:20px 0;
  border-left:4px solid var(--accent);
}
.tool h3{margin:0 0 8px;font-size:1.1rem;color:var(--ink)}
.tool p{margin:0;font-size:.95rem;color:var(--body)}
.tool .link{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.85rem;
  color:var(--accent);
  margin-top:8px;
  display:block;
}

/* FEATURED BOX (resources) */
.featured{
  background:var(--accent-light);
  border-radius:var(--radius);
  padding:28px;
  margin:40px 0;
  border:2px solid var(--accent);
}
.featured h3{margin:0 0 12px;font-size:1.3rem;color:var(--accent)}
.featured p{margin-bottom:12px;font-size:.95rem}
.featured .link{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.9rem;
  color:var(--ink);
  margin-top:12px;
  display:inline-block;
  border-bottom:2px solid var(--accent);
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.faq-item{
  border-bottom:1px solid var(--border);
  padding:24px 0;
}
.faq-item:first-child{
  border-top:1px solid var(--border);
}
.faq-item h3{
  margin:0 0 10px;
  font-size:1.05rem;
  color:var(--ink);
}
.faq-item p{
  margin:0;
  font-size:.95rem;
  color:var(--body);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{
  background:var(--dark);
  color:#8888a0;
  padding:56px 24px;
  font-size:.82rem;
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  gap:48px;
  justify-content:space-between;
  margin-bottom:40px;
}
.footer-brand{flex:1;min-width:220px}
.footer-brand .f-name{
  color:#fff;
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  font-size:1.1rem;
  margin-bottom:8px;
}
.footer-brand .f-tagline{
  color:#8888a0;
  line-height:1.6;
  margin-bottom:16px;
}
.footer-nav{min-width:140px}
.footer-nav h5{
  color:#bbb;
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:12px;
}
.footer-nav a{
  display:block;
  color:#8888a0;
  border:none;
  margin-bottom:8px;
  font-size:.85rem;
  transition:color .2s;
}
.footer-nav a:hover{color:#fff}

.footer-newsletter{flex:1;min-width:220px;max-width:300px}
.footer-newsletter h5{
  color:#bbb;
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:12px;
}
.footer-newsletter p{margin-bottom:12px;line-height:1.6}
.footer-newsletter .newsletter-form{display:flex;gap:8px}
.footer-newsletter input[type="email"]{
  flex:1;
  padding:8px 12px;
  border:1px solid #333;
  border-radius:var(--radius);
  background:#1e1e30;
  color:#ccc;
  font-size:.85rem;
  font-family:inherit;
}
.footer-newsletter input[type="email"]::placeholder{color:#555}
.footer-newsletter button{
  padding:8px 16px;
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:.82rem;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.footer-newsletter button:hover{background:var(--accent-hover)}

.footer-bottom{
  border-top:1px solid #2a2a40;
  padding-top:24px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.footer-bottom a{color:#8888a0;border:none}
.footer-bottom a:hover{color:#fff}

/* Legacy footer (simple centered) */
footer:not(:has(.footer-inner)){text-align:center}
footer .f-name{
  color:#fff;
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-weight:700;
  font-size:1rem;
  margin-bottom:6px;
}

/* ==========================================================================
   404 PAGE
   ========================================================================== */
.error-page{
  text-align:center;
  padding:80px 24px 120px;
}
.error-page .error-code{
  font-family:'Sohne','Helvetica Neue',Arial,sans-serif;
  font-size:clamp(5rem,12vw,8rem);
  font-weight:800;
  color:var(--accent);
  line-height:1;
  letter-spacing:-.04em;
  margin-bottom:16px;
}
.error-page h1{
  font-size:clamp(1.4rem,3vw,1.8rem);
  margin-bottom:12px;
}
.error-page .deck{
  font-size:1.05rem;
  color:var(--muted);
  max-width:480px;
  margin:0 auto 48px;
  line-height:1.65;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media(max-width:640px){
  .page{padding:32px 16px 48px}
  .masthead nav{gap:12px}
  .pull{font-size:1.15rem}
  .article-meta{gap:8px}
  .article-meta .divider{display:none}
  .footer-top{flex-direction:column;gap:32px}
  .footer-newsletter{max-width:100%}
  .footer-bottom{flex-direction:column;text-align:center}
  .breadcrumbs{padding:12px 16px 0}
  table{font-size:.82rem}
  th,td{padding:8px 10px}
  .highlight{padding:20px}
  .signal{padding:20px}
  .case{padding:20px}
}

@media(max-width:400px){
  body{font-size:16px}
  .masthead .name{font-size:1.3rem}
  .page h1{margin-bottom:12px}
}