:root {
  --paper: #f7f6f2;
  --ink: #111;
  --grey: #8b8b87;
  --hairline: rgba(0,0,0,.16);
}

* { box-sizing: border-box; }

html, body {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
  -webkit-font-smoothing: antialiased;
}

a, a:visited {
  color: inherit !important;
  text-decoration: none !important;
}

/* ───────── LEFT EDITORIAL RAIL ───────── */

#menu {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 310px !important;
  height: 100vh !important;
  overflow-y: auto !important;
  z-index: 20 !important;
  background: var(--paper) !important;
  border: 0 !important;
}

#menu .container {
  padding: 46px 42px 55px 48px !important;
}

#menu .container > p:first-of-type {
  display: none !important;
}

.editorial-brand {
  margin-bottom: 42px;
}

.editorial-brand .name {
  font-family: "Times New Roman", Times, serif;
  font-size: 50px;
  line-height: .82;
  letter-spacing: -.055em;
  font-weight: 400;
}

.editorial-brand .name span {
  display: block;
}

.editorial-brand .sub {
  margin-top: 18px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.editorial-slash {
  width: 1px;
  height: 52px;
  margin: 0 0 35px 14px;
  background: var(--ink);
  transform: rotate(22deg);
  transform-origin: center;
  opacity: .45;
}

/* PROJECT INDEX */

#menu ul:first-of-type {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#menu ul:first-of-type li {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 28px 1fr !important;
  align-items: baseline !important;
  gap: 6px !important;
  margin: 0 0 9px !important;
  padding: 0 !important;
  font-family: "Courier New", monospace !important;
  font-size: 9px !important;
  line-height: 1.15 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #8c8b87 !important;
}

#menu ul:first-of-type li::before {
  content: attr(data-no);
  color: #a5a39e;
  font-size: 8px;
}

#menu ul:first-of-type li a {
  color: inherit !important;
  transition: transform .2s ease, color .2s ease;
}

#menu ul:first-of-type li:hover a {
  transform: translateX(5px);
  color: var(--ink) !important;
}

#menu ul:first-of-type li.active,
#menu ul:first-of-type li.is-current {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

#menu ul:first-of-type li.active a::before,
#menu ul:first-of-type li.is-current a::before {
  content: "—";
  display: inline-block;
  margin-right: 10px;
}

/* Hide old menu clutter */

#menu li.section-title,
#menu ul:not(:first-of-type),
#menu p img {
  display: none !important;
}

.editorial-contact {
  margin-top: 40px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* ───────── CONTENT / IMAGE ───────── */

#content {
  min-height: 100vh !important;
  margin: 0 76px 0 310px !important;
  padding: 0 !important;
  background: transparent !important;
}

#content .container {
  width: 100% !important;
  max-width: none !important;
  padding: 46px 0 120px 26px !important;
}

#img-container,
#s1 {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#img-container .nav {
  display: none !important;
}

#img-container img,
#s1 img,
#content img.nothumb,
#content .nothumb img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 430px) !important;
  max-height: calc(100vh - 150px) !important;
  object-fit: contain !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* The giant magazine folio number */

.editorial-issue {
  position: fixed;
  z-index: 40;
  left: 255px;
  bottom: -12px;
  font-family: "Times New Roman", Times, serif;
  font-size: clamp(125px, 12vw, 210px);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.085em;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Caption below / overlapping image */

.editorial-caption {
  position: fixed;
  z-index: 30;
  left: 38%;
  bottom: 28px;
  display: flex;
  align-items: baseline;
  gap: 28px;
  pointer-events: none;
}

.editorial-caption .title {
  font-family: "Courier New", monospace;
  font-size: 18px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.editorial-caption .meta {
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .32em;
  color: var(--grey);
  text-transform: uppercase;
}

/* RIGHT VERTICAL NAV */

.editorial-side-nav {
  position: fixed;
  right: 20px;
  top: 42px;
  bottom: 42px;
  width: 38px;
  z-index: 50;
  border-left: 1px solid var(--hairline);
  pointer-events: none;
}

.editorial-side-nav a {
  position: absolute;
  left: 14px;
  pointer-events: auto;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  color: var(--ink) !important;
}

.editorial-side-nav .prev {
  top: 0;
  transform: rotate(180deg);
}

.editorial-side-nav .next {
  bottom: 0;
}

.editorial-side-nav a:hover {
  opacity: .4;
}

/* tiny folio top-right */

.editorial-folio {
  position: fixed;
  top: 18px;
  right: 30px;
  z-index: 55;
  font-family: "Courier New", monospace;
  font-size: 8px;
  letter-spacing: .18em;
}

/* hover image: almost imperceptible fashion-site motion */

#img-container img,
#s1 img {
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
  transform-origin: center;
}

#img-container img:hover,
#s1 img:hover {
  transform: scale(1.006);
}

/* MOBILE */

@media (max-width: 800px) {
  #menu {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  #menu .container {
    padding: 28px 22px !important;
  }

  .editorial-brand .name {
    font-size: 42px;
  }

  #menu ul:first-of-type {
    columns: 2;
    column-gap: 22px;
  }

  #menu ul:first-of-type li {
    break-inside: avoid;
  }

  #content {
    margin: 0 !important;
    padding: 0 20px 80px !important;
  }

  #content .container {
    padding: 10px 0 !important;
  }

  #img-container img,
  #s1 img,
  #content img {
    max-width: 100% !important;
    max-height: none !important;
  }

  .editorial-issue {
    position: relative;
    left: auto;
    bottom: auto;
    margin: 25px 0 -10px;
    font-size: 110px;
  }

  .editorial-caption {
    position: relative;
    left: auto;
    bottom: auto;
    padding: 25px 0;
    display: block;
  }

  .editorial-caption .title {
    display: block;
    margin-bottom: 9px;
  }

  .editorial-side-nav,
  .editorial-folio {
    display: none;
  }
}


/* MAGAZINE_GALLERY_CSS_START */

#s1 {
  cursor: e-resize;
}

.editorial-photo-counter {
  position: fixed;
  z-index: 60;
  right: 76px;
  bottom: 29px;
  font-family: "Courier New", monospace;
  font-size: 9px;
  letter-spacing: .22em;
  color: #777;
  pointer-events: none;
}

@media (max-width: 800px) {
  .editorial-photo-counter {
    position: fixed;
    right: 18px;
    bottom: 18px;
    padding: 7px 9px;
    background: rgba(247,246,242,.88);
  }
}

/* MAGAZINE_GALLERY_CSS_END */

/* AWESOME SERIF */

@font-face {
  font-family: "Awesome Serif ExtraTall";
  src: url("fonts/awesome/Awesome Serif ExtraTall Book.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Awesome Serif ExtraTall";
  src: url("fonts/awesome/Awesome Serif ExtraTall Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Awesome Serif ExtraTall";
  src: url("fonts/awesome/Awesome Serif ExtraTall Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.editorial-brand .name,
.mobile-topbar-name,
.editorial-issue {
  font-family: "Awesome Serif ExtraTall", Georgia, serif !important;
}

.editorial-brand .name {
  font-weight: 400 !important;
}

.editorial-issue {
  font-weight: 400 !important;
}

.editorial-caption .title {
  font-family: "Awesome Serif ExtraTall", Georgia, serif !important;
  font-weight: 500 !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
}