/* ===================== ROOT & RESET ===================== */
:root{
  --sky:#87CEEB;
  --sky-deep:#5DADE2;
  --grass:#4CAF50;
  --grass-dark:#357A38;
  --dirt:#8B4513;
  --dirt-dark:#5E2F0D;
  --sun:#FFD700;
  --sun-dark:#E0B400;
  --wood:#B98249;
  --wood-dark:#7A4E28;
  --wood-darker:#4E342E;
  --panel:#D6D9DD;
  --panel-dark:#9AA0A8;
  --ui-blue:#4A90D9;
  --cream:#FFF6E0;
  --ink:#3E2723;
  --outline:#2B2B2B;
  --white:#FFFFFF;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

html, body{
  overflow-x:hidden;
  width:100%;
  max-width:100%;
}

body{
  margin:0;
  font-family:'VT323', monospace;
  font-size:20px;
  color:var(--ink);
  background:var(--sky);
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='10' y='2' width='4' height='4' fill='%232b2b2b'/%3E%3Crect x='6' y='6' width='12' height='4' fill='%232b2b2b'/%3E%3Crect x='4' y='10' width='16' height='8' fill='%23ffd7a3'/%3E%3Crect x='4' y='10' width='4' height='8' fill='%232b2b2b'/%3E%3Crect x='16' y='10' width='4' height='8' fill='%232b2b2b'/%3E%3Crect x='4' y='16' width='16' height='2' fill='%232b2b2b'/%3E%3Crect x='8' y='18' width='8' height='4' fill='%23ffd7a3'/%3E%3C/svg%3E") 12 12, auto;
}

h1,h2,h3,.font-pixel{ font-family:'Press Start 2P', monospace; line-height:1.6; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; cursor:inherit; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid var(--sun);
  outline-offset:2px;
}

.section-inner{ max-width:1100px; margin:0 auto; padding:0 20px; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ===================== PIXEL UI COMPONENTS ===================== */
.pixel-panel{
  background:var(--panel);
  border:4px solid var(--outline);
  box-shadow:6px 6px 0 var(--outline), inset -4px -4px 0 var(--panel-dark), inset 4px 4px 0 var(--white);
  border-radius:0;
}

.pixel-btn{
  display:inline-block;
  font-family:'Press Start 2P', monospace;
  font-size:13px;
  color:var(--cream);
  background:var(--wood);
  border:4px solid var(--outline);
  padding:14px 20px;
  text-decoration:none;
  box-shadow:5px 5px 0 var(--outline), inset -4px -4px 0 var(--wood-darker), inset 4px 4px 0 rgba(255,255,255,.35);
  transition: transform .12s ease;
  position:relative;
  text-align:center;
  min-height:44px;
}
.pixel-btn.secondary{ background:var(--ui-blue); }
.pixel-btn:hover{ animation: btn-bounce .5s ease; }
.pixel-btn:active{
  transform:translate(3px,3px);
  box-shadow:2px 2px 0 var(--outline), inset -4px -4px 0 var(--wood-darker), inset 4px 4px 0 rgba(255,255,255,.35);
}
@keyframes btn-bounce{
  0%{ transform:translateY(0); }
  30%{ transform:translateY(-8px); }
  55%{ transform:translateY(0); }
  75%{ transform:translateY(-3px); }
  100%{ transform:translateY(0); }
}

.tag-chip{
  display:inline-block;
  font-family:'VT323', monospace;
  font-size:16px;
  background:var(--sun);
  color:var(--ink);
  border:2px solid var(--outline);
  padding:3px 10px;
  box-shadow:2px 2px 0 var(--outline);
}

/* ===================== HEADER / NAV ===================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--panel);
  border-bottom:4px solid var(--outline);
  box-shadow:0 4px 0 rgba(0,0,0,.15);
}
.nav-row{
  max-width:1100px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
}
.brand{
  font-family:'Press Start 2P', monospace;
  font-size:13px;
  color:var(--wood-dark);
  text-decoration:none;
  display:flex; align-items:center; gap:10px;
  min-width:0;
  white-space:nowrap;
}
.brand-icon{
  width:24px; height:24px; background:var(--sun);
  border:3px solid var(--outline); box-shadow:2px 2px 0 var(--outline);
  display:inline-block; flex:none;
}
.nav-links{
  display:flex; gap:8px; list-style:none; margin:0; padding:0;
}
.nav-links a{
  font-family:'Press Start 2P', monospace;
  font-size:10px;
  text-decoration:none;
  color:var(--ink);
  background:var(--white);
  border:3px solid var(--outline);
  padding:10px 10px;
  box-shadow:3px 3px 0 var(--outline);
  transition:transform .12s ease;
  display:inline-flex;
  align-items:center;
  min-height:40px;
}
.nav-links a:hover{ transform:translateY(-2px); background:var(--sun); }
.nav-links a.active{ background:var(--grass); color:var(--white); }

.header-actions{
  display:flex; align-items:center; gap:8px;
}

.header-linkedin{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:3px solid var(--outline);
  background:var(--ui-blue); color:var(--white);
  box-shadow:3px 3px 0 var(--outline); text-decoration:none;
  font-family:'Press Start 2P', monospace; font-size:12px;
  font-weight:700; line-height:1; transition:transform .12s ease;
}
.header-linkedin:hover{ transform:translateY(-2px); }

.menu-toggle{
  display:none;
  background:var(--wood); color:var(--cream);
  border:3px solid var(--outline); box-shadow:3px 3px 0 var(--outline);
  font-family:'Press Start 2P', monospace; font-size:14px;
  padding:8px 12px;
  flex:none;
  min-width:44px; min-height:40px;
}

/* ===================== HERO ===================== */
.hero{
  position:relative;
  min-height:100vh;
  padding-top:84px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 70%);
  display:flex; align-items:center;
}
.cloud{
  position:absolute; background:var(--white);
  border:3px solid var(--outline);
  box-shadow:inset -6px -6px 0 rgba(0,0,0,.06);
  animation: drift linear infinite;
}
.cloud::before, .cloud::after{
  content:""; position:absolute; background:var(--white);
  border:3px solid var(--outline);
}
@keyframes drift{
  from{ transform:translateX(-140px); }
  to{ transform:translateX(calc(100vw + 140px)); }
}

.hero-grid{
  position:relative; z-index:2;
  max-width:1100px; margin:0 auto; padding:24px 20px 110px;
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:40px; align-items:center;
  width:100%;
}
.hero-copy .eyebrow{
  display:inline-block; margin-bottom:14px;
}
.hero-copy h1{
  font-size:clamp(20px, 4vw, 34px);
  color:var(--ink);
  margin:0 0 18px;
  text-shadow:3px 3px 0 var(--white);
}
.hero-copy p{
  font-size:clamp(18px, 2.6vw, 24px); line-height:1.5; max-width:46ch; margin:0 0 26px;
}
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; }

.hero-visual{
  display:flex; flex-direction:column; gap:18px; align-items:center;
}
.hero-photo-showcase{
  position:relative; width:min(100%, 400px); height:220px;
  border:4px solid var(--outline); box-shadow:6px 6px 0 var(--outline);
  background:var(--panel); overflow:hidden;
}
.hero-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .55s ease, visibility .55s ease;
}
.hero-slide.active{
  opacity:1; visibility:visible;
}
.hero-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.avatar-wrap{ display:flex; justify-content:center; }
.pixel-avatar{
  position:relative; width:176px; height:220px;
  filter:drop-shadow(6px 6px 0 var(--outline));
  animation: idle-bob 2.6s ease-in-out infinite;
  flex:none;
}
@keyframes idle-bob{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}
.px{ position:absolute; image-rendering:pixelated; }

.ground{
  position:absolute; left:0; right:0; bottom:0; height:90px; z-index:1;
}
.ground .grass-strip{ height:26px; background:var(--grass); border-top:4px solid var(--outline); }
.ground .dirt-strip{ height:64px; background:var(--dirt);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 34px),
    linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 34px);
  background-size:34px 34px;
}

.scroll-cue{
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  z-index:2; font-family:'Press Start 2P', monospace; font-size:10px;
  color:var(--ink); background:var(--white); border:3px solid var(--outline);
  padding:8px 10px; box-shadow:3px 3px 0 var(--outline);
  animation: pulse-arrow 1.6s ease-in-out infinite; pointer-events:none;
  white-space:nowrap;
}
@keyframes pulse-arrow{ 0%,100%{ transform:translate(-50%,0);} 50%{ transform:translate(-50%,6px);} }

/* ===================== SECTION HEADINGS ===================== */
.section{ padding:70px 0; position:relative; }
.section-heading{
  text-align:center; margin-bottom:40px;
}
.section-heading h2{
  font-size:clamp(16px,3vw,24px);
  display:inline-block;
  background:var(--panel);
  border:4px solid var(--outline);
  box-shadow:5px 5px 0 var(--outline);
  padding:14px 18px;
  margin:0;
}
.section-heading p{
  margin:16px auto 0; max-width:60ch; font-size:clamp(17px, 2.4vw, 22px);
  padding:0 8px;
}

/* ===================== ABOUT / STATS (Inventory) ===================== */
.about{ background:var(--cream); border-top:4px solid var(--outline); border-bottom:4px solid var(--outline); }
.about-layout{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:40px; align-items:start; }
.about-text p{ font-size:clamp(17px, 2.4vw, 22px); line-height:1.6; }

.inventory{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:16px;
}
.inv-slot{
  background:var(--panel);
  border:4px solid var(--outline);
  box-shadow:5px 5px 0 var(--outline), inset -4px -4px 0 var(--panel-dark), inset 4px 4px 0 var(--white);
  padding:16px 14px;
  text-align:center;
  transition: transform .18s ease;
  opacity:0; transform:translateY(16px);
  min-width:0;
}
.inv-slot.in-view{ opacity:1; transform:translateY(0); }
.inv-slot:hover{ transform:translateY(-6px); }
.inv-icon{ font-size:clamp(26px,5vw,34px); margin-bottom:6px; }
.inv-number{ font-family:'Press Start 2P', monospace; font-size:clamp(15px,2.6vw,20px); color:var(--wood-dark); }
.inv-label{ font-size:clamp(15px,2.2vw,18px); margin-top:6px; overflow-wrap:break-word; }

/* ===================== EXPERIENCE (Portfolio item cards) ===================== */
.experience{ background:var(--sky); }
.exp-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:26px; }
.exp-card{
  background:var(--cream);
  border:4px solid var(--outline);
  box-shadow:6px 6px 0 var(--outline);
  padding:22px;
  opacity:0; transform:translateY(16px);
  transition: transform .2s ease, box-shadow .2s ease;
  min-width:0;
}
.exp-card.in-view{ opacity:1; transform:translateY(0); }
.exp-card:hover{ transform:translate(-2px,-6px); box-shadow:8px 10px 0 var(--outline); }
.exp-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.exp-icon{
  width:44px; height:44px; flex:none;
  background:var(--sun); border:3px solid var(--outline); box-shadow:3px 3px 0 var(--outline);
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.exp-card h3{ font-size:clamp(13px,2vw,15px); margin:0; color:var(--ink); overflow-wrap:break-word; min-width:0; }
.exp-card .tag-chip{ margin-bottom:10px; }
.exp-card p{ font-size:clamp(17px, 2.2vw, 20px); line-height:1.5; margin:8px 0 0; }

/* ===================== CONTACT (Wooden bulletin board) ===================== */
.contact{
  background:var(--dirt);
  background-image:
    linear-gradient(90deg, rgba(0,0,0,.15) 0 2px, transparent 2px 40px),
    linear-gradient(0deg, rgba(0,0,0,.15) 0 2px, transparent 2px 40px);
  background-size:40px 40px;
  border-top:4px solid var(--outline);
}
.contact .section-heading h2{ background:var(--cream); }
.contact .section-heading p{ color:var(--cream); }

.board-wrap{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:34px; align-items:start; }

.wood-board{
  background:var(--wood);
  border:6px solid var(--wood-darker);
  box-shadow:8px 8px 0 var(--outline);
  padding:28px;
  position:relative;
  min-width:0;
}
.wood-board::before{
  content:""; position:absolute; inset:10px;
  border:2px dashed rgba(255,255,255,.35);
  pointer-events:none;
}
.wood-board .nail{
  position:absolute; width:14px; height:14px; background:#8A8A8A;
  border:2px solid var(--outline); border-radius:50%; box-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.nail.tl{ top:-7px; left:-7px; } .nail.tr{ top:-7px; right:-7px; }
.nail.bl{ bottom:-7px; left:-7px; } .nail.br{ bottom:-7px; right:-7px; }

.field{ margin-bottom:18px; }
.field label{
  display:block; font-family:'Press Start 2P', monospace; font-size:11px;
  color:var(--cream); margin-bottom:8px; text-shadow:2px 2px 0 var(--wood-darker);
}
.field input, .field textarea{
  width:100%; font-family:'VT323', monospace; font-size:20px;
  padding:10px 12px; border:3px solid var(--outline);
  background:var(--cream); color:var(--ink);
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.12);
}
.field textarea{ min-height:110px; resize:vertical; }
.form-note{ font-size:16px; color:var(--cream); margin-top:6px; }
.form-status{ font-size:18px; color:var(--sun); margin-top:12px; min-height:24px; }

.contact-side{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.social-sign{
  display:flex; align-items:center; gap:14px;
  background:var(--panel); border:4px solid var(--outline);
  box-shadow:5px 5px 0 var(--outline);
  padding:14px 16px; text-decoration:none; color:var(--ink);
  transition: transform .15s ease;
  min-width:0;
}
.social-sign:hover{ transform:translateY(-4px); }
.social-icon{
  width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center;
  background:var(--sun); border:3px solid var(--outline); box-shadow:2px 2px 0 var(--outline);
  font-size:20px;
}
.social-text{ min-width:0; }
.social-text strong{ display:block; font-family:'Press Start 2P', monospace; font-size:11px; }
.social-text span{ font-size:17px; overflow-wrap:break-word; word-break:break-word; }

/* ===================== FOOTER ===================== */
.site-footer{
  background:var(--grass-dark); color:var(--cream);
  border-top:4px solid var(--outline);
  padding:30px 0; text-align:center;
}
.site-footer .footer-links{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:14px 0 0; list-style:none; padding:0; }
.site-footer a{ text-decoration:none; color:var(--cream); font-size:18px; }
.site-footer a:hover{ color:var(--sun); }
.footer-brand{ font-family:'Press Start 2P', monospace; font-size:12px; }

/* ===================== TOAST ===================== */
#toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 120%);
  background:var(--panel); border:4px solid var(--outline); box-shadow:5px 5px 0 var(--outline);
  padding:14px 18px; font-family:'Press Start 2P', monospace; font-size:11px;
  z-index:200; transition:transform .3s ease; max-width:90vw; text-align:center;
}
#toast.show{ transform:translate(-50%, 0); }

/* ===================== RESPONSIVE ===================== */

/* Tablet / small laptop */
@media (max-width: 1024px){
  .hero-grid{ gap:28px; }
  .section{ padding:60px 0; }
}

/* Tablet portrait / large phones - stack to single column, show hamburger */
@media (max-width: 860px){
  .hero{ padding-top:76px; }
  .hero-grid{ grid-template-columns:1fr; text-align:center; padding-top:10px; }
  .hero-copy p{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .avatar-wrap{ order:-1; }
  .about-layout{ grid-template-columns:1fr; }
  .exp-grid{ grid-template-columns:1fr; }
  .board-wrap{ grid-template-columns:1fr; }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--panel);
    border-bottom:4px solid var(--outline);
    padding:14px 16px; gap:10px;
    display:none;
    max-height:calc(100vh - 60px);
    overflow-y:auto;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ width:100%; }
  .menu-toggle{ display:inline-block; }
}

/* Phones */
@media (max-width: 600px){
  .section-inner{ padding:0 16px; }
  .section{ padding:50px 0; }
  .pixel-avatar{ transform:scale(.92); }
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .pixel-btn{ width:100%; }
  .wood-board{ padding:20px 16px; }
  .field textarea{ min-height:90px; }
  .exp-card{ padding:18px; }
  .brand{ font-size:11px; }
  .cert-grid{ grid-template-columns:1fr; gap:18px; }
  .cert-frame{ padding:8px; max-width:360px; width:100%; margin:0 auto; }
  .cert-frame-inner{ aspect-ratio:4 / 5; min-height:240px; }
  .cert-frame-inner iframe.cert-preview{ min-height:240px; height:100%; }
  .cert-plate strong{ font-size:10px; }
  .cert-plate span{ font-size:14px; }
  .cert-modal{ padding:12px; }
  .cert-modal-inner{ width:100%; max-width:100%; max-height:92vh; padding:16px 10px 10px; }
  .cert-modal-inner iframe{ min-height:72vh; height:72vh; }
}

/* Small phones */
@media (max-width: 380px){
  body{ font-size:17px; }
  .inventory{ grid-template-columns:1fr; }
  .pixel-avatar{ transform:scale(.8); }
  .hero{ padding-top:68px; }
  .brand{ gap:6px; }
  .brand-icon{ width:20px; height:20px; }
  .nav-row{ padding:8px 12px; }
  .section-heading h2{ padding:12px 14px; }
  .social-text span{ font-size:15px; }
}

/* ===================== SOUND TOGGLE ===================== */
.sound-toggle{
  font-family:'Press Start 2P', monospace;
  font-size:16px;
}

/* ===================== CERTIFICATE GALLERY ===================== */
.certificates{ background:var(--cream); border-top:4px solid var(--outline); border-bottom:4px solid var(--outline); }
.cert-note{ text-align:center; font-size:17px; margin:-20px auto 32px; max-width:60ch; color:var(--wood-dark); }
.cert-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:28px;
}
.cert-frame{
  background:var(--wood-dark);
  border:6px solid var(--outline);
  box-shadow:6px 6px 0 var(--outline);
  padding:10px;
  position:relative;
  transition: transform .2s ease, box-shadow .2s ease;
  opacity:0; transform:translateY(16px);
  min-width:0;
}
.cert-frame.in-view{ opacity:1; transform:translateY(0); }
.cert-frame:hover, .cert-frame:focus-visible{
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:8px 10px 0 var(--outline);
}
.cert-frame .gem{
  position:absolute; width:14px; height:14px;
  border:2px solid var(--outline); z-index:2;
  box-shadow:1px 1px 0 rgba(0,0,0,.4);
}
.cert-frame .gem.tl{ top:2px; left:2px; background:#E53935; }
.cert-frame .gem.tr{ top:2px; right:2px; background:#1E88E5; }
.cert-frame .gem.bl{ bottom:2px; left:2px; background:#1E88E5; }
.cert-frame .gem.br{ bottom:2px; right:2px; background:#E53935; }

.cert-pdf-link{
  display:inline-block; margin-top:8px; font-family:'Press Start 2P', monospace;
  font-size:10px; color:var(--wood-dark); text-decoration:underline; text-underline-offset:2px;
}

.cert-frame-inner{
  position:relative;
  aspect-ratio:4 / 3;
  background:var(--panel);
  border:4px solid var(--sun);
  overflow:hidden;
}
.cert-preview{ width:100%; height:100%; display:block; object-fit:cover; }
.cert-frame-inner iframe.cert-preview{
  border:0; background:var(--white);
  min-height:220px;
  height:100%;
}
.cert-frame-inner img.cert-preview{ object-fit:cover; }
.cert-frame-placeholder{
  display:none;
  position:absolute; inset:0;
  flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:repeating-linear-gradient(45deg, var(--panel), var(--panel) 10px, var(--panel-dark) 10px, var(--panel-dark) 20px);
  border:3px dashed var(--outline);
  text-align:center; padding:10px;
  font-size:15px; color:var(--ink);
}
.cert-frame-placeholder span{ max-width:20ch; }
.cert-frame.no-image .cert-frame-inner .cert-preview{ display:none; }
.cert-frame.no-image .cert-frame-placeholder{ display:flex; }

.cert-plate{
  margin:10px 0 0;
  background:linear-gradient(180deg,#FFE9A8,#D8A93B);
  border:3px solid var(--outline);
  padding:8px 10px;
  text-align:center;
  box-shadow:2px 2px 0 var(--outline);
}
.cert-plate strong{ display:block; font-family:'Press Start 2P', monospace; font-size:11px; color:var(--ink); margin-bottom:4px; }
.cert-plate span{ font-size:15px; color:var(--ink); }

/* ---------- Certificate lightbox modal ---------- */
.cert-modal{
  position:fixed; inset:0; z-index:300;
  background:rgba(20,14,10,.78);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.cert-modal[hidden]{ display:none; }
.cert-modal-inner{
  position:relative;
  width:100%; max-width:760px; max-height:88vh; overflow:auto;
  background:var(--panel);
  border:6px solid var(--outline);
  box-shadow:8px 8px 0 var(--outline);
  padding:22px;
}
.cert-modal-close{
  position:absolute; top:-16px; right:-16px;
  padding:8px 12px; font-size:14px; line-height:1;
}
.cert-modal-media{
  width:100%; min-height:240px; margin-bottom:16px;
}
.cert-modal-inner img,
.cert-modal-inner iframe{
  width:100%; border:4px solid var(--outline); background:var(--white);
}
.cert-modal-inner img{ display:block; }
.cert-modal-inner iframe{
  min-height:540px; border:4px solid var(--outline); background:var(--white);
}
.cert-modal-caption strong{ display:block; font-family:'Press Start 2P', monospace; font-size:13px; margin-bottom:8px; }
.cert-modal-caption span{ font-size:18px; }

/* ===================== WRITE UP / QUEST LOG PAGE ===================== */
.writeup-hero{
  padding:120px 0 40px;
  background:linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 100%);
  border-bottom:4px solid var(--outline);
  text-align:center;
}
.writeup-hero h1{
  font-size:clamp(18px,3.4vw,26px);
  display:inline-block;
  background:var(--panel);
  border:4px solid var(--outline);
  box-shadow:5px 5px 0 var(--outline);
  padding:14px 18px;
  margin:0 0 16px;
}
.writeup-hero p{ font-size:clamp(17px,2.4vw,22px); max-width:60ch; margin:0 auto; }

.writeup-list{
  display:flex; flex-direction:column; gap:20px;
  max-width:820px; margin:0 auto;
}
.writeup-item{
  background:var(--cream);
  border:4px solid var(--outline);
  box-shadow:6px 6px 0 var(--outline);
  padding:0;
  opacity:0; transform:translateY(16px);
  transition: opacity .2s ease, transform .2s ease;
}
.writeup-item.in-view{ opacity:1; transform:translateY(0); }
.writeup-item summary{
  list-style:none;
  cursor:inherit;
  padding:18px 20px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}
.writeup-item summary::-webkit-details-marker{ display:none; }
.writeup-item summary::before{
  content:"▶";
  font-family:'Press Start 2P', monospace; font-size:11px;
  color:var(--wood-dark);
  transition:transform .2s ease;
  flex:none;
}
.writeup-item[open] summary::before{ transform:rotate(90deg); }
.writeup-item summary h2{
  font-size:clamp(13px,2vw,15px); margin:0; flex:1 1 220px; min-width:0;
}
.writeup-item summary .writeup-meta{ font-size:15px; color:var(--wood-dark); flex:none; }
.writeup-body{ padding:0 20px 22px 44px; }
.writeup-body p{ font-size:19px; line-height:1.6; margin:0 0 12px; }
.writeup-body p:last-child{ margin-bottom:0; }

.writeup-note{
  text-align:center; font-size:16px; color:var(--wood-dark);
  max-width:60ch; margin:0 auto 30px;
}
.back-home-wrap{ text-align:center; margin-top:40px; }

@media (max-width: 600px){
  .writeup-hero{ padding:100px 0 32px; }
  .writeup-body{ padding-left:20px; }
}