/* Base typography and page setup */
:root {
  --container-max-w: 1800px;
  --container-max-h: 720px;
  --gap: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Times New Roman", "EB Garamond", Garamond, Georgia, Times, serif;
  font-size: 24px;
  line-height: 1.5;
  color: #000;
  background: #323ef3;
  overflow: auto; /* page scrolls in landscape/wide layout */
}

/* Elements visible only in portrait/stacked layout */
.portrait-only { display: none; }

/* Bottom tabs (duplicate of sidebar) hidden by default */
.bottom-tabs { display: none; }
.bottom-tabs .tab {
  display: block;
  color: inherit;
  text-decoration: none;
  margin-top: 1.2em;
}
.bottom-tabs .tab:hover,
.bottom-tabs .tab:focus {
  color: #fff;
  text-decoration: none;
}
.bottom-tabs .tab[aria-current="page"] {
  text-decoration: underline;
  color: #222222;
}

/* Home (first tab) theme overrides */
body.home-theme {
  background: #222; /* dark grey */
  color: #fff;      /* near-white text */
}
body.home-theme a { color: #fff; }
body.home-theme a:visited { color: #fff; }
body.home-theme a:hover,
body.home-theme a:focus { color: #326ff3; } /* fully white when highlighted */

/* Make sidebar tabs behave like links on the homepage */
body.home-theme .sidebar .tab {
  text-decoration: none; /* underline only on hover */
  color: #fff; /* match link color */
}
body.home-theme .sidebar .tab:visited {
  color: #fff; /* match visited link color */
}
body.home-theme .sidebar .tab:hover,
body.home-theme .sidebar .tab:focus {
  color: #326ff3; /* match hover/focus color */
  text-decoration: underline; /* keep underline on hover */
}
/* Keep active tab color consistent with home link color */
body.home-theme .sidebar .tab[aria-current="page"] {
  color: #fff;
}

/* Apply same home theme link behavior to bottom tabs */
body.home-theme .bottom-tabs .tab {
  text-decoration: none;
  color: #fff;
}
body.home-theme .bottom-tabs .tab:visited { color: #fff; }
body.home-theme .bottom-tabs .tab:hover,
body.home-theme .bottom-tabs .tab:focus {
  color: #326ff3;
  text-decoration: underline;
}
body.home-theme .bottom-tabs .tab[aria-current="page"] { color: #fff; }

/* Static noise background layer */
.noise-bg {
  position: fixed;
  /* Fill the viewport in a screen-space, orientation-safe way */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: url('images/noise200.png') repeat;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* Global links: black by default, white text on hover */
a { color: #000; }
a:visited { color: #000; }
a:hover, a:focus { color: #fff }

/* Centered app container with sidebar and content */
.app {
  position: static;
  transform: none;
  width: min(92vw, var(--container-max-w));
  height: auto;
  /* Ensure sticky sidebar has space to stick even on short panels */
  min-height: calc(100vh - 12vh); /* account for top/bottom 6vh margins */
  display: grid;
  grid-template-columns: 320px 1fr; /* fixed sidebar width, content fills */
  gap: var(--gap);
  padding-right: 0;
  margin: 6vh auto; /* center horizontally with top breathing room */
}

/* When photography tab is active, dock layout to left in widescreen */
/* (Removed docking in photography mode to keep sidebar position consistent) */

/* Sidebar stays put; entries separated by two new lines worth of space */
.sidebar {
  padding-right: 4px; /* subtle separation */
  /* Keep sidebar pinned in landscape while page scrolls */
  position: sticky;
  top: 6vh;
  align-self: start;
  overflow: visible;
}
.sidebar .tab {
  display: block;
  color: inherit;
  text-decoration: none;
  margin-bottom: 1.2em; /* slightly reduced spacing */
}
.sidebar .tab:hover,
.sidebar .tab:focus {
  color: #fff;      /* highlight text in white on hover */
  text-decoration: none;
}
.sidebar .tab[aria-current="page"] {
  text-decoration: underline;
  color: #222222; /* grey when the respective tab is open */
}

/* Main content scrolls */
.content {
  font-size: 22px; /* slightly smaller main body text */
  overflow: visible; /* share page scroll */
  padding-right: 0;
  max-width: 1200px;
}

/* Bin collage: image with randomly placed links over it */
.bin-collage {
  position: relative;
  display: inline-block;
  max-width: 600px;
}
.bin-collage img {
  display: block;
  width: 100%;
  height: auto;
}
.bin-collage .bin-link {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  white-space: nowrap;
}

/* Switch layout when viewport is taller than 2:3 (width/height < 2/3) */
@media (max-aspect-ratio: 3/4) {
  body { overflow: auto; }

  .app {
    position: static;
    transform: none;
    width: min(92vw, 720px);
    height: auto;
    min-height: auto; /* stacked layout doesn't need a minimum height */
    display: block; /* stack */
    margin: 6vh auto; /* keep centered horizontally */
  }

  .sidebar {
    /* In stacked layout, sidebar becomes a normal block */
    position: static;
    top: auto;
    align-self: auto;
    overflow: visible; /* scrolls with page */
    margin-bottom: 2em;
  }

  /* On home in portrait, hide only the top sidebar menu tabs */
  body.home-theme .sidebar .tab { display: none; }

  .content {
    overflow: visible; /* share page scroll */
    padding-right: 0;
  }

  /* Show the bottom tabs in portrait */
  .bottom-tabs { display: block; margin: 2em 0 0 0; }

  /* Show portrait-only elements only on Home in portrait */
  .home-theme .portrait-only { display: block; }

  /* Hide high-contrast toggle on Home in portrait */
  .home-theme .hc-toggle { display: none; }
}

/* Photography grid: three columns with center offset */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content); /* columns sized to content for full-size photos */
  column-gap: var(--gap); /* match row gap for equal spacing */
  align-items: start;
}
.photo-col {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.photo-col:nth-child(2) { /* center column offset for brick look */
  margin-top: 300px;
}
.photo-item {
  display: block;
  width: auto; /* keep natural width in widescreen */
  max-width: none;
  height: auto;
}

/* Crop right side in photography panel when content overflows */
.panel[data-key="photography"] {
  overflow-x: hidden;
}

/* Vertical mode: two columns that scale to window */
@media (max-aspect-ratio: 3/4) {
  .photo-grid {
    grid-template-columns: 1fr 1fr; /* exactly two columns */
  }
  .photo-col:nth-child(2) {
    margin-top: 0; /* no middle offset in 2-col layout */
  }
  .photo-col { gap: 12px; }
  .photo-item {
    width: 100%; /* scale to column */
    max-width: 100%;
    height: auto;
  }
}


/* Small caption under sketches */
.img-caption { font-size: 0.5em; margin: 4px 0 12px; }

/* High Contrast Mode toggle in sidebar */
.hc-toggle {
  display: block;
  font-size: 0.5em; /* half-size text */
  color: inherit;
  text-decoration: none;
  margin-top: 0.4em;
}
.hc-toggle:hover, .hc-toggle:focus { text-decoration: underline; }

/* High Contrast Mode */
body.high-contrast,
body.high-contrast * {
  color-scheme: light;
}
body.high-contrast { 
  background: #fff !important; 
  color: #000 !important; 
}
body.high-contrast .noise-bg { display: none !important; }
body.high-contrast .app,
body.high-contrast .sidebar,
body.high-contrast .content,
body.high-contrast .panel,
body.high-contrast .bottom-tabs {
  background: #fff !important;
  color: #000 !important;
}
/* Text/link colors */
body.high-contrast a,
body.high-contrast a:visited,
body.high-contrast .tab,
body.high-contrast .bottom-tabs .tab,
body.high-contrast .sidebar .tab,
body.high-contrast .hc-toggle {
  color: #000 !important;
}
body.high-contrast a:hover,
body.high-contrast a:focus,
body.high-contrast .tab:hover,
body.high-contrast .tab:focus,
body.high-contrast .bottom-tabs .tab:hover,
body.high-contrast .bottom-tabs .tab:focus,
body.high-contrast .sidebar .tab:hover,
body.high-contrast .sidebar .tab:focus,
body.high-contrast .hc-toggle:hover,
body.high-contrast .hc-toggle:focus {
  color: #666 !important; /* grey on hover */
}
/* Remove active/visited special coloring in high-contrast */
body.high-contrast .sidebar .tab[aria-current="page"],
body.high-contrast .bottom-tabs .tab[aria-current="page"] {
  color: #000 !important;
  text-decoration: underline;
}

/* Responsive video embeds (YouTube/Vimeo) */
/* Fit to container width, but clamp at 560px max */
iframe[src*="youtube.com"],
iframe[src*="youtu.be"],
iframe[src*="vimeo.com"] {
  display: block;
  width: min(100%, 560px);
  max-width: 560px;
  /* Preserve 16:9 aspect ratio and let height scale */
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 0; /* left-aligned within text column */
}