/* Home page (index.html) styles — layout tokens, nav, and footer/scroll-top
   base styles live in assets/styles.css and are shared across the whole site. */

/* HERO */
    .hero{padding-block:clamp(var(--space-24),14vw,var(--space-32,8rem));
      padding-top:calc(clamp(56px,7vw,68px) + clamp(var(--space-24),12vw,var(--space-32,8rem)))}
    .hero__inner{display:grid;grid-template-columns:1fr min(260px,35%);
      align-items:start;gap:clamp(var(--space-8),5vw,var(--space-16))}
    .hero__eyebrow{font-size:var(--text-xs);font-weight:500;letter-spacing:0.12em;
      text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-4)}
    .hero__name{font-family:var(--font-display);font-size:var(--text-3xl,clamp(3.5rem,5vw,6rem));font-weight:400;
      line-height:1.05;color:var(--color-text);margin-bottom:var(--space-5)}
    .hero__name em{font-style:italic;color:var(--color-primary)}
    .hero__title{font-size:var(--text-base);font-weight:400;color:var(--color-text-muted);
      line-height:1.5;max-width:52ch;margin-bottom:var(--space-8)}
    .hero__tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-8)}
    .tag{font-size:var(--text-xs);font-weight:500;padding:var(--space-1) var(--space-3);
      background:oklch(from var(--color-primary) l c h / 0.1);color:var(--color-primary);
      border-radius:var(--radius-full);letter-spacing:0.02em}
    .hero__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
    .btn{display:inline-flex;align-items:center;gap:var(--space-2);
      font-size:var(--text-sm);font-weight:500;letter-spacing:0.02em;
      padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);
      text-decoration:none;border:none;cursor:pointer}
    .btn--primary{background:var(--color-primary);color:var(--color-text-inverse)}
    .btn--primary:hover{background:var(--color-primary-hover)}
    .btn--ghost{background:transparent;color:var(--color-text-muted);
      border:1px solid oklch(from var(--color-text) l c h / 0.15)}
    .btn--ghost:hover{color:var(--color-text);border-color:oklch(from var(--color-text) l c h / 0.3)}
    .hero__photo-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-4)}
    .hero__photo{width:100%;aspect-ratio:3/4;border-radius:var(--radius-xl);
      background:var(--color-surface-offset);overflow:hidden;box-shadow:var(--shadow-lg);position:relative}
    .hero__photo picture,.hero__photo img{display:block;width:100%;height:100%}
    .hero__photo img{object-fit:cover;object-position:center top}
    .hero__photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:var(--space-3);
      background:linear-gradient(145deg,var(--color-primary-highlight),var(--color-surface-offset))}
    .hero__photo-placeholder-initials{font-family:var(--font-display);
      font-size:clamp(2.5rem,6vw,4rem);color:var(--color-primary);line-height:1}
    .hero__photo-placeholder-name{font-size:var(--text-xs);color:var(--color-text-muted);
      letter-spacing:0.1em;text-transform:uppercase}
    .hero__stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);width:100%}
    .hero__stat{text-align:center;padding:var(--space-3);background:var(--color-surface);
      border-radius:var(--radius-lg);border:1px solid oklch(from var(--color-text) l c h / 0.06)}
    .hero__stat-number{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;
      color:var(--color-primary);line-height:1;margin-bottom:var(--space-1)}
    .hero__stat-label{font-size:var(--text-xs);color:var(--color-text-faint);letter-spacing:0.05em}

    /* PLAYBOOK FEATURE */
    .playbook-feature{background:var(--color-primary);color:var(--color-text-inverse);
      padding-block:clamp(var(--space-12),7vw,var(--space-20))}
    .playbook-feature__inner{display:grid;grid-template-columns:minmax(300px,0.78fr) minmax(0,1.22fr);
      gap:clamp(var(--space-10),6vw,var(--space-20));align-items:start}
    .playbook-feature__label{font-size:var(--text-xs);font-weight:600;letter-spacing:0.14em;
      text-transform:uppercase;color:oklch(from var(--color-text-inverse) l c h / 0.68);margin-bottom:var(--space-3)}
    .playbook-feature__title{font-family:var(--font-display);font-size:clamp(2rem,5vw,4.5rem);
      font-weight:400;line-height:0.98;max-width:8ch;margin-bottom:var(--space-5)}
    .playbook-feature__title em{font-style:italic;color:#f0c28d}
    .playbook-feature__copy{font-size:var(--text-base);line-height:1.7;
      color:oklch(from var(--color-text-inverse) l c h / 0.78);max-width:54ch;margin-bottom:var(--space-6)}
    .playbook-feature__actions{display:flex;gap:var(--space-3);flex-wrap:wrap;align-items:center}
    .btn--light{background:var(--color-text-inverse);color:var(--color-primary)}
    .btn--light:hover{background:#ffffff}
    .btn--outline-light{color:var(--color-text-inverse);
      border:1px solid oklch(from var(--color-text-inverse) l c h / 0.34)}
    .btn--outline-light:hover{border-color:var(--color-text-inverse);
      background:oklch(from var(--color-text-inverse) l c h / 0.08)}
    .playbook-feature__panel{background:oklch(from var(--color-text-inverse) l c h / 0.06);
      border:1px solid oklch(from var(--color-text-inverse) l c h / 0.16);
      border-radius:8px;padding:var(--space-5);box-shadow:var(--shadow-lg)}
    .playbook-feature__panel-head{display:flex;align-items:center;justify-content:space-between;
      gap:var(--space-4);margin-bottom:var(--space-5)}
    .playbook-feature__panel-title{font-size:var(--text-xs);font-weight:600;letter-spacing:0.12em;
      text-transform:uppercase;color:#f0c28d}
    .playbook-feature__count{display:grid;place-items:center;min-width:32px;height:32px;
      padding-inline:8px;border-radius:999px;background:oklch(from var(--color-text-inverse) l c h / 0.12);
      font-family:var(--font-body);font-size:0.82rem;font-weight:700;line-height:1}
    .playbook-feature__items{display:grid;gap:var(--space-3)}
    .playbook-feature__item{position:relative;padding:18px 46px 18px 18px;border-radius:8px;
      background:oklch(from var(--color-text-inverse) l c h / 0.08);
      border:1px solid oklch(from var(--color-text-inverse) l c h / 0.12);
      display:block;text-decoration:none;transition:background var(--transition-interactive),border-color var(--transition-interactive)}
    .playbook-feature__item:hover{background:oklch(from var(--color-text-inverse) l c h / 0.13);
      border-color:oklch(from var(--color-text-inverse) l c h / 0.25);text-decoration:none}
    .playbook-feature__item::after{content:"\2197";position:absolute;top:18px;right:18px;
      font-size:1rem;color:oklch(from var(--color-text-inverse) l c h / 0.58)}
    .playbook-feature__item--primary{padding:24px 52px 24px 24px;background:#ffffff;border-color:#ffffff;
      box-shadow:0 14px 34px oklch(0.1 0.02 240 / 0.18)}
    .playbook-feature__item--primary:hover{background:#ffffff;border-color:#ffffff;transform:translateY(-2px)}
    .playbook-feature__item--primary::after{top:24px;right:24px;color:#14365a}
    .playbook-feature__item-kicker{font-size:0.68rem;font-weight:600;letter-spacing:0.12em;
      text-transform:uppercase;color:#f0c28d;margin-bottom:var(--space-1)}
    .playbook-feature__item-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text-inverse)}
    .playbook-feature__item-body{font-size:var(--text-xs);line-height:1.55;
      color:oklch(from var(--color-text-inverse) l c h / 0.66);margin-top:var(--space-1);
      display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
    .playbook-feature__item--primary .playbook-feature__item-kicker{color:#a65f25;margin-bottom:8px}
    .playbook-feature__item--primary .playbook-feature__item-title{font-family:var(--font-display);
      font-size:1.65rem;font-weight:400;line-height:1.12;color:#14365a}
    .playbook-feature__item--primary .playbook-feature__item-body{display:-webkit-box;-webkit-box-orient:vertical;
      -webkit-line-clamp:3;overflow:hidden;margin-top:10px;color:#5f6873;font-size:0.86rem;line-height:1.58}

    /* SECTION COMMON */
    .section{padding-block:clamp(var(--space-16),8vw,var(--space-24))}
    .section--alt{background:var(--color-surface)}
    .section__header{margin-bottom:clamp(var(--space-10),4vw,var(--space-16))}
    .section__label{font-size:var(--text-xs);font-weight:500;letter-spacing:0.12em;
      text-transform:uppercase;color:var(--color-accent);margin-bottom:var(--space-3)}
    .section__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:400;
      color:var(--color-text);line-height:1.15}
    .section__subtitle{font-size:var(--text-base);color:var(--color-text-muted);
      margin-top:var(--space-3);max-width:55ch}
    .divider{height:1px;background:var(--color-divider)}

    /* ABOUT */
    .about__grid{display:grid;grid-template-columns:1fr 1fr;
      gap:clamp(var(--space-8),5vw,var(--space-16));align-items:start}
    .about__body p{font-size:var(--text-base);color:var(--color-text-muted);
      line-height:1.75;margin-bottom:var(--space-5);max-width:60ch}
    .about__body p:last-child{margin-bottom:0}
    .about__body strong{color:var(--color-text);font-weight:500}
    .about__highlights{display:flex;flex-direction:column;gap:var(--space-4)}
    .highlight-card{padding:var(--space-5) var(--space-6);background:var(--color-surface);
      border-radius:var(--radius-lg);border:1px solid oklch(from var(--color-text) l c h / 0.06);
      box-shadow:var(--shadow-sm)}
    .highlight-card__icon{margin-bottom:var(--space-2)}
    .highlight-card__title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
    .highlight-card__body{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.5;max-width:38ch}

    /* EXPERIENCE */
    .experience__list{display:flex;flex-direction:column;gap:0}
    .exp-item{display:grid;grid-template-columns:160px 1fr;gap:var(--space-8);
      padding-block:var(--space-8);border-bottom:1px solid oklch(from var(--color-text) l c h / 0.08);position:relative}
    .exp-item:last-child{border-bottom:none}
    .exp-item__meta{padding-top:var(--space-1)}
    .exp-item__period{font-size:var(--text-xs);color:var(--color-text-faint);
      letter-spacing:0.04em;line-height:1.5;margin-bottom:var(--space-2)}
    .exp-item__company{font-size:var(--text-xs);font-weight:600;color:var(--color-accent);
      letter-spacing:0.04em;text-transform:uppercase}
    .exp-item__role{font-family:var(--font-display);font-size:var(--text-lg);font-weight:400;
      color:var(--color-text);margin-bottom:var(--space-3)}
    .exp-item__desc{font-size:var(--text-sm);color:var(--color-text-muted);
      line-height:1.65;margin-bottom:var(--space-4);max-width:58ch}
    .exp-item__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .tag--sm{font-size:var(--text-xs);padding:var(--space-1) var(--space-2);
      background:oklch(from var(--color-text) l c h / 0.06);color:var(--color-text-muted);
      border-radius:var(--radius-sm)}

    /* SKILLS */
    .skills__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--space-4)}
    .skill-card{padding:var(--space-6);background:var(--color-surface);border-radius:var(--radius-lg);
      border:1px solid oklch(from var(--color-text) l c h / 0.06);box-shadow:var(--shadow-sm);
      transition:box-shadow var(--transition-interactive),transform var(--transition-interactive)}
    .skill-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
    .skill-card__category{font-size:var(--text-xs);font-weight:600;letter-spacing:0.08em;
      text-transform:uppercase;color:var(--color-primary);margin-bottom:var(--space-4)}
    .skill-card__items{display:flex;flex-wrap:wrap;gap:var(--space-2)}
    .skill-pill{display:inline-flex;align-items:center;font-size:var(--text-xs);font-weight:400;padding:var(--space-1) var(--space-3);
      background:var(--color-bg);color:var(--color-text-muted);
      border:1px solid oklch(from var(--color-text) l c h / 0.1);border-radius:var(--radius-full);
      text-decoration:none}
    .skill-pill:hover{color:var(--color-primary);border-color:oklch(from var(--color-primary) l c h / 0.3);
      background:oklch(from var(--color-primary) l c h / 0.08)}

    /* CERTIFICATIONS */
    .certs__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--space-4)}
    .cert-card{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-5) var(--space-6);
      background:var(--color-surface);border-radius:var(--radius-lg);
      border:1px solid oklch(from var(--color-text) l c h / 0.06)}
    .cert-card__icon{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;
      justify-content:center;background:oklch(from var(--color-primary) l c h / 0.1);
      border-radius:var(--radius-md)}
    .cert-card__title{font-size:var(--text-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}
    .cert-card__issuer{font-size:var(--text-xs);color:var(--color-text-muted)}

    /* CONTACT */
    .contact-section{text-align:center;padding-block:clamp(var(--space-20),10vw,var(--space-32,8rem))}
    .contact-section .section__title{margin-bottom:var(--space-5)}
    .contact-section .section__subtitle{margin:0 auto var(--space-8)}
    .contact__links{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}

    /* FOOTER — overrides assets/styles.css: no extra margin-top here since the
       contact section above already has generous bottom padding on this page */
    .footer{padding-block:var(--space-8);border-top:1px solid var(--color-divider)}
    .footer__inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4)}
    .footer__copy{font-size:var(--text-xs);color:var(--color-text-faint)}
    .footer__links{display:flex;gap:var(--space-4);list-style:none}
    .footer__links a{font-size:var(--text-xs);color:var(--color-text-faint);text-decoration:none}
    .footer__links a:hover{color:var(--color-text-muted)}

    /* SCROLL ANIMATIONS */
    .fade-in{opacity:1}
    @supports(animation-timeline:scroll()){
      .fade-in{opacity:0;animation:reveal-fade linear both;
        animation-timeline:view();animation-range:entry 0% entry 85%}
    }
    @keyframes reveal-fade{to{opacity:1}}

    /* Scroll-to-top button styling already lives in assets/styles.css (shared) */

    /* ============================================================
       RESPONSIVE DESIGN — FULL BREAKPOINT SYSTEM
       xs:  < 400px   (small phones)
       sm:  400–599px (phones)
       md:  600–767px (large phones / small tablets)
       lg:  768–1023px (tablets / small laptops)
       xl:  1024–1279px (laptops)
       2xl: >= 1280px  (desktops)
    ============================================================ */

    /* NAV responsive rules already live in assets/styles.css (shared nav) */

    /* HERO */
    @media (max-width: 1023px) {
      .hero__inner { grid-template-columns: 1fr min(220px, 32%); gap: var(--space-8); }
    }
    @media (max-width: 767px) {
      .hero { padding-top: calc(clamp(56px, 7vw, 68px) + var(--space-16)); padding-bottom: var(--space-16); }
      .hero__inner { grid-template-columns: 1fr; text-align: center; }
      .hero__photo-wrap { order: -1; align-items: center; margin-bottom: var(--space-4); }
      .hero__photo { width: min(160px, 48vw); aspect-ratio: 1/1; border-radius: 50%; margin: 0 auto; }
      .hero__tags { justify-content: center; }
      .hero__actions { justify-content: center; }
      .hero__title { margin-inline: auto; }
      .hero__stat-row { max-width: 260px; margin: 0 auto; }
      .playbook-feature__inner { grid-template-columns: 1fr; }
      .playbook-feature__title { max-width: 10ch; }
    }
    @media (max-width: 479px) {
      .hero__name { font-size: clamp(2.2rem, 9vw, 3rem); }
      .hero__actions { flex-direction: column; align-items: center; }
      .hero__actions .btn { width: 100%; justify-content: center; max-width: 280px; }
      .hero__stat-row { max-width: 100%; }
    }
    @media (max-width: 359px) {
      .hero__stat { padding: var(--space-2); }
      .hero__stat-number { font-size: 1rem; }
      .hero__stat-label { font-size: 0.6rem; }
    }

    /* SECTION HEADERS */
    @media (max-width: 767px) {
      .section__title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
      .section { padding-block: clamp(var(--space-10), 6vw, var(--space-16)); }
    }
    @media (max-width: 479px) {
      .section__title { font-size: clamp(1.3rem, 8vw, 1.8rem); }
      .section { padding-block: var(--space-10); }
    }

    /* ABOUT */
    @media (max-width: 1023px) { .about__grid { gap: var(--space-8); } }
    @media (max-width: 767px) { .about__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
    @media (max-width: 479px) {
      .about__body p { font-size: 0.95rem; }
      .highlight-card { padding: var(--space-4); }
    }

    /* EXPERIENCE */
    @media (max-width: 1023px) { .exp-item { grid-template-columns: 140px 1fr; gap: var(--space-6); } }
    @media (max-width: 767px) {
      .exp-item { grid-template-columns: 1fr; gap: var(--space-2); padding-block: var(--space-6); }
      .exp-item__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding-top: 0; }
      .exp-item__period { margin-bottom: 0; }
      .exp-item__period::after { content: "·"; margin-left: var(--space-3); color: var(--color-text-faint); }
      .exp-item__role { font-size: clamp(1.05rem, 4vw, 1.3rem); }
    }
    @media (max-width: 479px) {
      .exp-item__role { font-size: 1.05rem; }
      .exp-item__desc { font-size: 0.88rem; }
      .exp-item__tags { gap: var(--space-1); }
      .tag--sm { font-size: 0.7rem; }
    }

    /* SKILLS */
    @media (max-width: 1023px) { .skills__grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 599px) {
      .skills__grid { grid-template-columns: 1fr; }
      .skill-card { padding: var(--space-4) var(--space-5); }
    }

    /* CERTIFICATIONS */
    @media (max-width: 1023px) { .certs__grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 599px) {
      .certs__grid { grid-template-columns: 1fr; }
      .cert-card { padding: var(--space-4); }
    }

    /* CONTACT */
    @media (max-width: 767px) {
      .contact__links { flex-direction: column; align-items: center; }
      .contact__links .btn { width: 100%; justify-content: center; max-width: 300px; }
      .contact-section .section__title { font-size: clamp(1.4rem, 6vw, 2rem); }
    }

    /* FOOTER */
    @media (max-width: 599px) {
      .footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
      .footer__links { flex-wrap: wrap; gap: var(--space-3); }
    }

    /* TOUCH TARGETS */
    @media (pointer: coarse) {
      .btn { min-height: 44px; }
      .nav__cta { padding: var(--space-3) var(--space-5); }
      .theme-toggle, .nav__hamburger { min-width: 44px; min-height: 44px; }
    }

    /* LANDSCAPE PHONE */
    @media (max-height: 500px) and (orientation: landscape) {
      .hero { padding-top: calc(clamp(56px, 7vw, 68px) + var(--space-8)); padding-bottom: var(--space-8); }
      .hero__photo { width: min(120px, 20vw); }
    }

    /* Scroll-to-top mobile sizing already lives in assets/styles.css (shared) */

    /* MOBILE MATERIAL LAYOUT */
    @media (max-width: 767px) {
      body { overflow-x: clip; background: var(--color-bg); }
      .container, .container--wide { padding-inline: 18px; }

      .nav {
        background: oklch(from var(--color-surface) l c h / 0.96);
        box-shadow: 0 2px 12px oklch(0.2 0.01 240 / 0.08);
      }
      .nav__inner { height: 60px; padding-inline: 16px; }
      .nav__logo { gap: 10px; }
      .nav__logo-mark { width: 32px; height: 32px; }
      .nav__logo-name { font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; }
      .nav__right { gap: 2px; }
      .theme-toggle, .nav__hamburger { width: 42px; height: 42px; border-radius: 8px; }
      .nav__mobile {
        position: fixed; top: 60px; left: 0; right: 0;
        max-height: calc(100dvh - 60px); overflow-y: auto;
        padding: 8px 18px 20px; background: var(--color-surface);
        border-top: 1px solid var(--color-divider);
        box-shadow: 0 14px 28px oklch(0.2 0.01 240 / 0.14);
      }
      .nav__mobile-links { gap: 0; }
      .nav__mobile-links li { border-bottom: 1px solid var(--color-divider); }
      .nav__mobile-links li:last-child { border-bottom: 0; }
      .nav__mobile-links a {
        min-height: 50px; display: flex; align-items: center;
        padding: 12px 4px; color: var(--color-text); font-size: 0.94rem; font-weight: 500;
      }

      .hero {
        padding: 84px 0 42px; background: var(--color-surface-2);
        border-bottom: 1px solid var(--color-divider);
      }
      .hero__inner { display: flex; flex-direction: column; gap: 0; text-align: left; }
      .hero__photo-wrap {
        order: -1; display: grid; grid-template-columns: 112px minmax(0, 1fr);
        align-items: stretch; gap: 10px; width: 100%; margin: 0 0 26px;
      }
      .hero__photo {
        width: 112px; aspect-ratio: 4 / 5; margin: 0; border-radius: 8px;
        box-shadow: 0 8px 22px oklch(0.2 0.01 240 / 0.14);
      }
      .hero__stat-row { grid-template-columns: 1fr; gap: 7px; width: 100%; max-width: none; margin: 0; }
      .hero__stat {
        display: flex; align-items: center; justify-content: space-between;
        min-height: 0; padding: 9px 12px; text-align: left;
        border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm);
      }
      .hero__stat-number { margin: 0; font-family: var(--font-body); font-size: 1.1rem; font-weight: 700; }
      .hero__stat-label { font-size: 0.7rem; font-weight: 500; color: var(--color-text-muted); }
      .hero__eyebrow { margin-bottom: 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; }
      .hero__name { margin-bottom: 14px; font-size: 2.75rem; line-height: 0.98; }
      .hero__name br { display: none; }
      .hero__name em { margin-left: 0.16em; }
      .hero__title { margin: 0 0 20px; font-size: 0.98rem; line-height: 1.62; }
      .hero__tags { justify-content: flex-start; gap: 7px; margin-bottom: 24px; }
      .hero__tags .tag { padding: 5px 10px; border-radius: 999px; font-size: 0.7rem; }
      .hero__tags .tag:nth-child(n+5) { display: none; }
      .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
      .hero__actions .btn {
        width: 100%; max-width: none; min-height: 48px; justify-content: center;
        padding: 12px 16px; border-radius: 8px; font-size: 0.88rem;
      }
      .hero__actions .btn:nth-child(3) { display: none; }

      .playbook-feature { padding-block: 44px; }
      .playbook-feature__inner { grid-template-columns: 1fr; gap: 26px; }
      .playbook-feature__title { max-width: none; margin-bottom: 14px; font-size: 2.75rem; }
      .playbook-feature__copy { margin-bottom: 22px; font-size: 0.95rem; line-height: 1.65; }
      .playbook-feature__actions { display: grid; gap: 10px; }
      .playbook-feature__actions .btn { width: 100%; min-height: 46px; justify-content: center; border-radius: 8px; }
      .playbook-feature__panel { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
      .playbook-feature__panel-head { margin-bottom: 12px; }
      .playbook-feature__items { gap: 10px; }
      .playbook-feature__item { padding: 16px 42px 16px 16px; border-radius: 8px; }
      .playbook-feature__item::after { top: 16px; right: 16px; }
      .playbook-feature__item--primary { padding: 20px 46px 20px 20px; }
      .playbook-feature__item--primary::after { top: 20px; right: 18px; }
      .playbook-feature__item--primary .playbook-feature__item-title { font-size: 1.35rem; }
      .playbook-feature__item--primary .playbook-feature__item-body { -webkit-line-clamp: 3; font-size: 0.8rem; }

      .section { padding-block: 44px; }
      .section__header { margin-bottom: 26px; }
      .section__label { margin-bottom: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; }
      .section__title { font-size: 2rem; line-height: 1.08; }
      .section__subtitle { margin-top: 10px; font-size: 0.94rem; line-height: 1.55; }

      .about__grid { grid-template-columns: 1fr; gap: 28px; }
      .about__body p { margin-bottom: 17px; font-size: 0.94rem; line-height: 1.72; }
      .about__highlights { gap: 10px; }
      .highlight-card {
        display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 12px;
        padding: 15px; border-radius: 8px; box-shadow: none;
      }
      .highlight-card__icon { grid-row: 1 / span 2; display: grid; place-items: center; width: 38px; height: 38px; margin: 0; border-radius: 8px; background: oklch(from var(--color-primary) l c h / 0.1); }
      .highlight-card__title { margin: 0 0 3px; font-size: 0.88rem; }
      .highlight-card__body { font-size: 0.8rem; line-height: 1.48; }

      .experience__list { gap: 12px; }
      .exp-item {
        display: block; padding: 18px; border: 1px solid var(--color-divider);
        border-radius: 8px; background: var(--color-surface); box-shadow: var(--shadow-sm);
      }
      .exp-item:last-child { border-bottom: 1px solid var(--color-divider); }
      .exp-item__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
      .exp-item__period { margin: 0; font-size: 0.72rem; }
      .exp-item__period::after { content: none; }
      .exp-item__company { font-size: 0.68rem; text-align: right; }
      .exp-item__role { margin-bottom: 8px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; }
      .exp-item__desc { margin-bottom: 14px; font-size: 0.84rem; line-height: 1.6; }
      .exp-item__tags { gap: 6px; }
      .tag--sm { padding: 4px 7px; border-radius: 4px; font-size: 0.65rem; }

      .skills__grid { grid-template-columns: 1fr; gap: 10px; }
      .skill-card { padding: 17px; border-radius: 8px; box-shadow: none; }
      .skill-card__category { margin-bottom: 12px; font-size: 0.72rem; }
      .skill-card__items { gap: 7px; }
      .skill-pill { padding: 5px 9px; font-size: 0.69rem; }

      .certs__grid { grid-template-columns: 1fr; gap: 10px; }
      .cert-card { padding: 15px; border-radius: 8px; }
      .cert-card__icon { width: 38px; height: 38px; border-radius: 8px; }
      .cert-card__title { font-size: 0.86rem; }
      .cert-card__issuer { font-size: 0.72rem; line-height: 1.45; }

      .linkedin-section__inner { align-items: stretch; gap: 24px; }
      .linkedin-section__text { width: 100%; }
      .linkedin-section__badge { width: 100%; overflow: hidden; }
      .linkedin-section__badge iframe, .linkedin-section__badge .badge-base { max-width: 100%; }

      .contact-section { padding-block: 52px; text-align: left; }
      .contact-section .section__subtitle { margin-inline: 0; }
      .contact__links { align-items: stretch; gap: 10px; }
      .contact__links .btn { width: 100%; max-width: none; min-height: 48px; border-radius: 8px; }

      .footer { margin-top: 0; padding-block: 28px; }
      .footer__inner { align-items: flex-start; gap: 18px; }
      .footer__links { display: grid; grid-template-columns: repeat(2, auto); gap: 10px 22px; }
      .scroll-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }
    }

    @media (max-width: 359px) {
      .container, .container--wide { padding-inline: 14px; }
      .hero__photo-wrap { grid-template-columns: 98px minmax(0, 1fr); }
      .hero__photo { width: 98px; }
      .hero__name { font-size: 2.4rem; }
      .section__title { font-size: 1.75rem; }
    }

    /* PRINT */
    @media print {
      .nav, .scroll-top, .theme-toggle, .nav__hamburger { display: none !important; }
      .hero { padding-top: var(--space-8); }
      body { background: #fff; color: #111; font-size: 12pt; }
      .section, .section--alt { padding-block: var(--space-8); background: none; }
      a[href]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
      .btn[href^="mailto"]::after, .btn[href^="#"]::after { content: ""; }
      .hero__actions, .contact__links { display: none; }
      .hero__name { font-size: 28pt; }
      @page { margin: 2cm; }
    }
    /* ── LINKEDIN BADGE ─────────────────────────────────── */
.linkedin-section {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  background: var(--color-surface);
}
.linkedin-section__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  flex-wrap: wrap;
}
.linkedin-section__text {}
.linkedin-section__badge {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
}
/* Force badge to respect dark mode */
[data-theme="dark"] .badge-base {
  filter: invert(0);
}
@media (max-width: 767px) {
  .linkedin-section__inner {
    flex-direction: column;
    align-items: stretch;
  }
}