/* Home: the wetnote opening spread, then the classic body (see classic.css). Builds on wetnote.css tokens. */

/* quiet professional paths under the cover nav */
.pronav {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 22px;
  max-width: 1480px;
  margin: -6px auto 0;
  padding: 0 var(--gutter) 14px;
  font-size: 13px;
}
.pronav a { color: var(--cover-dim); text-decoration: none; }
.pronav a:hover { color: var(--cover-hi); text-decoration: underline; }

.spread--open { grid-template-columns: minmax(0, 1.2fr) 38px minmax(0, 1fr); }

/* opening plate: the photograph fills the left page */
.page--plate { display: flex; padding: clamp(18px, 2.4vw, 32px); }
.fig--fill { display: flex; flex-direction: column; flex: 1; margin: 0; }
.fig--fill img {
  flex: 1;
  width: 100%;
  min-height: min(68vh, 640px);
  object-fit: cover;
  object-position: 50% 40%;
}

.open-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: 26px; }
.open-actions .cta { margin-top: 0; text-decoration: none; }

.textlink {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 700;
  color: var(--ink-text);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink-line);
  padding-bottom: 1px;
  transition: border-color var(--t-fast) var(--ease-out);
}
.textlink:hover { border-bottom-color: var(--ink-text); }
.textlink svg { font-size: 1em; }

/* printed contents table: the home's navigation */
.contents { width: 100%; border-collapse: collapse; margin-top: 30px; }
.contents caption {
  caption-side: top; text-align: left; padding-bottom: 8px;
  font-stretch: var(--cond); font-weight: 800; font-size: 15px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-text);
}
.contents tr { border-bottom: 1px solid var(--ink-line); }
.contents tr:first-child { border-top: 1.5px solid var(--ink); }
.contents td { padding: 10px 0; vertical-align: middle; }
.contents .c-n {
  width: 42px;
  font-stretch: var(--cond); font-weight: 800; color: var(--ink-text);
}
.contents a { font-weight: 600; text-decoration: none; }
.contents a:hover { text-decoration: underline; text-decoration-color: var(--ink-line); }
.contents .c-tick { width: 36px; text-align: right; }
.contents .c-tick svg { width: 22px; height: 16px; }
.contents .c-tick path {
  fill: none; stroke: var(--graphite); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 40; stroke-dashoffset: 40;
  transition: stroke-dashoffset 520ms var(--ease-out);
}
.contents tr.is-read .c-tick path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .contents .c-tick path { transition: none; } }

/* model blocks on content spreads */
.model {
  margin: 18px 0 6px;
  font-stretch: var(--wide);
  font-weight: 820;
  font-size: clamp(1.35rem, 1.9vw, 1.75rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.fig--cut { display: grid; place-items: center; margin: 0; }
.fig--cut img { width: auto; height: min(56vh, 520px); border: 0; }
.price { font-weight: 800; font-size: 1.15rem; margin: 10px 0 0; }
.price span { font-weight: 400; font-size: 15px; color: var(--graphite-soft); }
.links { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.links--all { padding-top: 16px; border-top: 1px solid var(--ink-line); margin-top: 22px; }

/* ruled two-column lists */
.lineup { width: 100%; border-collapse: collapse; margin-top: 18px; border-top: 1.5px solid var(--ink); }
.lineup th, .lineup td { padding: 10px 0; border-bottom: 1px solid var(--ink-line); vertical-align: top; text-align: left; }
.lineup th { width: 36%; padding-right: 14px; font-weight: 700; }
.lineup th a { color: var(--ink-text); text-decoration: none; }
.lineup th a:hover { text-decoration: underline; }

/* printed gear list */
.kit { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--ink); }
.kit td { padding: 12px 0; border-bottom: 1px solid var(--ink-line); vertical-align: middle; }
.kit__img { width: 116px; padding-right: 16px !important; }
.kit__img img { width: 100px; height: 72px; object-fit: cover; border: 1px solid var(--ink-line); background: #fff; }
.kit a { text-decoration: none; color: var(--ink-text); }
.kit a:hover b { text-decoration: underline; }
.kit b { font-weight: 800; font-size: 1.05rem; }
.kit span { display: block; margin-top: 2px; font-size: 15px; color: var(--graphite); }

/* field log of real news */
.log { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 15px; }
.log caption {
  caption-side: top; text-align: left; padding-bottom: 8px;
  font-stretch: var(--cond); font-weight: 800; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-text);
}
.log tr:first-child td { border-top: 1.5px solid var(--ink); }
.log td { padding: 9px 0; border-bottom: 1px solid var(--ink-line); vertical-align: top; }
.log td:first-child { width: 40%; padding-right: 14px; font-weight: 700; }
.log a { color: var(--ink-text); text-decoration: none; }
.log a:hover { text-decoration: underline; }

/* product index: square ruled cells, white tiles on the light ground (classic layer) */
.index {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px;
  background: var(--ink-line);
  border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--ink-line);
}
.index li { background: var(--ground, #fff); }
.index a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 1; padding: 12px 10px 16px; text-decoration: none; transition: background var(--t-fast) var(--ease-out); }
.index a:hover { background: var(--ink-wash); }
.index img { width: 100%; max-width: 150px; aspect-ratio: 1; object-fit: contain; background: #fff; mix-blend-mode: multiply; }
.index span { font-weight: 700; font-size: 15px; text-align: center; line-height: 1.25; }
.index-more { margin-top: 18px; font-size: 14.5px; color: var(--graphite-soft); }
.index-more a { color: var(--ink-text); }

.checks a { color: var(--ink-text); text-decoration: none; }
.checks a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .pronav { justify-content: flex-start; margin-top: 0; }
  .spread--open { grid-template-columns: minmax(0, 1fr); }
  .fig--fill img { min-height: 0; aspect-ratio: 765 / 724; }
  .fig--cut img { height: 52vh; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kit__img { width: 92px; }
  .kit__img img { width: 80px; height: 60px; }
}

/* classic body tweaks for the home */
.classic .kit__img img { border: 1px solid var(--rule-band); }
.classic .fig--cut img { height: min(60vh, 560px); }
.classic .model { margin-top: 22px; }

/* ───────── Notebook: paged wetnote with a 3D page turn ───────── */

.notebook { max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); }
.notebook__stack { position: relative; display: grid; perspective: 2600px; }
.notebook__stack > .nb-spread { grid-area: 1 / 1; }
.nb-spread {
  grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
  max-width: none; margin: 0; padding: 0;
  visibility: hidden;
}
.nb-spread.is-current, .nb-spread.is-under { visibility: visible; }
.nb-spread.is-current { z-index: 2; }
.nb-spread.is-under { z-index: 1; }
.nb-spread .page { min-height: min(80vh, 780px); position: relative; }
.nb-spread .page.is-lifted { visibility: hidden; }

.page--white .fig--fill img { background: #fff; }
.fig--contain img { object-fit: contain; background: #fff; }
.nb-lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.45; margin: 18px 0 0; max-width: 40ch; }
.nb-checks { margin-top: 16px; }
.nb-lineup { margin-top: 22px; }
.nb-lineup td { text-align: right; font-weight: 700; white-space: nowrap; }
.nb-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-self: center; width: 100%; }
.nb-pair img { background: #fff; border: 1px solid var(--ink-line); }
.page--white { align-items: center; }
.nb-kit { margin-top: 22px; }
.nb-kit td { padding: 14px 0; }
.nb-gloves { margin-top: 24px; }
.nb-gloves img { aspect-ratio: 1200 / 540; object-fit: cover; }

/* the turning leaf */
.nb-leaf {
  position: absolute; z-index: 5;
  transform-style: preserve-3d;
  pointer-events: none;
  will-change: transform;
}
.nb-leaf__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
.nb-leaf__face > .page { height: 100%; min-height: 0 !important; margin: 0; }
.nb-leaf__face--back { transform: rotateY(180deg); }
/* shade grows as the leaf stands up from the page */
.nb-leaf__face::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.22), transparent 45%);
  opacity: var(--shade, 0);
}
.nb-leaf__face.is-left::after { background: linear-gradient(270deg, rgb(0 0 0 / 0.22), transparent 45%); }
/* the punched holes travel with the turning page */
.nb-leaf__face > .page::before {
  content: ""; position: absolute; z-index: 3;
  top: 10px; bottom: 10px; width: 14px;
  background-size: 14px 28px; background-repeat: no-repeat space;
  pointer-events: none;
}
.nb-leaf__face.is-right > .page::before { left: 6px; background-image: radial-gradient(circle at 7px 20px, var(--cover) 0 4px, transparent 4.6px); }
.nb-leaf__face.is-left > .page::before { right: 6px; background-image: radial-gradient(circle at 7px 6px, var(--cover) 0 4px, transparent 4.6px); }
.nb-leaf__face > .page { position: relative; }

/* dog-ear: grab it and carry the page */
.nb-corner {
  position: absolute; bottom: 0; z-index: 4;
  width: 46px; height: 46px; padding: 0;
  border: 0; cursor: grab; touch-action: none;
  background: linear-gradient(var(--corner-dir, 135deg), transparent 50%, #c9ced2 50%, #dfe3e5 70%);
  transition: width 220ms var(--ease-out), height 220ms var(--ease-out);
}
.nb-corner:hover, .nb-corner:focus-visible { width: 68px; height: 68px; }
.nb-corner:active { cursor: grabbing; }
.nb-corner--next { right: 0; border-bottom-right-radius: var(--radius-page); }
.nb-corner--prev { left: 0; --corner-dir: 225deg; border-bottom-left-radius: var(--radius-page); }
.nb-corner::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(var(--corner-dir, 135deg), transparent 49%, rgb(38 41 44 / 0.25) 50%, transparent 54%);
}
@media (max-width: 900px) { .nb-corner { display: none; } }

.nb-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 18px 0 6px;
}
.nb-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px; font-size: 22px;
  color: var(--cover-hi); background: transparent;
  border: 1.5px solid rgb(232 235 233 / 0.35); border-radius: 50%;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.nb-btn:hover:not(:disabled) { background: var(--ink-text); border-color: var(--ink-text); }
.nb-btn:disabled { opacity: 0.3; cursor: default; }
.nb-dots { list-style: none; display: flex; gap: 10px; margin: 0; padding: 0; }
.nb-dots button {
  width: 30px; height: 6px; padding: 0;
  background: rgb(232 235 233 / 0.28); border: 0; border-radius: 3px; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), width var(--t-mid) var(--ease-out);
}
.nb-dots button[aria-current="true"] { width: 46px; background: var(--cover-hi); }
.nb-dots button:hover { background: rgb(232 235 233 / 0.6); }

@media (max-width: 900px) {
  .nb-spread { grid-template-columns: minmax(0, 1fr) !important; }
  .notebook__stack { display: block; }
  .nb-spread:not(.is-current) { display: none; }
  .nb-spread .page { min-height: 0; }
  .nb-spread .page--plate { min-height: 0; }
  .nb-pair { gap: 10px; }
  .notebook__stack { perspective: 1600px; }
  .nb-spread.is-flip-out { animation: nb-out 380ms var(--ease-out) forwards; transform-origin: 50% 50%; }
  .nb-spread.is-flip-in { animation: nb-in 420ms var(--ease-out) forwards; transform-origin: 50% 50%; }
}
@keyframes nb-out { to { transform: rotateY(-75deg); opacity: 0; } }
@keyframes nb-in { from { transform: rotateY(75deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* wide photographic bands in the classic body */
.band-sec--wide { padding-top: 0; }
.widefig { margin: 0 0 28px; }
.widefig img { display: block; width: 100%; height: clamp(300px, 40vw, 640px); object-fit: cover; border: 0; }
#techfin .widefig img { object-position: 50% 60%; }
#azienda .widefig img { object-position: 50% 70%; }
.widefig__cap { margin: 0 0 18px; font-size: 14px; color: var(--graphite-soft); }

/* wide photographs carry a printed title on their dark side */
.widefig { position: relative; }
#ratio .widefig img { height: auto; aspect-ratio: 2560 / 1080; max-height: none; }
.widefig__over {
  position: absolute; top: 50%; transform: translateY(-50%);
  max-width: min(440px, 36%);
  color: #fff;
}
.widefig__over--right { right: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter))); }
.widefig__over--left { left: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter))); top: 34%; }
.widefig__title {
  margin: 0; padding-bottom: 14px;
  font-stretch: var(--wide); font-weight: 860;
  font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: 0.92; letter-spacing: -0.03em;
  border-bottom: 2px solid var(--ink);
}
.widefig__sub { margin: 14px 0 0; font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.4; color: rgb(255 255 255 / 0.9); }
.widefig__over .textlink { margin-top: 18px; color: #fff; border-bottom-color: var(--ink); }
.widefig__over .textlink:hover { border-bottom-color: #fff; }
@media (max-width: 900px) {
  .widefig__over { position: static; transform: none; max-width: none; color: var(--graphite); padding: 18px var(--gutter) 0; }
  .widefig__sub { color: var(--graphite); }
  .widefig__over .textlink { color: var(--ink-text); }
}
.widefig__over--right { max-width: min(360px, 24%); }
#ratio .widefig__title { font-size: clamp(2.2rem, 4.2vw, 4.2rem); }
#techfin { padding-bottom: 0; }
#techfin .widefig { margin-bottom: 0; }

/* military band: the sky is light, so the title sits on a soft dark scrim at left */
#campo .widefig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(21 22 23 / 0.62), rgb(21 22 23 / 0.28) 40%, transparent 62%);
}
.widefig__over { z-index: 1; }
.widefig__over--mid { top: 50%; }
@media (max-width: 900px) { #campo .widefig::after { display: none; } }

/* iX3M 2: anchor the title to the photograph's own dark right edge, clear of the diver */
#ratio .widefig__over--right { right: 6%; left: auto; width: min(360px, 22%); max-width: none; }
@media (max-width: 900px) { #ratio .widefig__over--right { width: auto; } }

/* ── review fixes ── */
/* 1. phones: the notebook keeps its product names (the hide rule belongs to the configurator) */
@media (max-width: 900px) {
  .home .title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
}
/* 3. wide photographs meet the band before them: classic.css loads later, so be specific */
.band-sec.band-sec--wide { padding-top: 0; }
.band-sec.band-sec--wide .widefig { margin-bottom: 0; }
.band-sec.band-sec--wide > .wrap { padding-top: 28px; }
#techfin.band-sec--wide { padding-bottom: 0; }
/* 6. the Fig. label sits on the photograph's lower edge, never on a heading */
.widefig__cap { margin: 0; padding: 10px 0 0; font-size: 14px; color: var(--graphite-soft); }
.widefig__cap .wrap { display: block; }
#techfin .widefig__cap { display: none; }
/* 5. notebook pages 2–5: content stands centred on the page, with a printed folio */
.nb-spread:not(:first-child) .page--sheet { justify-content: center; }
/* titles size to the page itself, so "Rottamazione" always fits */
.nb-spread .page--sheet { container-type: inline-size; }
.nb-spread:not(:first-child) .title { font-size: min(4.4rem, 9.6cqi); overflow-wrap: anywhere; }
.nb-folio {
  position: absolute; left: clamp(24px, 3.4vw, 52px); right: clamp(24px, 3.4vw, 52px); bottom: 22px; margin: 0;
  padding-top: 10px; border-top: 1px solid var(--ink-line);
  font-stretch: var(--cond); font-weight: 800; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-text);
}
@media (max-width: 900px) { .nb-folio { position: static; margin-top: 26px; } }
.fig--contain img { object-fit: contain; padding: 4%; }
/* 8. one scale for every product tile; phones keep cells compact */
.index img { mix-blend-mode: normal; max-width: 140px; }
@media (max-width: 900px) {
  .index a { aspect-ratio: auto; padding: 14px 8px; }
  .index img { max-width: 110px; }
}

/* company band: title on the sky, top left, on a soft scrim */
#azienda .widefig::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(21 22 23 / 0.55), rgb(21 22 23 / 0.15) 45%, transparent 65%);
}
.widefig__over--top { top: 9%; transform: none; max-width: min(520px, 44%); }
@media (max-width: 900px) { #azienda .widefig::after { display: none; } .widefig__over--top { max-width: none; } }
@media (max-width: 900px) { .nb-folio { order: 99; } }
@media (min-width: 901px) {
  #azienda .widefig__title { font-size: clamp(2rem, 3.4vw, 3.4rem); }
  #azienda .widefig__over--top { max-width: min(560px, 42%); }
}
#azienda .widefig::after { background: linear-gradient(100deg, rgb(21 22 23 / 0.72), rgb(21 22 23 / 0.35) 38%, transparent 58%); }

/* ── mobile review fixes ── */
/* 1. product tiles: let the width set the height */
.index img { height: auto; }
@media (max-width: 900px) {
  /* 4. Tech Fin text no longer touches the military photo */
  #techfin.band-sec--wide { padding-bottom: 44px; }
  /* 6. professional paths scroll like the nav instead of wrapping one word */
  .pronav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
  .pronav::-webkit-scrollbar { display: none; }
  /* 7. one photo height and one title size for every wide band */
  #ratio .widefig img { aspect-ratio: auto; height: clamp(300px, 40vw, 640px); object-position: 50% 50%; }
  .widefig__title, #ratio .widefig__title, #azienda .widefig__title { font-size: 2.4rem; }
  /* 8. Rottamazione table: price under the name */
  .nb-lineup th, .nb-lineup td { display: block; text-align: left; white-space: normal; }
  .nb-lineup th { padding-bottom: 0; border-bottom: 0; }
  .nb-lineup td { padding-top: 2px; }
}

/* iX3M 2: title in the photograph's dark top-left corner, clear of the diver */
@media (min-width: 901px) {
  #ratio .widefig__over--right { top: 7%; transform: none; right: auto; left: max(var(--gutter), calc((100vw - 1480px) / 2 + var(--gutter))); width: min(360px, 24%); }
}