@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

  :root {
    --paper: #F7F4EE;
    --paper-raised: #FFFFFF;
    --ink: #201E1B;
    --ink-soft: #6E685D;
    --rust: #9C4A2E;
    --rust-dark: #7E3B24;
    --sage: #6B7A63;
    --line: #DAD3C4;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: 'IBM Plex Sans', sans-serif; -webkit-font-smoothing: antialiased;
  }
  .display { font-family: 'Fraunces', serif; }
  .mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.03em; }

  /* Fallback block for a not-yet-uploaded image — real <img> tags
     cover this once content exists. */
  .ph {
    background: linear-gradient(135deg, #E4DCC9 0%, #D2C6AC 100%);
    display: flex; align-items: center; justify-content: center;
    color: #8A7F63; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.05em;
    text-align: center; padding: 12px;
  }

  header.site-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 6vw; position: sticky; top: 0; background: rgba(247,244,238,0.92);
    backdrop-filter: blur(6px); z-index: 10; border-bottom: 1px solid var(--line);
  }
  .site-nav .fam-link { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
  .site-nav .fam-link:hover { color: var(--rust); }

  /* ---- HERO: pinned, scroll-driven zoom ---- */
  .hero-pin-wrapper { position: relative; height: 230vh; }
  .hero-visual {
    position: sticky; top: 0; height: 100vh; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--ink);
  }
  .hero-visual .hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-overlay {
    position: absolute; inset: 0; opacity: 0.4;
    background: linear-gradient(180deg, rgba(32,30,27,0.25) 0%, rgba(32,30,27,0.85) 100%);
  }
  .hero-text { position: relative; z-index: 2; text-align: center; color: #fff; padding: 0 6vw; }
  .hero-text .hero-eyebrow,
  .hero-text h1,
  .hero-text p.role,
  .scroll-cue {
    /* Layered halo shadow so white text stays legible over
       light/white-background photos, not just dark ones — the
       gradient overlay alone isn't enough for every photo. */
    text-shadow: 0 2px 20px rgba(0,0,0,0.65), 0 1px 4px rgba(0,0,0,0.55);
  }
  .hero-text .hero-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.85); margin-bottom: 18px; }
  .hero-text h1 { font-size: clamp(56px, 10vw, 130px); font-weight: 600; line-height: 0.95; margin: 0 0 16px; color: #fff; }
  .hero-text p.role { font-size: 16px; color: rgba(255,255,255,0.9); max-width: 40ch; margin: 0 auto; line-height: 1.6; }
  .scroll-cue { margin-top: 48px; font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.75); }
  .scroll-cue .arrow { display: block; margin-top: 6px; animation: bob 1.8s ease-in-out infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

  @keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.4); } }
  @keyframes heroOverlayDarken { from { opacity: 0.3; } to { opacity: 0.85; } }
  @keyframes heroTextFade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-26px); } }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .hero-pin-wrapper { view-timeline: --hero-scroll block; }
    .hero-photo { animation: heroZoom linear both; animation-timeline: --hero-scroll; animation-range: entry 0% cover 65%; }
    .hero-overlay { animation: heroOverlayDarken linear both; animation-timeline: --hero-scroll; animation-range: entry 0% cover 65%; }
    .hero-text { animation: heroTextFade linear both; animation-timeline: --hero-scroll; animation-range: entry 0% cover 38%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-photo, .hero-overlay, .hero-text, .scroll-cue .arrow { animation: none !important; }
  }

  /* ---- BIO PANEL ---- */
  .bio-section { padding: 100px 6vw 80px; border-top: 1px solid var(--line); margin-top: 80px; }
  .bio-grid { display: grid; grid-template-columns: 200px 1fr; gap: 60px; }
  .bio-facts { display: flex; flex-direction: column; gap: 22px; }
  .bio-facts .fact-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin-bottom: 4px; }
  .bio-facts .fact-value { font-size: 22px; font-weight: 500; font-family: 'Fraunces', serif; }
  .bio-copy p.lede { font-size: 22px; line-height: 1.5; font-family: 'Fraunces', serif; font-weight: 400; margin: 0 0 28px; }
  .bio-copy p.body-text { font-size: 15px; line-height: 1.75; color: var(--ink-soft); max-width: 62ch; }

  .experience-list { margin-top: 40px; border-top: 1px solid var(--line); }
  .experience-row { display: grid; grid-template-columns: 90px 1fr; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
  .experience-row .yr { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink-soft); padding-top: 3px; }
  .exp-content { display: flex; gap: 14px; align-items: flex-start; }
  .exp-thumb-link { position: relative; width: 64px; height: 64px; flex-shrink: 0; border-radius: 2px; overflow: hidden; cursor: pointer; background: var(--line); }
  .exp-thumb-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .exp-thumb-link:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
  .play-btn-sm { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; }
  .play-btn-sm::after { content: ''; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--rust); margin-left: 2px; }
  .experience-row h4 { margin: 0 0 4px; font-size: 15px; font-weight: 500; }
  .experience-row p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

  /* ---- GALLERY (mosaic — some tiles span 2x2) ---- */
  .section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 30px; padding: 0 6vw; }
  .section-head .idx { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--rust); }
  .section-head h2 { font-size: 30px; font-weight: 500; margin: 0; }
  .gallery-section { padding: 90px 0 20px; }
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    grid-auto-flow: dense;
    gap: 4px;
    padding: 0 6vw;
  }
  .gallery-item { position: relative; cursor: pointer; overflow: hidden; }
  .gallery-item.large { grid-column: span 2; grid-row: span 2; }
  .gallery-item .frame-no {
    position: absolute; top: 10px; left: 10px; font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: #fff; background: rgba(32,30,27,0.55); padding: 2px 7px;
  }
  .gallery-item .cap {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 12px;
    background: linear-gradient(transparent, rgba(32,30,27,0.75)); color: #fff; font-size: 12px;
    opacity: 0; transition: opacity 0.2s;
  }
  .gallery-item:hover .cap, .gallery-item:focus-visible .cap { opacity: 1; }
  .gallery-item:focus-visible { outline: 2px solid var(--rust); outline-offset: -2px; }

  /* ---- VIDEO ---- */
  .video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 0 6vw; }
  .video-card { position: relative; aspect-ratio: 16/9; cursor: pointer; background-color: var(--line); }
  .video-card .play-btn {
    position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
    background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;
  }
  .video-card .play-btn::after { content: ''; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--rust); margin-left: 4px; }
  .video-card .cap { position: absolute; bottom: 10px; left: 12px; color: #fff; font-size: 12.5px; background: rgba(32,30,27,0.6); padding: 3px 9px; }

  /* ---- CONTACT ---- */
  .contact-section { padding: 100px 6vw 120px; border-top: 1px solid var(--line); margin-top: 90px; background: var(--paper-raised); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1100px; margin: 0 auto; }
  .contact-intro h2 { font-size: 36px; margin: 0 0 16px; }
  .contact-intro p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; max-width: 42ch; }
  .contact-form .field { margin-bottom: 18px; }
  .contact-form label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 7px; font-family: 'IBM Plex Mono', monospace; }
  .contact-form input, .contact-form textarea { width: 100%; border: 1px solid var(--line); background: var(--paper); padding: 12px 13px; font-size: 14px; font-family: 'IBM Plex Sans', sans-serif; border-radius: 2px; }
  .contact-form textarea { min-height: 120px; resize: vertical; }
  .contact-form .honeypot { position: absolute; left: -9999px; }
  .contact-form .spam-check { font-size: 13px; color: var(--ink-soft); }
  .contact-form .spam-check input { width: 70px; display: inline-block; margin-left: 8px; }
  .btn-submit { background: var(--rust); color: var(--paper); border: none; padding: 14px 28px; font-size: 14px; font-weight: 500; border-radius: 2px; cursor: pointer; }
  .btn-submit:hover { background: var(--rust-dark); }

  footer.site-foot { padding: 30px 6vw 50px; text-align: center; font-size: 12px; color: var(--ink-soft); }

  /* Lightbox */
  .lightbox { position: fixed; inset: 0; background: rgba(32,30,27,0.92); display: none; align-items: center; justify-content: center; z-index: 100; }
  .lightbox.open { display: flex; }
  .lightbox .close-btn { position: absolute; top: 24px; right: 6vw; color: #fff; background: none; border: none; font-size: 28px; cursor: pointer; }

  @media (max-width: 900px) {
    .bio-grid { grid-template-columns: 1fr; gap: 24px; }
    .bio-facts { flex-direction: row; flex-wrap: wrap; gap: 30px; }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item.large { grid-column: span 2; grid-row: span 2; }
    .video-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width: 480px) {
    .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 3px; grid-auto-rows: 160px; }
    header.site-nav, .hero, .bio-section, .contact-section, .section-head { padding-left: 5vw; padding-right: 5vw; }
    .gallery-grid, .video-grid { padding-left: 5vw; padding-right: 5vw; }
  }

  /* ============ HOMEPAGE ============ */
  .home-intro { padding: 90px 6vw 60px; max-width: 900px; }
  .home-intro .eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sage); margin-bottom: 18px; }
  .home-intro h1 { font-size: clamp(40px, 6vw, 68px); font-weight: 600; line-height: 1.02; margin: 0 0 22px; }
  .home-intro p { font-size: 16px; color: var(--ink-soft); line-height: 1.7; max-width: 60ch; }

  .member-directory { padding: 20px 6vw 90px; }
  .member-grid-public { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .member-card-public {
    position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; align-items: flex-end;
    text-decoration: none; color: inherit;
  }
  .member-card-public .ph { position: absolute; inset: 0; }
  .member-card-public .card-info { position: relative; z-index: 2; padding: 18px; width: 100%; }
  .member-card-public.dormant .card-info { color: var(--ink-soft); }
  .member-card-public:not(.dormant) .card-info { color: #fff; }
  .member-card-public:not(.dormant)::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(32,30,27,0.78) 100%);
    z-index: 1;
  }
  .member-card-public.dormant { background: var(--paper-raised); border: 1px dashed var(--line); }
  .member-card-public .role-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.85; margin-bottom: 4px; display: block; }
  .member-card-public h3 { font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500; margin: 0; }
  .member-card-public .status { font-size: 11px; margin-top: 6px; opacity: 0.8; }

  .feed-section { padding: 70px 6vw 90px; border-top: 1px solid var(--line); }
  .feed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .feed-item { position: relative; aspect-ratio: 1; overflow: hidden; cursor: pointer; }
  .feed-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .feed-item .feed-cap {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 8px 10px; font-size: 11px; color: #fff;
    background: linear-gradient(transparent, rgba(32,30,27,0.7)); opacity: 0; transition: opacity 0.2s;
  }
  .feed-item:hover .feed-cap, .feed-item:focus-visible .feed-cap { opacity: 1; }

  .ig-teaser { padding: 70px 6vw 90px; border-top: 1px solid var(--line); }
  .ig-teaser-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
  .ig-teaser-item { aspect-ratio: 1; overflow: hidden; }
  .ig-teaser-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ig-teaser-link { font-size: 13px; color: var(--rust); text-decoration: none; margin-top: 16px; display: inline-block; }

  @media (max-width: 900px) {
    .member-grid-public { grid-template-columns: repeat(2, 1fr); }
    .feed-grid { grid-template-columns: repeat(3, 1fr); }
    .ig-teaser-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 480px) {
    .home-intro, .member-directory, .feed-section, .ig-teaser { padding-left: 5vw; padding-right: 5vw; }
    .feed-grid { grid-template-columns: repeat(2, 1fr); }
  }
  
/* =====================================================================
   Kevin's page — HUD / Top Gun theme
   Everything below is scoped under .kevin-page so it can't collide with
   Jiselle's page or the homepage. Append to the end of assets/site.css.
   ===================================================================== */
.kevin-page{
  --k-void:#0A0C10;
  --k-panel:#12161C;
  --k-line:#1F2730;
  --k-line-bright:#2B3542;
  --k-amber:#FFA83C;
  --k-amber-dim:#8C6226;
  --k-cyan:#3FD7C4;
  --k-cyan-dim:#296e63;
  --k-text:#E7ECEF;
  --k-text-muted:#8A96A3;
  --k-text-dim:#4E5964;
  --k-r:3px;
  --k-font-display:'Space Grotesk',sans-serif;
  --k-font-mono:'IBM Plex Mono',monospace;
  background:var(--k-void);
  color:var(--k-text);
}
.kevin-page a{color:inherit;}
.kevin-page :focus-visible{outline:2px solid var(--k-cyan);outline-offset:3px;}
.kevin-page .wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.kevin-page .eyebrow{font-family:var(--k-font-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--k-cyan);display:flex;align-items:center;gap:8px;}
.kevin-page .eyebrow::before{content:"";width:6px;height:6px;background:var(--k-cyan);border-radius:50%;box-shadow:0 0 8px var(--k-cyan);}

.kevin-page .nav{position:sticky;top:0;z-index:50;background:rgba(10,12,16,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--k-line);}
.kevin-page .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;}
.kevin-page .nav .mark{font-family:var(--k-font-mono);font-size:13px;color:var(--k-text);}
.kevin-page .nav .mark span{color:var(--k-text-dim);}
.kevin-page .brand-cluster{display:flex;align-items:center;gap:16px;}
.kevin-page .home-link{font-family:var(--k-font-mono);font-size:11px;letter-spacing:.05em;color:var(--k-text-dim);text-decoration:none;padding-right:16px;border-right:1px solid var(--k-line);}
.kevin-page .home-link:hover{color:var(--k-cyan);}
@media(max-width:520px){.kevin-page .home-link{padding-right:0;border-right:none;}.kevin-page .home-link span{display:none;}}
.kevin-page .nav ul{list-style:none;display:flex;gap:28px;}
.kevin-page .nav a{font-family:var(--k-font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--k-text-muted);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;}
.kevin-page .nav a:hover{color:var(--k-text);border-color:var(--k-line-bright);}
.kevin-page .status{display:flex;align-items:center;gap:6px;font-family:var(--k-font-mono);font-size:10px;letter-spacing:.1em;color:var(--k-text-dim);}
.kevin-page .status .dot{width:6px;height:6px;border-radius:50%;background:var(--k-amber);animation:kevin-pulse 2.4s ease-in-out infinite;}
@keyframes kevin-pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
@media(max-width:720px){.kevin-page .nav ul{display:none;}}

.kevin-page .hero{position:relative;overflow:hidden;border-bottom:1px solid var(--k-line);}
.kevin-page .hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;padding:72px 24px;}
@media(max-width:860px){.kevin-page .hero .wrap{grid-template-columns:1fr;padding:48px 24px;}}
.kevin-page .hero-name{font-family:var(--k-font-display);font-weight:700;font-size:clamp(40px,6vw,68px);line-height:1.02;margin:14px 0 10px;letter-spacing:-.01em;}
.kevin-page .hero-role{font-family:var(--k-font-mono);font-size:14px;color:var(--k-cyan);margin-bottom:18px;}
.kevin-page .hero-tagline{font-size:16px;color:var(--k-text-muted);max-width:46ch;margin-bottom:28px;}
.kevin-page .meta-row{display:flex;flex-wrap:wrap;gap:18px;font-family:var(--k-font-mono);font-size:11px;color:var(--k-text-dim);margin-bottom:32px;}
.kevin-page .meta-row b{color:var(--k-text-muted);font-weight:500;}
.kevin-page .btn-row{display:flex;gap:12px;flex-wrap:wrap;}
.kevin-page .btn{font-family:var(--k-font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:12px 20px;border-radius:var(--k-r);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .15s,border-color .15s,color .15s;}
.kevin-page .btn-primary{background:var(--k-amber);color:#0A0C10;font-weight:600;border:1px solid var(--k-amber);}
.kevin-page .btn-primary:hover{background:#ffbb63;}
.kevin-page .btn-ghost{border:1px solid var(--k-line-bright);color:var(--k-text-muted);}
.kevin-page .btn-ghost:hover{border-color:var(--k-cyan);color:var(--k-cyan);}

.kevin-page .hero-frame{position:relative;aspect-ratio:1/1;max-width:340px;margin:0 auto;}
.kevin-page .radar{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(63,215,196,.16),transparent 30%);animation:kevin-spin 9s linear infinite;}
@keyframes kevin-spin{to{transform:rotate(360deg);}}
.kevin-page .ring{position:absolute;border:1px solid var(--k-line-bright);border-radius:50%;}
.kevin-page .ring.r1{inset:0;}
.kevin-page .ring.r2{inset:26px;border-color:var(--k-line);}
.kevin-page .photo-slot{position:absolute;inset:52px;border-radius:50%;overflow:hidden;background:var(--k-panel);border:1px solid var(--k-cyan-dim);}
.kevin-page .photo-slot img{width:100%;height:100%;object-fit:cover;}
.kevin-page .corner{position:absolute;width:18px;height:18px;border:1px solid var(--k-amber-dim);}
.kevin-page .corner.tl{top:-6px;left:-6px;border-right:none;border-bottom:none;}
.kevin-page .corner.br{bottom:-6px;right:-6px;border-left:none;border-top:none;}
@media(prefers-reduced-motion:reduce){.kevin-page .radar,.kevin-page .status .dot{animation:none;}}

.kevin-page section{padding:88px 0;border-bottom:1px solid var(--k-line);}
@media(max-width:720px){.kevin-page section{padding:56px 0;}}
.kevin-page .sec-head{margin-bottom:48px;padding:0 24px;}
.kevin-page .sec-title{font-family:var(--k-font-display);font-weight:600;font-size:clamp(26px,3.4vw,36px);margin-top:8px;}
.kevin-page .sec-intro{font-size:14px;color:var(--k-text-muted);max-width:60ch;margin-top:8px;}
.kevin-page .empty-note{font-family:var(--k-font-mono);font-size:12px;color:var(--k-text-dim);padding:0 24px;}

.kevin-page .timeline{position:relative;padding-left:28px;margin:0 24px;}
.kevin-page .timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(var(--k-line-bright),var(--k-line) 85%,transparent);}
.kevin-page .entry{position:relative;padding-bottom:44px;}
.kevin-page .entry:last-child{padding-bottom:0;}
.kevin-page .entry::before{content:"";position:absolute;left:-28px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--k-void);border:2px solid var(--k-cyan);}
.kevin-page .entry.award::before{border-color:var(--k-amber);width:8px;height:8px;left:-27px;}
.kevin-page .entry.achievement::before{border-color:var(--k-cyan);width:8px;height:8px;left:-27px;}
.kevin-page .entry-time{font-family:var(--k-font-mono);font-size:11px;color:var(--k-text-dim);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px;}
.kevin-page .entry-title{font-family:var(--k-font-display);font-weight:600;font-size:19px;margin-bottom:2px;}
.kevin-page .entry-org{font-family:var(--k-font-mono);font-size:12px;color:var(--k-cyan);margin-bottom:12px;}
.kevin-page .entry ul{list-style:none;display:flex;flex-direction:column;gap:6px;}
.kevin-page .entry li{position:relative;padding-left:16px;color:var(--k-text-muted);font-size:14px;}
.kevin-page .entry li::before{content:"—";position:absolute;left:0;color:var(--k-text-dim);}
.kevin-page .award-card{background:var(--k-panel);border:1px solid var(--k-amber-dim);border-radius:var(--k-r);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
.kevin-page .award-flag{font-family:var(--k-font-mono);font-size:9px;letter-spacing:.12em;color:var(--k-amber);border:1px solid var(--k-amber-dim);border-radius:2px;padding:2px 6px;flex-shrink:0;margin-top:2px;}
.kevin-page .award-body b{display:block;font-size:14px;margin-bottom:2px;}
.kevin-page .award-body span{font-size:13px;color:var(--k-text-muted);}
.kevin-page .achievement-card{border-color:var(--k-cyan-dim);}
.kevin-page .achievement-flag{color:var(--k-cyan);border-color:var(--k-cyan-dim);}

.kevin-page .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 24px;}
@media(max-width:900px){.kevin-page .grid3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.kevin-page .grid3{grid-template-columns:1fr;}}
.kevin-page .card{background:var(--k-panel);border:1px solid var(--k-line);border-radius:var(--k-r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s;}
.kevin-page .card:hover{border-color:var(--k-line-bright);transform:translateY(-2px);}
.kevin-page .card-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--k-line);}
.kevin-page .dots{display:flex;gap:5px;}
.kevin-page .dots span{width:6px;height:6px;border-radius:50%;background:var(--k-line-bright);}
.kevin-page .badge{font-family:var(--k-font-mono);font-size:9px;letter-spacing:.1em;padding:2px 7px;border-radius:2px;text-transform:uppercase;}
.kevin-page .badge.live{color:var(--k-amber);border:1px solid var(--k-amber-dim);}
.kevin-page .badge.dev{color:var(--k-cyan);border:1px solid var(--k-cyan-dim);}
.kevin-page .card-body{padding:18px;flex:1;display:flex;flex-direction:column;}
.kevin-page .card-body h3{font-family:var(--k-font-display);font-size:17px;font-weight:600;margin-bottom:8px;}
.kevin-page .card-body p{font-size:13.5px;color:var(--k-text-muted);margin-bottom:16px;flex:1;}
.kevin-page .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.kevin-page .tags span{font-family:var(--k-font-mono);font-size:10px;color:var(--k-text-dim);border:1px solid var(--k-line-bright);border-radius:2px;padding:2px 7px;}
.kevin-page .card-link{font-family:var(--k-font-mono);font-size:11px;color:var(--k-cyan);text-decoration:none;}
.kevin-page .card-link:hover{text-decoration:underline;}

.kevin-page .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 24px;}
@media(max-width:760px){.kevin-page .grid4{grid-template-columns:repeat(2,1fr);}}
.kevin-page .interest{background:var(--k-panel);border:1px solid var(--k-line);border-radius:var(--k-r);padding:18px;text-align:center;}
.kevin-page .interest .ico{font-family:var(--k-font-mono);font-size:18px;color:var(--k-cyan);margin-bottom:10px;}
.kevin-page .interest b{display:block;font-size:13.5px;margin-bottom:4px;}
.kevin-page .interest span{font-size:12px;color:var(--k-text-dim);}

.kevin-page footer{padding:56px 0;}
.kevin-page .contact-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:0 24px;}
.kevin-page .contact-row p{font-family:var(--k-font-mono);font-size:11px;color:var(--k-text-dim);}
.kevin-page .socials a{font-family:var(--k-font-mono);font-size:11px;color:var(--k-text-muted);text-decoration:none;}
.kevin-page .socials a:hover{color:var(--k-cyan);}

/* =====================================================================
   Scrapbook module — shared theme for Kavelle's and Jiselle's scrapbook
   pages. Scoped under .scrapbook-page, sb- prefixed classes throughout
   so nothing collides with the rest of site.css.
   ===================================================================== */
.scrapbook-page{
  --sb-paper:#FBF3E4;
  --sb-paper-card:#FFFDF8;
  --sb-ink:#4A3F35;
  --sb-ink-soft:#8A7C6C;
  --sb-coral:#FF8B6B;
  --sb-coral-dark:#C85A3D;
  --sb-yellow:#FFD166;
  --sb-yellow-dark:#B5860E;
  --sb-mint:#8FD3C0;
  --sb-mint-dark:#3E8570;
  --sb-sky:#7EC8E3;
  --sb-sky-dark:#2E7896;
  --sb-pink:#F5A6C6;
  --sb-pink-dark:#C15E88;
  --sb-r:16px;
  --sb-font-hand:'Caveat',cursive;
  --sb-font-body:'Baloo 2',sans-serif;
  background:var(--sb-paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(74,63,53,.06) 1px, transparent 0);
  background-size:22px 22px;
  color:var(--sb-ink);
  font-family:var(--sb-font-body);
  line-height:1.6;
  padding-bottom:60px;
}
.scrapbook-page a{color:inherit;}
.scrapbook-page .sb-wrap{max-width:960px;margin:0 auto;padding:0 24px;}

.scrapbook-page .sb-nav{background:var(--sb-paper-card);border-bottom:3px solid var(--sb-ink);}
.scrapbook-page .sb-nav .sb-wrap{display:flex;align-items:center;gap:16px;height:64px;}
.scrapbook-page .sb-home{font-family:var(--sb-font-body);font-size:12px;font-weight:600;color:var(--sb-ink-soft);text-decoration:none;border-right:2px dashed var(--sb-ink-soft);padding-right:16px;}
.scrapbook-page .sb-brand{font-family:var(--sb-font-hand);font-size:28px;font-weight:700;color:var(--sb-coral-dark);}

.scrapbook-page .sb-hero{padding:56px 0 40px;text-align:center;}
.scrapbook-page .sb-tape{display:inline-block;background:var(--sb-yellow);color:var(--sb-yellow-dark);font-weight:600;font-size:13px;padding:4px 14px;border-radius:3px;transform:rotate(-2deg);margin-bottom:18px;}
.scrapbook-page .sb-hero h1{font-family:var(--sb-font-hand);font-size:64px;color:var(--sb-coral-dark);line-height:1;}

.scrapbook-page .sb-section-tag{display:flex;align-items:center;gap:8px;font-family:var(--sb-font-hand);font-size:30px;color:var(--sb-mint-dark);margin-bottom:22px;}
.scrapbook-page .sb-dot{width:10px;height:10px;border-radius:50%;background:var(--sb-mint);}
.scrapbook-page .sb-empty{color:var(--sb-ink-soft);font-size:14px;margin-bottom:40px;}

.scrapbook-page .sb-about-current{
  background:var(--sb-paper-card);border:3px solid var(--sb-ink);border-radius:var(--sb-r);
  padding:28px 30px;position:relative;transform:rotate(-.6deg);margin-bottom:36px;
  display:flex;gap:26px;align-items:flex-start;
}
.scrapbook-page .sb-about-current::before{content:"RIGHT NOW";position:absolute;top:-14px;left:24px;background:var(--sb-coral);color:#fff;font-weight:700;font-size:12px;padding:4px 14px;border-radius:20px;letter-spacing:.03em;}
.scrapbook-page .sb-about-photo{flex:0 0 150px;background:#fff;border:1px solid #e4ddce;border-radius:6px;padding:10px 10px 24px;box-shadow:0 3px 6px rgba(0,0,0,.1);transform:rotate(-3deg);}
.scrapbook-page .sb-about-photo img{width:100%;height:170px;object-fit:cover;border-radius:2px;}
.scrapbook-page .sb-about-body{flex:1;min-width:0;}
@media(max-width:640px){.scrapbook-page .sb-about-current{flex-direction:column;align-items:center;text-align:center;}}
.scrapbook-page .sb-about-current h2{font-family:var(--sb-font-hand);font-size:36px;color:var(--sb-ink);margin-top:6px;}
.scrapbook-page .sb-about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px;}
@media(max-width:620px){.scrapbook-page .sb-about-grid{grid-template-columns:1fr;}}
.scrapbook-page .sb-about-item{background:var(--sb-paper);border-radius:10px;padding:14px 16px;}
.scrapbook-page .sb-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--sb-coral-dark);margin-bottom:4px;}
.scrapbook-page .sb-about-item p{font-size:14.5px;color:var(--sb-ink);}

.scrapbook-page .sb-capsule-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;margin-bottom:56px;}
.scrapbook-page .sb-capsule-card{flex:0 0 150px;background:var(--sb-paper-card);border:2px solid var(--sb-ink-soft);border-radius:12px;padding:14px;opacity:.7;filter:grayscale(30%);transform:rotate(1deg);}
.scrapbook-page .sb-capsule-card:nth-child(even){transform:rotate(-1.5deg);}
.scrapbook-page .sb-thumb{width:44px;height:44px;border-radius:50%;overflow:hidden;border:2px solid var(--sb-ink-soft);margin-bottom:8px;}
.scrapbook-page .sb-thumb img{width:100%;height:100%;object-fit:cover;}
.scrapbook-page .sb-age{font-family:var(--sb-font-hand);font-size:22px;color:var(--sb-ink-soft);}
.scrapbook-page .sb-capsule-card p{font-size:12px;color:var(--sb-ink-soft);margin-top:4px;}

.scrapbook-page .sb-gate-card{background:var(--sb-paper-card);border:3px dashed var(--sb-sky-dark);border-radius:var(--sb-r);padding:44px 30px;text-align:center;max-width:480px;margin:0 auto 56px;}
.scrapbook-page .sb-lock{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--sb-sky);display:flex;align-items:center;justify-content:center;font-size:26px;}
.scrapbook-page .sb-gate-card h3{font-family:var(--sb-font-hand);font-size:30px;color:var(--sb-sky-dark);}
.scrapbook-page .sb-gate-card p{font-size:14px;color:var(--sb-ink-soft);margin:10px 0 18px;}
.scrapbook-page .sb-gate-card input{width:100%;padding:12px 14px;border:2px solid var(--sb-ink-soft);border-radius:10px;font-family:var(--sb-font-body);font-size:15px;margin-bottom:12px;}
.scrapbook-page .sb-gate-card button{background:var(--sb-sky-dark);color:#fff;border:none;border-radius:10px;padding:12px 28px;font-family:var(--sb-font-body);font-weight:600;font-size:14px;cursor:pointer;}

.scrapbook-page .sb-milestone{background:var(--sb-paper-card);border:3px solid var(--sb-ink);border-radius:var(--sb-r);padding:24px;margin-bottom:28px;}
.scrapbook-page .sb-milestone:nth-child(odd){transform:rotate(.5deg);}
.scrapbook-page .sb-milestone:nth-child(even){transform:rotate(-.5deg);}
.scrapbook-page .sb-m-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px;flex-wrap:wrap;gap:10px;}
.scrapbook-page .sb-m-date{background:var(--sb-yellow);color:var(--sb-yellow-dark);font-weight:700;font-size:12px;padding:5px 12px;border-radius:20px;white-space:nowrap;}
.scrapbook-page .sb-m-title{font-family:var(--sb-font-hand);font-size:32px;color:var(--sb-ink);}
.scrapbook-page .sb-m-loc{font-size:12px;color:var(--sb-ink-soft);margin-bottom:14px;}
.scrapbook-page .sb-polaroids{display:flex;gap:12px;overflow-x:auto;margin-bottom:16px;}
.scrapbook-page .sb-polaroid{flex:0 0 120px;background:#fff;border:1px solid #e4ddce;border-radius:4px;padding:8px 8px 18px;box-shadow:0 2px 4px rgba(0,0,0,.08);}
.scrapbook-page .sb-polaroid img{width:100%;height:90px;object-fit:cover;border-radius:2px;}
.scrapbook-page .sb-polaroid:nth-child(1){transform:rotate(-3deg);}
.scrapbook-page .sb-polaroid:nth-child(2){transform:rotate(2deg);}
.scrapbook-page .sb-polaroid:nth-child(3){transform:rotate(-1deg);}
.scrapbook-page .sb-m-desc{font-size:14.5px;color:var(--sb-ink);margin-bottom:14px;}
.scrapbook-page .sb-m-quote{background:var(--sb-pink);color:var(--sb-pink-dark);border-radius:14px;border-bottom-left-radius:3px;padding:10px 16px;font-family:var(--sb-font-hand);font-size:20px;display:inline-block;margin-bottom:10px;}
.scrapbook-page .sb-m-love{font-size:13px;font-weight:600;color:var(--sb-mint-dark);}
.scrapbook-page .sb-m-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.scrapbook-page .sb-m-tags span{background:var(--sb-paper);border:1px solid var(--sb-ink-soft);border-radius:20px;padding:3px 12px;font-size:11px;color:var(--sb-ink-soft);}

/* =====================================================================
   Jeanrin's page — warm homemaker / lifestyle-creator theme.
   Scoped under .jeanrin-page, jn- prefixed classes throughout.
   ===================================================================== */
.jeanrin-page{
  --jn-cream:#FAF5ED; --jn-card:#FFFDF9; --jn-ink:#3A342E; --jn-ink-soft:#8C8177;
  --jn-terracotta:#C1694F; --jn-terracotta-dark:#9C4E38;
  --jn-sage:#8A9A7E; --jn-sage-dark:#5F6E54;
  --jn-gold:#D4A657; --jn-gold-dark:#A67C34;
  --jn-r:14px;
  --jn-font-serif:'Fraunces',serif; --jn-font-body:'Work Sans',sans-serif;
  background:var(--jn-cream); color:var(--jn-ink); font-family:var(--jn-font-body); line-height:1.65; padding-bottom:60px;
}
.jeanrin-page a{color:inherit;}
.jeanrin-page .jn-wrap{max-width:1000px;margin:0 auto;padding:0 24px;}
.jeanrin-page .jn-empty{color:var(--jn-ink-soft);font-size:14px;margin-bottom:40px;}

.jeanrin-page .jn-nav{background:var(--jn-card);border-bottom:1px solid #ECE3D6;}
.jeanrin-page .jn-nav .jn-wrap{display:flex;align-items:center;justify-content:space-between;height:70px;flex-wrap:wrap;gap:10px;}
.jeanrin-page .jn-home{font-size:12px;font-weight:600;color:var(--jn-ink-soft);text-decoration:none;}
.jeanrin-page .jn-brand{font-family:var(--jn-font-serif);font-size:24px;color:var(--jn-terracotta-dark);}
.jeanrin-page .jn-nav ul{list-style:none;display:flex;gap:26px;}
.jeanrin-page .jn-nav a{font-size:13px;font-weight:500;text-decoration:none;color:var(--jn-ink);}

.jeanrin-page .jn-hero{text-align:center;padding:64px 24px 48px;}
.jeanrin-page .jn-eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--jn-sage-dark);font-weight:600;margin-bottom:14px;}
.jeanrin-page .jn-hero h1{font-family:var(--jn-font-serif);font-weight:500;font-size:60px;color:var(--jn-ink);}
.jeanrin-page .jn-role{font-size:16px;color:var(--jn-terracotta-dark);margin-top:8px;font-weight:500;}
.jeanrin-page .jn-hero p{max-width:52ch;margin:16px auto 0;color:var(--jn-ink-soft);font-size:15px;}

.jeanrin-page .jn-section-head{margin-bottom:26px;padding-top:20px;}
.jeanrin-page .jn-section-head h2{font-family:var(--jn-font-serif);font-size:32px;font-weight:500;margin-top:6px;}

.jeanrin-page .jn-intro-card{background:var(--jn-card);border:1px solid #ECE3D6;border-radius:var(--jn-r);padding:32px;margin-bottom:60px;}
.jeanrin-page .jn-intro-card p{font-size:15px;margin-bottom:14px;}
.jeanrin-page .jn-fact-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
.jeanrin-page .jn-fact-chips span{background:var(--jn-cream);border:1px solid #ECE3D6;border-radius:20px;padding:6px 16px;font-size:12.5px;color:var(--jn-ink-soft);}

.jeanrin-page .jn-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;}
.jeanrin-page .jn-filter-row button{background:var(--jn-card);border:1px solid #ECE3D6;border-radius:20px;padding:7px 16px;font-size:12.5px;font-family:var(--jn-font-body);color:var(--jn-ink-soft);cursor:pointer;}
.jeanrin-page .jn-filter-row button.active{background:var(--jn-terracotta);color:#fff;border-color:var(--jn-terracotta);}

.jeanrin-page .jn-home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:64px;}
@media(max-width:760px){.jeanrin-page .jn-home-grid{grid-template-columns:repeat(2,1fr);}}
.jeanrin-page .jn-home-card{background:var(--jn-card);border-radius:var(--jn-r);overflow:hidden;border:1px solid #ECE3D6;}
.jeanrin-page .jn-ph{width:100%;height:150px;object-fit:cover;display:block;}
.jeanrin-page .jn-ph-blank,.jeanrin-page .jn-cover-blank{background:linear-gradient(135deg,#EDE3D4,#E3D6C4);}
.jeanrin-page .jn-home-card .jn-body{padding:14px;}
.jeanrin-page .jn-tag{display:inline-block;background:var(--jn-sage);color:#fff;font-size:10px;padding:3px 10px;border-radius:12px;margin-bottom:8px;}
.jeanrin-page .jn-date{font-size:11px;color:var(--jn-ink-soft);margin-bottom:4px;}
.jeanrin-page .jn-home-card h4{font-family:var(--jn-font-serif);font-size:17px;font-weight:500;margin-bottom:4px;}
.jeanrin-page .jn-home-card p{font-size:13px;color:var(--jn-ink-soft);}

.jeanrin-page .jn-fav-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:64px;}
@media(max-width:800px){.jeanrin-page .jn-fav-grid{grid-template-columns:repeat(2,1fr);}}
.jeanrin-page .jn-fav-card{background:var(--jn-card);border:1px solid #ECE3D6;border-radius:var(--jn-r);padding:18px;text-align:center;}
.jeanrin-page .jn-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--jn-gold-dark);font-weight:600;margin-bottom:8px;}
.jeanrin-page .jn-fav-card p{font-size:13.5px;}

.jeanrin-page .jn-blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px;}
@media(max-width:760px){.jeanrin-page .jn-blog-grid{grid-template-columns:1fr;}}
.jeanrin-page .jn-blog-card{display:block;background:var(--jn-card);border:1px solid #ECE3D6;border-radius:var(--jn-r);overflow:hidden;text-decoration:none;}
.jeanrin-page .jn-cover{width:100%;height:160px;object-fit:cover;display:block;}
.jeanrin-page .jn-blog-card .jn-body{padding:16px;}
.jeanrin-page .jn-blog-card h4{font-family:var(--jn-font-serif);font-size:19px;font-weight:500;}

.jeanrin-page .jn-insta-block{background:var(--jn-card);border:1px solid #ECE3D6;border-radius:var(--jn-r);padding:28px;text-align:center;margin-bottom:40px;}
.jeanrin-page .jn-insta-handle{font-family:var(--jn-font-serif);font-size:22px;margin-bottom:16px;}
.jeanrin-page .jn-insta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:420px;margin:0 auto 20px;}
.jeanrin-page .jn-insta-grid .jn-ph{aspect-ratio:1;height:auto;background:linear-gradient(135deg,#EDE3D4,#DCC7A8);border-radius:6px;}
.jeanrin-page .jn-btn{display:inline-block;background:var(--jn-terracotta);color:#fff;padding:10px 24px;border-radius:20px;font-size:13px;text-decoration:none;font-weight:600;}