/* ==========================================================
   design tokens
   Palette: coffee/plum dusk + marigold glow + moss + ivory
   Type: Fraunces (display) / Work Sans (body) / Space Mono (tags)
   ========================================================== */
:root{
  --ink: #2B1B14;
  --ink-soft: #5B4636;
  --plum: #6E2F42;
  --plum-deep: #3A1826;
  --accent: #6E2F42;
  --marigold: #E8A33D;
  --marigold-soft: #F4C877;
  --moss: #7A8450;
  --ivory: #FAF1E4;
  --ivory-warm: #F3E3CC;
  --card: #fff;
  --header-bg: rgba(250,241,228,0.88);
  --coffee-bg: #241611;
  --coffee-bg-2: #2F1E17;
  --line: #E3D2B8;

  --profile-photo: url(images/kashif_1.jpeg);
  --contact-photo: url(images/kashif_3.jpeg);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Work Sans", -apple-system, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --radius: 18px;
}
:root[data-theme="dark"]{
  --ink: #FAF1E4;
  --ink-soft: #CDBBA8;
  --accent: #F4C877;
  --ivory: #241611;
  --ivory-warm: #2F1E17;
  --card: #38251C;
  --header-bg: rgba(36,22,17,0.88);
  --coffee-bg: #180E0A;
  --coffee-bg-2: #241611;
  --line: #4A3226;

  --profile-photo: url(images/kashif_2.jpeg);
  --contact-photo: url(images/kashif_4.jpeg);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.55;
  overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; }
}

.wrap{ max-width: 1120px; margin: 0 auto; padding: 0 28px; }
section{ scroll-margin-top: 70px; }

a{ color: inherit; }
img{ max-width: 100%; display:block; }

::selection{ background: var(--marigold-soft); color: #2B1B14; }

:focus-visible{
  outline: 3px solid var(--marigold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ==========================================================
   ENTRANCE OVERLAY
   ========================================================== */
#entrance{
  position: fixed; inset: 0; z-index: 999;
  background: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.1s ease, visibility 1.1s ease;
}
#entrance.hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.entrance-inner{ text-align: center; padding: 20px; }
.lantern{ display:block; overflow: visible; margin: 0 auto 18px; animation: swing 3.2s ease-in-out infinite; transform-origin: 28px 8px; }
#lanternGlow{ animation: flicker 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes swing{
  0%,100%{ transform: rotate(-4deg); }
  50%{ transform: rotate(4deg); }
}
@keyframes flicker{
  0%,100%{ opacity: 1; filter: drop-shadow(0 0 8px rgba(232,163,61,0.7)); }
  45%{ opacity: 0.85; filter: drop-shadow(0 0 3px rgba(232,163,61,0.3)); }
  55%{ opacity: 1; filter: drop-shadow(0 0 14px rgba(232,163,61,0.9)); }
}
.entrance-label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.entrance-title{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 600;
  margin: 0 0 22px;
  color: var(--ink);
}
.enter-btn{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  background: var(--plum);
  color: #FAF1E4;
  border: none;
  padding: 14px 30px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 8px 20px rgba(110,47,66,0.25);
}
.enter-btn:hover{ transform: translateY(-2px); background: var(--plum-deep); box-shadow: 0 12px 26px rgba(110,47,66,0.32); }
.entrance-hint{
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.8;
}

/* ==========================================================
   STRING LIGHTS — signature element
   ========================================================== */
.lights-strip{
  position: relative;
  width: 100%;
  height: 46px;
  background: var(--coffee-bg);
  overflow: hidden;
}
.lights-wire{ position:absolute; top:0; left:0; width:100%; height:100%; }
.bulb-row{
  position: absolute;
  top: 8px; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 2%;
}
.bulb{
  width: 10px; height: 13px;
  border-radius: 50% 50% 45% 45%;
  background: var(--marigold);
  box-shadow: 0 0 6px 2px rgba(232,163,61,0.15);
  opacity: 0.35;
  animation: bulb-glow 3.4s ease-in-out infinite;
}
@keyframes bulb-glow{
  0%,100%{ opacity: 0.35; box-shadow: 0 0 6px 2px rgba(232,163,61,0.15); }
  50%{ opacity: 1; box-shadow: 0 0 12px 4px rgba(232,163,61,0.55); }
}

/* ==========================================================
   HEADER
   ========================================================== */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px;
}
.brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  text-decoration: none;
  color: var(--ink);
}
.main-nav{ display: flex; gap: 28px; margin-left: auto; margin-right: 24px; }
.main-nav a{
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 3px;
}
.main-nav a::after{
  content: "";
  position: absolute; left:0; bottom:0;
  width: 0%; height: 2px; background: var(--marigold);
  transition: width 0.25s ease;
}
.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after{ width: 100%; }
.main-nav a:hover,
.main-nav a[aria-current="page"]{ color: var(--ink); }
.theme-toggle{
  border: 1px solid var(--line);
  background: var(--ivory-warm);
  color: var(--ink);
  border-radius: 999px;
  width: 38px; height: 38px;
  cursor: pointer;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}
.theme-toggle:hover{ transform: scale(1.08); background: var(--marigold-soft); color: #2B1B14; }
.theme-icon-light{ display: none; }
:root[data-theme="dark"] .theme-icon-light{ display: inline; }
:root[data-theme="dark"] .theme-icon-dark{ display: none; }

@media (max-width: 720px){
  section{ scroll-margin-top: 110px; }
  .header-inner{ flex-wrap: wrap; padding: 12px 20px; row-gap: 8px; }
  .main-nav{
    order: 3;
    width: 100%;
    margin: 0;
    gap: 20px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar{ display: none; }
}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position: relative;
  background: radial-gradient(ellipse at 20% 0%, var(--coffee-bg-2), var(--coffee-bg) 65%);
  color: #FAF1E4;
  padding: 100px 0 140px;
  overflow: hidden;
}
.hero-inner{ position: relative; z-index: 2; max-width: 720px; margin-left: max(0px, calc((100% - 1120px) / 2)); }
.eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--marigold-soft);
  margin: 0 0 18px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.6vw, 4rem);
  line-height: 1.08;
  margin: 0 0 22px;
}
.hero-name{ color: var(--marigold); }
.hero-sub{
  font-size: 19px;
  color: #D9C9B8;
  max-width: 540px;
  margin: 0 0 34px;
}
.hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cta-primary{
  display: inline-block;
  font-weight: 600;
  font-size: 15.5px;
  background: var(--marigold);
  color: #2B1B14;
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 999px;
  transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 10px 24px rgba(232,163,61,0.25);
}
.cta-primary:hover{ transform: translateY(-2px); background: var(--marigold-soft); box-shadow: 0 14px 30px rgba(232,163,61,0.35); }
.cta-ghost{
  display: inline-block;
  font-weight: 600;
  font-size: 15.5px;
  color: #FAF1E4;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid rgba(250,241,228,0.4);
  border-radius: 999px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.cta-ghost:hover{ transform: translateY(-2px); border-color: var(--marigold-soft); }

.hero-crates{
  position: absolute; right: -40px; bottom: -30px; z-index: 1;
  display: flex; gap: 14px; opacity: 0.5;
}
.crate{
  width: 90px; height: 90px;
  border: 3px solid #4A3226;
  border-radius: 6px;
  background: repeating-linear-gradient(45deg, #3A281F, #3A281F 8px, #34241C 8px, #34241C 16px);
  transform: rotate(-6deg);
}
.crate-2{ transform: rotate(4deg) translateY(20px); width: 110px; height: 110px; }
.crate-3{ transform: rotate(-3deg) translateY(-10px); width: 70px; height: 70px; }
@media (max-width: 720px){ .hero-crates{ display:none; } }

.hero-page{ padding: 70px 0 74px; }
.hero-page .hero-sub{ font-size: 17px; margin-bottom: 0; }
.goods-page, .blog-page{ padding: 70px 0 100px; }

/* ==========================================================
   SECTION HEADERS (shared)
   ========================================================== */
.section-eyebrow{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 8px;
  text-align: center;
}
.section-title{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 600;
  text-align: center;
  margin: 0 0 12px;
  color: var(--ink);
}
.section-sub{
  text-align: center;
  max-width: 560px;
  margin: 0 auto 50px;
  color: var(--ink-soft);
}

.tape{
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 60px; height: 20px;
  background: rgba(232,163,61,0.55);
  border: 1px solid rgba(232,163,61,0.7);
  z-index: 1;
}

/* ==========================================================
   ABOUT
   ========================================================== */
.about{ padding: 100px 0 110px; }
.about-inner{
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  align-items: center;
}
.about-photo{
  position: relative;
  background: var(--card);
  padding: 14px;
  border-radius: 4px;
  box-shadow: 0 14px 32px rgba(43,27,20,0.12);
  --tilt: -2deg;
}
.about-img{
  aspect-ratio: 4/5;
  background-image: var(--profile-photo);
  background-size: cover;
  background-position: center top;
}
.about-text .section-eyebrow,
.about-text .section-title{ text-align: left; }
.about-text > p:not(.section-eyebrow){ color: var(--ink-soft); margin: 0 0 22px; }
.about-info{ margin: 0 0 28px; border-top: 1px solid var(--line); }
.about-info > div{
  display: flex;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.about-info dt{
  flex: 0 0 96px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--accent);
}
.about-info dd{ margin: 0; min-width: 0; overflow-wrap: anywhere; }
.about-info a{ color: var(--accent); }
.about-footer{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }

@media (max-width: 820px){
  .about-inner{ grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .about-photo{ max-width: 340px; width: 100%; margin: 0 auto; }
}

/* ==========================================================
   WORK GALLERY
   ========================================================== */
.moments{ padding: 100px 0 110px;  }
.moments-grid{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px 30px;
}
.moment-card{
  grid-column: span 2;
  position: relative;
  margin: 0;
  background: var(--card);
  border-radius: 4px;
  padding: 12px 12px 18px;
  box-shadow: 0 10px 26px rgba(43,27,20,0.08);
}
.moment-card:nth-child(4){ grid-column: 2 / span 2; }
.moment-card img{ width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.moment-card figcaption{ font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; }

@media (max-width: 900px){
  .moments-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moment-card, .moment-card:nth-child(4){ grid-column: auto; }
}
@media (max-width: 580px){
  .moments-grid{ grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================
   PROJECTS
   ========================================================== */
.goods{ padding: 100px 0 110px; }

.goods-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 34px 26px;
  padding-top: 14px;
}

.good-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 26px;
}
.price-tag{
  position: absolute;
  top: -14px; right: 18px;
  background: var(--marigold);
  color: #2B1B14;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  transform: rotate(3deg);
  box-shadow: 0 6px 14px rgba(43,27,20,0.15);
  z-index: 1;
}
.price-tag::after{
  content: "";
  position: absolute; top: -5px; left: 50%;
  width: 6px; height: 6px; margin-left: -3px;
  background: #2B1B14; border-radius: 50%;
}
.price-tag-alt{ background: var(--plum); color: #FAF1E4; }
.price-tag-alt::after{ background: var(--plum-deep); }
.price-tag-moss{ background: var(--moss); color: #1E2210; }
.price-tag-moss::after{ background: #52592f; }

.good-img{
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  aspect-ratio: 4/3;
  background: var(--ivory-warm);
}
.good-img img{ width:100%; height:100%; object-fit: cover; }

.good-card h3{
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.25;
  margin: 0 0 14px;
}
.good-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin: 0 0 6px; }
.good-desc{ font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.good-link{
  margin-top: auto;
  align-self: flex-start;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s ease;
}
.good-link:hover{ border-color: currentColor; }

.good-card-more{
  justify-content: center;
  background: var(--plum);
  border-color: var(--plum);
  color: #FAF1E4;
}
.good-card-more p{ margin: 0 0 18px; color: #EAD9C9; }
.good-card-more .good-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin: 0 0 6px; }
.good-desc{ font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }
.good-link{ margin-top: 0; color: var(--marigold-soft); }

/* ==========================================================
   EXPERIENCE & EDUCATION
   ========================================================== */
.career{ padding: 100px 0 110px; background: var(--ivory-warm); }
.career-inner{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 60px 70px;
  align-items: start;
}
.career-col{ min-width: 0; scroll-margin-top: 110px; }
.career .section-eyebrow,
.career .section-title{ text-align: left; }
.career .skill-group{ text-align: left; margin-top: 24px; }
.career .skill-tags{ justify-content: flex-start; max-width: none; }
.timeline{
  list-style: none;
  margin: 28px 0 0;
  padding: 0 0 0 30px;
  position: relative;
}
/* the line draws downwards once the timeline scrolls into view */
.timeline::before{
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, var(--marigold) 0%, var(--marigold) 85%, transparent 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.3s cubic-bezier(.45,.05,.35,1);
}
.timeline.in-view::before{ transform: scaleY(1); }
.timeline > li{ position: relative; padding-bottom: 30px; }
.timeline > li:last-child{ padding-bottom: 0; }
.timeline > li::before{
  content: "";
  position: absolute;
  top: 3px; left: -35px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--marigold);
  box-shadow: 0 0 0 4px var(--ivory-warm);
  scale: 0;
  transition: scale 0.45s cubic-bezier(.34,1.56,.64,1);
}
/* each dot pops in as the line reaches it */
.timeline.in-view > li::before{ scale: 1; }
.timeline.in-view > li:nth-child(1)::before{ transition-delay: 0.1s; }
.timeline.in-view > li:nth-child(2)::before{ transition-delay: 0.35s; }
.timeline.in-view > li:nth-child(3)::before{ transition-delay: 0.6s; }
.timeline.in-view > li:nth-child(4)::before{ transition-delay: 0.85s; }
.timeline.in-view > li:nth-child(5)::before{ transition-delay: 1.1s; }
.timeline.in-view > li:nth-child(n+6)::before{ transition-delay: 1.3s; }
/* current roles stay the same size and glow brighter, then deeper */
.timeline > li.is-current::before{ animation: glow 2.4s ease-in-out infinite; }
@keyframes glow{
  0%, 100%{ background: #B8731F; }
  50%{ background: #FFD27A; box-shadow: 0 0 0 4px var(--ivory-warm), 0 0 14px 5px rgba(232,163,61,0.55); }
}
.timeline h3{ font-family: var(--font-display); font-size: 19px; line-height: 1.25; margin: 0 0 2px; }
.timeline .job-org{ margin: 0; }
.timeline summary{ list-style: none; cursor: pointer; }
.timeline summary::-webkit-details-marker{ display: none; }
.timeline summary:focus-visible{ outline: 2px solid var(--marigold); outline-offset: 4px; border-radius: 4px; }
.timeline summary::after{
  content: "Show details +";
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}
.timeline details[open] summary::after{ content: "Hide details −"; }
.timeline summary:hover h3{ text-decoration: underline; }
.job-loc{ font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 8px; }
.timeline ul{ margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--ink-soft); }
.timeline ul li{ margin-bottom: 6px; }
.education{ padding: 100px 0 110px; background: var(--ivory-warm); }
.edu-card{ max-width: 760px; margin: 0 auto; }
.job-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.job-date{ font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); margin: 0 0 6px; }
.job-card h3{ font-family: var(--font-display); font-size: 20px; line-height: 1.25; margin: 0 0 4px; }
.job-org{ font-size: 14.5px; color: var(--ink-soft); margin: 0 0 12px; }
.job-card ul{ margin: 0; padding-left: 20px; font-size: 14.5px; color: var(--ink-soft); }
.job-card li{ margin-bottom: 6px; }

/* ==========================================================
   SKILLS
   ========================================================== */
.skill-group{
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--accent);
  margin: 32px 0 14px;
}
.skill-tags{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.skill-tags li{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.skill-tags li:hover{ transform: translateY(-2px) rotate(-1deg); background: var(--marigold); color: #2B1B14; }

/* ==========================================================
   BLOG
   ========================================================== */
.blog{ padding: 100px 0 110px; }
.blog-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 26px;
}
.blog-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 18px 24px;
}
.blog-img{ display: block; border-radius: 10px; overflow: hidden; aspect-ratio: 16/10; background: var(--ivory-warm); margin-bottom: 14px; }
.blog-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-img img{ transform: scale(1.04); }
.blog-meta{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 8px;
}
.blog-card h3{ font-family: var(--font-display); font-size: 19px; line-height: 1.25; margin: 0 0 10px; }
.blog-card h3 a{ text-decoration: none; }
.blog-card h3 a:hover{ text-decoration: underline; }
.blog-card p:last-child{ font-size: 14.5px; color: var(--ink-soft); margin: 0; }

/* ==========================================================
   CONTACT
   ========================================================== */
.contact{ padding: 100px 0 110px; }
.contact-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 20px;
  margin-bottom: 50px;
}
.contact-box{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.contact-box h3{ font-family: var(--font-display); font-size: 17px; margin: 0 0 6px; }
.contact-box p{ margin: 0; font-size: 14.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.contact-box a{ color: var(--accent); }
.contact-direct{ display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.contact-direct p{ margin: 0; color: var(--ink-soft); }
.contact-form{
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  text-align: left;
}
.contact-form label{
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.contact-form input,
.contact-form textarea{
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 18px;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.contact-form textarea{ resize: vertical; min-height: 130px; }
.contact-form input:focus,
.contact-form textarea:focus{ outline: 2px solid var(--marigold); outline-offset: 1px; }
.contact-form .cf-turnstile{ align-self: center; margin-bottom: 18px; max-width: 100%; }
.contact-form .cta-primary{ align-self: center; border: 0; cursor: pointer; font-family: inherit; }
.contact-form .cta-primary:disabled{ opacity: 0.6; cursor: default; }
.contact-direct .contact-status{ min-height: 22px; margin-top: 14px; text-align: center; font-size: 14.5px; }
.contact-direct .contact-status.is-success{ color: var(--moss); }
.contact-direct .contact-status.is-error{ color: var(--accent); }
.contact-hp{ position: absolute; left: -9999px; }
.contact-photo{
  width: 150px; height: 150px;
  border-radius: 50%;
  border: 4px solid var(--card);
  background-image: var(--contact-photo);
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px rgba(43,27,20,0.12);
}
.cta-plum{ background: var(--plum); color: #FAF1E4; box-shadow: 0 10px 24px rgba(110,47,66,0.25); }
.cta-plum:hover{ background: var(--plum-deep); box-shadow: 0 14px 30px rgba(110,47,66,0.32); }

/* ==========================================================
   FOOTER
   ========================================================== */
.site-footer{
  background: var(--coffee-bg);
  color: #FAF1E4;
  padding: 70px 0 34px;
}
.footer-inner{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 40px;
}
.footer-title{
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 10px;
}
.footer-sub{ color: #C9B9A8; margin: 0; font-size: 15px; }
.footer-heading{
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--marigold-soft);
  margin: 8px 0 14px;
}
.footer-list{ list-style: none; margin: 0; padding: 0; font-size: 14.5px; color: #C9B9A8; }
.footer-list li{ margin-bottom: 6px; overflow-wrap: anywhere; }
.footer-list a{ text-decoration: none; }
.footer-list a:hover{ color: #FAF1E4; text-decoration: underline; }
.footer-copy{
  text-align: center;
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #A08F7E;
}
@media (max-width: 820px){
  .footer-inner{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-inner > div:first-child{ grid-column: 1 / -1; }
}

/* ==========================================================
   LEGAL PAGES (Impressum, Datenschutz)
   ========================================================== */
.legal-page{ padding: 60px 0 100px; }
.legal{
  max-width: 760px;
  margin: 0 auto;
  font-size: 15.5px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.legal h2{
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.5rem);
  line-height: 1.25;
  margin: 2.2em 0 0.6em;
  scroll-margin-top: 90px;
}
.legal h2:first-child{ margin-top: 0; }
.legal h3{ font-family: var(--font-display); font-size: 1.1rem; margin: 1.6em 0 0.4em; }
.legal p, .legal li{ color: var(--ink-soft); }
.legal strong{ color: var(--ink); }
.legal a{ color: var(--accent); }
.legal ul{ padding-left: 1.2em; }
.legal li{ margin-bottom: 0.6em; }
.legal ul.index{ list-style: none; padding: 18px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); columns: 2 260px; column-gap: 28px; }
.legal ul.index li{ margin-bottom: 0.35em; break-inside: avoid; }
.legal .seal{ margin-top: 3em; font-size: 13px; }
.footer-legal{ display: inline-block; margin-left: 6px; }
.footer-legal a{ color: #C9B9A8; }
.footer-legal a:hover{ color: #FAF1E4; }
.contact-privacy{ font-size: 13px; color: var(--ink-soft); text-align: center; margin: 12px 0 0; }
.contact-privacy a{ color: var(--accent); }

/* ==========================================================
   CHATBOT
   ========================================================== */
.chat-launcher{
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--marigold);
  color: #2B1B14;
  font: 600 14.5px var(--font-body);
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(232,163,61,0.3);
  transition: transform 0.2s ease, background 0.2s ease;
}
.chat-launcher:hover{ transform: translateY(-2px); background: var(--marigold-soft); }
.chat-lantern{ display: block; height: 100%; width: auto; }
.chat-lantern-glass{ fill: var(--marigold); }
.chat-launcher .chat-lantern{ height: 22px; }
.chat-launcher .chat-lantern-glass{ fill: #FFF3D6; }
.chat-avatar{
  flex: none;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  padding: 5px 0;
  border-radius: 50%;
  background: var(--plum-deep);
}
.chat-head .chat-avatar{ width: 40px; height: 40px; padding: 7px 0; }
/* Lumi glows while writing an answer */
.chat-row:has(.chat-typing) .chat-lantern{ animation: lumi-glow 1.2s ease-in-out infinite; }
@keyframes lumi-glow{ 50%{ filter: drop-shadow(0 0 5px #F4C877) brightness(1.2); } }
.is-resting .chat-lantern{ filter: grayscale(0.6) brightness(0.7); }
.chat-launcher:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }
.chat-panel{
  position: fixed;
  right: 20px; bottom: 82px;
  z-index: 900;
  width: min(380px, calc(100vw - 32px));
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 24px 50px rgba(0,0,0,0.25);
  overflow: hidden;
}
.chat-panel[hidden]{ display: none; }
.chat-head{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.chat-title{ font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 2px; }
.chat-note{ font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.chat-note a{ color: var(--accent); }
.chat-head-text{ flex: 1; min-width: 0; }
.chat-close{
  align-self: flex-start;
  border: 0; background: none;
  color: var(--ink-soft);
  font-size: 24px; line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.chat-log{
  flex: 1;
  min-height: 140px;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-msg{
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.chat-msg a{ color: inherit; }
.chat-user{ align-self: flex-end; background: var(--marigold); color: #2B1B14; border-bottom-right-radius: 4px; }
.chat-row{ display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.chat-row .chat-msg{ max-width: none; }
.chat-bot{ background: var(--ivory-warm); border-bottom-left-radius: 4px; }
.chat-note-msg{ font-style: italic; color: var(--ink-soft); }
.chat-joke{ border: 1px dashed var(--marigold); }
/* three dots while the answer is on its way */
.chat-typing{
  width: 52px; height: 36px;
  background:
    radial-gradient(circle 4px at 14px 50%, var(--ink-soft) 98%, transparent),
    radial-gradient(circle 4px at 26px 50%, var(--ink-soft) 98%, transparent),
    radial-gradient(circle 4px at 38px 50%, var(--ink-soft) 98%, transparent),
    var(--ivory-warm);
  animation: chat-typing 1.2s ease-in-out infinite;
}
@keyframes chat-typing{ 50%{ opacity: 0.45; } }
.chat-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.chat-action{
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--marigold);
  color: #2B1B14;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
.chat-action:hover{ background: var(--marigold-soft); }
.chat-suggest{ display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.chat-suggest[hidden]{ display: none; }
.chat-suggest button{
  border: 1px solid var(--line);
  background: none;
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font: 13px var(--font-body);
  cursor: pointer;
}
.chat-suggest button:hover{ border-color: var(--marigold); }
.chat-form{ display: flex; gap: 8px; padding: 12px 18px 6px; border-top: 1px solid var(--line); }
.chat-form input{
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  font: 14.5px var(--font-body);
  color: var(--ink);
  background: var(--ivory-warm);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.chat-form input:focus{ outline: 2px solid var(--marigold); outline-offset: 1px; }
.chat-form button{
  border: 0;
  border-radius: 10px;
  padding: 0 16px;
  background: var(--plum);
  color: #FAF1E4;
  font: 600 14px var(--font-body);
  cursor: pointer;
}
.chat-form input:disabled,
.chat-form button:disabled{ opacity: 0.55; cursor: default; }
.chat-count{ margin: 0; padding: 0 18px 12px; min-height: 18px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.chat-check{ padding: 0 18px; }
.chat-check:not(:empty){ padding-bottom: 12px; }
.chat-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 520px){
  .chat-launcher{ right: 16px; bottom: 16px; }
  .chat-panel{ right: 16px; left: 16px; bottom: 76px; width: auto; }
}

/* ==========================================================
   SCROLL REVEAL
   ========================================================== */
.reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}
.about-photo.in-view,
.moment-card.in-view{ transform: rotate(var(--tilt, 0deg)); }
.moment-card.in-view:hover{ transform: rotate(0deg) translateY(-4px); box-shadow: 0 16px 34px rgba(43,27,20,0.14); }
.good-card.in-view:hover{ transform: translateY(-8px) rotate(-0.4deg); box-shadow: 0 22px 40px rgba(43,27,20,0.14); }