/* Second Sun — shared styles */

:root {
  --paper: #F2EFE8;
  --paper-intro: #DCD9D2;
  --ink: #1A1A1A;
  --grey: #6B6660;
  --hairline: #1A1A1A;
  --ochre: #B8923A;
  --pencil-blue: #5C6B7A;
  --nav-h: 120px;
  --gutter: 32px;

  --font-title: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-body:  'Space Mono',     ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

@media (max-width: 720px) {
  :root {
    --nav-h: 88px;
    --gutter: 20px;
  }
}

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

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Titles & headings — JetBrains Mono, uppercase, tight tracking, heavy weight */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Paper grain — heavy, animated, photocopy-stock feel.
   Applied site-wide on every page that ships a .grain element. */
.grain {
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.45;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0 0.05  0 0 0 0.95 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  will-change: transform;
  animation: grainShift 0.5s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  16%  { transform: translate(-8%, 5%); }
  33%  { transform: translate(6%, -7%); }
  50%  { transform: translate(-4%, -9%); }
  66%  { transform: translate(9%, 3%); }
  83%  { transform: translate(-7%, 7%); }
  100% { transform: translate(0, 0); }
}

/* No rounded corners. No shadows. */
* {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Page transition: simple cross-fade on load */
.page {
  animation: fade-in 420ms ease-out both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Nav ---------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--nav-h);
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  z-index: 100;
  background: var(--paper);
}

.nav-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  width: 18px;
  height: 18px;
  text-decoration: none;
  opacity: 1;
  transition: opacity 300ms ease-out;
}
.nav-ig:hover { opacity: 0.6; }
.nav-ig svg { display: block; width: 18px; height: 18px; }

.nav.over-dark {
  background: var(--paper);
  color: var(--ink);
}

.nav.over-dark .nav-link,
.nav.over-dark .nav-meta {
  color: var(--ink);
}

.nav.over-dark .nav-logo img {
  filter: none;
}



.nav-logo {
  display: inline-flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.nav-logo img {
  height: 118px;
  width: auto;
  display: block;
  /* keep raw — no filter, no effects */
}



@media (max-width: 720px) {
  .nav-logo img { height: 86px; }
}

.nav-links {
  display: flex;
  gap: 28px;
  justify-content: flex-end;
}

/* Nav links — applies to both inner-page (.nav-link) and homepage (.topbar-link) selectors */
.nav-link,
.topbar .topbar-link {
  position: relative;
  font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #1A1A1A;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 0;
  transition: letter-spacing 300ms ease-out;
}

.nav-link::after,
.topbar .topbar-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background-color: #1A1A1A;
  opacity: 0;
  transition: opacity 300ms ease-out;
}

.nav-link:hover,
.topbar .topbar-link:hover {
  letter-spacing: 0.3em;
  border-bottom-color: transparent;
}

.nav-link:hover::after,
.topbar .topbar-link:hover::after {
  opacity: 1;
}

.nav-link.active::after,
.topbar .topbar-link.active::after {
  opacity: 1;
}

/* Nav link grouping — 12px gap, far-right alignment, on every page */
.nav-links,
.topbar .topbar-side.right {
  gap: 12px;
}

/* Homepage top bar: switch from grid to flex so IG goes left, nav goes right,
   and the logo is absolutely centred independent of either side. */
.topbar {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.topbar .topbar-side.left  { flex: 0 0 auto; }
.topbar .topbar-side.right { flex: 0 0 auto; margin-left: 0; }

/* Homepage logo — true horizontal centre, decoupled from siblings */
.topbar > .topbar-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav-right {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  align-items: center;
}

.nav-meta {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}

.nav-meta:hover { border-bottom-color: currentColor; }

@media (max-width: 720px) {
  .nav { grid-template-columns: 1fr auto 1fr; }
  .nav-links { display: flex; gap: 14px; }
  .nav-link { font-size: 10px; }
  .nav-right { gap: 16px; }
  .nav-meta { font-size: 10px; }
}/* ---------- Footer ---------- */
.foot {
  margin-top: 120px;
  padding: 40px var(--gutter) 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--ink);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey);
}

.foot a {
  color: var(--grey);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.foot a:hover { border-bottom-color: var(--grey); }

.foot-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.foot-col.right { text-align: right; }

@media (max-width: 720px) {
  .foot { flex-direction: column; gap: 24px; align-items: flex-start; }
  .foot-col.right { text-align: left; }
}

/* ---------- Utility type ---------- */
.mono-caps {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.tiny { font-size: 10px; }
.small { font-size: 11px; }
.med { font-size: 13px; }

/* Hairline divider */
.rule {
  border: 0;
  border-top: 1px solid var(--ink);
}

/* ---------- Form (shared, used on Contact) ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
}

.field label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 14px;
  background: transparent;
  border: 0;
  color: var(--ink);
  outline: none;
  padding: 4px 0;
  width: 100%;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(26,26,26,0.32);
}

.field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 12px 8px;
  padding-right: 24px;
}

.field.invalid {
  border-bottom-color: var(--ochre);
}
.field.invalid label {
  color: var(--ochre);
}

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 16px 28px;
  cursor: pointer;
  transition: background 220ms ease, color 220ms ease;
}

.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* ---------- Page wrap ---------- */
.wrap {
  padding-top: var(--nav-h);
}

.intro-mark {
  height: 40px !important;
  width: auto;
  display: block;
  margin: 12px auto 0;
  transform: translateY(-70px);
  transition:
    opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Ink-dissolve: triggered the instant lift() adds .lifting to the intro overlay,
   which is the same frame the logo lift transition starts.
   Base translateY(-70px) is preserved inside the scale() so there's no position jump. */
.intro.lifting .intro-mark,
.intro-mark.intro-mark--dissolving {
  opacity: 0;
  transform: translateY(-70px) scale(1.1);
  filter: blur(4px);
}

.intro-logo {
  transform: translateY(40px);
}

/* Lift-landing fix: the JS formula (dx,dy = topbar − logo) is only correct when
   scale pivots through the LOGO's visual centre. Default transform-origin is the
   wrap's geometric centre, which sits 40px above the logo centre (because of the
   translateY(40px) above), so scaling pulled the logo 28.57px too high at landing.
   Pin the origin to the logo's visual centre — works at desktop and mobile because
   the wrap height tracks the logo height, and the 40px offset is constant. */
.intro-logo-wrap {
  transform-origin: 50% calc(50% + 40px);
}

.intro .intro-enter {
  border: 0;
  padding: 0;
  background: transparent;
  transform: translateY(-175px);
}

/* ---------- Intro timestamp ---------- */
.intro-timestamp {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  font-family: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6B6660;
  white-space: nowrap;
  pointer-events: none;
}