/* ============================================================================
   SmartStack — Sections :: TECHNICAL BROADSHEET
   The front page, the interior page headers, and the one-off compositions.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   FRONT PAGE
   Laid out like a broadsheet: a dateline rule, the headline running the full
   measure, then columns beneath it, then the figures strip.
   --------------------------------------------------------------------------- */

.ss-front {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: var(--space-10);
}

/* The dateline: edition, place, issue. Sets the register immediately. */
.ss-dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-3);
  border-top: 1.5px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mid);
}
.ss-dateline__sep { flex: 1; min-width: 1rem; }
.ss-dateline b { color: var(--signal); font-weight: 400; }

/* --- The headline --- */

.ss-front__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
}
@media (min-width: 900px) {
  .ss-front__head {
    grid-template-columns: minmax(120px, var(--margin-col)) 1fr;
    gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
  }
}

.ss-front__marks { display: flex; flex-direction: column; gap: var(--space-3); }
.ss-front__marks .ss-rule { background: var(--rule-strong); }

.ss-front__title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--width-condensed), 'wght' 800;
  font-weight: 800;
  font-size: var(--text-mega);
  line-height: var(--leading-mega);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--ink);
  /* Optical: the eye reads a condensed cap line better slightly indented
     from the rule above it. */
  margin-left: -0.02em;
}

/* --- The columns under the headline --- */

.ss-front__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
@media (min-width: 940px) {
  .ss-front__body { grid-template-columns: 0.85fr 1.15fr; }
}

.ss-front__col { display: flex; flex-direction: column; gap: var(--space-5); align-items: flex-start; }

/* The one serif line on the page — the human voice against the machine. */
.ss-front__voice {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-serif-lead);
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--ink);
  max-width: 22ch;
}
.ss-front__voice em { font-style: normal; color: var(--signal); }

/* The front page's rhythm is set for a tall screen. On a typical laptop
   (1280x800, 1366x768) that same rhythm pushed "Start Your Project" under
   the fold — the one button the page exists for. Tighten the stack only
   where height is actually short; a tall display keeps the full setting. */
@media (min-width: 940px) and (max-height: 900px) {
  .ss-front { padding-top: calc(var(--nav-height) + var(--space-2)); }
  .ss-front__head { padding-block: var(--space-4); }
  .ss-front__body { padding-top: var(--space-4); }
  .ss-front__col { gap: var(--space-4); }
  /* The headline is the biggest single block, so it gives up the most.
     Still the largest thing on the page — just not 132px on an 800px screen. */
  .ss-front__title { font-size: calc(var(--text-mega) * 0.82); }
  .ss-front__voice { font-size: calc(var(--text-serif-lead) * 0.82); }
}

/* Phones get the same treatment on a short viewport. The CTA dock already
   guarantees a reachable button here, so this only has to stop the hero
   from burying the hero's own buttons. */
@media (max-width: 939px) and (max-height: 850px) {
  .ss-front { padding-top: calc(var(--nav-height) + var(--space-2)); }
  .ss-front__head { padding-block: var(--space-4); }
  .ss-front__body { padding-top: var(--space-4); gap: var(--space-5); }
  .ss-front__col { gap: var(--space-4); }
  .ss-front__title { font-size: calc(var(--text-mega) * 0.88); }
  .ss-front__voice { font-size: calc(var(--text-serif-lead) * 0.86); }
}

/* 768-tall laptops are still everywhere, and they need a little more back
   than the 900px tier gives. This is the floor: below this the headline
   would stop reading as the headline. */
@media (min-width: 940px) and (max-height: 800px) {
  .ss-dateline { padding-block: var(--space-2); }
  .ss-front__title { font-size: calc(var(--text-mega) * 0.72); }
  .ss-front__voice { font-size: calc(var(--text-serif-lead) * 0.78); }
}

/* --- The halftone figure --- */

.ss-halftone {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  background: var(--paper-tint);
}
.ss-halftone__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 500ms linear;
}
.ss-halftone__canvas.is-live { opacity: 1; }

/* The source photograph. Visible until the canvas takes over, and the
   permanent fallback if WebGL is unavailable — treated to sit in the
   palette rather than fight it. */
.ss-halftone__src {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.25) brightness(1.02);
  transition: opacity 400ms linear;
}
.ss-halftone.is-shaded .ss-halftone__src { opacity: 0; }

/* Registration marks in the corners — printer's crop marks. */
.ss-halftone__reg {
  position: absolute;
  width: 14px; height: 14px;
  border: 0 solid var(--signal);
  pointer-events: none;
  z-index: 2;
}
.ss-halftone__reg--tl { top: 8px;  left: 8px;  border-top-width: 1.5px; border-left-width: 1.5px; }
.ss-halftone__reg--tr { top: 8px;  right: 8px; border-top-width: 1.5px; border-right-width: 1.5px; }
.ss-halftone__reg--bl { bottom: 8px; left: 8px;  border-bottom-width: 1.5px; border-left-width: 1.5px; }
.ss-halftone__reg--br { bottom: 8px; right: 8px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* A live readout stamped over the plate. */
.ss-halftone__stamp {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 2;
  display: flex;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--signal);
  color: var(--signal-on);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* --- The figures strip at the foot of the front page --- */
/* center the figures */
.ss-front__figures { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: center; position: relative; }
.ss-front__figures .ss-stats { max-width: 42rem; margin-inline: auto; }
@media (min-width: 760px) { .ss-front__figures .ss-stats { grid-template-columns: repeat(2, 1fr); } }

/* Scroll cue, set as a printer's instruction. */
.ss-cue {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ss-cue__rail { display: block; width: 46px; height: 1px; background: var(--rule-strong); position: relative; overflow: hidden; }
.ss-cue__rail::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: var(--signal);
  animation: ss-cue 2.2s var(--ease-cut) infinite;
}
@keyframes ss-cue {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ---------------------------------------------------------------------------
   INTERIOR PAGE HEADER
   --------------------------------------------------------------------------- */

.ss-head {
  position: relative;
  padding-top: calc(var(--nav-height) + var(--space-6));
  padding-bottom: clamp(2rem, 1.4rem + 3vw, 4rem);
}

.ss-head__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-top: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}
@media (min-width: 900px) {
  .ss-head__inner {
    grid-template-columns: minmax(120px, var(--margin-col)) 1fr;
    gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
  }
}

.ss-head__title {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--width-condensed), 'wght' 800;
  font-weight: 800;
  font-size: var(--text-display-1);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-mega);
  text-transform: uppercase;
  color: var(--ink);
}

.ss-head__lede {
  font-size: var(--text-lead);
  line-height: var(--leading-relaxed);
  color: var(--ink-mid);
  max-width: 54ch;
  margin-top: var(--space-4);
}

/* Breadcrumb as a filing reference. */
.ss-crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.ss-crumbs a:hover { color: var(--signal); }
.ss-crumbs [aria-current='page'] { color: var(--ink-mid); }

/* ---------------------------------------------------------------------------
   SECTION HEADER
   A rule, an index, a title. Repeated exactly on every section.
   --------------------------------------------------------------------------- */

.ss-shead {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1.5px solid var(--ink);
  margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
@media (min-width: 900px) {
  .ss-shead {
    grid-template-columns: minmax(120px, var(--margin-col)) 1fr;
    gap: clamp(1.5rem, 0.5rem + 3vw, 4rem);
    align-items: start;
  }
}
.ss-shead__title { font-size: var(--text-h2); max-width: 20ch; }
.ss-shead__sub { margin-top: var(--space-4); max-width: 56ch; color: var(--ink-mid); font-size: var(--text-sm); }

/* ---------------------------------------------------------------------------
   SERVICE ENTRY — a numbered, ruled row with a plate
   --------------------------------------------------------------------------- */

.ss-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 0.8rem + 2.6vw, 3.5rem);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-top: 1px solid var(--rule-strong);
  align-items: start;
}
@media (min-width: 940px) {
  .ss-entry { grid-template-columns: 5rem 1fr 1fr; }
  /* Place every part explicitly: reordering would auto-place the plate into
     the narrow number column. The number keeps its column; body and plate
     swap sides on even entries, like a magazine spread. */
  .ss-entry > * { grid-row: 1; }
  .ss-entry__num { grid-column: 1; }
  .ss-entry__body { grid-column: 2; }
  .ss-entry__plate { grid-column: 3; }
  .ss-entry:nth-of-type(even) .ss-entry__body { grid-column: 3; }
  .ss-entry:nth-of-type(even) .ss-entry__plate { grid-column: 2; }
}

.ss-entry__num {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 80, 'wght' 800;
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--signal);
}
.ss-entry__body { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.ss-entry__title { font-size: var(--text-h2); max-width: 16ch; }
.ss-entry__plate { position: relative; }

/* ---------------------------------------------------------------------------
   PROCESS — numbered stages down a drawn rule
   --------------------------------------------------------------------------- */

.ss-stages { position: relative; }

.ss-stage {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-6);
  border-top: 1px solid var(--rule-strong);
  align-items: start;
}
/* Two columns on phones: everything after the number stacks in the content
   column. Left to auto-placement, the third item (text or tags) wraps into
   the narrow number column. */
.ss-stage > :not(.ss-stage__n) { grid-column: 2; }
@media (min-width: 860px) {
  .ss-stage { grid-template-columns: 3.5rem 1fr 1fr; gap: clamp(1.5rem, 0.8rem + 2vw, 3rem); }
  .ss-stage > :not(.ss-stage__n) { grid-column: auto; }
}

.ss-stage__n {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--track-label);
  color: var(--ink-faint);
  padding-top: 0.35em;
  transition: color var(--dur-base) var(--ease-press);
}
.ss-stage.is-in .ss-stage__n { color: var(--signal); }
.ss-stage__title { font-size: var(--text-h3); text-transform: uppercase; }
.ss-stage__text { font-size: var(--text-sm); color: var(--ink-mid); line-height: var(--leading-normal); margin-top: var(--space-2); }

/* Feature tags under a stage. */
.ss-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ss-tags span {
  padding: 4px var(--space-3);
  border: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-mid);
  transition: background-color var(--dur-snap) var(--ease-press), color var(--dur-snap) var(--ease-press);
}
.ss-tags span:hover { background: var(--ink); color: var(--paper); }

/* ---------------------------------------------------------------------------
   BOOKING LAYOUT
   --------------------------------------------------------------------------- */

.ss-booking { display: grid; grid-template-columns: 1fr; gap: var(--space-10); align-items: start; }
@media (min-width: 1040px) { .ss-booking { grid-template-columns: 1.4fr 0.6fr; gap: var(--space-12); } }

.ss-aside { display: flex; flex-direction: column; gap: var(--space-6); }
@media (min-width: 1040px) { .ss-aside { position: sticky; top: calc(var(--nav-height) + var(--space-6)); } }

.ss-aside__block { border-top: 1.5px solid var(--ink); padding-top: var(--space-4); }

.ss-steps { display: flex; flex-direction: column; }
.ss-steps li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--ink-mid);
}
.ss-steps li > span:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  color: var(--signal);
  padding-top: 0.25em;
}
.ss-steps strong { display: block; color: var(--ink); text-transform: uppercase; font-size: var(--text-label); font-family: var(--font-mono); letter-spacing: var(--track-wide); margin-bottom: 3px; }

/* Contact block — a big readable line with a mono label. */
.ss-contact { display: flex; flex-direction: column; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px solid var(--rule); }
.ss-contact__v {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 88, 'wght' 700;
  font-size: var(--text-h3);
  letter-spacing: var(--track-snug);
  color: var(--ink);
  word-break: break-word;
  transition: color var(--dur-snap) linear;
}
a.ss-contact__v:hover { color: var(--signal); }
.ss-contact__m { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   UTILITY PAGES (unsubscribe / success)
   --------------------------------------------------------------------------- */

.ss-utility {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--nav-height) + var(--space-12)) var(--space-gutter) var(--space-16);
}
.ss-utility__inner { width: 100%; max-width: 620px; }
.ss-utility__rule { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); }
.ss-utility__rule .ss-rule { flex: 1; background: var(--rule-strong); }

/* The success mark draws itself. */
.ss-check { width: 54px; height: 54px; }
.ss-check circle, .ss-check path { fill: none; stroke: var(--signal); stroke-width: 2; }
.ss-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ss-draw 600ms var(--ease-cut) 260ms forwards; }
.ss-check circle { stroke-dasharray: 170; stroke-dashoffset: 170; animation: ss-draw 700ms var(--ease-cut) forwards; }
@keyframes ss-draw { to { stroke-dashoffset: 0; } }

/* The misprinted edition number on 404. Outlined rather than filled: it reads
   as a plate that didn't take, and it never competes with the headline. */
.ss-404__fig {
  font-family: var(--font-display, var(--font-body));
  font-size: clamp(5rem, 2rem + 16vw, 11rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 2px var(--rule-strong);
  margin-bottom: var(--space-2);
  user-select: none;
}
/* text-stroke is near-universal, but a plain fill is the honest fallback. */
@supports not (-webkit-text-stroke: 1px red) {
  .ss-404__fig { color: var(--ink-faint); }
}

/* ---------------------------------------------------------------------------
   GALLERY RAIL (front page work strip)
   --------------------------------------------------------------------------- */

.ss-strip { display: flex; overflow-x: auto; scrollbar-width: none; border-block: 1px solid var(--rule-strong); }
.ss-strip::-webkit-scrollbar { display: none; }
.ss-strip__item {
  flex: 0 0 min(78vw, 340px);
  border-right: 1px solid var(--rule-strong);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ss-strip__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.15); transition: filter var(--dur-base) var(--ease-press); }
.ss-strip__item:hover img { filter: grayscale(0) contrast(1); }