/* ========================
   Theme & Base
======================== */
:root {
  --bg: #FFF7F0;        /* soft cream */
  --fg: #0a0a0a;        /* text */
  --muted: #6f737a;     /* secondary text */
  --card: #ffffff;      /* cards pop on cream */
  --card-border: #EDE7DF;
  --accent: #111111;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,0.06);
  --maxw: 1120px;
}

html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ========================
   Layout & Header
======================== */
.container { max-width: var(--maxw); margin: 0 auto; padding: 24px 20px 56px; }

header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand {
  font-size: clamp(38px, 6vw, 64px); /* larger than hero title */
  font-weight: 500;                  /* big but not heavy */
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Capsule nav */
.nav--capsule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  position: relative;
}

/* Top-level links (Projects / Contact) */
.nav-item { position: relative; display: flex; align-items: center; }
.nav-item::after { /* hover bridge so cursor can move into dropdown without flicker */
  content: ""; position: absolute; left: -6px; right: -6px; top: 100%; height: 12px;
}

.nav-link,
.nav--capsule > a {
  position: relative;
  display: flex; align-items: center;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--fg);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 16.5px);
  background: transparent;           /* no bubble on hover */
  border: 1px solid transparent;
}

/* Underline INSIDE the capsule — top-level only */
.nav--capsule > a::after,
.nav--capsule > .nav-item > .nav-link::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  opacity: .5;
  transition: transform .18s ease, opacity .18s ease;
}
.nav--capsule > a:hover::after,
.nav--capsule > .nav-item > .nav-link:hover::after,
.nav--capsule > a:focus-visible::after,
.nav--capsule > .nav-item > .nav-link:focus-visible::after {
  transform: scaleX(1); opacity: .9;
}

/* Chevron alignment */
.nav-item .chev { margin-left: 6px; line-height: 1; transform: translateY(1px); }

/* ========================
   Dropdown (Projects)
======================== */
/* Panel — always display:block so animations work */
.dropdown {
  position: absolute;
  left: -10px;                          /* slight left nudge */
  top: calc(100% + 10px);
  min-width: 260px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0,0,0,.12);
  padding: 8px;

  display: block;
  overflow: hidden;

  /* hidden state */
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  pointer-events: none;

  /* slow vertical drop */
  transition:
    max-height .45s ease,
    opacity .45s ease,
    transform .45s cubic-bezier(.22,.75,.18,1),
    visibility 0s linear .45s;
}

/* visible state */
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown {
  max-height: 600px;  /* larger than content */
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

/* Dropdown links: chip highlight */
.drop-link {
  display: block;
  margin: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--fg);
  background: transparent;
  border: 1px solid transparent;
  opacity: .95;
  transition: background .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
}
.drop-link:hover,
.drop-link:focus-visible {
  background: var(--card);
  border-color: var(--card-border);
  opacity: 1;
  transform: translateY(-1px);
  outline: none;
}

/* ========================
   Hero
======================== */
.hero { padding: 20px 0 12px; }

.kicker {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

h1 {
  font-size: clamp(30px, 5vw, 48px); /* smaller than brand */
  line-height: 1.06;
  margin: 8px 0 16px;
  letter-spacing: -0.02em;
}

.sub {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--muted);
  max-width: 75ch;           /* wider so it wraps less */
}

.media { background: #f3efe9; } /* matches warm palette */

/* ========================
   Project Grid & Cards
======================== */
.grid { display: grid; gap: 20px; margin-top: 40px; grid-template-columns: repeat(12, 1fr); }

.card {
  grid-column: span 12;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .28s ease, box-shadow .28s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,0.09); }

.link { display: block; color: inherit; text-decoration: none; }

.media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.card:hover .media img { transform: scale(1.03); }

.content { padding: 18px 18px 20px; }
.title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; }
.desc  { font-size: 15px; color: var(--muted); margin: 0; }

@media (min-width: 720px) { .card { grid-column: span 6; } }
@media (min-width: 1040px) { .card { grid-column: span 4; } }

/* ========================
   Footer & Focus
======================== */
footer {
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.link:focus-visible,
.nav-link:focus-visible,
.drop-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 12px;
}

/* ========================
   Responsive tweaks
======================== */
@media (max-width: 640px) {
  header {
    flex-direction: row;       /* was column */
    align-items: center;       /* was flex-start */
    gap: 8px;                  /* a tiny bit more breathing room */
  }
  .nav--capsule { gap: 12px; }
  .nav-link { font-size: 14px; }
}


/* — Revert to white theme — */
:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #6b7280;
  --card: #ffffff;      /* cards stay white too */
  --card-border: #e5e7eb;
}
.media { background: #f1f1f1; }
/* — Keep dropdown above the grid — */
header { position: relative; z-index: 50; }
.nav--capsule { position: relative; z-index: 60; }
.dropdown { z-index: 1000; }      /* the panel itself sits highest */
/* === Desktop side aesthetics (no HTML changes) === */
@media (min-width: 1100px) {
  /* keep UI on top of decor */
  header { position: relative; z-index: 50; }
  .nav--capsule { position: relative; z-index: 60; }
  .dropdown { z-index: 1000; }
  .container, .grid, footer { position: relative; z-index: 10; }

  /* Option A — Ambient gradient “glow” rails (subtle) */
  body::before,
  body::after {
    content: "";
    position: fixed;
    top: -10vh;
    width: 28vw;
    height: 140vh;
    pointer-events: none;
    z-index: 0;
    filter: blur(48px);
    opacity: .18;                          /* dial this up/down 0.12–0.25 */
    background:
      radial-gradient(30% 40% at 30% 30%, #ffe9d6 0 60%, transparent 61%),
      radial-gradient(28% 36% at 70% 60%, #e7f0ff 0 58%, transparent 59%),
      radial-gradient(20% 26% at 50% 80%, #f1e8ff 0 55%, transparent 56%);
  }
  body::before { left: -6vw; }
  body::after  { right: -6vw; transform: scaleX(-1); }
}

/* Optional dark-mode tuning for the glow */
@media (prefers-color-scheme: dark) and (min-width: 1100px) {
  body::before, body::after {
    opacity: .12;
    background:
      radial-gradient(30% 40% at 30% 30%, #3e2a16 0 60%, transparent 61%),
      radial-gradient(28% 36% at 70% 60%, #1f2a3a 0 58%, transparent 59%),
      radial-gradient(20% 26% at 50% 80%, #30223e 0 55%, transparent 56%);
  }
}
/* Option B — Dotted side rails (swap with Option A if you prefer) */
@media (min-width: 1100px) {
  header { position: relative; z-index: 50; }
  .nav--capsule { position: relative; z-index: 60; }
  .dropdown { z-index: 1000; }
  .container, .grid, footer { position: relative; z-index: 10; }

  body::before, body::after {
    content: "";
    position: fixed;
    top: 0; height: 100vh; width: 140px;
    pointer-events: none;
    z-index: 0;
    opacity: .35;                             /* tweak 0.25–0.5 */
    background-image: radial-gradient(#e9ecef 1.2px, transparent 1.2px);
    background-size: 12px 12px;
    /* fade toward the page so it feels soft */
    mask-image: linear-gradient(to right, #000 70%, transparent 100%);
  }
  body::before { left: 0; }
  body::after  { right: 0; transform: scaleX(-1); }
}
/* TEST MODE: obvious side rails (remove after confirming) */
html, body { overflow-x: hidden; }        /* prevent horizontal scroll */
@media (min-width: 900px) {               /* lower threshold so it triggers */
  body::before, body::after {
    content: "";
    position: fixed;
    top: -10vh;
    width: 30vw;
    height: 140vh;
    pointer-events: none;
    z-index: 0;
    filter: blur(40px);
    opacity: .35;                         /* clearly visible */
    background:
      radial-gradient(35% 45% at 30% 30%, #ffe0b2 0 60%, transparent 61%),
      radial-gradient(32% 40% at 70% 60%, #b3e5fc 0 58%, transparent 59%),
      radial-gradient(24% 30% at 50% 80%, #e1bee7 0 55%, transparent 56%);
  }
  body::before { left: -8vw; }
  body::after  { right: -8vw; transform: scaleX(-1); }

  /* keep UI above the decor */
  header { position: relative; z-index: 50; }
  .nav--capsule { position: relative; z-index: 60; }
  .dropdown { z-index: 1000; }
  .container, .grid, footer { position: relative; z-index: 10; }
}

/* Home icon link – no underline, aligned nicely */
.nav--capsule > a.nav-home::after { content: none; }  /* no underline for the icon */
.nav-home svg { display: block; }

@media (max-width: 640px) {
  .nav-home { padding: 8px 10px; }  /* slightly smaller on mobile */
}


.gallery-simple .g {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.gallery-simple .g:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.09); }

.gallery-simple .thumb {
  display: block;
  width: 100%;
  /* Choose the look you like: 4/3 is classic, or switch to 1/1 squares */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f1f1f1;
}
.gallery-simple img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* <- crops to keep the tile uniform */
  display: block;
  transition: transform .45s ease;
}
.gallery-simple .g:hover img { transform: scale(1.03); }

.gallery-simple figcaption {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--muted);
  background: var(--card);
  border-top: 1px solid var(--card-border);
}

/* Optional: let panoramic or portrait shots span differently on larger screens */
@media (min-width: 900px) {
  .gallery-simple .g.wide { grid-column: span 2; }  /* extra width for very wide images */
  .gallery-simple .g.tall .thumb { aspect-ratio: 3 / 4; } /* taller tile for very tall images */
}
/* ===== Weebly-style tiled gallery (masonry via CSS columns) ===== */
.weebly-gallery {
  column-count: 1;
  column-gap: 12px;
}
@media (min-width: 660px)  { .weebly-gallery { column-count: 2; } }
@media (min-width: 980px)  { .weebly-gallery { column-count: 3; } }

.wg-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.wg-link { display: block; }
.wg-link img {
  width: 100%;
  height: auto;           /* keep original aspect ratio (no cropping) */
  display: block;
  transition: transform .35s ease;
}
.wg-item:hover img { transform: scale(1.015); }

.wg-cap {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--card-border);
  background: var(--card);
}

/* ===== Minimal lightbox (centered, click-out to close) ===== */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  display: none; place-items: center;
  z-index: 1000;
}
.lightbox.open { display: grid; }
.lightbox__inner {
  position: relative;
  max-width: min(96vw, 1400px);  /* a little wider on desktop */
  max-height: 96vh;              /* remove the 800px cap */
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--card-border);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.iconbtn#lbClose {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,.9);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}
.iconbtn#lbClose:hover { background: #fff; }
/* Make gallery & lightbox images non-selectable / non-draggable */
.weebly-gallery img,
.gallery-simple img,
.lightbox__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-user-drag: none; /* Safari/Chrome */

  -webkit-touch-callout: none; /* iOS long-press menu */
}
/* ===== Disable image selection/drag in gallery + lightbox ===== */
.weebly-gallery,
.weebly-gallery * ,
.lightbox__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  -webkit-touch-callout: none;   /* iOS long-press menu */
}

.weebly-gallery img,
.lightbox__img {
  -webkit-user-drag: none;       /* Safari/Chrome disable drag */
}
/* ===== Disable image selection/drag in gallery + lightbox ===== */
.weebly-gallery,
.weebly-gallery * ,
.lightbox__img {
  -webkit-user-select: none;  /* Chrome/Safari */
  -moz-user-select: none;     /* Firefox */
  -ms-user-select: none;      /* old Edge/IE */
  user-select: none;

  -webkit-touch-callout: none; /* iOS long-press menu */
}

/* Images themselves: prevent drag and mouse interaction */
.weebly-gallery img,
.lightbox__img {
  -webkit-user-drag: none;     /* Chrome/Safari only */
  pointer-events: none;         /* clicks go to the wrapping link / container */
}

/* ===== Justified (Flickr-style) gallery ===== */
.jg { /* the whole gallery block */
  --jg-gap: 12px;
}

.jg-row {
  display: flex;
  gap: var(--jg-gap);
  margin-bottom: var(--jg-gap);
}

.jg-item {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.jg-link {
  display: block;
  height: 100%;
}

.jg-link img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* no cropping because we match the box to the image ratio */
  transition: transform .35s ease;
}

.jg-item:hover img { transform: scale(1.02); }

.jg-cap {
  padding: 10px 12px;
  font-size: 14px;
  color: var(--muted);
  border-top: 1px solid var(--card-border);
  background: var(--card);
}

/* Optional: center the last row if we choose not to justify it */
.jg-row.is-last { justify-content: center; }
/* Video card (responsive 16:9) */
.video-card .content { padding-bottom: 0; }
.video-wrap { position: relative; aspect-ratio: 16 / 9; background: #000; border-top: 1px solid var(--card-border); }
.video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* ===== Play button (centered CTA) ===== */
.video-cta {
  display: flex;
  justify-content: center;
  margin: 10px 0 24px;
}

.btn-play {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn-play:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0,0,0,.14); background: #000; }
.btn-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.icon-ring {
  width: 28px; height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  display: grid; place-items: center;
}
.icon-play {
  width: 0; height: 0;
  border-left: 10px solid #fff;       /* triangle */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 2px; /* optical centering */
}

.btn-label { letter-spacing: .01em; }


/* Lightbox: allow tall images to fill the viewport and receive clicks */
.lightbox__img {
  width: auto;
  height: auto;
  max-width: 96vw !important;
  max-height: 96vh !important;
  object-fit: contain;
  pointer-events: auto !important; /* override earlier pointer-events:none */
}

/* ==== Other Projects (stacked mini-sections) ==== */
.op-section { margin-top: 26px; }
.op-section .desc { color: var(--muted); margin-top: 6px; }

/* Two-up grid; stacks to one on mobile */
.op-grid2 {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .op-grid2 { grid-template-columns: 1fr 1fr; }
}

.op-item { margin: 0; }
.op-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--card-border);
  /* keep full image visible (no cropping) */
  object-fit: contain;
  box-shadow: var(--shadow);
  transition: transform .25s ease;
}
.op-item .wg-link:hover img { transform: scale(1.01); }
.op-cap { font-size: 0.95rem; color: var(--muted); margin-top: 6px; }
/* ==== Other Projects (boxed descriptions + uniform tiles) ==== */
.op-section { margin-top: 28px; }
.op-desc-card { margin: 8px 0 14px; }

/* 2-up grid; stacks on mobile */
.op-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .op-grid { grid-template-columns: 1fr 1fr; }
}

/* Uniform tile frame: pick ONE ratio (4/3 feels nice for mixed content) */
/* Switch to 1/1 if you want perfect squares */
.op-frame {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;          /* ← change to 1 / 1 for squares */
  border-radius: var(--radius);
  overflow: hidden;              /* clip image to rounded corners */
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

/* Fill frame, consistent crop, smooth hover */
.op-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;             /* fills the frame uniformly */
  display: block;
  transition: transform .25s ease;
}
.wg-link:hover .op-frame img { transform: scale(1.02); }

.op-cap { font-size: .95rem; color: var(--muted); margin-top: 6px; }
/* ==== Other Projects: boxed desc + uniform tiles ==== */
.op-section { margin-top: 28px; }
.op-desc-card { margin: 8px 0 14px; }
/* ==== Other Projects grid sizing (smaller tiles) ==== */
.op-grid {
  --op-ratio: 1 / 1;     /* keep squares; change to 4 / 3 if you prefer */
  --op-min: 220px;       /* default tile min width */
  --op-gap: 12px;        /* default gap */

  display: grid;
  gap: var(--op-gap);
  grid-template-columns: repeat(auto-fill, minmax(var(--op-min), 1fr));
}

/* Smaller presets */
.op-grid--sm { --op-min: 180px; --op-gap: 10px; }
.op-grid--xs { --op-min: 150px; --op-gap: 8px; }

/* (Optional) smaller card padding so tiles feel lighter at small sizes */
.op-grid--sm .op-tile.card.no-lift,
.op-grid--xs .op-tile.card.no-lift { padding: 6px; }

/* ==== Two-up layout variant (1 col on mobile, 2 cols on desktop) ==== */
.op-grid--two {
  /* start as single column for small screens */
  grid-template-columns: 1fr;
}

@media (min-width: 780px) {
  .op-grid--two {
    grid-template-columns: 1fr 1fr;  /* two side-by-side */
  }
}


.op-tile.card.no-lift {
  padding: 8px;                       /* inner padding like your other cards */
}

.op-thumb {
  width: 100%;
  aspect-ratio: var(--op-ratio);      /* forces identical size/shape */
  border-radius: var(--radius);
  overflow: hidden;                   /* clip to rounded corners */
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
}

.op-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;                  /* uniform fill; gentle crop if needed */
  display: block;
  transition: transform .25s ease;
}

.wg-link:hover .op-thumb img { transform: scale(1.02); }

.op-cap { font-size: .95rem; color: var(--muted); margin-top: 6px; }
/* ==== Other Projects: fixed two-up pairs (small, centered) ==== */
/* ==== Other Projects: fixed two-up pairs (always side-by-side, smaller) ==== */
.op-pairs {
  --pair-max: 520px;   /* use 480px or 420px if you want even smaller */
  --pair-gap: 10px;
  --pair-ratio: 1 / 1;

  display: grid;
  grid-template-columns: 1fr 1fr;   /* ALWAYS two across */
  gap: var(--pair-gap);
  max-width: var(--pair-max);
  width: 100%;
  margin: 0 auto;
}

.op-pairs--sm { --pair-max: 480px; }
.op-pairs--xs { --pair-max: 420px; }

.op-pairs .op-thumb { aspect-ratio: var(--pair-ratio); }

.op-pairs--sm .op-tile.card.no-lift,
.op-pairs--xs .op-tile.card.no-lift { padding: 6px; }
/* Force the Woodworking pairs to be two-up, small tiles */
.op-section[aria-label="Woodworking"] .op-pairs{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: 480px !important;   /* tweak smaller: 420px, 360px, etc. */
  width: 100%;
  margin: 0 auto;
}
.op-section[aria-label="Woodworking"] .op-thumb{
  aspect-ratio: 1 / 1;           /* square, small */
}
/* Reset the homepage grid span for cards used inside local galleries */
.op-pairs .card,
.op-grid .card,
.op-grid2 .card {
  grid-column: auto !important;   /* allow 2-up (or whatever the container sets) */
}
/* Woodworking pairs — bigger, still two-up */
.op-section[aria-label="Woodworking"] .op-pairs{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;

  /* make the whole pair row wider */
  max-width: clamp(680px, 68vw, 900px) !important;
  width: 100%;
  margin: 0 auto;
}

/* keep them square (remove this if you want rectangles) */
.op-section[aria-label="Woodworking"] .op-thumb{
  aspect-ratio: 1 / 1;
}

/* Woodworking pairs — nudge wider */
.op-section[aria-label="Woodworking"] .op-pairs{
  max-width: clamp(760px, 74vw, 1000px) !important; /* was 680px,68vw,900px */
}
/* Make Motorcycles + Art grids the same width bump as Woodworking */
.op-section[aria-label="Motorcycles"] .op-grid,
.op-section[aria-label="Art"] .op-grid {
  max-width: clamp(900px, 82vw, var(--maxw)) !important;
  margin: 0 auto;
  gap: 8px; /* matches the small-gap tweak */
}

/* (optional) if you want them perfectly square like Woodworking */
.op-section[aria-label="Motorcycles"] .op-thumb,
.op-section[aria-label="Art"] .op-thumb {
  aspect-ratio: 1 / 1;
}
/* Tiny boost: a bit less padding around each image */
.op-section[aria-label="Woodworking"] .op-tile.card.no-lift{
  padding: 6px !important; /* was 8px */
}
/* Woodworking pairs — a bit bigger */
.op-section[aria-label="Woodworking"] .op-pairs{
  max-width: clamp(900px, 82vw, var(--maxw)) !important; /* was ~760/74vw */
}
/* Match Motorcycles + Art to Woodworking pairs */
.op-section[aria-label="Motorcycles"] .op-grid,
.op-section[aria-label="Art"] .op-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* always two across */
  gap: 12px !important;                                         /* same gap as Woodworking */
  max-width: clamp(900px, 82vw, var(--maxw)) !important;        /* same width as Woodworking */
  margin: 0 auto;
}

.op-section[aria-label="Motorcycles"] .op-thumb,
.op-section[aria-label="Art"] .op-thumb {
  aspect-ratio: 1 / 1;                                         /* square tiles like Woodworking */
}

.op-section[aria-label="Motorcycles"] .op-tile.card.no-lift,
.op-section[aria-label="Art"] .op-tile.card.no-lift {
  padding: 6px !important;                                      /* same inner padding as Woodworking */
}
/* Make 'Other Projects' section descriptions use the home-page medium size */
.op-section .op-desc-card .desc {
  font-size: clamp(15px, 2vw, 18px); /* same as .sub on the home page */
  line-height: 1.5;
}
/* ===== Contact portrait layout ===== */
.contact-card { padding: 10px 10px 12px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: center;
}
@media (min-width: 720px) {
  .contact-grid { grid-template-columns: auto 1fr; } /* photo left, text right */
}

/* Rounded square portrait to match site cards */
.contact-photo {
  width: clamp(200px, 28vw, 360px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow);
  margin: 0;
  justify-self: center;
}
@media (min-width: 720px) {
  .contact-photo { justify-self: start; }
}
.contact-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hero[aria-labelledby="contact"] + .grid .card .title {
  font-size: clamp(26px, 4.2vw, 30px); /* doubled from ~18–20px */
}

.hero[aria-labelledby="contact"] + .grid .card .desc {
  font-size: clamp(22px, 4vw, 26px);   /* doubled from ~16–18px */
  line-height: 1.6;
}

.contact-card .desc a {
  font-weight: 600;
}

/* Contact: make Phone / Email / GitHub rows evenly spaced */
.contact-card .desc {
  --row-gap: 12px;              /* tweak to taste: 10–14px */
  margin: .4rem 0;
  line-height: 1.4;
}

/* Turn <br> into consistent row spacing */
.contact-card .desc br {
  display: block;
  content: "";
  margin: var(--row-gap) 0;
}

/* Keep the inline Copy button from changing line height */
.contact-card .desc .btn-mini {
  margin-left: 8px;
  vertical-align: baseline;
}

/* Prevent link wrapping from creating odd row heights */
.contact-card .desc .link {
  white-space: nowrap;
}

/* Contact: make Email / LinkedIn / GitHub rows evenly spaced */
.contact-card .desc {
  --row-gap: 8px;          /* adjust to taste */
  line-height: 1.45;
  margin: .4rem 0;
}

.contact-card .desc br {
  display: block;
  content: "";
  margin: var(--row-gap) 0; /* equal spacing between lines */
}

/* Keep links tidy */
.contact-card .desc .link {
  white-space: nowrap;
  font-weight: 600;
}
/* Contact: slightly tighter spacing between rows */
.contact-card .desc { line-height: 1.45; } /* optional tweak */
.contact-card .desc br {
  display: block;
  margin: 6px 0 !important;  /* try 6–8px until it feels right */
}
/* Contact: slightly tighter spacing between rows */
.contact-card .desc br{
  display:block;
  margin:6px 0 !important;   /* change 6→8 if you want a hair more space */
}

/* Contact: slightly smaller profile image */
.contact-photo{
  width: clamp(260px, 30vw, 420px) !important;
  height: clamp(260px, 30vw, 420px) !important; /* keep square */
}
/* Contact page: tighten spacing around the hero + card */
.hero[aria-labelledby="contact"] {
  padding-bottom: 6px;              /* was ~12px */
}

.hero[aria-labelledby="contact"] + .grid {
  margin-top: 18px;                 /* was 40px */
}

/* Inside the contact card: shrink the gap between photo and text */
.hero[aria-labelledby="contact"] + .grid .contact-grid {
  gap: 12px;                        /* was 16px */
}

/* Keep mobile comfy */
@media (max-width: 719px) {
  .hero[aria-labelledby="contact"] + .grid {
    margin-top: 14px;
  }
  .hero[aria-labelledby="contact"] + .grid .contact-grid {
    gap: 10px;
  }
}
/* === Contact page: make the bottom page liner match site-wide === */

/* Remove any extra gap before the footer so spacing feels like other pages */
.hero[aria-labelledby="contact"] + .grid {
  margin-bottom: 0;
}

/* Standard footer spacing + rule + muted color (same as global) */
footer {
  margin-top: 64px;                  /* same vertical buffer as other pages */
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  color: var(--muted);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Footer links behave like the rest */
footer a.link {
  color: inherit;
  text-decoration: none;
}
footer a.link:hover,
footer a.link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Mobile: keep it tidy */
@media (max-width: 640px) {
  footer {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}

/* 1) Remove the full-width footer rule */
footer {
  border-top: none; /* was: 1px solid var(--card-border) */
  margin-top: 48px;         /* keep some breathing room above footer */
  padding-top: 0;           /* rule will live above, so no top padding here */
}

/* 2) Add a card-aligned liner right below the grid (matches the rectangle width) */
.grid::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--card-border);
  margin-top: 48px;         /* space between the card and the liner */
  border-radius: 1px;
}
/* Contact page: bottom line that matches the card width */
.contact-card {
  position: relative;
}

/* Draw a 1px rule across the bottom edge of the card */
.contact-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--card-border);
}

/* Remove the global footer's own top border to avoid a double line here */
footer { border-top: none; }
/* Card footer bar that matches card width */
.card .card-bar{
  border-top: 1px solid var(--card-border);
  padding: 12px 18px;                 /* same inner padding as .content */
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card .card-bar .link{
  display: inline;                    /* keep it tidy */
  text-decoration: none;
  color: inherit;
}
.media-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr; /* slight emphasis on the main image */
  gap: clamp(16px, 3vw, 28px);
  align-items: start;
  margin-top: clamp(16px, 2.5vw, 24px);
}

.media-left .hero-figure {
  margin: 0;
}

.media-left img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.12));
}

.media-right .thumb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 1.5vw, 14px);
}

.media-right .thumb {
  margin: 0;
}

.media-right img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.10));
}

/* Mobile: stack */
@media (max-width: 800px) {
  .media-split {
    grid-template-columns: 1fr;
  }
  .media-right .thumb-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* === Final fix: make "Other Projects" grids use full container width === */
.op-section[aria-label="Woodworking"] .op-pairs,
.op-section[aria-label="Motorcycles"] .op-grid,
.op-section[aria-label="Art"] .op-grid {
  width: 100% !important;
  max-width: 100% !important;  /* stop clamping them to 82vw etc. */
}