/* ==========================================================================
   MARK ERICK SERRANO — PORTFOLIO
   Design system: "Technical Blueprint"
   Hand-written CSS. No framework, no build step.

   Contents
   01. Tokens
   02. Reset & base
   03. Blueprint field (grid backdrop)
   04. Layout primitives
   05. Instruments (rail, progress, nav)
   06. Section headers
   07. Masthead
   08. Buttons
   09. Profile
   10. Capability matrix
   11. Work
   12. Timeline
   13. Credentials
   14. Gallery
   15. Contact & footer
   16. Modal (detail / stack / index)
   17. Motion
   18. Reduced motion & print
   ========================================================================== */

/* ---- 01. TOKENS -------------------------------------------------------- */

:root {
  color-scheme: dark;

  --canvas:      #0B0D0E;
  --surface:     #121517;
  --surface-2:   #171B1E;
  --rule:        #1F2528;
  --rule-strong: #2C3438;
  --text:        #E7E9EA;
  --text-dim:    #B4BABD;
  --muted:       #8B9296;
  --signal:      #FFB000;
  --signal-ink:  #0B0D0E;
  --signal-soft: rgba(255, 176, 0, .12);
  --grid:        rgba(255, 255, 255, .030);
  --shadow:      0 18px 50px -28px rgba(0, 0, 0, .9);

  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shell:  1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
}

html.light {
  color-scheme: light;

  --canvas:      #F4F2EC;
  --surface:     #FBFAF7;
  --surface-2:   #EFECE2;
  --rule:        #DCD7CB;
  --rule-strong: #BFB7A5;
  --text:        #14181A;
  --text-dim:    #3A4145;
  --muted:       #5B6367;
  --signal:      #8A5200;
  --signal-ink:  #FBFAF7;
  --signal-soft: rgba(138, 82, 0, .10);
  --grid:        rgba(20, 24, 26, .050);
  --shadow:      0 18px 50px -30px rgba(60, 50, 30, .45);
}

/* ---- 02. RESET & BASE -------------------------------------------------- */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--canvas);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: clamp(.95rem, .35vw + .86rem, 1.0625rem);
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
textarea,
select { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

::selection {
  background: var(--signal);
  color: var(--signal-ink);
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}

.skip:focus {
  left: 1rem;
  top: 1rem;
  padding: .7rem 1.1rem;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

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

/* Mono label — the workhorse of this design */
.mono {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-feature-settings: "zero" 1;
}

/* ---- 03. BLUEPRINT FIELD ---------------------------------------------- */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(125% 85% at 50% 0%, #000 35%, transparent 78%);
          mask-image: radial-gradient(125% 85% at 50% 0%, #000 35%, transparent 78%);
}

/* ---- 04. LAYOUT PRIMITIVES -------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  position: relative;
  z-index: 1;
}

section[id] {
  padding-block: clamp(3.75rem, 8vw, 7.5rem);
  border-top: 1px solid var(--rule);
}

/* Panel: the recurring bordered surface, with registration marks */
.panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

/* Corner crop marks — drafting detail */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 1px solid var(--rule-strong);
  pointer-events: none;
}

.panel::before {
  top: -1px;
  left: -1px;
  border-right: 0;
  border-bottom: 0;
}

.panel::after {
  right: -1px;
  bottom: -1px;
  border-left: 0;
  border-top: 0;
}

/* ---- 05. INSTRUMENTS -------------------------------------------------- */

/* Top navigation */
.topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease-soft);
}

.topbar[data-stuck="true"] { border-bottom-color: var(--rule); }

.topbar__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 3.75rem;
}

.sig {
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .02em;
  color: var(--text);
}

.sig b { font-weight: 500; }
.sig span { color: var(--signal); }

.navlinks {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.75rem);
}

.navlinks a {
  position: relative;
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: .35rem;
  transition: color .25s var(--ease-soft);
}

.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-out);
}

.navlinks a:hover,
.navlinks a[aria-current="true"] { color: var(--text); }

.navlinks a:hover::after,
.navlinks a[aria-current="true"]::after { transform: scaleX(1); }

/* Small screens: the rail and crosshair are gone, so the nav becomes a
   second row that scrolls sideways. Keeps section jumping (and the
   aria-current position marker) available on a phone. */
@media (max-width: 46rem) {
  .topbar__in {
    flex-wrap: wrap;
    height: auto;
    padding-bottom: .5rem;
    row-gap: .25rem;
  }

  .sig,
  .themetoggle { margin-top: .9rem; }

  .navlinks {
    order: 3;
    width: 100%;
    gap: 1.25rem;
    padding-top: .55rem;
    border-top: 1px solid var(--rule);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .navlinks::-webkit-scrollbar { display: none; }

  .navlinks a {
    flex: 0 0 auto;
    padding-block: .3rem;
  }

  /* Taller bar, so anchored sections need more clearance */
  html { scroll-padding-top: 7.5rem; }
}


/* Theme toggle — a two-state mono switch, not a rounded pill */
.themetoggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  overflow: hidden;
}

.themetoggle span {
  display: grid;
  place-items: center;
  padding: .4rem .55rem;
  color: var(--muted);
  transition: background-color .35s var(--ease-soft), color .35s var(--ease-soft);
}

.themetoggle svg {
  width: 13px;
  height: 13px;
  display: block;
}

html:not(.light) .themetoggle span[data-for="dark"],
html.light        .themetoggle span[data-for="light"] {
  background: var(--signal);
  color: var(--signal-ink);
}

.themetoggle:hover { border-color: var(--rule-strong); }

/* Scroll rail (desktop) */
.rail {
  position: fixed;
  left: max(.85rem, calc((100vw - var(--shell)) / 2 - 2.6rem));
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: none;
  flex-direction: column;
  gap: .55rem;
  align-items: flex-start;
}

@media (min-width: 78rem) and (pointer: fine) {
  .rail { display: flex; }
}

.rail__pct {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: .3rem;
  font-variant-numeric: tabular-nums;
}

.rail a {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--muted);
}

.rail i {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--rule-strong);
  transition: width .4s var(--ease-out), background-color .4s var(--ease-soft);
}

.rail em {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  font-style: normal;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-out);
  white-space: nowrap;
}

.rail a:hover i,
.rail a[aria-current="true"] i {
  width: 26px;
  background: var(--signal);
}

.rail a:hover em,
.rail a[aria-current="true"] em {
  opacity: 1;
  transform: none;
  color: var(--text);
}

/* Mobile scroll progress */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--p, 0));
  transform-origin: left;
  background: var(--signal);
  z-index: 95;
}

@media (min-width: 78rem) and (pointer: fine) {
  .progress { display: none; }
}

/* ---- 06. SECTION HEADERS ---------------------------------------------- */

.head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}

.head__no {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  color: var(--signal);
  flex: none;
}

.head h2 {
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
  flex: none;
}

.head .draw {
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}

.head.in .draw { transform: scaleX(1); }

.head__meta {
  flex: none;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--muted);
}

@media (max-width: 34rem) {
  .head__meta { display: none; }
}

/* ---- 07. MASTHEAD ----------------------------------------------------- */

.mast {
  padding-block: clamp(2.5rem, 7vw, 5.5rem) clamp(2.5rem, 6vw, 4.5rem);
}

.mast__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: end;
}

@media (min-width: 56rem) {
  .mast__grid { grid-template-columns: minmax(0, 1fr) 15.5rem; }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  padding: .3rem .7rem .3rem .55rem;
  margin-bottom: 1.5rem;
}

.status i {
  position: relative;
  width: 6px;
  height: 6px;
  background: var(--signal);
  flex: none;
}

.status i::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 1px solid var(--signal);
  opacity: 0;
  animation: ping 2.6s var(--ease-out) infinite;
}

@keyframes ping {
  0%   { opacity: .8; transform: scale(.55); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

.mast h1 {
  font-size: clamp(2rem, 6vw, 4rem);
  letter-spacing: -.045em;
  font-weight: 600;
  margin-bottom: 1.35rem;
}

.mast h1 .ln {
  display: block;
  overflow: hidden;
}

.mast h1 .ln > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.05s var(--ease-out);
}

.mast h1 .ln:nth-child(2) > span { transition-delay: .1s; }

.mast.in h1 .ln > span { transform: none; }

.mast h1 em {
  font-style: normal;
  color: var(--muted);
}

.role {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .85rem;
  margin-bottom: 1.15rem;
}

.role b {
  font-family: var(--font-mono);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--text-dim);
}

.role s {
  width: 18px;
  height: 1px;
  background: var(--rule-strong);
  text-decoration: none;
}

.mast__lede {
  max-width: 46ch;
  color: var(--muted);
  font-size: clamp(.95rem, .4vw + .86rem, 1.0625rem);
}

.mast__loc {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.1rem;
}

.mast__loc svg { width: 13px; height: 13px; flex: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
}

/* Divider between the primary actions and the social cluster */
.actions__rule {
  flex: none;
  align-self: stretch;
  width: 1px;
  min-height: 2.25rem;
  background: var(--rule-strong);
}

.social {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Compact profile links — same visual language as .btn, icon-led */
.iconbtn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .02em;
  padding: .58rem .8rem;
  text-decoration: none;
  transition:
    color .25s var(--ease-soft),
    border-color .25s var(--ease-soft),
    background-color .25s var(--ease-soft);
}

.iconbtn svg { width: 15px; height: 15px; flex: none; }

.iconbtn:hover {
  color: var(--signal);
  border-color: var(--signal);
  background: var(--surface-2);
}

.iconbtn:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 2px;
}

@media (max-width: 34rem) {
  .iconbtn { padding: .58rem; }

  .iconbtn__t {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Portrait — no frame, just the photograph */
.plate {
  position: relative;
  margin: 0;
}

.plate__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-2);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .14),
    0 16px 36px -18px rgba(0, 0, 0, .38);
}

.plate__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: opacity .4s var(--ease-soft), transform 1.2s var(--ease-out);
}

.plate:hover .plate__img img { transform: scale(1.03); }

/* Mobile — portrait leads the masthead */
@media (max-width: 56rem) {
  .plate {
    order: -1;
    max-width: 15rem;
    margin-inline: auto;
  }
}


/* Spec sheet — the credential numbers */
.spec {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--rule);
  border-bottom: 0;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  background: var(--surface);
}

@media (min-width: 52rem) {
  .spec { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.spec > div {
  padding: 1.1rem clamp(.9rem, 2vw, 1.4rem) 1.2rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
}

@media (min-width: 52rem) {
  .spec > div:last-child { border-right: 0; }
}

@media (max-width: 52rem) {
  .spec > div:nth-child(2n) { border-right: 0; }
}

.spec b {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(1.3rem, 3.4vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: .3rem;
}

.spec b i {
  font-style: normal;
  color: var(--signal);
}

.spec p {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}

/* ---- 08. BUTTONS ------------------------------------------------------ */

.btn {
  --tx: 0px;
  --ty: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .8rem 1.15rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  overflow: hidden;
  transform: translate(var(--tx), var(--ty));
  transition: transform .45s var(--ease-out), border-color .3s var(--ease-soft), color .3s var(--ease-soft);
}

.btn svg {
  width: 14px;
  height: 14px;
  flex: none;
  position: relative;
  z-index: 1;
}

.btn span {
  position: relative;
  z-index: 1;
}

/* Wipe fill on hover — travels left to right */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

.btn:hover {
  border-color: var(--signal);
  color: var(--signal-ink);
}

.btn:hover::before { transform: scaleX(1); }

.btn--primary {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--signal-ink);
}

.btn--primary::before { background: var(--canvas); }

.btn--primary:hover { color: var(--text); }

/* ---- 09. PROFILE ------------------------------------------------------ */

.prose {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
}

@media (min-width: 56rem) {
  .prose { grid-template-columns: 1fr 1fr; }
}

.prose p {
  color: var(--text-dim);
  font-size: clamp(1rem, .5vw + .9rem, 1.1875rem);
  line-height: 1.75;
}

.prose p + p { margin-top: 1.15rem; }

.prose p b {
  color: var(--text);
  font-weight: 600;
}

.facts {
  align-self: start;
  border-top: 1px solid var(--rule);
}

.facts div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
}

.facts dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.facts dd {
  font-size: .875rem;
  text-align: right;
  color: var(--text);
}

/* ---- 10. CAPABILITY MATRIX -------------------------------------------- */

.matrix {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
  .matrix { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .matrix { grid-template-columns: repeat(4, 1fr); }
}

.cap {
  background: var(--surface);
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  transition: background-color .35s var(--ease-soft);
}

.cap:hover { background: var(--surface-2); }

.cap__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .8rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}

.cap h3 {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}

.cap__no {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--signal);
}

.cap li {
  position: relative;
  padding-left: 1.05rem;
  font-size: .875rem;
  color: var(--text-dim);
  padding-block: .3rem;
}

.cap li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .95em;
  width: 6px;
  height: 1px;
  background: var(--rule-strong);
  transition: width .3s var(--ease-out), background-color .3s var(--ease-soft);
}

.cap li:hover { color: var(--text); }

.cap li:hover::before {
  width: 11px;
  background: var(--signal);
}

/* ---- 11. WORK --------------------------------------------------------- */

.work {
  display: flex;
  flex-direction: column;
  gap: clamp(1.75rem, 4vw, 3rem);
}

/* Tier label between project groups */
.tier {
  display: flex;

  align-items: center;
  gap: .85rem;
  margin-bottom: -.4rem;
}

.tier span {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.tier i {
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Standard project cards */
.cards {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 46rem) {
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 68rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--surface);
  text-align: left;
  width: 100%;
  transition: border-color .35s var(--ease-soft), transform .5s var(--ease-out);
}

.card:hover,
.card:focus-within {
  border-color: var(--rule-strong);
  transform: translateY(-3px);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 1.1s var(--ease-out), filter .5s var(--ease-soft);
  filter: saturate(.82);
}

.card:hover .card__media img {
  transform: scale(1.04);
  filter: saturate(1);
}

/* Small label over card media — marks the flagship and the capstone */
.card__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  background: var(--signal);
  color: var(--signal-ink);
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .3rem .55rem;
}

/* No-image variant gets a blueprint hatch instead of a stock photo */

.card__hatch {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--rule);
  background-image: repeating-linear-gradient(
    -45deg,
    var(--grid) 0 1px,
    transparent 1px 9px
  );
  background-color: var(--surface-2);
}

.card__hatch span {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: .4rem .7rem;
}

.card__body {
  padding: 1.15rem 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  flex: 1;
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.card h3 {
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.card__yr {
  font-family: var(--font-mono);
  font-size: .625rem;
  color: var(--muted);
  flex: none;
}

.card p {
  font-size: .875rem;
  color: var(--muted);
  flex: 1;
}

.card__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid var(--rule);
  margin-top: .2rem;
}

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}

.stack li {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: .22rem .45rem;
  background: var(--canvas);
}

.card__view {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
}

.card__view svg {
  width: 12px;
  height: 12px;
  transition: transform .3s var(--ease-out);
}

.card:hover .card__view svg { transform: translate(2px, -2px); }

.links {
  display: flex;
  gap: .85rem;
}

.links a {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}

.links a:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}

.links svg { width: 12px; height: 12px; }

/* ---- 12. TIMELINE ----------------------------------------------------- */

.tl {
  position: relative;
  padding-left: clamp(2.75rem, 6vw, 4.5rem);
}

/* The measuring scale */
.tl::before {
  content: "";
  position: absolute;
  left: clamp(1.15rem, 2.5vw, 2rem);
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: var(--rule-strong);
}

.tl__item {
  position: relative;
  padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.tl__item:last-child { padding-bottom: 0; }

/* Tick mark reaching from the scale to the entry */
.tl__item::before {
  content: "";
  position: absolute;
  left: calc(clamp(1.15rem, 2.5vw, 2rem) - clamp(2.75rem, 6vw, 4.5rem));
  top: .68rem;
  width: clamp(1.1rem, 2.6vw, 2rem);
  height: 1px;
  background: var(--rule-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--ease-out), background-color .3s var(--ease-soft);
}

.tl__item.in::before { transform: scaleX(1); }

/* Node on the scale */
.tl__item::after {
  content: "";
  position: absolute;
  left: calc(clamp(1.15rem, 2.5vw, 2rem) - clamp(2.75rem, 6vw, 4.5rem) - 3px);
  top: calc(.68rem - 3px);
  width: 7px;
  height: 7px;
  background: var(--canvas);
  border: 1px solid var(--rule-strong);
  transition: background-color .3s var(--ease-soft), border-color .3s var(--ease-soft);
}

.tl__item[data-now="true"]::after {
  background: var(--signal);
  border-color: var(--signal);
}

.tl__item:hover::before { background: var(--signal); }
.tl__item:hover::after  { border-color: var(--signal); }

.tl__yr {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  color: var(--signal);
  display: block;
  margin-bottom: .35rem;
}

.tl h3 {
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  margin-bottom: .25rem;
}

.tl__org {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: .6rem;
}

.tl__pts li {
  position: relative;
  padding-left: 1rem;
  font-size: .875rem;
  color: var(--text-dim);
  margin-top: .35rem;
  max-width: 68ch;
}

.tl__pts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 1px;
  background: var(--muted);
}

/* ---- 13. CREDENTIALS -------------------------------------------------- */

.creds {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  grid-template-columns: 1fr;
}

@media (min-width: 52rem) {
  .creds { grid-template-columns: repeat(2, 1fr); }
}

.cred {
  background: var(--surface);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: .65rem;
  transition: background-color .35s var(--ease-soft);
}

.cred:hover { background: var(--surface-2); }

.cred__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

.cred__award {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--signal-ink);
  background: var(--signal);
  padding: .25rem .5rem;
}

.cred h3 {
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.cred p {
  font-size: .875rem;
  color: var(--muted);
}

/* ---- 14. GALLERY ------------------------------------------------------ */

.gallery {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.15rem);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 52rem) {
  .gallery { grid-template-columns: repeat(4, 1fr); }
}

.shot {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  width: 100%;
  padding: 0;
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8);
  transition: transform 1s var(--ease-out), filter .45s var(--ease-soft);
}

.shot:hover img,
.shot:focus-visible img {
  transform: scale(1.05);
  filter: saturate(1);
}

/* Caption styling lives in §19 (.shot .cap) — a <button> cannot contain
   a <figcaption>, so the markup uses a <span>. */

/* ---- 15. CONTACT & FOOTER -------------------------------------------- */

.contact {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 56rem) {
  .contact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

/* The large contact statement is a <p class="bigtype">, not a heading —
   the section already has its h2 in the .head row. See §19. */

.contact__lede {
  color: var(--text-dim);
  max-width: 42ch;
  margin-bottom: 1.75rem;
}

.chan {
  border-top: 1px solid var(--rule);
}

.chan a,
.chan div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem .25rem;
  border-bottom: 1px solid var(--rule);
  transition: padding-left .35s var(--ease-out), background-color .3s var(--ease-soft);
}

.chan a:hover {
  padding-left: .8rem;
  background: var(--surface);
}

.chan dt {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  flex: none;
}

.chan dd {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--text);
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chan svg {
  width: 13px;
  height: 13px;
  flex: none;
  color: var(--muted);
  transition: color .3s var(--ease-soft), transform .3s var(--ease-out);
}

.chan a:hover svg {
  color: var(--signal);
  transform: translate(2px, -2px);
}

footer {
  border-top: 1px solid var(--rule);
  padding-block: 1.85rem;
  position: relative;
  z-index: 1;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
}

.foot p {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.totop {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s var(--ease-soft);
}

.totop:hover { color: var(--signal); }

.totop svg {
  width: 12px;
  height: 12px;
  transition: transform .3s var(--ease-out);
}

.totop:hover svg { transform: translateY(-3px); }

/* ---- 16. MODAL ------------------------------------------------------- */

/* One shell, three views: project detail, full stack, project index. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
  padding: clamp(.6rem, 3vw, 2rem);
}

.modal[data-open="true"] {
  display: grid;
  place-items: center;
}

.modal__veil {
  position: absolute;
  inset: 0;
  background: var(--canvas);
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .35s var(--ease-soft);
  border: 0;
  width: 100%;
  cursor: default;
}

.modal[data-shown="true"] .modal__veil { opacity: 1; }

.modal__box {
  position: relative;
  width: min(78rem, 100%);

  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(12px) scale(.99);
  transition: opacity .4s var(--ease-soft), transform .5s var(--ease-out);
  overflow: hidden;
}

.modal[data-shown="true"] .modal__box {
  opacity: 1;
  transform: none;
}

.modal__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  flex: none;
}

.modal__hd b {
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal__x {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  padding: .3rem .5rem;
  flex: none;
  transition: color .25s var(--ease-soft), border-color .25s var(--ease-soft);
}

.modal__x:hover {
  color: var(--signal);
  border-color: var(--signal);
}

.modal__x svg { width: 12px; height: 12px; }

/* The view is injected here */
.modal__slot {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.modal__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .65rem .85rem;
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  flex: none;
  flex-wrap: wrap;
}

.modal__ft:empty { display: none; }

body[data-locked="true"] { overflow: hidden; }

/* ---- 16a. VIEW: PROJECT DETAIL --------------------------------------- */

.det {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 62rem) {
  .det { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

}

/* Projects with no captures on disk render copy only — let it span both
   columns instead of leaving an empty second track. */
.det > .det__copy:only-child {
  grid-column: 1 / -1;
  max-width: 62ch;
}

/* Carousel */
.det__stage {
  position: relative;
  background: var(--canvas);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

@media (min-width: 62rem) {
  .det__stage {
    border-bottom: 0;
    border-right: 1px solid var(--rule);
  }
}

.det__slot {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 2.6rem .5rem .5rem;
}

@media (min-width: 40rem) {
  .det__slot { padding: .6rem 3rem .6rem; }
}

/* Fill the stage — captures are wide screenshots, so width leads and the
   height cap only kicks in on short viewports. */
.det__slot img,
.det__slot video {
  width: 100%;
  height: auto;
  max-height: min(74vh, 44rem);
  object-fit: contain;
  border: 1px solid var(--rule);
  background: var(--surface-2);
}


.det__nav {
  position: absolute;
  top: calc(50% - 2.2rem);
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  color: var(--text);
  z-index: 2;
  transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft);
}

.det__nav:hover {
  background: var(--signal);
  color: var(--signal-ink);
}

.det__nav[data-dir="prev"] { left: .5rem; }
.det__nav[data-dir="next"] { right: .5rem; }

.det__nav svg { width: 15px; height: 15px; }

/* Caption bar below the stage: caption, key hint, counter */
.det__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  padding: .6rem .85rem;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  margin-top: auto;
}

.det__cap {
  font-size: .8125rem;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.det__count {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--muted);
  flex: none;
  font-variant-numeric: tabular-nums;
}

.det__keys {
  display: none;
  gap: .3rem;
  align-items: center;
}

@media (min-width: 46rem) {
  .det__keys { display: inline-flex; }
}

.det__keys kbd {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .06em;
  border: 1px solid var(--rule-strong);
  background: var(--canvas);
  color: var(--muted);
  padding: .15rem .3rem;
}

/* Shown in the footer when a project has no public deployment */
.det__none {
  display: inline-flex;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px dashed var(--rule-strong);
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Copy column */
.det__copy {
  padding: clamp(1.15rem, 2.6vw, 1.75rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  min-width: 0;
}

.det__meta {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.det__tag {
  font-family: var(--font-mono);
  font-size: .5625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal-ink);
  background: var(--signal);
  padding: .25rem .5rem;
}

.det__yr {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--muted);
}

.det__copy h3 {
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  letter-spacing: -.03em;
}

.det__copy > p {
  font-size: .9375rem;
  color: var(--text-dim);
  line-height: 1.7;
}

.det__sub {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: .35rem;
  border-top: 1px solid var(--rule);
}

.det__act {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: auto;
  padding-top: .6rem;
}

/* Chips — shared by detail view and stack list */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.chips li {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .06em;
  color: var(--text-dim);
  border: 1px solid var(--rule);
  background: var(--canvas);
  padding: .28rem .5rem;
}

.chips--sm li {
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: .22rem .45rem;
}

/* ---- 16b. VIEW: FULL STACK ------------------------------------------- */

.techlist {
  display: grid;
  gap: 1px;
  background: var(--rule);
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .techlist { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64rem) {
  .techlist { grid-template-columns: repeat(3, 1fr); }
}

.techlist__g {
  background: var(--surface);
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.techlist__hd {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text);
}

.techlist__hd span { color: var(--signal); }

/* ---- 16c. VIEW: PROJECT INDEX ---------------------------------------- */

.plist { display: flex; flex-direction: column; }

/* Rows are plain containers — the actions inside them are the interactive
   parts, so a live link can sit next to the case-study button. */
.plist__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
  width: 100%;
  text-align: left;
  padding: 1rem clamp(.9rem, 2.2vw, 1.4rem);
  border-bottom: 1px solid var(--rule);
  transition: background-color .3s var(--ease-soft);
}

.plist__row:last-child { border-bottom: 0; }

.plist__row:hover,
.plist__row:focus-within { background: var(--surface-2); }

/* Case study + visit site, one pair per row */
.plist__act {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.plist__go {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  padding: .45rem .7rem;
  transition:
    color .25s var(--ease-soft),
    border-color .25s var(--ease-soft),
    background-color .25s var(--ease-soft);
}

.plist__go svg { width: 12px; height: 12px; flex: none; }

.plist__go:hover {
  color: var(--signal);
  border-color: var(--signal);
}

.plist__go--live {
  color: var(--signal-ink);
  background: var(--signal);
  border-color: var(--signal);
}

.plist__go--live:hover {
  color: var(--signal);
  background: var(--surface);
}

/* Stated instead of a link when a project has no public deployment */
.plist__off {
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--rule-strong);
  padding: .45rem .7rem;
}


.plist__hd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .55rem;
}

.plist__hd b {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--text);
}

.plist__tag {
  font-family: var(--font-mono);
  font-size: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid var(--signal);
  padding: .16rem .4rem;
}

.plist__yr {
  font-family: var(--font-mono);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--muted);
  margin-left: auto;
}

.plist__lede {
  font-size: .875rem;
  color: var(--muted);
  max-width: 70ch;
}

.plist__ft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: .15rem;
}

/* ---- 17. MOTION ------------------------------------------------------ */

/* Base reveal: fade + rise */
.rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-soft), transform .9s var(--ease-out);
}

.rv.in {
  opacity: 1;
  transform: none;
}

/* Plotter wipe for headings */
.wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out);
}

.wipe.in { clip-path: inset(0 0 0 0); }

/* Stagger helper */
.rv[data-d="1"] { transition-delay: .07s; }
.rv[data-d="2"] { transition-delay: .14s; }
.rv[data-d="3"] { transition-delay: .21s; }
.rv[data-d="4"] { transition-delay: .28s; }
.rv[data-d="5"] { transition-delay: .35s; }

/* Scanline sweep across media on reveal */
.scan { position: relative; }

.scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--signal);
  box-shadow: 0 0 14px 2px var(--signal);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.scan > img,
.scan > video {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.15s var(--ease-out);
}

.scan.in > img,
.scan.in > video { clip-path: inset(0 0 0 0); }

.scan.in::after { animation: sweep 1.15s var(--ease-out) forwards; }

@keyframes sweep {
  0%   { opacity: 0;   transform: translateY(0); }
  12%  { opacity: .95; }
  85%  { opacity: .55; }
  100% { opacity: 0;   transform: translateY(var(--sweep-h, 400px)); }
}

/* Theme crossfade fallback for browsers without View Transitions */
html.theming,
html.theming *,
html.theming *::before,
html.theming *::after {
  transition:
    background-color .45s var(--ease-soft),
    border-color     .45s var(--ease-soft),
    color            .45s var(--ease-soft),
    fill             .45s var(--ease-soft),
    box-shadow       .45s var(--ease-soft) !important;
}

/* View Transitions crossfade */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: .45s;
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
  }
}

/* ---- 18. REDUCED MOTION & PRINT -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .rv,
  .wipe,
  .scan > img,
  .scan > video,
  .mast h1 .ln > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .head .draw,
  .tl__item::before { transform: scaleX(1) !important; }

  .scan::after { display: none !important; }
}

@media print {
  .topbar,
  .rail,
  .progress,
  .field,
  .modal,
  .totop { display: none !important; }

  body { background: #fff; color: #000; }

  .rv,
  .wipe {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  section[id] { page-break-inside: avoid; }
}

/* ---- 19. BUTTON-BASED MEDIA & ADDENDA -------------------------------- */

/* Media areas that open the lightbox are real buttons; strip UA chrome. */
button.card__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  font: inherit;
  text-align: left;
}

button.card__media:hover img { cursor: zoom-in; }

/* The hatch variant is also a button, but it lays out as a grid, so it keeps
   its own display and bottom rule rather than joining the reset above. */
button.card__hatch {
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

button.card__hatch:hover span,
button.card__hatch:focus-visible span {
  color: var(--text);
  border-color: var(--signal);
}

/* "View" badge over card media */
.card__badge {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .32rem .5rem;
  background: var(--signal);
  color: var(--signal-ink);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .3s var(--ease-soft), transform .35s var(--ease-out);
}

.card:hover .card__badge,
button.card__media:focus-visible .card__badge {
  opacity: 1;
  transform: none;
}

.card__badge svg {
  width: 11px;
  height: 11px;
  flex: none;
}

/* Large display type that is not a heading element */

.bigtype {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.85rem, 5.5vw, 3.35rem);
  line-height: 1.06;
  letter-spacing: -.045em;
  margin-bottom: 1rem;
}

.bigtype em {
  font-style: normal;
  color: var(--signal);
}

/* Gallery caption (span, since figcaption needs a figure parent) */
.shot .cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem .7rem .55rem;
  background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .5625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-out);
}

.shot:hover .cap,
.shot:focus-visible .cap {
  opacity: 1;
  transform: none;
}

/* Compact button for section headers and modal footers */
.btn--sm {
  padding: .55rem .85rem;
  font-size: .625rem;
  letter-spacing: .1em;
}

.btn--sm svg { width: 12px; height: 12px; }

/* Section-level "view all" action, sits under the header rule */
.sectact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-top: clamp(1.5rem, 3.5vw, 2.25rem);
}

.sectact p {
  font-size: .8125rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .card__badge,
  .shot .cap {
    opacity: 1 !important;
    transform: none !important;
  }
}