/* ─────────────────────────────────────────────────────────────
   adriennejung.com — shared stylesheet
   Used by index.html (Home), story.html (Story), speaking.html (Speaking & Press).
   For Japanese later: append 'Noto Sans JP' to --font-body and a JP display face.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:#141414;
  --ink-soft:#4a4a4a;
  --paper:#FBFAF7;
  --paper-2:#F2F0EA;
  --line:#E4E1D8;
  --purple:#6C4CF1;
  --mint:#25C4A0;
  --sun:#FFC24B;
  --coral:#FF6B5E;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-hand:'Caveat',cursive;
  --wrap:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
section{padding:96px 0;position:relative}
h1,h2,h3{font-family:var(--font-display);line-height:1.05;letter-spacing:-0.02em;font-weight:700}
.hand{font-family:var(--font-hand);font-weight:700}
.eyebrow{
  font-family:var(--font-display);font-weight:600;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);
}

/* ── NAV ── */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,250,247,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em}
.brand span{color:var(--purple)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink-soft);transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:600}
.lang{display:flex;gap:8px;align-items:center;font-size:.8rem;font-weight:600;font-family:var(--font-display)}
.lang a,.lang span{color:#B9B5A8}
.lang .active{color:var(--ink)}
.lang .sep{color:#D8D4C8}
/* "Coming soon" bubble on the FR / 日本語 toggles */
.lang .soon{position:relative;cursor:default}
.lang .soon::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);
  background:var(--ink);color:var(--paper);font-family:var(--font-body);font-weight:500;
  font-size:.72rem;letter-spacing:.02em;padding:6px 12px;border-radius:100px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60;
}
.lang .soon::before{
  content:"";position:absolute;top:calc(100% + 2px);left:50%;transform:translate(-50%,-4px);
  border:5px solid transparent;border-bottom-color:var(--ink);
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;z-index:60;
}
.lang .soon:hover::after,.lang .soon:hover::before,
.lang .soon:focus-visible::after,.lang .soon:focus-visible::before{opacity:1;transform:translate(-50%,0)}
.menu-btn{display:none;background:none;border:0;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;font-family:var(--font-display)}

/* ── HERO (home) ── */
.hero{padding-top:70px;padding-bottom:60px}
.hero-grid{display:grid;grid-template-columns:1.35fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(3rem,7vw,5.6rem);letter-spacing:-.03em}
.hero h1 .wave{color:var(--purple)}
.hero-lead{font-size:1.25rem;color:var(--ink-soft);max-width:38ch;margin-top:26px}
.hero-lead b{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.tag{
  font-family:var(--font-display);font-size:.76rem;font-weight:600;letter-spacing:.04em;
  border-radius:100px;padding:6px 14px;background:var(--paper-2);color:var(--ink-soft);
}
.tag.p{background:#ece6ff;color:var(--purple)}
.tag.m{background:#d3f3ea;color:#128a6e}

/* portrait / photo card */
.portrait{position:relative;aspect-ratio:4/5;width:100%}
.portrait .frame{
  position:absolute;inset:0;border-radius:8px;overflow:hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, #efeafd 0%, transparent 55%),
    radial-gradient(120% 90% at 90% 90%, #d9f6ef 0%, transparent 55%),
    var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 30px 60px -30px rgba(20,20,20,.35);
}
.portrait .mono{font-family:var(--font-display);font-weight:700;font-size:8rem;color:var(--ink);opacity:.9;letter-spacing:-.04em}
.portrait .photo{width:100%;height:100%;object-fit:cover;display:block}
.portrait .scribble-ring{position:absolute;inset:-18px;pointer-events:none}
.portrait .badge{
  position:absolute;top:-22px;right:-14px;background:var(--sun);
  font-family:var(--font-hand);font-size:1.35rem;font-weight:700;
  padding:10px 16px;border-radius:50% 46% 52% 48%;transform:rotate(7deg);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.4);
}

/* ── PAGE HERO (story / speaking headers) ── */
.page-hero{padding:74px 0 20px}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:-.03em;margin-top:12px}
.page-hero .lead{font-size:1.25rem;color:var(--ink-soft);max-width:62ch;margin-top:22px}

/* buttons */
.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:100px;
  border:1.5px solid var(--ink);transition:transform .12s ease, background .15s, color .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn.solid:hover{background:var(--purple);border-color:var(--purple)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ── section heading helper ── */
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:14px;flex-wrap:wrap}
h2.big{font-size:clamp(2rem,4.5vw,3.2rem)}
.sec-sub{color:var(--ink-soft);max-width:60ch;font-size:1.12rem;margin-top:10px}
.alt{background:var(--paper-2)}
.more-link{display:inline-block;margin-top:28px;font-family:var(--font-display);font-weight:600;color:var(--purple);font-size:1rem}
.more-link:hover{text-decoration:underline}

/* ── ABOUT ── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;margin-top:40px}
.about-grid p{font-size:1.15rem;margin-bottom:20px}
.about-grid p b{font-weight:600}
.mark-p{background:linear-gradient(transparent 62%, #e2d9ff 62%)}
.mark-m{background:linear-gradient(transparent 62%, #c7f2e8 62%)}
/* inline text link (e.g. eeva) */
.elink{color:inherit;border-bottom:2px solid #cfc4f6;transition:border-color .15s}
.elink:hover{border-color:var(--purple)}

/* ── TIMELINE / career ── */
.timeline{margin-top:52px;position:relative}
.t-item{display:grid;grid-template-columns:150px 1fr;gap:32px;padding:26px 0;border-top:1px solid var(--line)}
.t-item:last-child{border-bottom:1px solid var(--line)}
.t-when{font-family:var(--font-display);font-weight:600;color:var(--ink-soft);font-size:.95rem;padding-top:4px}
.t-when .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;vertical-align:middle}
.t-role{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.t-org{color:var(--purple);font-weight:600;font-family:var(--font-display);font-size:1rem;margin:2px 0 10px}
.t-desc{color:var(--ink-soft);max-width:58ch}
.edu{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:36px;padding-top:32px;border-top:1px solid var(--line)}
.edu-h{font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);margin-bottom:18px}
.edu-col p{margin-bottom:14px;font-size:1.02rem;line-height:1.4}
.edu-col p span{color:var(--ink-soft);font-size:.92rem}

/* ── VALUES ── */
.val-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:46px;align-items:start}
.val{
  background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;padding:32px 30px;
  position:relative;transition:transform .15s;
}
.val:hover{transform:translateY(-4px)}
.alt .val{background:#fff}
.val .vnum{font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.08em;color:#B9B5A8;line-height:1}
.val h3{font-size:1.4rem;margin:12px 0 10px;letter-spacing:-.02em}
.val p{color:var(--ink-soft);font-size:1.02rem}
.val .proof{margin-top:14px;font-size:.9rem;color:var(--ink);background:#f4f0ff;border-radius:10px;padding:10px 13px}
.val .proof a{color:var(--purple);font-weight:600;text-decoration:underline}

/* ── WRITING ── */
.writing-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.post{
  border:1.5px solid var(--ink);border-radius:16px;padding:30px;background:var(--paper);
  display:flex;flex-direction:column;justify-content:space-between;min-height:230px;
  transition:transform .15s, box-shadow .15s;
}
.alt .post{background:#fff}
.post:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.post .date{font-family:var(--font-display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.post h3{font-size:1.5rem;margin:12px 0 12px;letter-spacing:-.02em;line-height:1.12}
.post p{color:var(--ink-soft);font-size:1.02rem}
.post .read{margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:.95rem;color:var(--purple)}
.writing-more{margin-top:30px}

/* ── WRITING INDEX (writing.html) ── */
.post-list{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}

/* ── ARTICLE (individual post pages) ── */
.article{max-width:760px;margin:0 auto}
.back-link{display:inline-block;margin-bottom:6px;font-family:var(--font-display);font-weight:600;font-size:.9rem;color:var(--ink-soft)}
.back-link:hover{color:var(--purple)}
.article-meta{font-family:var(--font-display);font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-top:12px}
.article h1{font-size:clamp(2.1rem,5vw,3.3rem);letter-spacing:-.03em;line-height:1.06;margin-top:12px}
.article-body{margin-top:36px}
.article-body p{font-size:1.16rem;line-height:1.72;margin-bottom:24px}
.article-body blockquote{
  margin:32px 0;padding:4px 0 4px 24px;border-left:3px solid var(--purple);
  font-family:var(--font-display);font-weight:500;font-size:1.3rem;line-height:1.42;
  letter-spacing:-.01em;color:var(--ink);
}
.article-body a{color:var(--purple);font-weight:600;text-decoration:underline}
.article-body h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;letter-spacing:.04em;margin:36px 0 12px}
.article-aside{max-width:760px;margin:34px auto 0;padding:24px 28px;background:var(--paper-2);border-radius:14px}
.article-aside h4{font-family:var(--font-display);font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:12px}
.article-aside p{font-size:1.04rem;color:var(--ink-soft);margin-bottom:12px}
.article-aside .sig{font-family:var(--font-hand);font-size:1.4rem;color:var(--ink)}
.article-foot{max-width:760px;margin:44px auto 0;padding-top:28px;border-top:1px solid var(--line)}

/* ── CREDENTIALS ── */
.creds{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;margin-top:38px}
.cred{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink);opacity:.82;letter-spacing:-.01em}
.cred em{font-style:normal;color:var(--purple);font-weight:600}
.creds .note{width:100%;font-family:var(--font-body);font-size:.92rem;color:#8f8b7f;margin-top:10px;opacity:1}

/* ── CURRENTLY strip (dated) ── */
.now{background:var(--ink);color:var(--paper)}
.now-inner{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 0;font-family:var(--font-display)}
.now .pulse{width:10px;height:10px;border-radius:50%;background:var(--mint);flex:none;animation:pulse 2.2s infinite}
.now .lbl{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--mint)}
.now .txt{color:#eeede7;font-weight:500;font-size:.98rem;max-width:58ch;flex-basis:100%;margin-left:24px;margin-top:-6px}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,196,160,.6)}70%{box-shadow:0 0 0 10px rgba(37,196,160,0)}100%{box-shadow:0 0 0 0 rgba(37,196,160,0)}}

/* ── PROOF STRIP (home) ── */
.proof-strip{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:44px}
.proof-strip .creds{margin-top:18px}
/* Award plaque in the proof strip */
.award-card{justify-self:center;background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:32px 36px;text-align:center;max-width:310px;transform:rotate(-1.5deg);box-shadow:0 14px 28px -12px rgba(20,20,20,.35)}
.award-card .star-mark{width:36px;height:36px;display:block;margin:0 auto 12px}
.award-title{font-family:var(--font-display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em;line-height:1.2;margin:0}
.award-sub{color:var(--ink-soft);font-size:.95rem;margin:8px 0 14px}
.award-card a{font-family:var(--font-display);font-weight:600;font-size:.85rem;color:var(--purple);text-decoration:underline;text-underline-offset:3px}

/* ── SPEAKING & PRESS ── */
.speak-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:44px;align-items:start}
.topics{list-style:none;display:flex;flex-direction:column;gap:16px}
.topics li{display:flex;gap:14px;font-size:1.08rem;line-height:1.45}
.topics li b{font-weight:600}
.topics .b{font-family:var(--font-display);font-size:1.15rem;color:var(--purple);line-height:1.3;flex:none}
.topics li:nth-child(2) .b{color:var(--mint)}
.topics li:nth-child(3) .b{color:var(--coral)}
.topics li:nth-child(4) .b{color:var(--sun)}
.kit{background:#fff;border:1.5px solid var(--ink);border-radius:16px;padding:28px}
.kit h3{font-size:1.15rem;margin-bottom:10px}
.kit .bio{font-size:.96rem;color:var(--ink-soft);margin-bottom:18px}
.kit .kit-cta{display:flex;gap:10px;flex-wrap:wrap}
.kit .mini{font-size:.82rem;color:#8f8b7f;margin-top:14px}

/* ── APPEARANCES (speaking page) ── */
.appearances{margin-top:44px}
.app-item{display:grid;grid-template-columns:180px 1fr;gap:28px;padding:24px 0;border-top:1px solid var(--line)}
.app-item:last-child{border-bottom:1px solid var(--line)}
.app-when{font-family:var(--font-display);font-weight:600;color:var(--ink-soft);font-size:.95rem;padding-top:3px}
.app-title{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.01em}
.app-desc{color:var(--ink-soft);margin-top:5px;max-width:60ch}

/* ── TESTIMONIALS ── */
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px;max-width:900px}
.quote{background:var(--paper);border:1.5px solid var(--ink);border-radius:16px;padding:26px 28px}
.alt .quote{background:#fff}
.quote .mark{font-family:var(--font-display);font-weight:700;font-size:2.6rem;line-height:.5;color:var(--purple);opacity:.4}
.quote blockquote{margin:0}
.quote p{font-size:1.04rem;margin:10px 0 18px}
.quote .who{font-family:var(--font-display);font-weight:700;font-size:.95rem}
.quote .who span{display:block;color:var(--ink-soft);font-weight:500;font-size:.85rem;margin-top:2px}

/* ── CONTACT ── */
.contact{text-align:center}
.contact h2{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.03em}
.contact .sub{color:var(--ink-soft);font-size:1.2rem;max-width:52ch;margin:20px auto 0}
.contact-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

/* ── FOOTER ── */
footer{border-top:1px solid var(--line);padding:34px 0}
.foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.foot-inner .copy{color:var(--ink-soft);font-size:.9rem}
.foot-social{display:flex;gap:20px;font-family:var(--font-display);font-weight:600;font-size:.9rem}
.foot-social a{color:var(--ink-soft)}
.foot-social a:hover{color:var(--purple)}

/* decorative scribbles float layer */
.scribble{position:absolute;pointer-events:none;z-index:1}

/* ── hand-drawn marks (inline eeva scribble artwork; colour set per use via <path fill>) ── */
.uline{position:relative;display:inline-block;white-space:nowrap}
.uline > svg{position:absolute;left:-3%;bottom:-.28em;width:106%;height:.34em;overflow:visible;pointer-events:none}
/* lasso/circle around a word */
.circle-word{position:relative;display:inline-block}
.circle-word > svg{position:absolute;left:-19%;top:-52%;width:138%;height:208%;overflow:visible;pointer-events:none}
/* downward arrow pointing at a CTA */
.arrow-mark{position:absolute;left:50%;top:20px;transform:translateX(-50%);width:34px;height:auto;pointer-events:none}
/* tight lasso variant for inline credentials (less vertical overhang) */
.circle-word.tight > svg{top:-50%;height:200%;left:-20%;width:140%}
/* small arrow nudging the hero CTA (inline flex item after the buttons) */
.cta-arrow{width:50px;height:auto;align-self:center;transform:scaleX(-1) rotate(-6deg);pointer-events:none}
/* small star accent inline before text */
.star-mark{width:1em;height:1em;vertical-align:-.14em;margin-right:.34em;flex:none}
/* wiggly arrow beside the "path" heading */
.path-squiggle{width:96px;height:auto;flex:none;align-self:center;margin:-18px 0;transform:rotate(6deg);pointer-events:none}
/* bigger content chips (off the clock) */
.tag-row.big{gap:12px;margin-top:24px}
.tag-row.big .tag{font-size:.95rem;padding:10px 20px;letter-spacing:.01em}
/* Joey photo + handwritten post-it note */
.dog-note{position:relative;display:inline-block;margin-top:34px}
.joey{display:block;width:min(320px,86vw);height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:6px;border:6px solid #fff;box-shadow:0 12px 28px -10px rgba(20,20,20,.45);transform:rotate(-2deg)}
.postit{position:absolute;right:12px;bottom:16px;background:#fff3a6;padding:12px 14px;max-width:172px;border-radius:2px;box-shadow:0 8px 18px -8px rgba(20,20,20,.35);transform:rotate(3deg)}
.postit::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%) rotate(-4deg);width:58px;height:17px;background:rgba(150,145,120,.28);border-radius:1px}
.postit .hand-note{font-family:'Shadows Into Light',cursive;font-size:1.18rem;color:var(--ink);margin:0;line-height:1.25}
/* lead-in "deck" — distinct from the display headings */
.lead-in{font-family:var(--font-body);font-weight:500;font-size:clamp(1.18rem,2.2vw,1.5rem);line-height:1.45;max-width:58ch;margin-bottom:30px;color:var(--ink);border-left:3px solid var(--purple);padding-left:20px}
/* pull "Off the clock" up closer to "On the clock" (story only) */
#personal{padding-top:0;margin-top:-32px}

/* ── STATS BAND (story) ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 32px}
.stat{border-top:3px solid var(--ink);padding-top:16px}
.stat .n{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.02em;line-height:1}
.stat .l{color:var(--ink-soft);font-size:.95rem;margin-top:8px}
.stat:nth-child(1) .n{color:var(--purple)}
.stat:nth-child(2) .n{color:var(--mint)}
.stat:nth-child(3) .n{color:var(--coral)}
.stat:nth-child(4) .n{color:var(--ink)}
.stat:nth-child(5) .n{color:var(--purple)}
.stat:nth-child(6) .n{color:var(--mint)}

/* ── PULL QUOTE (story) ── */
.pullquote{max-width:960px}
.pullquote p{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,4.2vw,2.9rem);letter-spacing:-.02em;line-height:1.16}
.pullquote .accent{color:var(--purple)}
.pullquote .pq-cite{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink-soft);margin-top:16px;letter-spacing:0}
.pullquote.small p{font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.32}
/* speaking: tighten the quote → press-kit gap */
#speaking-proof{padding-bottom:16px}
#press{padding-top:44px}

/* writing: category chips + featured latest post */
.post .tag{margin-bottom:14px}
.post.feature{grid-column:1 / -1;flex-direction:row;align-items:center;gap:36px;min-height:0;padding:34px 38px}
.post.feature > div:first-child{flex:1}
.post.feature h3{font-size:clamp(1.7rem,3vw,2.2rem)}
.post.feature .read{margin-top:0;white-space:nowrap}
@media(max-width:860px){
  .post.feature{flex-direction:column;align-items:flex-start;gap:14px;padding:28px}
  .post.feature .read{margin-top:6px}
}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  section{padding:64px 0}
  .hero-grid{grid-template-columns:1fr;gap:44px}
  .portrait{max-width:340px;margin:0 auto}
  .about-grid,.val-grid,.writing-grid,.speak-grid,.quotes,.edu,.proof-strip{grid-template-columns:1fr;gap:20px}
    .stats{grid-template-columns:repeat(2,1fr);gap:22px}
    .path-squiggle{width:78px;margin:-14px 0}
  .t-item,.app-item{grid-template-columns:1fr;gap:6px}
  .menu-btn{display:block}
  .nav-links{
    display:none;position:absolute;top:66px;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;padding:18px 28px;gap:18px;
  }
  header.nav.open .nav-links{display:flex}
  .lang{display:none}
}