:root{
  --bg: #ffffff;
  --alt: #f6f7fb;
  --text: #111827;
  --muted: #6b7280;
  --card: #ffffff;
  --border: #e5e7eb;
  --shadow: 0 10px 25px rgba(0,0,0,.06);
  --radius: 18px;
  --max: 1100px;
  --stack-gap: 22px; /* global container gap */
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; height: 100%; }
html{ overflow-y: scroll; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
}

.container{
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
}

[hidden] { display: none !important; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  }
.header-inner{
  display:flex;
  align-items:center;
  gap:14px;
  padding: 12px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text);
  font-weight: 800;
}
.brand-mark{
  display:inline-flex;
  width:34px; height:34px;
  border-radius: 12px;
  align-items:center; justify-content:center;
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.main-nav{
  margin-left:auto;
  display:flex;
  gap:14px;
}
.main-nav a{
  text-decoration:none;
  color: var(--text);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 12px;
}
.main-nav a:hover{
  background: var(--alt);
}

.lang-switcher select{
  border: 1px solid var(--border);
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--bg);
}

.nav-toggle{
  display:none;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 18px;
}

.mobile-nav {
  display: none;
  border-top: 1px solid var(--border);
  background: var(--bg);
  padding: 10px 16px 16px;
  gap:8px;
}

.mobile-nav a{
  text-decoration:none;
  color: var(--text);
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--alt);
}

/* Hero */
.hero {
  padding-top: 34px;
  padding-bottom: 20px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: start;
}
h1{
  font-size: clamp(28px, 3.2vw, 44px);
  margin: 0 0 10px;
}
.lead{
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 18px;
}

.hero-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.photo-placeholder{
  border: 1px solid var(--border);
  border-radius: 16px;
  min-height: 190px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  background: var(--alt);
  overflow: hidden;
}


.photo-placeholder img,
.karate-photo-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}


.quick-stats{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.stat{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
}
.stat-label{ color: var(--muted); font-weight: 600; }
.stat-value{ font-weight: 800; }

.button-row{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  border-radius: 14px;
  padding: 10px 14px;
  font-weight: 800;
  text-decoration:none;
  border: 1px solid var(--border);
}
.btn.primary{ background: #111827; color:#fff; border-color: #111827; }
.btn.ghost{ background: var(--bg); color: var(--text); }
.btn:hover{ transform: translateY(-1px); }

.tiny-note{
  margin-top: 12px;
  color: var(--muted);
  font-size: .92rem;
}

/* Sections */
.section{ padding: 34px 0; }
.section.alt{ background: var(--alt); }
h2{
  margin: 0 0 14px;
  font-size: clamp(22px, 2.2vw, 30px);
}
.muted{ color: var(--muted); }

.card-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--stack-gap);
}
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.card h3{ margin: 0 0 8px; }
.card p{ font-size: 1rem; line-height: 1.6; margin: 0; }

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stack-gap);
  align-items: start;
}

.timeline{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 10px;
}
.timeline .dot{
  display:inline-block;
  width:10px; height:10px;
  border-radius: 999px;
  background: #111827;
  margin-right: 10px;
  transform: translateY(-1px);
}

.pill-row{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pill{
  border: 1px solid var(--border);
  background: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
}

.mt{ margin-top: var(--stack-gap); }

.table-wrap{
  overflow:auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
table{
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}
th, td{
  padding: 12px 14px;
  text-align: left;
}
th{ background: #fafafa; font-weight: 800; }

.bullets{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stack-gap);
}
.gallery-item{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  min-height: 120px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  box-shadow: var(--shadow);
}

/* Footer */
.site-footer{
  border-top: 1px solid var(--border);
  padding: 18px 0;
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  color: var(--muted);
  font-size: .95rem;
}
.footer-links a{
  color: var(--muted);
  text-decoration:none;
  margin-left: 12px;
}
.footer-links a:hover{ text-decoration: underline; }

/* Responsive */
@media (max-width: 900px){
  .mobile-nav:not([hidden]){ display:grid; }

  .hero-grid{ grid-template-columns: 1fr; }
  .card-grid{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .main-nav{ display:none; }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .lang-switcher{ order: 3; }
}


/* Forms */
.form{
  display: grid;
  gap: 12px;
}
label span{
  display:inline;
  font-weight: 700;
  margin-bottom: 6px;
}
input, textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  font: inherit;
  background: #fff;
}
textarea{ resize: vertical; min-height: 140px; }

.notice{
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-weight: 700;
}
.notice.success{
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.card-soft{
  border: 1px dashed var(--border);
  background: #fff;
  border-radius: var(--radius);
  padding: 14px;
}


/* =========================
   Enhancements (Motto, Timeline, Belt Chart, Latest Achievement)
========================= */

.motto-card{
  display:flex;
  gap:14px;
  align-items:center;
  border: 1px solid var(--border);
  background:#fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.motto-icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--alt);
  font-size: 20px;
}
.motto-title{ margin:0 0 6px; }
.motto-text{
  margin:0;
  font-weight: 800;
  font-size: 1.05rem;
}

/* Latest Achievement – clean single layout (Baseline 47) */
/* Gentle internal spacing without flex gaps */
.latest-highlight > * + *{
  margin-top: 8px;
}
.latest-title{ margin: 0 0 4px; }
.latest-meta{ margin: 0 0 8px; }

.year-timeline{
  display:grid;
  gap: var(--stack-gap);
  margin-top: var(--stack-gap);
}
.year-item{
  display:grid;
  grid-template-columns: 20px 1fr;
  gap: 12px;
  align-items:flex-start;
}
.year-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #111827;
  margin-top: 6px;
}
.year-content{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 14px 16px;
}
.year-heading{
  display:flex;
  gap: 10px;
  align-items:center;
  font-weight: 900;
  margin-bottom: 6px;
}
.year{ font-size: 1.05rem; }
.tag{
  font-weight: 800;
  font-size: .85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--alt);
}

/* Belt chart */
.belt-chart{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.belt-step{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px;
  text-align:center;
}
.belt-swatch{
  width: 100%;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  background: var(--alt);
}
.belt-label{
  font-weight: 900;
  display:flex;
  flex-direction: column;
  gap: 6px;
  align-items:center;
}
.current-pill{
  display:inline-flex;
  border: 1px solid var(--border);
  background: var(--alt);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .78rem;
  font-weight: 900;
}

/* Simple belt colors (adjust anytime) */
.belt-white{ background: #ffffff; }
.belt-yellow{ background: #fde68a; }
.belt-orange{ background: #fdba74; }
.belt-green{ background: #bbf7d0; }
.belt-blue{ background: #bfdbfe; }
.belt-brown{ background: #d6b59a; }
.belt-black{ background: #111827; }

.belt-step.done{ opacity: .85; }
.belt-step.current{
  outline: 2px solid #111827;
  outline-offset: 2px;
}

@media (max-width: 900px){
  .belt-chart{ grid-template-columns: repeat(2, 1fr); }
  .motto-card{ flex-direction: column; align-items:flex-start; }
}


/* =========================
   Hybrid Gallery Timeline (grouped by year)
========================= */

.gallery-timeline{
  display:grid;
  gap: var(--stack-gap);
  margin-top: 18px;
}

.year-block{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  padding: 16px;
}

.year-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.year-title{
  margin: 0;
  font-size: 1.4rem;
}

.year-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--stack-gap);
}

.photo-card{
  margin:0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

.photo-frame{
  background: var(--alt);
  min-height: 140px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.photo-frame img{
  width:100%;
  height: 200px;
  object-fit: cover;
  display:block;
}

.photo-placeholder{
  color: var(--muted);
  font-weight: 800;
}

.photo-caption{
  padding: 12px;
  display:grid;
  gap: 6px;
}

.photo-title{
  font-weight: 900;
}

.photo-reflection{
  color: var(--text);
}

@media (max-width: 1100px){
  .year-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px){
  .year-grid{ grid-template-columns: repeat(2, 1fr); }
  .year-header{ flex-direction: column; align-items:flex-start; }
}

@media (max-width: 520px){
  .year-grid{ grid-template-columns: 1fr; }
}

.belt-red{ background: #f87171; }
.belt-purple{ background: #c084fc; }


/* =========================
   Current Rank Badge (Karate)
========================= */

.rank-badge-row{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  flex-wrap: wrap;
  margin: 10px 0 16px;
}

.rank-badge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 999px;
  padding: 8px 12px;
  box-shadow: var(--shadow);
}

.rank-badge-label{
  font-weight: 900;
  color: var(--muted);
}

.rank-badge-value{
  font-weight: 900;
}

.rank-badge-note{
  margin: 2px 0 0;
  max-width: 520px;
}

@media (max-width: 900px){
  .rank-badge-row{
    flex-direction: column;
  }
}


/* =========================
   Refined Header Branding (Baseline 4)
========================= */

.brand-name{
  font-weight:900;
  font-size:1.1rem;
  letter-spacing:0.3px;
}

.brand-subtitle{
  font-size:.8rem;
  color: var(--muted);
  font-weight:700;
  letter-spacing:0.4px;
}

@media (max-width: 900px){
  .brand-name{ font-size:1rem; }
  .brand-subtitle{ font-size:.75rem; }
}


/* =========================
   Baseline 5 - DS Monogram Branding
========================= */

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.brand-logo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:10px;
  font-weight:900;
  font-size:1rem;
  letter-spacing:1px;
  background:#111;
  color:#fff;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-name{
  font-weight:900;
  font-size:1.05rem;
  letter-spacing:0.3px;
}

.brand-subtitle{
  font-size:.8rem;
  color: var(--muted);
  font-weight:700;
  letter-spacing:0.4px;
}

@media (max-width: 900px){
  .brand-logo{
    width:36px;
    height:36px;
    font-size:.9rem;
  }
  .brand-name{ font-size:1rem; }
  .brand-subtitle{ font-size:.75rem; }
}


/* =========================
   Active Navigation Link
========================= */

.main-nav a.active,
.mobile-nav a.active{
  background: var(--alt);
  border: 1px solid var(--border);
}

.main-nav a.active{
  box-shadow: var(--shadow);
}

.mobile-nav a.active{
  background: #fff;
}

/* About page layout helpers */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--stack-gap);
}
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
}


/* =========================
   Compact Header Brand Layout
========================= */

.site-header .header-inner{
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  line-height: 1.1;
}

.brand-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.brand-name{
  margin:0;
}

.brand-subtitle{
  margin:0;
}

/* Optional: hide subtitle on very small screens to save space */
@media (max-width: 420px){
  .brand-subtitle{ display:none; }
}


/* =========================
   Baseline 7 - Elevated Monochrome Theme
========================= */

/* Softer background */
body{
  background:#f7f7f7;
}

/* Section contrast */
.section{
  padding-top: 36px;
  padding-bottom: 36px;
}

/* Refined cards */
.card{
  background:#ffffff;
  border:1px solid #e5e5e5;
  border-radius:18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* Subtle hover elevation */
.card:hover{
  box-shadow: 0 10px 28px rgba(0,0,0,0.06);
  transform: translateY(-2px);
  transition: all .25s ease;
}

/* Elegant link styling */
a{
  transition: all .2s ease;
}

a:hover{
  opacity: .75;
}

/* Thin divider under header */
.site-header{
  }

/* Refined buttons (if any) */
.btn, button:not(.nav-toggle){
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:8px 18px;
  border:none;
  font-weight:600;
}

.btn:hover, button:not(.nav-toggle):hover{
  opacity:.85;
}

/* Slightly tighter typography */
h1, h2, h3{
  letter-spacing:.3px;
}


/* =========================
   Featured Impact + Outline Button
========================= */

.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid #111;
  background: transparent;
  color:#111;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}

.btn-outline:hover{
  background:#111;
  color:#fff;
}

.featured-impact-inner{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.featured-impact-cta{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-end;
}

.tiny{
  font-size:.78rem;
}

@media (max-width: 900px){
  .featured-impact-inner{
    flex-direction:column;
  }
  .featured-impact-cta{
    align-items:flex-start;
  }
}


/* =========================
   Header Typography Refinement (Baseline 11)
========================= */

.brand-text{
  display:flex;
  flex-direction:column;
  gap:6px; /* increased breathing space between name & subtitle */
}

.brand-name{
  line-height:1.25;
}

.brand-subtitle{
  line-height:1.4;
  color:#555; /* slightly lighter for hierarchy */
  font-weight:500;
  letter-spacing:.4px;
}


/* =========================
   Subtle Monochrome Section Icons (Baseline 12)
========================= */

.section-icon{ display:none; }

.section-icon + h2{
  margin-top:2px;
}


/* =========================
   Key Section Icons (Baseline 13)
   - Icons are subtle, monochrome, and used only on key headings.
========================= */

h2{
  display:flex;
  align-items:center;
  gap:10px;
}

.h2-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  color:#111;
  opacity:0.9;
  flex:0 0 auto;
}

.h2-icon svg{
  width:20px;
  height:20px;
  display:block;
}


/* =========================
   Baseline 13 Spacing Refinement
========================= */

/* Normalize section spacing */
.section{
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Tighten heading spacing when icon is present */
h2{
  margin-bottom: 12px;
}

.h2-icon{
  margin-right: 6px;
}

/* =========================
   Contact page H2 icons
   - Subtle monochrome line icons aligned left of section headings
========================= */

.contact-h2{
  display:flex;
  align-items:center;
  gap:10px;
}

.contact-h2-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--text);
  opacity: .9;
  flex: 0 0 auto;
}

.contact-h2-icon svg{
  width:20px;
  height:20px;
  display:block;
}

/* =========================
   Contact page - Direct email card alignment
   - Right-justified text
   - Email is clickable with no underline by default
   - Underline on hover/focus only
========================= */

.contact-direct-card .contact-h2{
  justify-content: flex-end;
}

.contact-direct-email{
  text-decoration: none;
}

.contact-direct-email:hover,
.contact-direct-email:focus{
  text-decoration: underline;
}


/* =========================
   Achievements page H2 icons
   - Subtle monochrome line icons for major categories
========================= */

.achievements-h2{
  display:flex;
  align-items:center;
  gap:10px;
}

.achievements-h2-icon{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--text);
  opacity: .9;
  flex: 0 0 auto;
}

.achievements-h2-icon svg{
  width:20px;
  height:20px;
  display:block;
}


/* =========================
   School leadership roles container
   - Keeps major H2 sections visually consistent with other boxed sections
========================= */

.card.mt .card-grid{
  margin-top: 14px;
}


/* =========================
   Contact Page – Submit Button (Grid Fix)
   Reason: .form is display:grid, and grid items stretch by default.
   We set justify-self to prevent full-width stretching and keep it left-aligned.
========================= */

.two-col .form .btn.primary{
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  min-width: 160px;
  justify-self: start; /* key fix for CSS grid */
}


/* =========================
   Featured Impact Spacing
   - Do not add extra margins here; rely on .mt / layout gaps.
   - Clear legacy side/bottom margins only (does not affect .mt margin-top).
========================= */
.featured-impact{
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}


/* =========================
   Form Required Marker
========================= */
.req{
  font-weight:900;
  opacity:.7;
  margin-left:4px;
  display:inline;
}


/* =========================
   Yearly Growth Timeline – Consistent Gap
   Match the vertical rhythm used between major containers (Leadership baseline).
========================= */
.year-timeline{
  gap: var(--stack-gap) !important;
  margin-top: var(--stack-gap) !important;
}


/* =========================
   Stacking: Grid Rows -> Next Container
   Ensures the gap after multi-column rows matches the Leadership rhythm.
========================= */

/* After a two-column row (e.g., Academic/Sports; Belt Timeline/What Karate Teaches Me) */
.section .container > .two-col + /* After a 2-up grid row (e.g., About: Quick Highlights/My Values) */
.section .container > .grid-2 + /* After a card-grid row (e.g., Home Highlights row) */
.section .container > /* =========================
   Home Page – Main Container Rhythm
   Home uses one main container per section; normalize spacing between them.
========================= */
.home-page .section{ padding: 0; }
.home-page .section .home-page .section:first-of-type .card{ margin-top: 0; }

/* Home Yearly Growth Timeline: remove dot bullets and keep clean layout */
.home-page .year-dot{ display:none; }
.home-page .year-item{ grid-template-columns: 1fr; }

/* Ensure space between yearly items matches global rhythm */
.home-page .year-timeline{ gap: var(--stack-gap); margin-top: var(--stack-gap); }


/* Baseline 45 refinement */
.latest-title{
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: .3px;
  margin-bottom: 6px;
}


/* =========================
   Global Footer Breathing Space
   Layout-driven spacing so every page has consistent space above the footer.
========================= */
main{
  padding-bottom: var(--stack-gap);
}


/* =========================
   Home Page – Last Section Bottom Padding
   Home uses custom section padding (often 0). Restore standard bottom padding
   on the final section so spacing above footer matches other pages.
========================= */
.home-page .section:last-of-type{
  padding-bottom: 32px;
}


/* =========================
   Baseline 53 – Latest Achievement (Editorial, No Sub-Container)
========================= */
.latest-content{
  margin-top: 6px;
}
.latest-content .latest-title{
  margin-top: 0;
}
.latest-content > * + *{
  margin-top: 8px;
}


/* =========================
   Baseline 54 – Home Hero Layout
   Motto sits inside the left hero column under the intro CTAs.
========================= */
.hero-motto{
  margin-top: 16px;
}
.hero-motto .motto-card{
  margin: 0;
}
/* Make Motto card fit hero column tone */
.hero-motto .motto-icon{
  width: 40px;
  height: 40px;
  border-radius: 14px;
}


/* =========================
   Baseline 55 – Hero Balance Refinement
   - More breathing room above Motto
   - Bottom-align privacy note with the hero card
========================= */
.hero-grid{
  align-items: stretch;
}

.hero-text{
  display:flex;
  flex-direction: column;
}

.hero-motto{
  margin-top: 24px; /* was 16px */
}

/* Push privacy note to bottom of left column for visual alignment */
.hero-text .tiny-note{
  margin-top: auto;
}


/* =========================
   Baseline 56 – Footer Privacy Note (Site-wide)
========================= */
.footer-privacy-note{
  display:block;
  font-size: .85rem;
  color: var(--muted);
  margin-top: 4px;
  max-width: 720px;
}


/* =========================
   Baseline 57 – Compact Footer Refinement
========================= */

.site-footer{
  padding: 12px 0; /* reduced from larger spacing */
}

.footer-inner{
  gap: 6px;
  align-items: flex-start;
}

.footer-privacy-note{
  margin-top: 2px;
  font-size: .82rem;
  line-height: 1.4;
}


/* =========================
   Baseline 58 – Footer Inline Privacy (Compact)
   Keeps footer to 1–2 lines maximum, no extra rows.
========================= */
.footer-inner{
  align-items: center;
}

.footer-copy{
  display: inline;
  color: var(--muted);
  font-size: .95rem;
}

.footer-sep{
  opacity: .6;
  margin: 0 6px;
}

.footer-privacy-note{
  display: inline;
  font-size: .85rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}


/* =========================
   Baseline 59 – Final Footer Polish
========================= */
.footer-privacy-note{
  opacity: .8;
}


/* =========================
   Baseline 60 – Footer Rebuild (Deduped)
   Ensures a single, clean footer structure across all pages.
========================= */
.site-footer{ padding: 12px 0; }
.footer-inner{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.footer-copy{ color: var(--muted); }
.footer-sep{ opacity: .6; margin: 0 6px; }
.footer-privacy-note{ font-size: .85rem; opacity: .8; }
.footer-links a{ margin-left: 12px; }


/* =========================
   Baseline 61 – Hero Motto Integrated (No Box)
========================= */

.hero-motto-title{
  margin-top: 24px;
  margin-bottom: 8px;
  font-size: 1.1rem;
  font-weight: 800;
}

.hero-motto-quote{
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 600;
  color: #333;
}


/* =========================
   Baseline 62 – Hero Restore After Motto Simplification
   Fixes hero 2-column layout and keeps motto editorial (no box).
========================= */
.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 22px;
  align-items: start;
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}


/* =========================
   Baseline 63 – Hero Top Alignment Normalized
   - Hero top padding aligned with .section (34px)
   - Ensures H1 vertical consistency across all pages
========================= */


/* =========================
   Baseline 64 – Home Yearly Timeline (No Sub-Boxes)
   Clean editorial timeline inside the main container.
========================= */
.timeline-clean{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 14px; /* consistent vertical spacing between years */
  position: relative;
}

.timeline-clean-item{
  display: grid;
  grid-template-columns: 72px 18px 1fr;
  gap: 14px;
  align-items: start;
  position: relative;
}

.timeline-clean-year{
  color: var(--muted);
  font-weight: 800;
  padding-top: 2px;
}

.timeline-clean-marker{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #111827;
  background: #fff;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.timeline-clean-item.current .timeline-clean-marker{
  background: #111827;
}

.timeline-clean::before{
  content:"";
  position:absolute;
  left: calc(72px + 9px); /* year col + half marker col */
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--border);
}

.timeline-clean-content{
  line-height: 1.55;
}

@media (max-width: 520px){
  .timeline-clean-item{
    grid-template-columns: 56px 18px 1fr;
    gap: 12px;
  }
  .timeline-clean::before{
    left: calc(56px + 9px);
  }
}


/* =========================
   Baseline 66 – Ensure Outline Buttons Stay Light by Default
   (Overrides global button/.btn styling from theme)
========================= */
a.btn.btn-outline{
  background: transparent !important;
  color:#111827 !important;
  border:1px solid #111827 !important;
}
a.btn.btn-outline:hover{
  background:#111827 !important;
  color:#ffffff !important;
}


/* =========================
   Baseline 67 – CTA Hierarchy (Home)
   - Primary CTA stays as a button
   - External/community CTA becomes an editorial arrow link
========================= */

.cta-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#111827;
  text-decoration:none;
  font-weight:800;
  padding: 6px 0;  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}


.cta-link:hover{
  opacity:.75;
}


/* =========================
   Baseline 68 – Hero Spacing Refinement
   Increase space between Motto and CTA buttons
========================= */

.hero-motto{
  margin-bottom: 26px;
}

.button-row{
  margin-top: 8px;
}


.latest-highlight p{
  margin-bottom: 20px;
}

.latest-highlight .btn{
  margin-top: 6px;
}


/* =========================
   Baseline 70 – Strong Latest Achievement Spacing
   Ensure clear separation between description and CTA
========================= */

.latest-highlight p{
  margin-bottom: 0;
}

.latest-highlight .btn,
.latest-highlight .btn-outline{
  margin-top: 24px;
}


/* =========================
   Baseline 71 – Latest Achievement CTA Spacing
   Ensures consistent gap between the description text and CTA button.
========================= */
.latest-cta-row{
  margin-top: 26px; /* match hero motto-to-CTA rhythm */
}

/* =========================
   Baseline 163 – Latest Achievement content spacing
   Improves readability for title, medals, and reflection lines.
========================= */
.latest-title{
  margin-bottom: 6px;
}

.latest-meta{
  margin: 0 0 10px;
}

.latest-medals{
  margin: 10px 0 12px;
  line-height: 1.6;
}

.latest-medals-label{
  margin-bottom: 6px;
  font-weight: 600;
}

.latest-medals-list{
  margin: 0 0 12px 18px;
  padding: 0;
}

.latest-medals-list li{
  margin-bottom: 6px;
}

.latest-reflection{
  margin-top: 10px;
  line-height: 1.5;
}


/* Keep arrow attached to link text */
.cta-link span{ white-space: nowrap; }


/* =========================
   Baseline 75 – Hero Stat Refinement
   Clean inline stats under photo (no mini boxes)
========================= */

.hero-stats{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hero-stat{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .95rem;
}

.hero-stat-label{
  color: var(--muted);
  font-weight: 600;
}

.hero-stat-value{
  font-weight: 800;
  color: var(--text);
  text-align: right;
}


.hero{
  padding-bottom: 0; /* remove extra hero bottom padding */
}

/* Slightly reduce top padding only for the first section after hero on Home */
.hero + .hero-next{
  padding-top: 22px; /* smaller than standard 32px, matches internal container rhythm */
}


/* =========================
   Baseline 76 – Home Hero→Highlights Gap Fix (Tighter, Home-only)
   Goal: Make the gap match the container-to-container spacing used elsewhere.
   Scope: ONLY the first section after hero on Home (class .hero-next).
========================= */

.hero{
  padding-bottom: 0; /* remove extra hero bottom padding */
}

/* Reduce top padding for the first section after hero */
.hero + .hero-next{
  padding-top: 22px; /* tighter than standard; removes the "too big" feel */
}

/* Also remove any extra top margin on the first card inside Highlights */
.hero + .hero-next .card:first-child{
  margin-top: 0 !important;
}


/* =========================
   Responsive Breakpoints (Device Targets)
   We adjust only spacing variables so all pages stay consistent.
========================= */

/* Mobile Phones (up to 576px) */
@media (max-width: 576px){
  :root{
    --stack-gap: 18px;
  }
}

/* Tablets (577px to 768px) */
@media (min-width: 577px) and (max-width: 768px){
  :root{
    --stack-gap: 20px;
  }
}

/* Laptops (769px to 1200px) */
@media (min-width: 769px) and (max-width: 1200px){
  :root{
    --stack-gap: 22px;
  }
}

/* Desktop Monitors (1201px to 1600px) */
@media (min-width: 1201px) and (max-width: 1600px){
  :root{
    --stack-gap: 24px;
  }
}

/* Large Monitors (above 1600px) */
@media (min-width: 1601px){
  :root{
    --stack-gap: 26px;
  }
}


/* =========================
   Hero → First Section Gap (Global)
   Ensures Home hero spacing matches the standard main-container rhythm.
========================= */
.hero{ padding-bottom: 0; }
.hero + .section{ padding-top: var(--stack-gap); }


/* Card default margin reset (prevents nested card drift inside grids like Home 'What I'm working on') */
.card{ margin-top: 0; }


/* Subcard (used for nested cards like Home goals) */
.subcard{
  box-shadow: none;
  transform: none;
  transition: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
}
.subcard:hover{
  box-shadow: none;
  transform: none;
}


/* =========================
   Global Vertical Rhythm (Robust)
   Ensures consistent vertical spacing between MAIN blocks on ALL pages + breakpoints.
   Works whether a page uses .card OR structural blocks (.two-col/.grid-2/.table-wrap/etc.).
========================= */

/* Define what counts as a "main block" inside a section container */
.section .container > :is(
  .card,
  .two-col,
  .grid-2,
  .table-wrap,
  .gallery-timeline,
  .year-timeline,
  .featured-impact,
  .rank-badge-row
){
  margin-top: 0; /* no implicit top margins */
}

/* Spacing between consecutive main blocks */
.section .container > :is(
  .card,
  .two-col,
  .grid-2,
  .table-wrap,
  .gallery-timeline,
  .year-timeline,
  .featured-impact,
  .rank-badge-row
) + :is(
  .card,
  .two-col,
  .grid-2,
  .table-wrap,
  .gallery-timeline,
  .year-timeline,
  .featured-impact,
  .rank-badge-row
){
  margin-top: var(--stack-gap);
}

/* If a heading introduces a main block, apply the same rhythm */
.section .container > :is(h1, h2, p, .lead, .muted) + :is(
  .card,
  .two-col,
  .grid-2,
  .table-wrap,
  .gallery-timeline,
  .year-timeline,
  .featured-impact,
  .rank-badge-row
){
  margin-top: var(--stack-gap);
}

/* Never add extra spacing at end of section; footer spacing stays consistent */


/* =========================
   Belt Progression Mobile Normalization
   - Keeps belt tiles visually consistent even when labels wrap on small screens.
========================= */

.belt-chart{ align-items: stretch; }

.belt-step{
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.belt-label{
  /* Reserve consistent label height so rows align when text wraps */
  min-height: 2.6em;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: auto; /* push label to bottom */
}

/* If current-pill is injected, keep it spaced consistently */
.belt-label .current-pill{
  margin-top: 6px;
}


/* =========================
   Nav toggle visibility + ordering (Mobile)
   - Ensures hamburger icon is visible (not overridden by global button styling)
   - Places hamburger left, DS brand next, language selector aligned right
========================= */

.nav-toggle{
  background: var(--bg) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  font-size: 22px;
  line-height: 1;
}

/* Mobile header ordering */
@media (max-width: 900px){
  .header-inner{ gap: 10px; }

  .nav-toggle{
    order: 0;
    margin-left: 0 !important;
  }

  .brand{ order: 1; }

  .lang-switcher{
    order: 2;
    margin-left: auto;
  }
}


/* =========================
   Mobile Drawer Menu (Left Slide)
========================= */

.mobile-nav{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #fff;
  box-shadow: 2px 0 20px rgba(0,0,0,.1);
  transform: translateX(-100%);
  transition: transform 0.3s ease;
  z-index: 100;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-nav.open{
  transform: translateX(0);
}

.mobile-nav a{
  background: none;
  padding: 8px 0;
  border-radius: 0;
}

.mobile-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.75);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 45;
}

.mobile-overlay.open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer-close{
  align-self: flex-end;
  font-size: 22px;
  cursor: pointer;
  border: none;
  background: none;
  margin-bottom: 10px;
}


/* Drawer menu links readability */
.mobile-nav a{ font-size: 1.05rem; }

body.drawer-open{ overflow:hidden; }


/* =========================
   Baseline 95 — Drawer overlay like Raise Hearts
   - Drawer is ~1/3 screen (clamped)
   - Overlay covers ONLY the remaining area (not the drawer)
   - Fix stacking: overlay sits under sticky header (z-index 45), header is 50
========================= */

@media (max-width: 900px){
  :root{
    --drawer-w: clamp(260px, 33vw, 360px);
  }

  /* Drawer */
  .mobile-nav{
    width: var(--drawer-w) !important;
    z-index: 60 !important; /* stays above overlay; header is 50 */
    padding: 18px 18px 22px !important;
  }

  /* Overlay covers ONLY the space to the right of drawer */
  .mobile-overlay{
    top: 0;
    bottom: 0;
    left: var(--drawer-w);
    right: 0;
    width: auto;
    height: auto;
    background: rgba(0,0,0,.75);
    z-index: 45; /* below sticky header (50) so it won't block drawer clicks */
    pointer-events: none;
  }
  .mobile-overlay.open{
    pointer-events: auto;
  }
}


/* =========================
   Baseline 96 — Drawer readability + active highlight
========================= */

@media (max-width: 900px){
  .mobile-nav{
    background: #ffffff;
    border-right: 1px solid var(--border);
  }

  /* Make menu items readable + tappable */
  .mobile-nav a{
    display: block;
    padding: 12px 12px;
    border-radius: 12px;
    color: var(--text);
    font-weight: 700;
    background: transparent;
  }

  .mobile-nav a:hover{
    background: var(--alt);
    opacity: 1; /* override global link hover opacity */
  }

  /* Active item (match desktop "selected" feel) */
  .mobile-nav a.active{
    background: var(--alt);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
  }

  /* Close button looks consistent */
  .drawer-close{
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .drawer-close:hover{ background: var(--alt); }
}


/* =========================
   Baseline 97 — Stronger overlay (Improve readability)
   - Darker + slight blur to reduce background distraction
========================= */

@media (max-width: 900px){
  .mobile-overlay{
    background: rgba(0,0,0,.85) !important;
    backdrop-filter: blur(2px);
  }
}


/* =========================
   Baseline 98 — Solid overlay (no background bleed)
========================= */

@media (max-width: 900px){
  .mobile-overlay{
    background: #111827 !important; /* solid */
    opacity: 0;
    visibility: hidden;
    backdrop-filter: none !important;
  }
  .mobile-overlay.open{
    opacity: 1 !important;
    visibility: visible !important;
  }
}


/* =========================
   Baseline 99 — Drawer panel fully opaque + readable
   Fixes:
   - Ensure drawer spans full viewport height
   - Override legacy .mobile-nav display:grid rules
   - Ensure links have consistent padded rows
========================= */

@media (max-width: 900px){
  .mobile-nav{
    top: 0 !important;
    bottom: 0 !important;
    height: auto !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Prevent older rule from switching drawer to grid */
  .mobile-nav:not([hidden]){ display: flex !important; }

  .mobile-nav a{
    display: block !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    background: transparent !important;
    opacity: 1 !important; /* prevent global link hover fade */
  }

  .mobile-nav a:hover{ background: var(--alt) !important; }

  .mobile-nav a.active{
    background: var(--alt) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
  }
}


/* =========================
   Baseline 100 — Drawer link visibility (Fix missing items)
========================= */

@media (max-width: 900px){
  .mobile-nav{
    gap: 10px !important;
    padding-top: 14px !important;
  }

  .drawer-close{
    margin-bottom: 12px !important;
  }

  .mobile-nav a{
    color: var(--text) !important;
    background: var(--alt) !important;
    border: 1px solid var(--border) !important;
    font-size: 1.02rem;
  }
}


/* =========================
   Baseline 101 — Full Height Mobile Drawer
========================= */

@media (max-width: 900px){
  .mobile-nav{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: 80% !important;          /* 1/3 to 4/5 screen feel */
    max-width: 320px !important;
    background: #ffffff !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 9999 !important;
  }
}


/* =========================
   Baseline 102 — Mobile nav hover + active parity with desktop
   - Hover/focus styles match .main-nav behavior
   - Active link uses same treatment as desktop "selected"
========================= */

@media (max-width: 900px){
  /* Match desktop feel: neutral by default */
  .mobile-nav a{
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text) !important;
    box-shadow: none !important;
    opacity: 1 !important; /* override global link hover fade */
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
  }

  /* Hover (desktop-like) + touch feedback */
  .mobile-nav a:hover,
  .mobile-nav a:active{
    background: var(--alt) !important;
    border-color: var(--border) !important;
  }

  /* Keyboard accessibility */
  .mobile-nav a:focus-visible{
    outline: 2px solid #111827;
    outline-offset: 2px;
  }

  /* Selected page (same as desktop .main-nav a.active) */
  .mobile-nav a.active{
    background: var(--alt) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
  }
}


/* =========================
   Baseline 103 — Mobile nav word-only highlight (match desktop)
========================= */

@media (max-width: 900px){

  /* Remove full-row highlight */
  .mobile-nav a{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    display: inline-block !important;
  }

  /* Hover like desktop */
  .mobile-nav a:hover{
    background: var(--alt) !important;
    border-radius: 12px;
    padding: 6px 10px !important;
  }

  /* Active state same as desktop */
  .mobile-nav a.active{
    background: var(--alt) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: 12px;
    padding: 6px 10px !important;
  }
}


/* =========================
   Baseline 104 — True word-only highlight in drawer
   Reason: drawer is a flex column; links were stretching full width.
   Fix: align-items:flex-start + links width:auto + align-self:flex-start.
========================= */

@media (max-width: 900px){
  /* Prevent full-width stretch */
  .mobile-nav{
    align-items: flex-start !important;
  }

  .mobile-nav a{
    width: auto !important;
    align-self: flex-start !important;
    display: inline-flex !important;
    padding: 6px 10px !important;
    margin: 2px 0 !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
  }

  .mobile-nav a:hover,
  .mobile-nav a:active{
    background: var(--alt) !important;
    border-color: var(--border) !important;
  }

  .mobile-nav a.active{
    background: var(--alt) !important;
    border-color: var(--border) !important;
    box-shadow: var(--shadow) !important;
  }
}


/* =========================
   Baseline 105 — Drawer width 40% + desktop resize safety
========================= */

@media (max-width: 900px){
  :root{ --drawer-w: clamp(240px, 40vw, 420px); }
  .mobile-nav{ width: var(--drawer-w) !important; }
  .mobile-overlay{ left: var(--drawer-w) !important; }
}

/* If viewport becomes desktop while drawer is open, never show drawer/overlay */
@media (min-width: 901px){
  .mobile-nav{ display: none !important; transform: translateX(-100%) !important; }
  .mobile-overlay{ display: none !important; }
}


/* =========================
   Baseline 106 — Light Overlay (no dark screen)
========================= */

@media (max-width: 900px){
  .mobile-overlay{
    background: rgba(0,0,0,0.15) !important; /* subtle dim instead of black */
  }
}


/* Utility: larger top margin (used for summary spacing) */
.mt-lg{ margin-top: 28px; }

.leadership-impact{ display:block; }


/* Leadership Impact Summary Spacing (override card p reset) */
.card .leadership-impact{
  margin-top: 28px !important;
}


/* =========================
   Belt “image” icon (Karate)
   - Inline SVG belt with knot; color comes from existing belt-* classes
========================= */

.belt-icon{
  width: 100%;
  height: 22px;
  margin-bottom: 10px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.belt-icon svg{
  width: 100%;
  height: 22px;
  display:block;
  fill: currentColor;
  opacity: 0.95;
}

/* Ensure white belt is visible on white cards */
.belt-white{
  color:#ffffff;
}
.belt-step .belt-icon.belt-white{
  border: 1px solid var(--border);
  border-radius: 999px;
}


/* =========================
   Belt images (Option B)
========================= */
.belt-img{
  width: 100%;
  height: 24px;
  object-fit: contain;
  display:block;
  margin-bottom: 10px;
}


/* Karate page: equal-height two-column row */
.two-col.equal-height{
  align-items: stretch;
}
.two-col.equal-height > .card{
  height: 100%;
}


/* =========================
   Belt Journey (combined list)
========================= */

.belt-journey-list{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.belt-row{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.belt-chip{
  width: 18px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--border);
  margin-top: 2px;
  background: transparent;
}

.belt-info{ display: grid; gap: 6px; }

.belt-top{
  display:flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.belt-name{
  font-weight: 900;
}

.belt-meta{
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.belt-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .78rem;
  font-weight: 900;
  border: 1px solid var(--border);
  background: var(--alt);
  color: var(--text);
  white-space: nowrap;
}

.belt-badge.strong{
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.belt-badge.ghost{
  background: #fff;
}

.belt-row.current{
  outline: 2px solid #111827;
  outline-offset: 2px;
}

.belt-row.goal{
  opacity: .92;
}

@media (max-width: 900px){
  .belt-chip{ height: 46px; }
}


/* =========================
   Belt Colors (refined, darker tones)
========================= */

.belt-chip.belt-white{ background:#f5f5f5; }
.belt-chip.belt-yellow{ background:#e6b800; }
.belt-chip.belt-orange{ background:#e46c0a; }
.belt-chip.belt-red{ background:#c62828; }
.belt-chip.belt-green{ background:#1b5e20; }
.belt-chip.belt-blue{ background:#0d47a1; }
.belt-chip.belt-purple{ background:#5e35b1; }
.belt-chip.belt-brown{ background:#6d4c41; }
.belt-chip.belt-black{ background:#111111; }


.belt-row.future{ opacity: .62; }
.belt-row.black-goal{ opacity: .92; }


/* =========================
   Karate — Tournaments Log
========================= */
.tournament-entry{
  padding: 14px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.tournament-entry:first-of-type{
  padding-top: 0;
}
.tournament-entry:last-of-type{
  border-bottom: none;
  padding-bottom: 0;
}

/* 1) Tournament title */
.tournament-title{
  margin: 0 0 6px 0;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.25;
}

/* 3) Date & location (metadata — not bold) */
.tournament-meta{
  margin: 0;
  font-weight: 400;
  font-size: 0.95rem;
  opacity: 0.75;
  line-height: 1.35;
}

/* Lists inside tournament entries */
.tournament-bullets{
  margin-top: 10px;
}

/* Optional notes */
.tournament-notes{
  margin: 8px 0 0 0;
  font-size: 0.95rem;
  opacity: 0.85;
  line-height: 1.45;
}

@media (max-width: 480px){
  .tournament-title{ font-size: 1.02rem; }
  .tournament-meta, .tournament-notes{ font-size: 0.93rem; }
}

/* =========================
   Tournament results styling
========================= */
.medal{
  display:inline-block;
  width: 1.4em;
}
.tournament-bullets li{
  display:flex;
  gap: 8px;
  align-items: baseline;
}
.tournament-bullets li .medal{
  flex: 0 0 auto;
}
.result-first{
  font-weight: 800; /* subtle bold */
}


/* Medal Snapshot (Top Summary) */
.medal-snapshot{
  margin-top: 10px;
  font-size: 0.95rem;
  color: #333;
}

/* Tournament Summary */
.tournament-summary{
  margin: 12px 0 22px 0;
  padding: 20px 22px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 1rem;
  color: #333;
}

.tournament-summary-line{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.tournament-summary-text{
  font-weight: 500;
}

.tournament-summary strong{
  font-weight: 700;
  font-size: 1.05rem;
}

/* Medal stats */
.medal-stats{
  display: flex;
  gap: 16px;
  margin-top: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.medal-stats .medal{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.medal-count{
  font-size: 1.05rem;
}


.tournament-reflection{
  margin-top: 14px;
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: rgba(0,0,0,0.65);
  line-height: 1.5;
}

/* Structured spacing for tournament entries */
.tournament-entry{
  padding: 18px 0;
}

.tournament-entry:not(:last-child){
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Divider between Tournament Summary and the first tournament entry */
/* Karate summary bullet list */
.karate-summary-list{
  margin:16px 0 0;
  padding-left:20px;
  line-height:1.8;
}

.karate-summary-list li{
  font-size:1rem;
}


/* Home — Latest Achievement medals line */
.latest-medals{ margin: 6px 0 12px; }

/* Contact - Direct Email (Left aligned + clickable email link) */
.contact-direct-card {
  text-align: left !important;
  align-items: flex-start !important;
}

.contact-direct-card h2 {
  display: flex;
  justify-content: flex-start !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left !important;
}

.contact-direct-card p {
  text-align: left !important;
  margin-bottom: 10px;
}

/* Email link: ensure it doesn't inherit button styles */
.contact-direct-email {
  display: inline-block;
  align-self: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  font-weight: 600;
  text-decoration: none;
}

.contact-direct-email:hover,
.contact-direct-email:focus {
  text-decoration: underline;
}

/* Academics "Top scores" micro-badge (Home + Achievements) */
.mini-badge{
  display:inline-block;
  font-size:0.78rem;
  font-weight:600;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(0,0,0,0.06);
  margin-right:8px;
  vertical-align:middle;
}

.top-scores-text{
  vertical-align:middle;
}

.top-scores-line{
  margin-top:10px;
  line-height:1.5;
}

/* ==========================================
   PHOTO CARD – DEVICE OPTIMIZED LAYOUT
   ========================================== */

.photo-wrapper{
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobile Phones (up to 576px) */
@media (max-width: 576px){
  .photo-wrapper{
    height: 190px;
  }
}

/* Tablets (577px to 768px) */
@media (min-width: 577px) and (max-width: 768px){
  .photo-wrapper{
    height: 230px;
  }
}

/* Laptops (769px to 1200px) */
@media (min-width: 769px) and (max-width: 1200px){
  .photo-wrapper{
    height: 100%;
    min-height: 320px;
    max-height: 420px;
  }
}

/* Desktop Monitors (1201px to 1600px) */
@media (min-width: 1201px) and (max-width: 1600px){
  .photo-wrapper{
    height: 100%;
    min-height: 340px;
    max-height: 460px;
  }
}

/* Large Monitors (above 1600px) */
@media (min-width: 1601px){
  .photo-wrapper{
    height: 100%;
    min-height: 360px;
    max-height: 500px;
  }
}


/* ===============================
   Unified Image Height Control
   Home & Karate Pages
================================ */

/* Desktop Default */
.home-photo-card img,
.karate-photo-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

/* Mobile Phones (up to 576px) */
@media (max-width: 576px) {
    .home-photo-card img,
    .karate-photo-card img {
        height: 220px;
    }
}

/* Tablets (577px to 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .home-photo-card img,
    .karate-photo-card img {
        height: 260px;
    }
}

/* Laptops (769px to 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
    .home-photo-card img,
    .karate-photo-card img {
        height: 280px;
    }
}

/* Large Monitors (above 1600px) */
@media (min-width: 1601px) {
    .home-photo-card img,
    .karate-photo-card img {
        height: 340px;
    }
}



/* ===============================
   OVERRIDE: Hero Photo Heights
   (Home + Karate) — controlled & responsive
   Note: Uses object-fit cropping; no distortion.
================================ */

/* Default (Desktop-ish) */
.hero-card .photo-wrapper,
.two-col .photo-wrapper {
  height: 300px;
}

/* Mobile Phones (up to 576px) */
@media (max-width: 576px) {
  .hero-card .photo-wrapper,
  .two-col .photo-wrapper {
    height: 220px;
  }
}

/* Tablets (577px to 768px) */
@media (min-width: 577px) and (max-width: 768px) {
  .hero-card .photo-wrapper,
  .two-col .photo-wrapper {
    height: 260px;
  }
}

/* Laptops (769px to 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
  .hero-card .photo-wrapper,
  .two-col .photo-wrapper {
    height: 280px;
  }
}

/* Large Monitors (above 1600px) */
@media (min-width: 1601px) {
  .hero-card .photo-wrapper,
  .two-col .photo-wrapper {
    height: 340px;
  }
}


/* ===============================
   Balanced Hero Image Height
   (Home + Karate)
================================ */

.hero-card .photo-wrapper,
.two-col .photo-wrapper {
  height: clamp(220px, 22vw, 280px);
  overflow: hidden;
}



/* ===============================
   Karate — Belt Journey: Milestone Chips Grid (Safe)
   Uses existing .belt-journey-list + .belt-row markup so belt colors remain.
================================ */

/* Grid container */
.belt-journey-list{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-top:14px;
}

/* Tablet: 2 columns */
@media (max-width: 900px){
  .belt-journey-list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Mobile: 1 column */
@media (max-width: 576px){
  .belt-journey-list{
    grid-template-columns:1fr;
  }
}

/* Each row becomes a compact chip/card */
.belt-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:14px;
  background:rgba(255,255,255,0.65);
  margin:0; /* remove any vertical spacing from list layout */
}

/* Keep belt chip visible and aligned */
.belt-row .belt-chip{
  flex:0 0 auto;
  margin-top:3px;
}

/* Tighten text */
.belt-row .belt-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.belt-row .belt-name{
  font-weight:700;
  line-height:1.2;
}

.belt-row .belt-meta{
  margin-top:6px;
  line-height:1.3;
  font-size:0.9rem;
}

/* Optional polish */
.belt-row:hover{
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Remove inline quote spacing issues (keep it full width) */
.belt-journey-list > p.muted.tiny{
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 2px;
}