/* ══════════════════════════════════════════════════════
   nh-menu.css — additions to nh.css (October 2026)
   Work: two large cards. Category indexes: one card per project.
   Project pages: back / next.
   ══════════════════════════════════════════════════════ */

/* Small white rule under the card label, lengthening on hover */
.menu-card-label { flex-direction: column; gap: 10px; }
.menu-card-rule {
  display: block; width: 18px; height: 3px; background: rgba(255,255,255,0.88);
  transition: width 0.6s cubic-bezier(.2,.7,.2,1);
}
.menu-card:hover .menu-card-rule,
.menu-card:focus-visible .menu-card-rule { width: 40px; }

/* Work: the two cards at twice the size (two columns each) */
.menu-grid--work .menu-card-wrap:nth-child(1) { grid-column: 1 / span 2; }
.menu-grid--work .menu-card-wrap:nth-child(2) { grid-column: 3 / span 2; }
@media (orientation: portrait), (max-width: 812px) {
  .menu-grid--work { grid-template-columns: 1fr; }
  .menu-grid--work .menu-card-wrap:nth-child(1),
  .menu-grid--work .menu-card-wrap:nth-child(2) { grid-column: auto; }
}

/* Project cards: an image detail instead of a film */
.menu-card img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; max-width: none;
}

/* Project pages: back to the category, next project */
.nh-next {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 40px;
  margin-top: 56px;
}
.nh-next a { color: #111110; text-decoration: none; }
.nh-next a:hover { opacity: 0.5; }
.nh-next-back, .nh-next-link small {
  font-weight: 700; font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
}
.nh-next-link { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.nh-next-link small { color: rgba(17,17,16,0.6); }
.nh-next-link span {
  font-weight: 900; font-size: clamp(27px, 3.6vw, 52px); line-height: 0.88;
  letter-spacing: -0.025em; text-transform: uppercase;
}
.nh-crumb a { color: inherit; text-decoration: none; }
.nh-crumb a:hover { opacity: 0.5; }
@media (orientation: portrait), (max-width: 812px) {
  .nh-next { flex-direction: column-reverse; align-items: stretch; gap: 28px; }
}

/* ══ v2 — spacing on the line of NH and of the menu ══ */
/* Work: card names in the size of the menu */
.menu-grid--work .menu-card-label { font-size: 10px; letter-spacing: 0.04em; }
/* Menus with cards: the same gap above the grid as below it (before the small end rule) */
.nh-menu-page .s-intro, .nh-menu-page .s-intro.mod-intro-page { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.nh-menu-page .menu-grid { margin-top: var(--gap); }
/* Project pages start directly with the thick rule and the title */
.nh-project-page .s-intro { display: none; }
/* Home: click anywhere opens the work */
body.nh-home .col-center { cursor: pointer; }

/* ══ v3 — one page head everywhere (except the home) ══ */
.col-center hr.nh-head-rule { margin: 0 0 20px auto !important; }
.col-center .nh-head { margin: 0 0 var(--gap) !important; padding: 0 !important; text-align: right; }
.col-center .nh-head .brand-name { margin: 0 !important; padding: 0 !important; }
.nh-head + .s-intro, .nh-head + .s-intro.mod-intro-page { padding-top: 0 !important; }
.nh-head + .menu-grid { margin-top: 0 !important; }
/* Work, Agency & Campaigns, Global Brand Direction: large cards, two per row */
.menu-grid--big .menu-card-wrap { grid-column: span 2; }
.menu-grid--big .menu-card-label { font-size: 10px; letter-spacing: 0.04em; }
@media (orientation: portrait), (max-width: 812px) {
  .menu-grid--big { grid-template-columns: 1fr; }
  .menu-grid--big .menu-card-wrap { grid-column: auto; }
}
.nh-head + .cv-wrap, .nh-head + .contact-wrap, .nh-head + .s-intro + .contact-wrap { padding-top: 0 !important; margin-top: 0 !important; }
/* GBD single pages: the small intro sits under the page's own first title */
.s-intro.nh-intro-after { padding-top: 0 !important; margin: 0 0 var(--gap) !important; }
.nh-head + .s-intro.nh-intro-after { margin-top: 0 !important; }
.brand-header.nh-head, h2.nh-head { margin-bottom: 20px !important; }

/* ══ v4 — rule as long as its title, double space under every title ══ */
:root { --nh-title-after: 40px; }
.col-center .nh-head,
.col-center .brand-header.nh-head,
.col-center h2.nh-head { margin-bottom: var(--nh-title-after) !important; }
.nh-head + .s-intro.nh-intro-after { margin-top: 0 !important; }
.s-intro.nh-intro-after + .menu-grid { margin-top: var(--gap) !important; }
.s-intro.nh-intro-after + .menu-grid { margin-top: var(--gap) !important; }

/* ══ New campaign pages (Swiss Pristine, Eye Architects) ══ */
.nh-cp { display: flex; flex-direction: column; gap: var(--gap); }
.nh-cp img, .nh-cp video { display: block; width: 100%; height: auto; max-width: 100%; }
.nh-cp-film { position: relative; aspect-ratio: 16 / 9; background: #111110; overflow: hidden; }
.nh-cp-film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nh-cp-grid { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
.nh-cp-grid--2 { grid-template-columns: repeat(2, 1fr); }
.nh-cp-grid img { aspect-ratio: var(--ar, auto); object-fit: cover; }
.nh-cp-text { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.nh-cp-text .t-mixed-line { margin: 0; }
.nh-cp-copy p { font-size: 12px; line-height: 1.6; color: rgba(17,17,16,0.75); margin: 0 0 12px; max-width: 46ch; }
.nh-cp-label { font-weight: 700; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; margin: 0 0 10px; color: #111110; }
.nh-cp-credits { font-size: 9px; line-height: 1.9; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(17,17,16,0.5); margin: 0; }
.nh-cp-credits a { color: inherit; }
.nh-cp .nh-rule-small { width: 56px; border: 0; border-top: 10px solid #111110; margin: 18px 0 0; }
@media (orientation: portrait), (max-width: 812px) {
  .nh-cp-grid, .nh-cp-grid--2, .nh-cp-text { grid-template-columns: 1fr; }
}
/* campaign pages v2 */
.nh-cp-grid--4 { grid-template-columns: repeat(4, 1fr); }
.nh-cp-grid video { width: 100%; aspect-ratio: var(--ar, 1/1); object-fit: cover; display: block; }
.nh-cp-mix { display: grid; gap: 20px; grid-template-columns: 1fr 2fr; }
.nh-cp-mix--rev { grid-template-columns: 2fr 1fr; }
.nh-cp-mix > * { aspect-ratio: auto; }
.nh-cp-mix img { width: 100%; height: 100%; object-fit: cover; }
.nh-cp-mix .sq { aspect-ratio: 1 / 1; }
.nh-cp-section { font-weight: 700; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(17,17,16,0.55); margin: 20px 0 -8px; }
@media (orientation: portrait), (max-width: 812px) {
  .nh-cp-grid--4 { grid-template-columns: 1fr 1fr; }
  .nh-cp-mix, .nh-cp-mix--rev { grid-template-columns: 1fr; }
}
/* mobile: the thick rules stay thick */
@media (orientation: portrait), (max-width: 812px) {
  .col-center hr.rule-main, .col-center hr.nh-head-rule, .col-center hr.end-rule {
    border: 0 !important; border-top: var(--rule-thick, 10px) solid #111110 !important; height: 0 !important;
  }
}
/* mobile: the white band that masks the top of the scroll (8px) was covering the first
   8px of the opening rule, leaving a hairline. The rule now starts below that band. */
@media (orientation: portrait), (max-width: 812px) {
  .col-center hr.nh-head-rule { margin-top: 16px !important; }
}
/* Dior pages: caption beside a minor image on the right third */
.nh-minor-row { display: grid; grid-template-columns: 2fr 1fr; gap: var(--gap); align-items: end; margin-top: var(--gap); }
.nh-minor-row .brand-caption { margin-top: 0 !important; }
.nh-minor-row img { width: 100%; display: block; }
@media (orientation: portrait), (max-width: 812px) { .nh-minor-row { grid-template-columns: 1fr; } }
/* Natalie Portman images: the two right thirds, aligned on the three-image grid above */
.nh-minor-row { grid-template-columns: repeat(3, 1fr); }
.nh-minor-row > .brand-caption { grid-column: 1; }
.nh-minor-row > img { grid-column: 2 / span 2; }
@media (orientation: portrait), (max-width: 812px) {
  .nh-minor-row { grid-template-columns: 1fr; }
  .nh-minor-row > .brand-caption, .nh-minor-row > img { grid-column: auto; }
}