/* ===== Theme & Base ===== */
:root{
  --ink:#000;
  --paper:#f2efde;
  --accent-green:#A2EF92;
  --accent-violet:#d369e9;
  --accent-violet-light:#de90f6;
  --heading-font:"Papyrus","Tempus Sans ITC",sans-serif;
}

*{box-sizing:border-box}

:where(a,button):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

#wrapper{margin:0 auto;max-width:100rem;width:100%}

header{
  position:relative;z-index:2;padding:2rem 0 1rem;
  text-align:center;background:var(--paper);
}

img{ max-width: 100%; height: auto; }

h1,h2{font-family:var(--heading-font);margin:0;color:var(--ink)}
h1{font-size:2rem}
h3{margin:0;color:var(--ink);font-family:sans-serif}
p,ul{font-size:large}

/* ===== Hero / Photo Section ===== */
.photo-section{
  position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:2rem;
  align-items:center;justify-content:center;padding:2rem;text-align:center;
  background:radial-gradient(circle at center,var(--paper) 0%,var(--accent-violet-light) 90%,var(--accent-violet) 100%);
}
.photo-section img{display:block;max-width:100%;height:auto}
.portrait img{width:270px;border-radius:20px;box-shadow:0 0 20px rgba(0,0,0,.3)}

.titles{display:flex;flex-direction:column;align-items:center;gap:1rem}
.titles img{width:650px}

/* ===== Buttons & Decorative Strips ===== */
.download-btn{
  display:inline-block;padding:10px 18px;border:1.5px solid var(--ink);
  border-radius:8px;background:var(--paper);color:#35B51A;font-weight:700;
  text-decoration:none;transition:background-color .2s,color .2s;
}
.download-btn:hover{background:var(--accent-green);color:#000}

.strip {
    width: 100%;
    height: auto; 
    background: var(--accent-violet-light);
    padding: 0.8em 0;
    text-align: center;
}

.footer-content a {
    color: #000;
    text-decoration: none;
    font-weight: 50;
    font-size: large;
}

.footer-content a:hover {
    text-decoration: underline;
}

.footer-content p {
    color: #000;
    margin: 0;
    font-size: 0.98em;
}

/* ===== Global Links (font class) ===== */
.font a,.font a:visited{color:var(--ink);text-decoration:none}
.font a:hover,.font a:focus{color:var(--accent-green);text-decoration:underline}

/* ===== Education ===== */
.edu{text-align:center}
.edu h2{text-decoration:underline;text-decoration-color:var(--accent-green)}

/* ===== Job / Two-Column Section ===== */
.job-section{
  margin:0 auto;padding:20px;
  background:radial-gradient(circle at center,var(--paper) 0%,var(--accent-violet-light) 90%,var(--accent-violet) 100%);
}
.job-section :is(h2,h3){color:var(--ink);margin-top:0}
.job-section :is(p,ul){line-height:1.6;color:var(--ink)}
.job-section ul{padding-left:20px}

.two-columns{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;
}
.two-columns .column:nth-child(2){border-left:2px solid #6b007a;padding-left:30px}

/* ===== Navigation (Desktop + Drawer Mobile) ===== */
nav.site-nav{
  position:relative;z-index:10;width:100%;background:var(--paper);
  border-top:2px solid var(--accent-violet);border-bottom:2px solid var(--accent-violet);
}

/* Shared reset */
.site-nav .menu{list-style:none;margin:0;padding:0}
.site-nav .menu li{margin:0 15px;font-family:var(--heading-font)}
.site-nav .menu a{
  display:block;padding:1em;color:#333;font-weight:700;text-decoration:none;
  transition:background-color .3s,color .3s,text-decoration-color .2s;
}
.site-nav .menu a:hover{background:var(--accent-green);border-radius:5px}
.site-nav .menu a.active,
.site-nav .menu a[aria-current="page"]{
  background:rgba(162,239,146,.25);border-radius:5px;
}

/* Hamburger button */
.site-nav .hamburger{
  display:none;position:fixed;top:14px;right:14px;width:28px;height:22px;
  cursor:pointer;z-index:1001;background:transparent;border:0;padding:0;
}
.site-nav .hamburger span{display:block;height:3px;margin:4px 0;background:var(--ink);border-radius:2px}

/* Desktop: horizontal */
.site-nav .menu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}

/* ===== Hobby cards grid (About page) ===== */
.hobby-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}
.hobby-card{
  border-radius:10px;padding:15px;box-shadow:0 2px 6px rgba(0,0,0,.1);
  text-align:center;display:flex;flex-direction:column;gap:10px;
}
/* Media inside cards */
.hobby-card :is(img,video){
  width:100%;height:auto;object-fit:cover;border-radius:8px;display:block;
}
.hobby-card img{max-height:260px}
.hobby-card video{max-height:460px}

/* ===== Carousel (single, consolidated block) ===== */
.carousel{
  position: relative;width: 100%; border-radius:8px; aspect-ratio: 16 / 9;  max-height: 420px; overflow: hidden;
}
.carousel img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none;
}
.carousel img.active{display:block}
.carousel button{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.4);color:#fff;border:0;padding:8px 12px;border-radius:4px;
  cursor:pointer;transition:background .3s; z-index: 1;
}
.carousel button:hover{background:rgba(0,0,0,.6)}
.carousel .prev{left:10px}
.carousel .next{right:10px}

/* ===== Responsive ===== */
@media (max-width:900px){
  .photo-section{flex-direction:column}
  .portrait img,.titles img{width:80%}
  .download-btn{margin-top:1rem}

  /* Mobile nav drawer */
  .site-nav .menu{
    position:fixed;top:0;right:0;height:100vh;width:82%;max-width:360px;
    transform:translateX(100%);transition:transform .25s ease-in-out;
    padding:3.5rem 1.25rem 2rem;background:var(--accent-green);color:var(--ink);
    box-shadow:-8px 0 18px rgba(0,0,0,.15);display:block; /* stacked links */
  }
  .site-nav .hamburger{display:block}
  .site-nav .menu li{border-bottom:1px solid rgba(0,0,0,.15)}
  .site-nav .menu.open{transform:translateX(0)}
  body.no-scroll{overflow:hidden}

  .card-nav{grid-template-columns:repeat(2,1fr)}
  .hobby-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:768px){
  .two-columns{grid-template-columns:1fr}
  .two-columns .column:nth-child(2){border-left:none;padding-left:0}
}
@media (max-width:700px){
  .portrait img{width:200px}
  .portrait img,.hobby-card img{max-width:100%;height:auto}
}
@media (max-width:600px){
  .card-nav{grid-template-columns:1fr}
  .hobby-grid{grid-template-columns:1fr}
  .carousel{max-height:240px}
}