/* Ziv Chen — "The Digital Tabloid" disruptive-newspaper aesthetic */

:root{
  --paper:#FDFBF7;
  --panel:#FFFFFF;
  --ink:#1A1A1A;
  --ink-soft:#4A443C;
  --ink-faint:#766F64;
  --red:#C1272D;
  --red-deep:#921D22;
  --line:rgba(26,26,26,0.16);
  --line-soft:rgba(26,26,26,0.08);
  --font-display:'Bodoni Moda', serif;
  --font-body:'Inter', sans-serif;
  --radius:6px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body);line-height:1.66;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px;}

h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0 0 .3em;color:var(--ink);}
h1{font-size:clamp(1.6rem,3.4vw,2.2rem);line-height:1.1;}
.tagline-display{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1.02;margin:0 0 .3em;color:var(--ink);}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);}
h3{font-size:1.15rem;font-weight:700;}
p{margin:0 0 1em;}
.lede{font-size:1.05rem;color:var(--ink-soft);max-width:640px;}

/* ---------- retro floating nav ---------- */
.topnav{position:fixed;top:20px;right:20px;z-index:60;}
.nav-pill{background:var(--panel);border:2px solid var(--ink);border-radius:100px;padding:8px 6px;display:flex;gap:2px;box-shadow:4px 4px 0 var(--ink);}
.nav-pill a{padding:8px 16px;border-radius:100px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);transition:all .15s;}
.nav-pill a:hover,.nav-pill a.active{background:var(--red);color:#fff;}
.nav-toggle{display:none;}
@media (max-width:700px){
  .topnav{top:12px;right:12px;left:12px;display:flex;justify-content:center;}
  .nav-pill{flex-wrap:wrap;justify-content:center;}
  .nav-pill a{padding:7px 12px;font-size:.66rem;}
}

/* ---------- masthead / hero ---------- */
.hero{padding:70px 0 56px;border-bottom:4px solid var(--ink);}
.eyebrow{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--red);font-weight:800;margin:0 0 16px;}
.role-line{color:var(--ink-soft);font-weight:700;font-size:1.02rem;margin-top:10px;}
.hero .lede{margin-top:20px;font-size:1.12rem;}

.stamp{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  border:3px solid var(--red);color:var(--red);font-family:var(--font-display);
  font-weight:700;font-size:1rem;padding:12px 24px;border-radius:6px;
  transform:rotate(-3deg);transition:transform .2s;text-transform:uppercase;letter-spacing:.03em;
}
.stamp:hover{transform:rotate(0deg) scale(1.03);}

.hero-photo{width:180px;height:220px;border:3px solid var(--ink);border-radius:4px;overflow:hidden;box-shadow:6px 6px 0 var(--ink);}
.hero-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(0.15);}
.hero-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end;}
@media (max-width:760px){.hero-grid{grid-template-columns:1fr;}.hero-photo{order:-1;}}

.tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;}
.tag-chip{border:2px solid var(--ink);background:var(--paper);padding:6px 15px;border-radius:100px;font-size:.76rem;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.02em;}

/* ---------- newspaper page divider ---------- */
.page-divider{border-top:4px solid var(--ink);position:relative;padding-top:8px;margin-top:8px;}
.page-divider .doodle{position:absolute;top:-26px;right:24px;color:var(--red);}
.page-label{font-family:var(--font-body);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-faint);font-weight:700;}

/* ---------- sections ---------- */
main section{padding:56px 0;}
.kicker{font-family:var(--font-body);text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--red);font-weight:800;margin:0 0 10px;}

/* ---------- credential cards (kept from prior build) ---------- */
.cred-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:28px;border-top:2px solid var(--ink);}
.cred-card{padding:24px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.cred-card:nth-child(2n){border-right:none;}
.cred-card h3{margin-bottom:8px;}
.cred-card p{color:var(--ink-soft);font-size:.9rem;margin:0;}
@media (max-width:700px){.cred-grid{grid-template-columns:1fr;}.cred-card{border-right:none;}}
.cred-grid-3{grid-template-columns:repeat(3,1fr);}
@media (max-width:700px){.cred-grid-3{grid-template-columns:1fr;}}

/* ---------- accordion "headlines" ---------- */
.headline-list{margin-top:10px;}
.headline-item{border-bottom:2px solid var(--ink);padding:22px 0;}
.headline-item summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
  font-family:var(--font-display);font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:700;
}
.headline-item summary::-webkit-details-marker{display:none;}
.headline-item summary .plus{font-family:var(--font-body);font-size:1.6rem;font-weight:400;color:var(--red);flex-shrink:0;transition:transform .2s;}
.headline-item[open] summary .plus{transform:rotate(45deg);}
.headline-body{padding-top:14px;max-width:680px;}
.headline-body p{color:var(--ink-soft);}
.headline-body a.read-more{
  display:inline-block;margin-top:8px;font-family:var(--font-body);font-weight:800;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--red);border-bottom:2px solid var(--red);
}

/* ---------- root signature list ---------- */
.sig-list{margin-top:24px;}
.sig-row{display:grid;grid-template-columns:220px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline;}
.sig-row .sg-url{font-family:monospace;font-size:.84rem;color:var(--red-deep);font-weight:700;}
.sig-row .sg-desc{color:var(--ink-soft);font-size:.9rem;}
@media (max-width:640px){.sig-row{grid-template-columns:1fr;gap:4px;}}

/* icon/logo + date + description row (career timeline & education) */
.sig-row-icon{display:grid;grid-template-columns:36px 190px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;}
@media (max-width:680px){
  .sig-row-icon{grid-template-columns:32px 1fr;gap:10px;}
  .sig-row-icon .sg-desc{grid-column:1 / -1;margin-top:2px;}
}
@media (max-width:420px){
  .sig-row-icon{grid-template-columns:1fr;text-align:left;}
  .sig-row-icon img{display:none;}
  .sig-row-icon .sg-desc{grid-column:auto;margin-top:4px;}
}

.sig-row-logo{display:grid;grid-template-columns:52px 140px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;}
@media (max-width:680px){
  .sig-row-logo{grid-template-columns:44px 1fr;gap:10px;}
  .sig-row-logo .sg-desc{grid-column:1 / -1;margin-top:2px;}
}
@media (max-width:420px){
  .sig-row-logo{grid-template-columns:1fr;text-align:left;}
  .sig-row-logo img{margin-bottom:6px;}
  .sig-row-logo .sg-desc{grid-column:auto;margin-top:4px;}
}

/* ---------- support list ---------- */
.support-list{margin-top:24px;border-top:2px solid var(--ink);}
.support-row{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);}
.support-row .sr-label{font-size:.72rem;color:var(--red);text-transform:uppercase;letter-spacing:.06em;font-weight:800;}
.support-row .sr-value{color:var(--ink-soft);font-size:.94rem;}
@media (max-width:600px){.support-row{grid-template-columns:1fr;gap:4px;}}

/* ---------- buttons ---------- */
.btn{display:inline-block;padding:13px 28px;font-weight:800;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;transition:all .15s;border:2px solid var(--ink);border-radius:4px;}
.btn-gold,.btn-red{background:var(--red);color:#fff;border-color:var(--red);}
.btn-gold:hover,.btn-red:hover{background:var(--ink);border-color:var(--ink);}
.btn-ghost{color:var(--ink);border-color:var(--ink);background:var(--paper);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:22px;}
.contact-card{background:var(--panel);border:2px solid var(--ink);border-radius:var(--radius);padding:24px;}
.contact-card h3{margin:0 0 6px;font-size:1.02rem;}
.contact-card p{color:var(--ink-soft);font-size:.86rem;margin:0 0 14px;}
@media (max-width:700px){.contact-grid{grid-template-columns:1fr;}}

.contact-form{max-width:560px;margin-top:22px;}
.form-row{margin-bottom:18px;display:flex;flex-direction:column;gap:6px;}
.form-row label{font-size:.76rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;font-weight:700;}
.form-row input,.form-row textarea{
  background:var(--panel);border:2px solid var(--ink);border-radius:4px;
  padding:12px 14px;color:var(--ink);font-family:var(--font-body);font-size:.94rem;
}
.form-row input:focus,.form-row textarea:focus{outline:none;border-color:var(--red);}
.form-note{font-size:.74rem;color:var(--ink-faint);margin-top:10px;}

/* ---------- footer ---------- */
footer{padding:38px 0 48px;text-align:center;border-top:4px solid var(--ink);}
footer .links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:14px;}
footer .links a{color:var(--ink-soft);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
footer .links a:hover{color:var(--red);}
footer p:last-child{color:var(--ink-faint);font-size:.72rem;margin:0;}