/* ============================================================
   danlloydart — editorial portfolio
   Grotesque sans (Archivo) + mono labels (Space Mono).
   Direction C × A: numbered index + live preview, calm work grid.
   ============================================================ */

:root {
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", "Courier New", monospace;
  --page-x: clamp(20px, 5vw, 72px);
  --maxw: 1560px;
  --gcols: 3;
  /* Detail-view artwork height budget. Capped so the piece always fits in the
     space between the sticky header (~64px) and the sticky prev/next bar (~73px)
     — the 220px reserve covers both plus breathing room, so the art is never
     hidden under the bottom bar. The 72svh cap keeps it from dominating on very
     tall screens. svh tracks the *small* mobile viewport (toolbars showing). */
  --art-h: min(72svh, calc(100svh - 220px));
}

.app {
  --bg:        oklch(0.966 0.008 88);
  --bg-2:      oklch(0.945 0.009 88);
  --ink:       oklch(0.20 0.012 55);
  --ink-soft:  oklch(0.42 0.012 55);
  --ink-faint: oklch(0.58 0.010 55);
  --rule:      oklch(0.20 0.012 55);
  --rule-soft: oklch(0.85 0.010 70);
  --accent:    #C8462B;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
.app img { display: block; max-width: 100%; }
.app a { color: inherit; text-decoration: none; }
.app button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--page-x); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); }
.accent { color: var(--accent); }

/* view transition: translate-only entrance */
.view { animation: rise .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .view, .tile, .ix { animation: none !important; } }

/* =========================================================
   Header
   ========================================================= */
.head {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px var(--page-x);
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid var(--rule);
}
.head .brand {
  font-family: var(--mono); font-weight: 700; font-size: 14px;
  letter-spacing: 0.16em; text-transform: lowercase;
}
.head .brand b { color: var(--accent); font-weight: 700; }
.head nav { display: flex; gap: 26px; align-items: baseline; }
.head nav button {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); position: relative; padding: 3px 0;
  transition: color .25s ease;
}
.head nav button:hover { color: var(--ink); }
.head nav button.on { color: var(--ink); }
.head nav button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent); }
.head .ig-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-faint); padding: 3px 0 3px 26px; margin-left: 4px;
  border-left: 1px solid var(--rule-soft);
  transition: color .25s ease;
}
.head .ig-link:hover { color: var(--accent); }
.head .ig-link .ig-arrow { color: var(--accent); }
@media (max-width: 560px) { .head .ig-link { display: none; } }

/* =========================================================
   Intro band — doodle sits beside the headline
   ========================================================= */
.intro {
  position: relative;
  padding: clamp(28px, 3.5vw, 52px) 0 clamp(24px, 3vw, 40px);
  display: flex; align-items: center; gap: clamp(24px, 4vw, 72px);
}
/* flex:0 0 auto — the headline column never shrinks, so it always holds its
   full content width (the longest of the two <br> lines). The doodle takes
   whatever space is left. Without this, Safari shrinks the column to its
   longest word and the headline wraps to 4 lines. */
.intro-text { order: 1; flex: 0 0 auto; min-width: 0; }
.intro h1 {
  /* Floor drops to 21px on very narrow screens so the headline keeps shrinking
     past the old 34px stop — that frees the horizontal room the doodle needs to
     stay beside it (rather than dropping below) on phones. Above ~440px the
     4.8vw term governs, so larger layouts are unchanged. */
  font-family: var(--sans); font-weight: 640; font-size: clamp(21px, 4.8vw, 70px);
  line-height: 1.0; letter-spacing: -0.02em; margin: 18px 0 0; max-width: 18ch;
  text-wrap: balance;
}
.intro-doodle {
  order: 2;
  flex: 1 1 auto;
  /* min-width:0 lets the doodle column shrink below the image's intrinsic width.
     Combined with the headline's flex:0 0 auto (it never shrinks), the doodle
     simply takes whatever space the headline leaves — so it scales down on the
     right instead of wrapping underneath. */
  min-width: 0;
  height: clamp(220px, 26vw, 360px);
}
.intro-doodle img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 50%; }
@media (max-width: 760px) {
  /* Stay side-by-side on small screens: tighten the gap and let the doodle box
     get shorter, but keep it on the right with the headline. */
  .intro { gap: clamp(12px, 3vw, 18px); }
  .intro h1 { margin-top: 10px; }
  .intro-doodle { height: clamp(150px, 32vw, 240px); }
  /* The text column is as wide as its widest line; on phones the mono eyebrow is
     that line, so tighten its tracking/size here (intro-scoped only) to stop it
     from hogging width the doodle needs. */
  .intro .eyebrow { font-size: 10px; letter-spacing: 0.1em; }
}

/* =========================================================
   Featured split — index list + live preview
   ========================================================= */
.feature { display: grid; grid-template-columns: 1fr minmax(0, 590px); gap: 0; border-top: 1.5px solid var(--rule); }
@media (max-width: 1180px) { .feature { grid-template-columns: 1fr; } .hint-hover { display: none; } }
.sec-label { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; }
.sec-label .t { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; }
.sec-label .n { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

.index { border-right: 1.5px solid var(--rule); }
@media (max-width: 1180px) { .index { border-right: none; } }
.ix {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: baseline; gap: 16px;
  width: 100%; text-align: left;
  padding: 20px clamp(20px, 3vw, 40px) 20px 0;
  border-bottom: 1px solid var(--rule-soft);
  transition: padding-left .3s cubic-bezier(.2,.7,.2,1), color .2s ease;
}
.ix:first-child { border-top: 1px solid var(--rule-soft); }
.ix .no { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.ix .t { font-family: var(--sans); font-weight: 560; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.04; letter-spacing: -0.01em; }
.ix .m { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }
.ix:hover, .ix.active { padding-left: clamp(10px, 1.6vw, 22px); }
.ix:hover .t, .ix.active .t { color: var(--accent); }

.preview { position: relative; }
.preview .sticky { position: sticky; top: 78px; padding: 16px 0 0 clamp(24px, 3vw, 48px); }
@media (max-width: 1180px) { .preview .sticky { padding-left: 0; } }
.preview .frame { position: relative; aspect-ratio: 4/5; box-shadow: inset 0 0 0 1.5px var(--rule); overflow: hidden; }
.preview .frame .ph, .preview .frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview .tag {
  position: absolute; left: 16px; bottom: 16px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px 13px;
}
.preview .cta { margin-top: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.preview .cta .hint { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ink-faint); text-transform: uppercase; }

/* =========================================================
   Masonry grid — all work
   ========================================================= */
.grid-sec { padding: clamp(40px, 6vw, 90px) 0 30px; }
.grid { columns: var(--gcols, 3); column-gap: clamp(20px, 2.6vw, 40px); }
@media (max-width: 1000px) { .grid { columns: 2; } }
@media (max-width: 560px) { .grid { columns: 1; } }
.tile { display: block; width: 100%; text-align: left; break-inside: avoid; margin-bottom: clamp(26px, 3vw, 46px); animation: rise .6s cubic-bezier(.2,.7,.2,1) both; }
.tile .frame { position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule-soft); }
.tile .frame .ph, .tile .frame img { width: 100%; display: block; }
.tile .frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.5px var(--accent); opacity: 0; transition: opacity .3s ease; }
.tile:hover .frame::after { opacity: 1; }
.tile .meta { display: flex; justify-content: space-between; gap: 14px; padding-top: 12px; align-items: baseline; }
.tile .meta .t { font-weight: 560; font-size: 17px; letter-spacing: -0.01em; }
.tile .meta .m { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* =========================================================
   Detail view
   ========================================================= */
.detail { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(30px, 5vw, 76px); padding: clamp(28px, 4vw, 56px) 0 50px; align-items: center; min-height: calc(100vh - 200px); }
@media (max-width: 880px) {
  /* Mobile/tablet: title + index share the top row, the artwork sits centred
     below them, and the spec table + CTA share a row underneath. The piece's
     name is visible immediately, without scrolling. */
  .detail {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "title index"
      "art   art"
      "spec  cta";
    align-items: start;
    column-gap: clamp(16px, 3vw, 32px);
    row-gap: clamp(16px, 2.6vw, 26px);
    min-height: 0;
    /* Reserve height for the header + title row + bottom bar so the whole piece
       stays clear of the sticky nav. */
    --art-h: min(56svh, calc(100svh - 320px));
  }
  /* Promote the info block's children so they can be placed into the grid
     areas above/below the image individually. */
  .detail .info { display: contents; }
  .detail .info h2 { grid-area: title; margin: 0; align-self: center; }
  .detail .back { grid-area: index; justify-self: end; align-self: center; margin: 0; }
  .detail .img {
    grid-area: art;
    /* Full-width rule under the piece, separating it from the spec/CTA row. */
    border-bottom: 1.5px solid var(--rule);
    padding-bottom: clamp(18px, 3vw, 28px);
  }
  .detail .spec { grid-area: spec; align-self: center; }
  .detail .actions { grid-area: cta; justify-self: end; align-self: center; margin: 0; }
}
@media (max-width: 520px) {
  /* Too narrow to keep the CTA beside the spec — drop it to its own full-width
     row so the button text never gets crushed. */
  .detail {
    grid-template-areas:
      "title index"
      "art   art"
      "spec  spec"
      "cta   cta";
  }
  .detail .actions { justify-self: stretch; }
  .detail .actions .btn { display: block; text-align: center; }
}
.detail .img { display: flex; align-items: center; justify-content: center; }
.detail .img .frame { position: relative; box-shadow: 0 30px 70px -45px rgba(20,15,10,0.5), inset 0 0 0 1.5px var(--rule); max-height: var(--art-h); }
.detail .img .frame .ph, .detail .img .frame img { height: 100%; width: 100%; object-fit: cover; }
/* Placed after the base .frame rule (media queries don't add specificity, so
   source order wins): on mobile drop the frame's bottom edge so it doesn't read
   as a second line just above the full-width divider under the artwork. */
@media (max-width: 880px) {
  .detail .img .frame {
    box-shadow:
      0 30px 70px -45px rgba(20,15,10,0.5),
      inset 0 1.5px 0 0 var(--rule),
      inset 1.5px 0 0 0 var(--rule),
      inset -1.5px 0 0 0 var(--rule);
  }
}
.detail .info { max-width: 40ch; }
.detail .back { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 26px; display: inline-block; transition: color .2s ease; }
.detail .back:hover { color: var(--accent); }
.detail .info h2 { font-family: var(--sans); font-weight: 620; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.0; letter-spacing: -0.02em; margin: 0 0 22px; }
.detail .spec { border-top: 1.5px solid var(--rule); padding-top: 16px; }
/* On mobile the full-width rule under the artwork (.img border-bottom) is the
   divider, so drop the spec's own border-top to avoid a second parallel line.
   Placed after the base rule so it wins despite equal specificity. */
@media (max-width: 880px) { .detail .spec { border-top: none; padding-top: 0; } }
.detail .spec dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 26px; }
.detail .spec dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.detail .spec dd { margin: 0; font-size: 14px; }
.detail .actions { margin-top: 28px; }
.btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 13px 22px; border: 1.5px solid var(--accent); color: var(--accent); transition: background .25s ease, color .25s ease; display: inline-block; }
.btn:hover { background: var(--accent); color: #fff; }
/* Pinned to the bottom of the viewport so prev/next stay reachable without
   scrolling past the piece. It rests at its natural spot (above the footer) once
   you scroll to the end. The solid paper background keeps content from showing
   through as it scrolls underneath. */
.detail-nav { position: sticky; bottom: 0; z-index: 5; background: var(--bg); display: flex; justify-content: space-between; align-items: center; border-top: 1.5px solid var(--rule); padding: 16px var(--page-x); max-width: var(--maxw); margin: 0 auto; box-shadow: 0 -10px 24px -18px rgba(20,15,10,0.45); }
.detail-nav button { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); display: flex; flex-direction: column; gap: 5px; transition: color .2s ease; }
.detail-nav button:hover:not(:disabled) { color: var(--accent); }
.detail-nav button:disabled { opacity: 0.3; cursor: default; }
.detail-nav .dir { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.detail-nav .nm { font-family: var(--sans); font-weight: 540; font-size: 16px; letter-spacing: -0.01em; }
.detail-nav .next { align-items: flex-end; text-align: right; }
.detail-nav .count { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* =========================================================
   About / Contact
   ========================================================= */
.about { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(34px, 6vw, 90px); padding: clamp(40px, 6vw, 86px) 0 90px; align-items: start; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 36px; } }
.about .portrait .frame { position: relative; aspect-ratio: 4/5; box-shadow: inset 0 0 0 1.5px var(--rule); overflow: hidden; }
.about .portrait .frame .ph { position: absolute; inset: 0; height: 100%; }
.about .portrait .cap { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 12px; letter-spacing: 0.05em; }
.about .body h1 { font-family: var(--sans); font-weight: 640; font-size: clamp(30px, 4vw, 56px); line-height: 1.0; letter-spacing: -0.02em; margin: 14px 0 30px; max-width: 14ch; }
.about .body p { font-size: clamp(16px, 1.5vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 0 0 18px; }
.about .body p:first-of-type { color: var(--ink); }
.about .services { margin-top: 40px; border-top: 1.5px solid var(--rule); padding-top: 24px; }
.about .services h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 18px; }
.about .services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.about .services li { display: grid; grid-template-columns: 30px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); font-size: 16px; }
.about .services li .no { font-family: var(--mono); font-size: 11px; color: var(--accent); }

.contact { padding: clamp(50px, 8vw, 120px) 0 clamp(50px, 8vw, 120px) calc(var(--page-x) + clamp(20px, 3vw, 56px)); min-height: 56vh; }
.contact h1 { font-family: var(--sans); font-weight: 640; font-size: clamp(38px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.025em; margin: 18px 0 44px; max-width: 15ch; }
.contact h1 .accent { font-weight: 640; }
.contact .rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; border-top: 1.5px solid var(--rule); padding-top: 32px; max-width: 980px; }
.contact .rows .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 11px; }
.contact .rows .v { font-size: clamp(18px, 1.8vw, 24px); font-weight: 520; letter-spacing: -0.01em; }
.contact .rows a.v { position: relative; }
.contact .rows a.v:hover { color: var(--accent); }

/* =========================================================
   Footer + placeholder
   ========================================================= */
.foot { border-top: 1.5px solid var(--rule); padding: 26px var(--page-x); display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--ink-faint); }
.foot a:hover { color: var(--accent); }

.ph { display: flex; align-items: center; justify-content: center; width: 100%; }
.ph .lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 9px; line-height: 1.5; text-align: center; background: rgba(255,255,255,0.4); color: rgba(40,30,20,0.4); }