/* ============================================================
   CSS CUSTOM PROPERTIES
   All design tokens defined once here.
   Dark mode overrides only the values that change.
   ============================================================ */

:root {
  /* -- Text colors -- */
  --color-text-primary:    #4971c9;
  --color-text-secondary:  #1a1a1a;
  --color-text-tertiary:   #888888;
  --color-text-four: rgba(255, 255, 255, 0.61);
  --color-text-info:       #2a549e;

  /* -- Background colors -- */
  --color-background-primary:   #ffffff;
  --color-background-secondary: #f0f0f0;
  --color-background-info:      #dce8f9;

  /* -- Border colors -- */
  --color-border-tertiary:  rgba(0, 0, 0, 0.10);
  --color-border-secondary: rgba(0, 0, 0, 0.20);
  --color-border-info:      #4971c9;

  /* -- Radii -- */
  --border-radius-lg: 10px;
  --border-radius-md: 6px;

  /* -- Typography -- */
  --font-size: 15px;

  /* -- Active sentence indent -- */
  --on-active-padding-left: 22px;
}


/* ============================================================
   DARK MODE OVERRIDES
   Only the values that need to change are listed here.
   ============================================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* -- Text colors -- */
    --color-text-primary:    #7fa3e0;   /* lighter blue, readable on dark bg */
    --color-text-secondary:  #d4d4d4;   /* light grey body text              */
    --color-text-tertiary:   #666666;
    --color-text-four: rgba(255, 255, 255, 0.61);
    --color-text-info:       #85b7eb;

    /* -- Background colors -- */
    --color-background-primary:   #141414;  /* dark page background  */
    --color-background-secondary: #2a2a2a;  /* dark panel / sidebar  */
    --color-background-info:      #0c447c;  /* tag background        */

    /* -- Border colors -- */
    --color-border-tertiary:  rgba(255, 255, 255, 0.10);
    --color-border-secondary: rgba(255, 255, 255, 0.22);
    --color-border-info:      #4971c9;
  }
}


/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  color: var(--color-text-secondary);
}

body {
  margin: 0;
  height: 100vh;
  background-color: var(--color-background-primary);
  overflow:hidden;
}

/* ============================================================
   Scrollbar
   ============================================================ */


/* For Firefox */
* {

  scrollbar-width: thin;
  scrollbar-color: #888 var(--color-background-primary);
}
*::-webkit-scrollbar { width: 10px; }
*::-webkit-scrollbar-thumb {
  background: #888;
  border: 3px solid var(--color-background-primary); /* creates padding around thumb */
  border-radius: 99px;
}

/* Chrome, Edge, Safari */
*::-webkit-scrollbar {
  width: .2px;
  height: .2px; 
}

*::-webkit-scrollbar-track {
  background: var(--color-background-primary);
}

*::-webkit-scrollbar-thumb {
  background: #888;
  /* border-radius: 99px; */
}

/* ============================================================
   LAYOUT — two-column shell
   ============================================================ */

.layout {
  display: flex;
  height: 100%;
  min-height: 720px;
  width: 100%;
  min-width: 260px;


  border-right: 0.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
}

.left {
  height: 100%;
  max-width: 250px;
  display: flex;
  flex-direction: column;
  flex: 0 0 18%;
  border-right: 0.5px solid var(--color-border-tertiary);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 0;
}

.bottom-section-left{
  margin-top: auto;
}

.middle {     
  overflow-y: auto;
  padding: 3% 23.5% 3% 3%
}

.right {
  flex:1;
  padding: 0px 0px 10px 90px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.right-sticky {
  position: absolute;
  text-align: right;
  bottom: 0;
  right: 0;

  width:auto;
  padding: .5% .5%;

  font-size: 18px;
}
.right-sticky a{
  color: var(--color-text-four);
}
.bottom-section-right{
  display: block;
  margin-top: auto;
  align-items: end;
  justify-content: end;
}
.bottom-section-right p{
  text-align: end;
  color: var(--color-text-four);
}

/* ============================================================
   About me
   ============================================================ */

.contact-img-list{
  display: flex;
  flex-flow: row nowrap;
}

.contact-img-list img{
  max-width: 250px;
  max-height: 250px;
}

/* ============================================================
   MIDDLE COLUM - Header
   ============================================================ */

.header-section {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin: 1rem;
  margin-bottom: 10rem;
}

.header-title {
  width: 60%;
  padding-right: 0rem;
}

.header-title h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}

.header-title h1 span {
  color: var(--amber);
}

.header-subtitle {
  width: 40%;
  padding-left: .5rem;
}

.header-subtitle p {
  font-size: 0.95rem;
  color: #c9cdd8;
  /* line-height: 1.7; */
}

.header-subtitle .eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 0rem;
}
  
.eyebrow{
  font-size: 18px;
}
/* ──────────────────────────────────────────
    MIDDLE IMAGE LEFT + TEXT RIGHT
────────────────────────────────────────── */
.row-img-text {
  display: flex;
  align-items: stretch;
  gap: 0;
}

.row-img-text .col-image {
  width: 50%;
}

.row-img-text .col-image .img-placeholder,
.row-img-text .col-image img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.img-placeholder {
  background: linear-gradient(135deg, #c9d6e3 0%, #a8bdd0 100%);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.img-placeholder.warm {
  background: linear-gradient(135deg, #e8d9c5 0%, #d4c0a0 100%);
}

.row-img-text .col-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 1.5rem;
}

/* ──────────────────────────────────────────
    MIDDLE TEXT LEFT + IMAGE RIGHT
────────────────────────────────────────── */
.row-text-img {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--off-white);
}

.row-text-img .col-text {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 1.5rem;
}

.row-text-img .col-image {
  width: 50%;
}

.row-text-img .col-image .img-placeholder,
.row-text-img .col-image img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: fill;
  display: block;
}

/* ──────────────────────────────────────────
    MIDDLE FULL-WIDTH TEXT
────────────────────────────────────────── */
.text-full {
  background: var(--navy);
  color: #fff;
}

.text-full-inner {
  width: 100%;
}

.text-full .lead {
  font-size: clamp(1.15rem, 1.1vw, .3rem);
  color: #c9cdd8;
  max-width: 72ch;
  line-height: 1.75;
  margin-top: 1rem;
}



/* ============================================================
   LEFT COLUMN — header image
   ============================================================ */

.header-img {
  width: 100%;
  height: 50px;
  object-fit: cover;
  display: block;
}


/* ============================================================
   LEFT COLUMN — headings
   ============================================================ */

.left h1 {
  font-size: 28px;
  font-weight: 600;
  color: var(--color-text-tertiary);
  padding: 10px 18px 6px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* ============================================================
   RADIO INPUTS
   Hidden — used purely for CSS :has() state logic.
   ============================================================ */

input[type="radio"] {
  display: none;
}


/* ============================================================
   SENTENCE LABELS — left column nav items
   ============================================================ */

.sentence {
  display: block;
  padding: 10px 18px;
  font-size: 18px;
  color: var(--color-text-secondary);
  cursor: pointer;

  /* Left border used as active indicator (transparent by default) */
  border-left: 3px solid transparent;

  transition: color 0.15s, padding-left 0.12s, border-color 0.12s;
}

.sentence:hover {
  color: var(--color-text-primary);
}


/* ============================================================
   ACTIVE STATE — :has() pattern
   Self-contained: no sibling radios outside .layout needed.
   To add a new panel, add sN/pN — no CSS changes required.

   :has() works by asking .layout: "do you contain a checked
   radio with this id?" and styling descendants accordingly.
   Supported in all modern browsers (Chrome 105+, Firefox 121+,
   Safari 15.4+).
   ============================================================ */

/* Highlight the active sentence label */
.layout:has(#s1:checked) .left label[for="s1"],
.layout:has(#s2:checked) .left label[for="s2"],
.layout:has(#s3:checked) .left label[for="s3"],
.layout:has(#s4:checked) .left label[for="s4"],
.layout:has(#s5:checked) .left label[for="s5"],
.layout:has(#s6:checked) .left label[for="s6"],
.layout:has(#s7:checked) .left label[for="s7"] {
  color: var(--color-text-primary);
  padding-left: var(--on-active-padding-left); 
  border-left-color: var(--color-border-info);
}

/* Show the matching right-side panel */
.layout:has(#default:checked) .middle #default,
.layout:has(#s1:checked) .middle #p1,
.layout:has(#s2:checked) .middle #p2,
.layout:has(#s3:checked) .middle #p3,
.layout:has(#s4:checked) .middle #p4,
.layout:has(#s5:checked) .middle #p5,
.layout:has(#s6:checked) .middle #p6,
.layout:has(#s7:checked) .middle #p7 {
  display: block;
  animation: panel-slide-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hide the default placeholder once a selection is made */
.layout:has(input[name="sentence"]:checked) .middle .panel-default {
  display: none;
}

/* ============================================================
   CONTENTS — MIDDLE side
   ============================================================ */

.contents{
  display: flex;
  flex-flow: column nowrap;
  gap: 6rem;
}


/* ============================================================
   CONTENT PANELS — right side
   ============================================================ */

.panel {
    display: none;
    padding: 28px 28px 20px;
    overflow-y: auto;
}

.panel-default {
    display: block;
}


/* ============================================================
   PANEL IMAGE WRAPPER
   Reserves a consistent 16:9 space so layout doesn't shift
   as images load, regardless of their source dimensions.
   ============================================================ */

.panel-img-wrap {
  /* aspect-ratio: 16 / 9; */
  width: 100%;
  overflow: hidden;
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  background: var(--color-background-secondary);
  content-visibility: auto;
}

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


/* ============================================================
   PANEL TYPOGRAPHY
   ============================================================ */

.panel h2 {
  font-size: 16px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--color-text-primary);
}

.panel p {
  font-size: var(--font-size);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}


/* ============================================================
   CATEGORY TAG / BADGE
   ============================================================ */

.tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--color-background-info);
  color: var(--color-text-info);
  margin-bottom: 10px;
}


/* ============================================================
   REDUCED MOTION
   Respect the user's OS preference.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .sentence {
    transition: none;
  }
}


/* Panel slide-in from left animation */
@keyframes panel-slide-in {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout:has(input[name="sentence"]:checked) .middle [id^="p"] {
    animation: none;
  }
}


/* ============================================================
   RESPONSIVE — laptop (≤ 900px)
   Left sidebar becomes a horizontal top nav bar.
   Middle takes full width. Right-sticky repositions.
   ============================================================ */
@media (max-width: 1700px) {
  .middle {     
    overflow-y: auto;
    padding: 3% 16.5% 3% 3%;
  }
}
@media (max-width: 1300px) {
  .middle {     
    overflow-y: auto;
    padding: 3% 3.5% 3% 3%;
  }
}

/* ============================================================
   RESPONSIVE — Tablet (≤ 900px)
   Left sidebar becomes a horizontal top nav bar.
   Middle takes full width. Right-sticky repositions.
   ============================================================ */

@media (max-width: 1200px) {

  .layout {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    min-width: unset;
    border-radius: 0;
    overflow: visible;
  }

  /* ── Left: horizontal scrolling nav bar ── */
  .left {
    position: sticky;
    top:0;
    background-color: var(--color-background-primary);
    z-index: 10;
    max-width: 100%;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 8px;
    border-right: none;
    border-bottom: 0.5px solid var(--color-border-tertiary);
    height: auto;
    min-height: 72px;
    white-space: nowrap;
  }

  /* Hide the header image and h1 in nav mode */
  .left .header-img,
  .left h1 {
    display: none;
  }

  /* Push bottom items inline with the rest */
  .bottom-section-left {
    margin-top: 0;
    display: contents; /* items flow into the flex row */
  }

  /* Sentence labels become horizontal pills */
  .sentence {
    display: inline-block;
    padding: 10px 14px;
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }

  .sentence:hover {
    border-bottom-color: var(--color-border-info);
    border-left-color: transparent;
  }

  /* Active state: underline instead of left border */
  .layout:has(#s1:checked) .left label[for="s1"],
  .layout:has(#s2:checked) .left label[for="s2"],
  .layout:has(#s3:checked) .left label[for="s3"],
  .layout:has(#s4:checked) .left label[for="s4"],
  .layout:has(#s5:checked) .left label[for="s5"],
  .layout:has(#s6:checked) .left label[for="s6"],
  .layout:has(#s7:checked) .left label[for="s7"] {
    padding-left: 14px; 
    border-left-color: transparent;
    border-bottom-color: var(--color-border-info);
  }

  /* ── Middle: full width, normal padding ── */
  .middle {
    padding: 24px 24px 48px;
    width: 100%;
  }

  /* ── Right sticky: inline footer bar ── */
  .right-sticky {
    position: sticky;
    bottom: 0;
    background-color: var(--color-background-primary);
    z-index: 10;
    margin-top: auto;
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-end;
    padding: 12px 20px;
    font-size: 16px;
    border-top: 0.5px solid var(--color-border-tertiary);
    text-align: left;
    width: auto;
  }

  /* ── Content sections: stack image + text vertically ── */
  .row-img-text,
  .row-text-img {
    flex-direction: column;
  }

  .row-img-text .col-image,
  .row-img-text .col-text,
  .row-text-img .col-image,
  .row-text-img .col-text {
    width: 100%;
    padding: 0;
  }

  /* On row-text-img, image goes below text on tablet too */
  .row-text-img {
    flex-direction: column;
  }

  /* ── Header section: stack title + subtitle ── */
  .header-section {
    flex-direction: column;
    margin-bottom: 3rem;
  }

  .header-title,
  .header-subtitle {
    width: 100%;
    padding: 0;
  }

  .header-subtitle {
    padding-top: 0.5rem;
  }
}


/* ============================================================
   RESPONSIVE — Mobile (≤ 600px)
   Single column. Nav scrolls horizontally. Content full width.
   ============================================================ */

@media (max-width: 600px) {

  body {
    font-size: 14px;
  }

  /* ── Nav: smaller pills, tighter padding ── */
  .sentence {
    font-size: 13px;
    padding: 8px 10px;
  }

  /* ── Middle: tighter padding ── */
  .middle {
    padding: 16px 16px 40px;
  }

  /* ── Panel: no side padding ── */
  .panel {
    padding: 16px 0 16px;
  }

  /* ── Contents gap tighter ── */
  .contents {
    gap: 3rem;
  }

  /* ── Img placeholder min-height smaller ── */
  .img-placeholder {
    min-height: 200px;
  }

  .row-img-text .col-image,
  .row-text-img .col-image {
    min-height: 200px;
  }

  /* ── Right sticky: smaller font, wrapped ── */
  .right-sticky {
    font-size: 14px;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 16px;
  }

  /* ── Header title: clamp already handles font size ── */
  .header-section {
    margin: 0.5rem 0 2rem;
  }

  /* ── Panel image aspect ratio: loosen on tiny screens ── */
  .panel-img-wrap {

  }
}