/* ============================================================
   boden taylor — 1:1 rebuild of bodentaylor.com
   Typography matches the live desktop site: Lato body 24/300,
   Lato title 60/300, Roboto-900 display headings (67/87), all
   scaled down responsively. Mobile gets a hamburger menu.
   ============================================================ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: #fff; color: #000;
  font-family: "Lato", Arial, sans-serif;
  font-size: clamp(17px, 1.875vw, 24px);
  font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
.container img { width: 100%; }              /* Sites stretches images to their column */
a { color: #1c1c1c; text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 0.7em; }
.container p { font-weight: 300; }           /* airy light body, matching live */

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 60px 0 16px; background: #fff;
}
.wordmark { font-size: 20px; font-weight: 400; color: #000; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
.nav { display: flex; align-items: center; gap: 26px; font-size: 16px; line-height: 1.5; }
.nav a { font-size: 16px; font-weight: 400; color: #1c1c1c; }
.nav a:hover { text-decoration: none; }
.nav .current { font-weight: 700; }
.nav-works { position: relative; display: inline-flex; align-items: center; }
.nav-works > a .caret { font-size: 11px; margin-left: 3px; }
.dropdown {
  display: none; position: absolute; top: 100%; right: -8px; z-index: 20;
  background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 2px 8px rgba(0,0,0,.12);
  padding: 6px 0; min-width: 190px;
}
.nav-works:hover .dropdown, .nav-works:focus-within .dropdown { display: block; }
.dropdown a { display: block; padding: 8px 16px; font-size: 15px; white-space: nowrap; }
.dropdown a:hover { background: #f5f5f5; text-decoration: none; }

/* hamburger + mobile menu — hidden on desktop, shown < 768 */
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* ---------- layout ---------- */
.container { width: 90.4%; max-width: 1302px; margin: 0 auto; }
.title {
  font-size: clamp(34px, 4.7vw, 60px); font-weight: 300; text-align: center;
  margin: 24px 0 clamp(56px, 8vw, 118px); line-height: 1.15;
}
.top-gap { margin-top: 90px; }

/* display section headings (textiles) — Roboto 900, centered */
.h-xl, .h-lg {
  font-family: "Roboto", Arial, sans-serif; font-weight: 900; text-align: center;
  line-height: 1.15; letter-spacing: -.01em; margin: 0;
}
.h-xl { font-size: clamp(40px, 6.8vw, 87px); }
.h-lg { font-size: clamp(34px, 5.23vw, 67px); }

/* section headings (time essay) — bold, left */
.h-sec { font-weight: 700; font-size: clamp(22px, 2.3vw, 29px); line-height: 1.25; margin: 0 0 .3em; }
.h-sub { font-weight: 700; font-size: clamp(18px, 1.6vw, 20px); line-height: 1.3; margin: 0 0 .2em; }
.h24   { font-weight: 700; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.3; margin: 0 0 .4em; }

/* column widths (fractions of the 1302px container) */
.c8  { width: 65.8%; margin-inline: auto; }
.c10 { width: 82.9%; margin-inline: auto; }
.c6c { width: 48.7%; margin-inline: auto; }
.c8text  { width: 65.8%; margin-inline: auto; padding-inline: 8px; }
.c10text { width: 82.9%; margin-inline: auto; padding-inline: 8px; }

.stack > * + * { margin-top: 32px; }
.duo { display: flex; gap: 2.53%; }
.duo > *, .duo > img { width: 48.735%; }
.cols2 { display: flex; gap: 2.53%; align-items: flex-start; }
.cols2 .col { width: 48.735%; display: flex; flex-direction: column; gap: 33px; }
.row-c { display: flex; justify-content: center; align-items: flex-start; gap: 2.53%; }
.row-c .w4 { width: 31.6%; }
.row-c .w6 { width: 48.7%; }

.sec { margin-block: clamp(34px, 5vw, 56px); }
.sec:first-child { margin-top: 0; }
.gap-lg { margin-top: clamp(56px, 8vw, 100px); }
.center-line { text-align: center; }

/* small photo-credit captions */
.cap { font-size: clamp(13px, 1.25vw, 16px); font-weight: 400; }

ol.defs { margin: 0 0 .7em; padding-left: 24px; }
ol.defs li { margin: 0; }
.ind { padding-left: 24px; }

/* interactive clock embeds (time) */
.clock-embed { display: block; width: 100%; border: 0; }

/* YouTube embeds (refraction) */
.yt { aspect-ratio: 634 / 496; height: auto; border: 0; }

/* ---------- works index ---------- */
.work { display: block; margin-bottom: clamp(42px, 6vw, 56px); }
.work:hover { text-decoration: none; }
.work .wlabel { display: block; margin-top: 14px; text-align: center; font-size: clamp(18px,1.6vw,20px); color: #1c1c1c; }
.work:hover .wlabel { text-decoration: underline; }
.work .narrow-obj { width: 29.8%; margin-inline: auto; }

/* ---------- about + contact form ---------- */
main { padding-bottom: clamp(48px, 9vh, 96px); }
.about-col { width: 48.1%; margin-inline: auto; }
.about-contacts { margin-top: 30px; display: flex; align-items: center; }
.about-contacts a { color: #1c1c1c; display: inline-flex; align-items: center; }
.about-contacts a + a { margin-left: 15px; }
.about-contacts a.ig { line-height: 0; }
.about-contacts a.ig:hover { text-decoration: none; opacity: .6; }
.about-contacts a.ig svg { display: block; }
.contact-line { margin-top: 18px; display: flex; align-items: center; gap: 14px; }
.contact-line .ig { line-height: 0; color: #1c1c1c; }
.contact-line .ig:hover { text-decoration: none; opacity: .6; }
.contact-line .ig svg { display: block; }
.contact-toggle {
  font: inherit; background: none; border: 0; padding: 0 0 1px;
  color: #1c1c1c; cursor: pointer; border-bottom: 1px solid #1c1c1c;
}
.contact-toggle:hover { opacity: .6; }
.contact-toggle[aria-expanded="true"] { opacity: .45; }
.contact-panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .45s cubic-bezier(.22,.61,.36,1);
}
.contact-panel.open { grid-template-rows: 1fr; }
.contact-panel-inner {
  overflow: hidden; opacity: 0; transform: translateY(-6px);
  transition: opacity .4s ease .06s, transform .4s ease .06s;
}
.contact-panel.open .contact-panel-inner { opacity: 1; transform: none; }
.contact-form { padding-top: 24px; display: flex; flex-direction: column; gap: 18px; max-width: 460px; }
.contact-form label { display: flex; flex-direction: column; gap: 5px; font-size: 15px; letter-spacing: .02em; color: #6b6b6b; }
.contact-form input, .contact-form textarea {
  font-family: inherit; font-size: 17px; color: #000;
  border: 0; border-bottom: 1px solid #cfcfcf; background: transparent; padding: 6px 0; outline: none;
}
.contact-form textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: #1c1c1c; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form .send {
  align-self: flex-start; font-family: inherit; font-size: 15px; letter-spacing: .06em;
  color: #fff; background: #1c1c1c; border: 0; padding: 12px 30px; cursor: pointer; margin-top: 4px;
}
.contact-form .send:hover { background: #000; }
.contact-form .send:disabled { opacity: .5; cursor: default; }
.contact-status { font-size: 15px; margin: 0; min-height: 1.1em; }
.contact-status.ok  { color: #2e7d32; }
.contact-status.err { color: #b00020; }
@media (prefers-reduced-motion: reduce) {
  .contact-panel, .contact-panel-inner { transition: none; }
}

/* ============================================================
   MOBILE  (< 768px): hamburger nav + single-column stacking
   ============================================================ */
@media (max-width: 768px) {
  .site-head {
    position: sticky; top: 0; z-index: 60; height: 58px;
    padding: 0 16px; border-bottom: 1px solid #f0f0f0;
  }
  .nav { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 9px; margin-right: -9px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 100%; height: 2px; background: #1c1c1c;
    transition: transform .3s ease, opacity .3s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    display: block; position: fixed; top: 58px; left: 0; right: 0; z-index: 55;
    background: #fff; border-bottom: 1px solid #eee; padding: 6px 20px 24px;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
    max-height: calc(100dvh - 58px); overflow: auto;
  }
  .mobile-menu.open { opacity: 1; transform: none; pointer-events: auto; }
  .mobile-menu > a { display: block; font-size: 24px; font-weight: 400; padding: 13px 0; color: #1c1c1c; }
  .mobile-menu .mm-sub { margin: 0 0 10px; padding-left: 14px; border-left: 1px solid #ececec; }
  .mobile-menu .mm-sub a { display: block; font-size: 16px; padding: 8px 0; color: #555; }
  body.menu-open { overflow: hidden; }

  /* stack every multi-column layout */
  .duo, .cols2, .row-c { flex-direction: column; gap: 28px; }
  .duo > *, .duo > img, .cols2 .col, .row-c .w4, .row-c .w6 { width: 100%; }
  .c8, .c10, .c6c, .c8text, .c10text, .about-col { width: 100%; }
  .work .narrow-obj { width: 62%; }
  .top-gap { margin-top: 40px; }
  .title { margin-bottom: clamp(40px, 9vw, 64px); }
}