/* ── IRONFORM — monochrome 100vh study ─────────────────────── */

:root {
  --ink: oklch(0.16 0.004 260);        /* near-black, cool tint   */
  --ink-soft: oklch(0.28 0.004 260);
  --paper: oklch(0.94 0.002 260);      /* silver-white            */
  --paper-dim: oklch(0.94 0.002 260 / 0.62);
  --paper-faint: oklch(0.94 0.002 260 / 0.38);
  --hairline: oklch(0.94 0.002 260 / 0.18);
  --drawer-bg: oklch(0.13 0.004 260);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Marcellus", "Times New Roman", serif;
  --font-label: "Archivo", "Helvetica Neue", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--paper-dim);
  outline-offset: 4px;
}
.drawer:focus-visible { outline: none; }   /* focused programmatically on open */

html, body { height: 100%; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-label);
  overflow: hidden;                    /* single 100vh experience */
  -webkit-font-smoothing: antialiased;
}

/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

.hero-figure {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-figure img,
.hero-figure video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.04);
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out);
  will-change: transform;
  animation: hero-settle 1.8s var(--ease-out) both;
}

@keyframes hero-settle {
  from { transform: scale(1.12); opacity: 0; }
  to   { transform: scale(1.06); opacity: 1; }
}

.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, oklch(0.16 0.004 260 / 0.42), transparent 18%),
    linear-gradient(to top, oklch(0.16 0.004 260 / 0.5), transparent 22%);
}

/* ── Corners ───────────────────────────────────────────────── */

.corner {
  position: absolute;
  z-index: 3;
  animation: corner-in 1.4s var(--ease-out) 0.5s both;
}

@keyframes corner-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.corner--tl { top: clamp(1.25rem, 3.5vh, 2.5rem); left: clamp(1.25rem, 3.5vw, 3rem); }
.corner--tr { position: fixed; top: clamp(1.25rem, 3.5vh, 2.5rem); right: clamp(1.25rem, 3.5vw, 3rem); z-index: 12; }
.corner--bl { bottom: clamp(1.25rem, 3.5vh, 2.5rem); left: clamp(1.25rem, 3.5vw, 3rem); }
.corner--br { bottom: clamp(1.25rem, 3.5vh, 2.5rem); right: clamp(1.25rem, 3.5vw, 3rem); }

.wordmark {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.34em;
  color: var(--paper);
  text-decoration: none;
  transition: letter-spacing 0.6s var(--ease-out);
}
.wordmark:hover { letter-spacing: 0.46em; }
.wordmark-dot { color: var(--paper-faint); }

/* menu button */
.menu-btn {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper-dim);
  font-family: var(--font-label);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.75rem;
  margin: -0.75rem;
  transition: color 0.4s var(--ease-out);
}
.menu-btn:hover { color: var(--paper); }

.menu-btn-icon {
  position: relative;
  width: 22px;
  height: 10px;
  display: inline-block;
}
.menu-btn-icon i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out), width 0.5s var(--ease-out);
}
.menu-btn-icon i:nth-child(1) { top: 1px; }
.menu-btn-icon i:nth-child(2) { top: 8px; width: 60%; }
.menu-btn:hover .menu-btn-icon i:nth-child(2) { width: 100%; }

body.drawer-open .menu-btn-icon i:nth-child(1) { top: 4px; transform: rotate(45deg); }
body.drawer-open .menu-btn-icon i:nth-child(2) { top: 4px; width: 100%; transform: rotate(-45deg); }

/* corner links (bottom-left) */
.corner--bl {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.corner-link {
  position: relative;
  align-self: flex-start;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-label);
  color: var(--paper-dim);
  text-decoration: none;
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.35rem 0 calc(0.35rem + 2px);   /* generous hit area, same optical rhythm */
  margin: -0.35rem 0;
  transition: color 0.4s var(--ease-out);
}
.corner-link sup {
  font-size: 0.52rem;
  margin-right: 0.6em;
  color: var(--paper-faint);
  letter-spacing: 0.1em;
}
.corner-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.35rem;
  width: 100%;
  height: 1px;
  background: var(--paper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-out);
}
.corner-link:hover { color: var(--paper); }
.corner-link:hover::after { transform: scaleX(1); transform-origin: left; }

.meta-line {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.24em;
  color: var(--paper-faint);
  text-transform: uppercase;
}

/* ── Drawer ────────────────────────────────────────────────── */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;
  background: oklch(0.1 0.004 260 / 0.45);
  backdrop-filter: grayscale(1) brightness(0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
}
body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  height: 100%;
  width: min(30rem, 92vw);
  background: var(--drawer-bg);
  border-left: 1px solid var(--hairline);
  transform: translateX(102%);
  transition: transform 0.7s var(--ease-out);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
body.drawer-open .drawer { transform: translateX(0); }

.drawer-inner {
  padding: clamp(4.5rem, 12vh, 7rem) clamp(1.75rem, 4vw, 3.25rem) 2.5rem;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vh, 4rem);
  min-height: 100%;
}

.drawer-section {
  border-top: 1px solid var(--hairline);
  padding-top: 1.5rem;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
body.drawer-open .drawer-section { opacity: 1; transform: none; }
body.drawer-open .drawer-section:nth-child(1) { transition-delay: 0.18s; }
body.drawer-open .drawer-section:nth-child(2) { transition-delay: 0.28s; }
body.drawer-open .drawer-section:nth-child(3) { transition-delay: 0.38s; }

.drawer-index {
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  color: var(--paper-faint);
  margin-bottom: 0.7rem;
}

.drawer-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  letter-spacing: 0.06em;
  color: var(--paper);
  margin-bottom: 0.9rem;
}

.drawer-body {
  font-weight: 300;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--paper-dim);
  max-width: 34ch;
}

.drawer-list {
  list-style: none;
  margin-top: 1.4rem;
}
.drawer-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.72rem;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--paper);
}
.drawer-list li span {
  color: var(--paper-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.6rem;
}

.drawer-list--links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  transition: letter-spacing 0.5s var(--ease-out);
}
.drawer-list--links a:hover { letter-spacing: 0.14em; }
.drawer-list--links a span {
  font-family: var(--font-label);
  color: var(--paper-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.6rem;
}
.drawer-list--links li { padding: 0.8rem 0; }

.drawer-ca {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  transition: letter-spacing 0.5s var(--ease-out);
}
.drawer-ca:hover { letter-spacing: 0.14em; }
.drawer-ca span {
  font-family: var(--font-label);
  color: var(--paper-faint);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.6rem;
}

.drawer-mail {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.08em;
  border-bottom: 1px solid var(--paper-faint);
  padding-bottom: 3px;
  transition: border-color 0.4s var(--ease-out), letter-spacing 0.5s var(--ease-out);
}
.drawer-mail:hover { border-color: var(--paper); letter-spacing: 0.12em; }

/* feed — three-across grid, scrolls with the drawer */
.feed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  margin-top: 0.4rem;
}
.feed img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.04) brightness(0.92);
  transition: filter 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.feed img:hover {
  filter: grayscale(1) contrast(1.06) brightness(1.04);
}

.drawer-foot {
  margin-top: auto;
  padding-top: 2rem;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  color: var(--paper-faint);
  text-transform: uppercase;
}

/* ── Small screens ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .corner--br { display: none; }
  .hero-figure img,
  .hero-figure video { object-position: 42% 20%; }
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}