/* Editorial Tech — layout & framing (mobile-first) */

/* notice strip */
.notice {
  background: var(--ink);
  color: rgba(244, 241, 234, 0.78);
  text-align: center;
  font-family: var(--ff-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem var(--gut);
  border-bottom: 1px solid var(--line-inv);
}
.notice strong { color: var(--accent-on-dark); font-weight: 500; }

/* header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: backdrop-filter 0.4s, background 0.4s;
}
.site-header.is-scrolled { background: rgba(244, 241, 234, 0.92); backdrop-filter: blur(10px); }
.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-3);
  padding: 1.1rem 0;
}
.site-header__index {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.site-header__index span { color: var(--ink); }

.brand {
  display: inline-flex; align-items: baseline; gap: 0.7rem;
  font-family: var(--ff-display);
  font-size: 1.18rem;
  font-weight: 380;
  letter-spacing: -0.005em;
  justify-self: center;
}
.brand__mark {
  width: 28px; height: 28px;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  font-weight: 600;
  align-self: center;
  transform: translateY(-2px);
}
.brand__suffix { color: var(--mute); font-family: var(--ff-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; align-self: center; }

.nav {
  justify-self: end;
  display: flex; align-items: center; gap: 1.4rem;
}
.nav__links {
  list-style: none; margin: 0; padding: 0;
  display: none;
  gap: 1.4rem;
}
.nav__link {
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav__link:hover, .nav__link.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.nav__cta {
  display: none;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  transition: background 0.25s, color 0.25s;
}
.nav__cta:hover { background: var(--accent); border-color: var(--accent); }
.nav__toggle {
  display: flex; flex-direction: column;
  width: 38px; height: 38px;
  border: 1px solid var(--ink);
  align-items: center; justify-content: center;
}
.nav__toggle span, .nav__toggle::before, .nav__toggle::after {
  content: ''; display: block; width: 16px; height: 1px; background: var(--ink); margin: 2px 0;
}

@media (min-width: 921px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; align-items: center; }
  .nav__toggle { display: none; }
}

.drawer {
  position: fixed; inset: 0;
  background: var(--ink);
  color: var(--paper);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
  display: flex; flex-direction: column;
  padding: 5rem var(--gut) 2rem;
  gap: 1.5rem;
}
.drawer.is-open { transform: none; }
.drawer__close {
  position: absolute; top: 1rem; right: var(--gut);
  width: 38px; height: 38px;
  border: 1px solid var(--line-inv-strong);
  font-size: 1.4rem; line-height: 1;
}
.drawer__link {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 350;
  border-bottom: 1px solid var(--line-inv);
  padding-bottom: 0.6rem;
}

/* section */
.section { padding: var(--s-7) 0; position: relative; }
.section--tight { padding: var(--s-5) 0; }
.section--wide { padding: var(--s-8) 0; }

/* frame: outer container with thin inset frame and corner brackets */
.frame {
  position: relative;
  border: 1px solid var(--line-strong);
  padding: var(--s-5) var(--s-4);
}
.frame--inv { border-color: var(--line-inv-strong); }
.frame::before, .frame::after,
.frame > .frame__corner { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--ink); }
.frame--inv::before, .frame--inv::after,
.frame--inv > .frame__corner { border-color: var(--paper); }
.frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.frame::after { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.frame > .frame__corner.bl { bottom: -1px; left: -1px; top: auto; border-right: 0; border-top: 0; }
.frame > .frame__corner.br { bottom: -1px; right: -1px; top: auto; border-left: 0; border-top: 0; }

/* asymmetric grids — mobile default: 1 column */
.grid-12 {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gut);
  row-gap: var(--s-4);
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { grid-column: 1 / -1; }
.col-start-2, .col-start-3, .col-start-4,
.col-start-5, .col-start-6, .col-start-7 { grid-column-start: 1; }

@media (min-width: 881px) {
  .grid-12 { grid-template-columns: repeat(12, 1fr); }
  .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; }
  .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; }
  .col-start-2 { grid-column-start: 2; } .col-start-3 { grid-column-start: 3; } .col-start-4 { grid-column-start: 4; }
  .col-start-5 { grid-column-start: 5; } .col-start-6 { grid-column-start: 6; } .col-start-7 { grid-column-start: 7; }
}

/* split — mobile default: stacked */
.split, .split--rev {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gut);
  align-items: start;
}
.split--center { align-items: center; }

@media (min-width: 881px) {
  .split { grid-template-columns: 5fr 7fr; }
  .split--rev { grid-template-columns: 7fr 5fr; }
}

/* footer — mobile default: 1 column */
.footer { background: var(--ink); color: var(--paper); padding: var(--s-7) 0 var(--s-4); border-top: 1px solid var(--line-inv); }
.footer__top {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line-inv);
}

@media (min-width: 541px) {
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 881px) {
  .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
}

.footer__col h4 {
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.55);
  margin-bottom: 1.2rem; font-weight: 500;
}
.footer__col a {
  display: block;
  padding: 0.4rem 0;
  color: rgba(244, 241, 234, 0.85);
  border-bottom: 1px solid var(--line-inv);
  transition: color 0.2s, padding 0.2s;
}
.footer__col a:hover { color: var(--accent-2); padding-left: 0.4rem; }
.footer__about { color: rgba(244, 241, 234, 0.65); max-width: 36ch; margin-top: 1rem; font-size: 0.94rem; }
.footer__address { font-style: normal; color: rgba(244, 241, 234, 0.78); line-height: 1.7; font-size: 0.94rem; }
.footer__address a { display: inline; padding: 0; border: 0; }
.footer__bottom {
  padding-top: var(--s-3);
  display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: var(--fs-mono); letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(244, 241, 234, 0.5);
}
.footer__legal { display: flex; gap: 1.6rem; }
.footer__legal a { color: rgba(244, 241, 234, 0.7); }
.footer__legal a:hover { color: var(--accent-2); }

/* logo (brand) */
.brand__logo {
  display: inline-block;
  height: clamp(44px, 5vw, 60px); margin: -8px 0;
  width: auto;
  object-fit: contain;
  vertical-align: middle;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; }