/* ==========================================================================
   Minimal blueprint-inspired landing page
   Spec-driven typography + grid + understated interactions
   ========================================================================== */

:root {
  --u: 8px;
  --container-max: 1200px;

  --outer-desktop: 48px;
  --gutter-desktop: 24px;
  --cols-desktop: 12;

  --outer-mobile: 24px;
  --gutter-mobile: 16px;
  --cols-mobile: 4;

  --snap: 8px;
  --paper-opacity: 0.04;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0 var(--outer-desktop);
  background: #F4F5F0;
  color: var(--color-text);

  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

@media (max-width: 720px) {
  body {
    padding: 0 var(--outer-mobile);
  }
}

/* Single subtle paper texture overlay (barely-there). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--paper-opacity);

  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27240%27%20height%3D%27240%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%274%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27240%27%20height%3D%27240%27%20filter%3D%27url(%23n)%27/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.grid-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  color: var(--color-subtle);
  opacity: 0.12;

  /* Subtle blueprint-like grid using SVG lines (no gradients). */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20shape-rendering%3D%27crispEdges%27%3E%3Cpath%20d%3D%27M0%200H24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.22%27/%3E%3Cpath%20d%3D%27M0%208H24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.14%27/%3E%3Cpath%20d%3D%27M0%2016H24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.14%27/%3E%3Cpath%20d%3D%27M0%2024H24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.22%27/%3E%3Cpath%20d%3D%27M0%200V24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.22%27/%3E%3Cpath%20d%3D%27M8%200V24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.14%27/%3E%3Cpath%20d%3D%27M16%200V24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.14%27/%3E%3Cpath%20d%3D%27M24%200V24%27%20stroke%3D%27currentColor%27%20stroke-width%3D%271%27%20opacity%3D%270.22%27/%3E%3C/svg%3E");
  background-size: 24px 24px;
}

header,
main,
footer {
  position: relative;
  z-index: 1;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
.hero-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 64px;
  line-height: 1.1;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

h2,
.section-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

.lightbox-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

h3 {
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 500;
  margin: 0;
}

/* Case study / project titles — match lightbox (Instrument Serif). */
.project-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  font-style: normal;
  margin: 0;
}

.section-label,
.hero-label,
.detail-label {
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: var(--color-subtle);
}

.mono,
.project-number {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.project-number {
  background: transparent;
  color: #000;
  border: 1px solid #D1D1D1;
  padding: 3px 8px;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
}

.hero-desc,
.project-desc,
.about-body,
.contact-desc,
.lightbox-paragraph {
  margin: 0;
  max-width: 70ch;
}

.hero-desc {
  margin-top: calc(var(--u) * 4);
  max-width: 40ch;
}

.project-subtitle {
  margin: var(--u) 0 calc(var(--u) * 2) 0;
  color: #6B6B6B;
}

/* ==========================================================================
   Cursor + interaction defaults
   ========================================================================== */

body {
  cursor: default;
}

a[href],
button {
  cursor: crosshair;
}

/* Shared interactive treatment (nav + project buttons). */
.interactive {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--u);

  border: 1px solid;
  border-color: #6B6B6B;
  background: transparent;
  padding: var(--u) var(--u);
  color: #6B6B6B;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0.02em;
  text-decoration: none;

  position: relative;
  isolation: isolate;
  transition: border-color 160ms ease, color 160ms ease;
  transform: translate(0, 0);
}

.trace {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.trace svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.trace-rect {
  fill: none;
  stroke: #4A4A4A;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  shape-rendering: crispEdges;
  pathLength: 1;
  /* Single long dash (no gap) to avoid dotted/dashed artifacts mid-draw. */
  stroke-dasharray: 1 0;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 220ms ease, opacity 120ms ease;
}

.interactive:focus-visible {
  outline: 2px solid var(--color-accent, #4A4A4A);
  outline-offset: 4px;
}

.interactive::before,
.interactive::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

/* Top + bottom lines */
.interactive::before {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: #4A4A4A;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0;

  box-shadow: 0 calc(100% - 1px) 0 0 #4A4A4A;
}

/* Left + right lines */
.interactive::after {
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: #4A4A4A;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0;

  box-shadow: calc(100% - 1px) 0 0 0 #4A4A4A;
}

.interactive:hover,
.interactive:focus-visible {
  color: #4A4A4A;
  border-color: transparent;
}

.interactive:hover .trace-rect,
.interactive:focus-visible .trace-rect {
  opacity: 1;
  stroke-dashoffset: 0;
}

/* Disable the old two-pseudo-element trace. */
.interactive::before,
.interactive::after {
  opacity: 0 !important;
}

.interactive:hover::before,
.interactive:focus-visible::before {
  transform: scaleX(1);
  opacity: 1;
}

.interactive:hover::after,
.interactive:focus-visible::after {
  transform: scaleY(1);
  opacity: 1;
}

/* Nav links: no box border; underline on hover/focus only. */
.interactive.interactive--nav {
  border: none;
  padding: var(--u) 0;
  text-decoration: none;
  transition: color 160ms ease;
}

.interactive.interactive--nav:hover,
.interactive.interactive--nav:focus-visible {
  border-color: transparent;
}

/* Underline draw for nav links (left -> right). */
.interactive.interactive--nav::before {
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  box-shadow: none;
  opacity: 0 !important;
}

.interactive.interactive--nav::after {
  opacity: 0 !important;
  transform: scaleY(0) !important;
}

.interactive.interactive--nav:hover::after,
.interactive.interactive--nav:focus-visible::after {
  opacity: 0 !important;
  transform: scaleY(0) !important;
}

/* Ensure the underline draws despite the global opacity:0 !important. */
.interactive.interactive--nav:hover::before,
.interactive.interactive--nav:focus-visible::before {
  opacity: 1 !important;
  transform: scaleX(1);
}

/* ==========================================================================
   Header + navigation
   ========================================================================== */

.site-header {
  padding: calc(var(--u) * 6) 0 calc(var(--u) * 6) 0; /* 48px top/bottom */
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 6);
}

.logo {
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
}

.nav {
  display: flex;
  gap: calc(var(--u) * 4); /* 32px */
  align-items: center;
}

/* ==========================================================================
   Sections + spacing (multiples of 8)
   ========================================================================== */

.hero {
  padding: calc(var(--u) * 16) 0 calc(var(--u) * 12) 0; /* 128 / 96 */
}

.work {
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 16) 0; /* 96 / 128 */
}

/* Extra breathing room above the first case study. */
.work .section-label {
  margin-bottom: calc(var(--u) * 4); /* 32px */
}

.case-study {
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 16) 0; /* 96 / 128 */
}

.case-study-back {
  margin: 0 0 calc(var(--u) * 6) 0;
}

.case-study .section-label {
  margin-bottom: calc(var(--u) * 2);
}

/* Notes / blog index */
.notes-list {
  list-style: none;
  margin: calc(var(--u) * 6) 0 0 0;
  padding: 0;
}

.notes-item {
  border-top: 1px solid #C2C3C0;
  padding: calc(var(--u) * 3) 0;
}

.notes-item:last-child {
  border-bottom: 1px solid #C2C3C0;
}

.notes-item-title {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  margin: 0 0 var(--u) 0;
}

.notes-item-title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #C2C3C0;
  transition: border-color 160ms ease;
}

.notes-item-title a:hover {
  border-bottom-color: #1f1f1f;
}

.notes-item-meta {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6B6B6B;
}

@media (max-width: 720px) {
  .notes-item-title {
    font-size: 22px;
  }
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u);
  margin-top: 0;
  margin-bottom: calc(var(--u) * 2); /* 16px, matches 2u spacing system */
}

.case-tag {
  font-family: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 10pt;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: #000;
  border: 1px solid #000;
  padding: 3px 8px;
  text-decoration: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
}

/* Case study CTA (landing page): b87010 stroke/text. */
.project-actions .interactive {
  border: none;
  color: #b87010;
  text-decoration: none;
  padding: var(--u) 0;
}

.project-actions .interactive:focus-visible {
  outline: 2px solid #b87010;
}

.project-actions .interactive .trace {
  display: none;
}

.project-actions .interactive::before,
.project-actions .interactive::after {
  opacity: 0 !important;
}

.project-actions .interactive:hover,
.project-actions .interactive:focus-visible {
  color: #b87010;
}

/* Underline draw: left -> right (no text-decoration). */
.project-actions .interactive::before {
  /* Override the base tracing line to become the underline. */
  top: auto;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #b87010;
  box-shadow: none;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 1 !important;
  transition: transform 180ms ease;
}

.project-actions .interactive::after {
  /* Keep the side tracing hidden. */
  opacity: 0 !important;
}

.project-actions .interactive:hover::before,
.project-actions .interactive:focus-visible::before {
  transform: scaleX(1);
}

.about {
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 16) 0; /* 96 / 128 */
}

.contact {
  padding: calc(var(--u) * 12) 0 calc(var(--u) * 16) 0; /* 96 / 128 */
}

.site-footer {
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 8) 0; /* 32 / 64 */
  border-top: 1px solid #C2C3C0;
  margin-top: calc(var(--u) * 8);
}

.footer-inner {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  column-gap: var(--gutter-desktop);
  align-items: center;
}

.footer-left {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: var(--u);
}

.footer-right {
  grid-column: 8 / span 5;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--u);
}

.footer-cta {
  margin: 0;
  max-width: 100%;
  line-height: 1.5;
  /* Baseline-align text: center was shifting the suffix when box heights differed.
     overflow:hidden on the inner span also breaks text baseline — clip-path alone is enough. */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.footer-cta-static {
  flex: 0 0 auto;
}

/* Wraps the animated suffix (includes ?). */
.footer-cta-tail {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Width hugs the phrase (includes ? in rotating text). */
.footer-cta-suffix-host {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  vertical-align: baseline;
  transition: opacity 150ms ease-out;
}

.footer-cta-suffix-host--exit {
  opacity: 0;
}

.footer-cta-tw-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}

.footer-cta-tw-inner {
  display: inline-block;
  color: #1f1f1f;
  white-space: nowrap;
  max-width: 100%;
  /* No overflow:hidden — it forces baseline to the box bottom and misaligns vs adjacent text. */
  clip-path: inset(0 100% 0 0);
  font: inherit;
  font-weight: 700;
  font-style: italic;
  line-height: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}

@keyframes footerCtaTypewriter {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .footer-cta-suffix-host {
    transition: none;
  }

  .footer-cta-tw-inner.footer-cta-tw--play {
    animation: none !important;
    clip-path: none !important;
  }
}

.footer-email,
.footer-link {
  display: inline-block;
  margin-top: 0;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid #C2C3C0;
  text-underline-offset: 4px;
}

.footer-link:hover,
.footer-email:hover {
  border-bottom-color: #1f1f1f;
}

.footer-email-h3 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 400;
  font-style: italic;
}

.footer-email-h4 {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  font-style: normal;
}

@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
    align-items: start;
  }

  .footer-left,
  .footer-right {
    grid-column: 1 / -1;
  }

  .footer-right {
    margin-top: calc(var(--u) * 2);
  }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero-label {
  margin-bottom: calc(var(--u) * 4);
}

/* ==========================================================================
   Work grid (12 columns / 24px gutters)
   ========================================================================== */

.project-list {
  display: flex;
  flex-direction: column;
}

.project {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  column-gap: var(--gutter-desktop); /* 24px gutters */
  align-items: start;
}

.project + .project {
  margin-top: calc(var(--u) * 12); /* 96px */
}

.project-meta {
  grid-column: 1 / span 1;
}

.project-content {
  grid-column: 2 / span 6;
}

.project-visual {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--u);
}

.project-year {
  display: block;
  margin-top: var(--u);
}

.project-actions {
  margin-top: calc(var(--u) * 2);
}

.project-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  display: block;
  min-height: calc(var(--u) * 24); /* 192px (8px grid multiple) */
  border: 1px dashed #D1D1D1;
  background: transparent;
}

.artifact-label {
  margin: 0;
  color: var(--color-subtle, currentColor);
}

/* ==========================================================================
   About + Contact layout using same 12-column logic
   ========================================================================== */

.about-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  column-gap: var(--gutter-desktop);
  margin-top: calc(var(--u) * 8);
}

.about-block {
  grid-column: 1 / span 7;
}

.about-block + .about-block {
  margin-top: calc(var(--u) * 8);
}

.about-details {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  column-gap: var(--gutter-desktop);
  margin-top: calc(var(--u) * 8);
  padding-top: calc(var(--u) * 8);
}

.detail-item {
  grid-column: 8 / span 5;
  display: flex;
  flex-direction: column;
  gap: var(--u);
}

.detail-item + .detail-item {
  margin-top: calc(var(--u) * 8);
}

.detail-value {
  color: var(--color-text);
}

.detail-value a,
.contact-link {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-subtle);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.contact-desc {
  margin: 0;
  max-width: 52ch;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols-desktop), minmax(0, 1fr));
  column-gap: var(--gutter-desktop);
  margin-top: calc(var(--u) * 4);
}

.contact-link {
  display: inline-flex;
  font-family: "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  grid-column: 8 / span 5;
}

.contact-desc {
  grid-column: 1 / span 7;
}

/* ==========================================================================
   Lightbox (landing-only project preview)
   ========================================================================== */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  background: transparent;
}

.lightbox[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-panel {
  position: relative;
  margin: calc(var(--u) * 12) auto 0 auto;
  max-width: var(--container-max);
  padding: calc(var(--u) * 6);
  border: 1px solid var(--color-subtle);
  background: var(--color-bg);
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
}

.lightbox-lead {
  margin-top: calc(var(--u) * 4);
  max-width: 70ch;
  color: var(--color-subtle);
}

.lightbox-body {
  margin-top: calc(var(--u) * 6);
}

/* ==========================================================================
   Mobile: collapse to 4 columns + 16px gutters
   ========================================================================== */

@media (max-width: 720px) {
  .project {
    grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
    column-gap: var(--gutter-mobile); /* 16px */
  }

  .project-meta {
    grid-column: 1 / span 1;
  }

  .project-content {
    grid-column: 2 / span 3;
  }

  .project-visual {
    grid-column: 1 / -1;
    margin-top: calc(var(--u) * 6);
  }

  .artifact-label {
    margin-bottom: 0;
  }

  .project-placeholder {
    aspect-ratio: 4 / 3;
    min-height: calc(var(--u) * 20); /* 160px on mobile */
  }

  .about-grid,
  .about-details {
    grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
    column-gap: var(--gutter-mobile);
  }

  .about-block {
    grid-column: 1 / -1;
  }

  .detail-item {
    grid-column: 1 / -1;
  }

  .contact-link {
    font-size: 20px;
  }

  .contact-grid {
    grid-template-columns: repeat(var(--cols-mobile), minmax(0, 1fr));
    column-gap: var(--gutter-mobile);
  }

  .contact-desc,
  .contact-link {
    grid-column: 1 / -1;
  }
}