/* H4 selected-image reconstruction, not the original generator CSS.
 * Desktop comparison scaffold only. Not connected to the running portal.
 * Reference: 724 x 2172. At viewport 1448: 1u = 2 CSS pixels.
 * The markup must follow H4-EXACT-SPEC.md; this file is not a complete website.
 * Times/Arial are system fonts and are not redistributed in this package.
 */
@font-face {
  font-family: 'H4 Libre Bodoni';
  src: url("fonts/exact-bodoni-bold.4a987b2027a3.ttf") format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

.h4-ref {
  --u: min(.138121547vw, 2px);
  --paper: #fff;
  --ink: #111;
  --muted: #66666a;
  --micro: #65616d;
  --dot: #e00010;
  --accent: #e94f78;
  --short-rule: #ef6275;
  --section-rule: #fce2ec;
  --business: #f3eef2;
  --people: #fae6ef;
  --button: #df193d;
  --border: #e8e6e8;
  --serif: 'Times New Roman', Times, serif;
  --sans: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  width: calc(724 * var(--u));
  margin-inline: auto;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: calc(8.5 * var(--u));
  line-height: calc(10.5 * var(--u));
  font-synthesis: none;
}
.h4-ref *, .h4-ref *::before, .h4-ref *::after { box-sizing: border-box; }
.h4-ref :where(h1,h2,h3,h4,p,figure,ul) { margin: 0; padding: 0; }
.h4-ref a { color: inherit; text-decoration: none; }
.h4-ref :where(button,input) { font: inherit; border-radius: 0; }
.h4-ref img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.h4-ref a:hover { color: var(--accent); }
.h4-ref :where(a,button,input):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* 0..114: no utility bar above this masthead. */
.h4-ref .ref-header { position: relative; height: calc(114 * var(--u)); }
.h4-ref .ref-wordmark { display: block; width: 100%; height: calc(95 * var(--u)); }
.h4-ref .ref-wordmark svg { display: block; width: 100%; height: 100%; fill: #000; }
.h4-ref .ref-wordmark text { font-family: 'H4 Libre Bodoni'; font-weight: 700; }
.h4-ref .ref-nav {
  position: absolute; left: calc(208 * var(--u)); top: calc(95 * var(--u));
  width: calc(292 * var(--u)); height: calc(19 * var(--u)); display: flex; align-items: flex-start;
  justify-content: space-between; gap: 0; padding-top: calc(1 * var(--u));
  font: 400 calc(10 * var(--u))/calc(13 * var(--u)) var(--serif);
  letter-spacing: calc(-.25 * var(--u)); white-space: nowrap;
}
.h4-ref .ref-languages {
  position: absolute; right: calc(20 * var(--u)); top: calc(98 * var(--u));
  display: flex; gap: calc(7 * var(--u));
  font: 400 calc(7.5 * var(--u))/calc(10 * var(--u)) var(--sans);
}
.h4-ref .ref-languages [aria-current] { color: var(--dot); text-decoration: underline; text-underline-offset: calc(3 * var(--u)); }

/* 114..372: full-bleed 2.806:1 photograph, fixed to reference geometry. */
.h4-ref .ref-hero { position: relative; height: calc(258 * var(--u)); overflow: hidden; }
.h4-ref .ref-hero h1 {
  position: absolute; left: calc(24 * var(--u)); top: calc(35 * var(--u));
  width: calc(350 * var(--u)); color: #fff;
  font: 400 calc(46 * var(--u))/calc(42 * var(--u)) var(--serif);
  letter-spacing: calc(-.7 * var(--u));
  transform: scaleX(.82); transform-origin: left top;
}
.h4-ref .ref-hero h1 span { display: block; white-space: nowrap; }
.h4-ref .ref-hero-rule {
  position: absolute; left: calc(24 * var(--u)); top: calc(132 * var(--u));
  width: calc(27 * var(--u)); height: calc(1.5 * var(--u)); background: var(--short-rule);
}
.h4-ref .ref-hero-link {
  position: absolute; left: calc(24 * var(--u)); top: calc(142 * var(--u)); color: #fff;
  font: 400 calc(10 * var(--u))/calc(13 * var(--u)) var(--serif);
}
.h4-ref .ref-hero-link .ref-arrow { margin-left: calc(9 * var(--u)); }
.h4-ref .ref-strap {
  height: calc(17 * var(--u)); padding: calc(3 * var(--u)) calc(21 * var(--u)) 0;
  display: flex; justify-content: space-between; border-bottom: calc(1 * var(--u)) solid #f1f1f2;
  font: 700 calc(5 * var(--u))/calc(8 * var(--u)) var(--sans);
  letter-spacing: calc(1.15 * var(--u)); text-transform: uppercase; color: var(--micro);
}

/* A section's height is a comparison anchor. Production content may expand. */
.h4-ref .ref-section { position: relative; padding-left: calc(20 * var(--u)); padding-right: calc(19 * var(--u)); }
.h4-ref .ref-section::before {
  content: ''; position: absolute; left: calc(20 * var(--u)); right: calc(19 * var(--u)); top: 0;
  height: calc(1 * var(--u)); background: var(--section-rule);
}
.h4-ref .ref-section-heading { height: calc(34 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); }
.h4-ref .ref-section-heading h2 {
  display: flex; align-items: center; flex: 0 0 auto; gap: calc(10 * var(--u));
  font: 400 calc(24 * var(--u))/calc(27 * var(--u)) var(--serif);
  letter-spacing: calc(-.6 * var(--u));
}
.h4-ref .ref-section-heading h2::after { content: ''; width: calc(34 * var(--u)); height: calc(1.5 * var(--u)); background: var(--short-rule); flex: none; }
.h4-ref .ref-topic-links {
  display: flex; justify-content: flex-end; gap: calc(10 * var(--u));
  font: 700 calc(5 * var(--u))/calc(8 * var(--u)) var(--sans);
  letter-spacing: calc(.95 * var(--u)); text-transform: uppercase; white-space: nowrap; color: var(--micro);
}
.h4-ref .ref-card { min-width: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.h4-ref .ref-card h3 { font: 400 calc(14.5 * var(--u))/calc(14.5 * var(--u)) var(--serif); letter-spacing: calc(-.25 * var(--u)); margin-top: calc(3 * var(--u)); }
.h4-ref .ref-card p { font: 400 calc(8.5 * var(--u))/calc(10.5 * var(--u)) var(--sans); letter-spacing: calc(-.1 * var(--u)); color: var(--muted); margin-top: calc(3 * var(--u)); }
.h4-ref .ref-category { display: block; margin-top: calc(6 * var(--u)); color: var(--accent); font: 700 calc(5.5 * var(--u))/calc(7 * var(--u)) var(--sans); letter-spacing: calc(.9 * var(--u)); text-transform: uppercase; }
.h4-ref .ref-accent-link { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); color: var(--accent); font: 400 calc(10 * var(--u))/calc(13 * var(--u)) var(--serif); }
.h4-ref .ref-arrow { display: inline-block; width: calc(9 * var(--u)); }

/* 389..721. Three cards, no news sidebar. */
.h4-ref .ref-agenda { min-height: calc(332 * var(--u)); }
.h4-ref .ref-agenda::before { display: none; }
.h4-ref .ref-agenda .ref-section-heading h2 { font-size: calc(28 * var(--u)); line-height: calc(29 * var(--u)); letter-spacing: calc(-.5 * var(--u)); }
.h4-ref .ref-agenda-grid { display: grid; grid-template-columns: 359fr 154fr 158fr; gap: calc(7 * var(--u)); }
.h4-ref .ref-agenda-grid .ref-card > img { height: calc(207 * var(--u)); }
.h4-ref .ref-agenda-grid .ref-card:first-child > img { height: calc(244 * var(--u)); }
.h4-ref .ref-agenda-grid .ref-card h3 { font-size: calc(20 * var(--u)); line-height: calc(18.5 * var(--u)); letter-spacing: calc(-.45 * var(--u)); }
.h4-ref .ref-agenda-grid .ref-card:first-child h3 { font-size: calc(24 * var(--u)); line-height: calc(25 * var(--u)); letter-spacing: calc(-.4 * var(--u)); }

/* 721..907. Seven narrow image categories. */
.h4-ref .ref-industry { min-height: calc(186 * var(--u)); }
.h4-ref .ref-industry .ref-section-heading { height: calc(36 * var(--u)); }
.h4-ref .ref-industry .ref-section-heading h2::after { width: calc(43 * var(--u)); }
.h4-ref .ref-sector-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: calc(6 * var(--u)); }
.h4-ref .ref-sector-grid img { height: calc(106 * var(--u)); }
.h4-ref .ref-sector-grid h3 { font-size: calc(13 * var(--u)); line-height: calc(15 * var(--u)); }

/* 907..1127. Two collection images and a three-portrait designer group. */
.h4-ref .ref-collections { min-height: calc(220 * var(--u)); }
.h4-ref .ref-collections-grid { display: grid; grid-template-columns: 279fr 7fr 252fr 15fr 132fr; }
.h4-ref .ref-collections-grid > :nth-child(1) { grid-column: 1; }
.h4-ref .ref-collections-grid > :nth-child(2) { grid-column: 3; }
.h4-ref .ref-designers { grid-column: 5; padding-top: calc(4 * var(--u)); }
.h4-ref .ref-collections-grid > .ref-card > img { height: calc(134 * var(--u)); }
.h4-ref .ref-designers h3 { font: 400 calc(15 * var(--u))/calc(17 * var(--u)) var(--serif); letter-spacing: calc(-.3 * var(--u)); margin-bottom: calc(7 * var(--u)); }
.h4-ref .ref-designer-portraits { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: calc(3 * var(--u)); }
.h4-ref .ref-designer-portraits img { height: calc(106 * var(--u)); }
.h4-ref .ref-designers .ref-accent-link { margin-top: calc(5 * var(--u)); }

/* 1127..1349. The pale action panel touches its right-hand photo. */
.h4-ref .ref-inside { min-height: calc(222 * var(--u)); }
.h4-ref .ref-inside-grid { display: grid; grid-template-columns: 307fr 15fr 234fr 129fr; }
.h4-ref .ref-inside-grid > .ref-card { grid-column: 1; }
.h4-ref .ref-inside-grid > .ref-card > img { height: calc(142 * var(--u)); }
.h4-ref .ref-business-panel { grid-column: 3; height: calc(175 * var(--u)); background: var(--business); padding: calc(10 * var(--u)) calc(14 * var(--u)); }
.h4-ref .ref-business-panel h3 { font: 400 calc(15 * var(--u))/calc(17 * var(--u)) var(--serif); letter-spacing: calc(-.3 * var(--u)); }
.h4-ref .ref-business-action { display: grid; grid-template-columns: calc(24 * var(--u)) 1fr; gap: calc(18 * var(--u)); margin-top: calc(10 * var(--u)); }
.h4-ref .ref-business-action svg { width: calc(24 * var(--u)); height: calc(26 * var(--u)); fill: none; stroke: #47424d; stroke-width: 1; }
.h4-ref .ref-business-action strong { display: block; font: 400 calc(10 * var(--u))/calc(12 * var(--u)) var(--serif); }
.h4-ref .ref-business-action p { color: var(--muted); font-size: calc(8.5 * var(--u)); line-height: calc(10.5 * var(--u)); }
.h4-ref .ref-inside-rack { grid-column: 4; height: calc(175 * var(--u)); }

/* 1349..1561. Three landscape portraits plus a narrow rose panel. */
.h4-ref .ref-people { min-height: calc(212 * var(--u)); }
.h4-ref .ref-people-grid { display: grid; grid-template-columns: 184fr 7fr 184fr 7fr 176fr 8fr 118fr; }
.h4-ref .ref-people-grid > :nth-child(1) { grid-column: 1; }
.h4-ref .ref-people-grid > :nth-child(2) { grid-column: 3; }
.h4-ref .ref-people-grid > :nth-child(3) { grid-column: 5; }
.h4-ref .ref-people-grid > .ref-card > img { height: calc(134 * var(--u)); }
.h4-ref .ref-people-panel { grid-column: 7; height: calc(166 * var(--u)); background: var(--people); padding: calc(16 * var(--u)) calc(12 * var(--u)); position: relative; }
.h4-ref .ref-people-panel h3 { font: 400 calc(14 * var(--u))/calc(15 * var(--u)) var(--serif); letter-spacing: calc(-.2 * var(--u)); }
.h4-ref .ref-people-panel h3::after { content: ''; display: block; width: calc(35 * var(--u)); height: calc(1.5 * var(--u)); background: var(--short-rule); margin-block: calc(10 * var(--u)); }
.h4-ref .ref-people-panel p { color: var(--muted); }
.h4-ref .ref-people-panel .ref-accent-link { position: absolute; bottom: calc(13 * var(--u)); left: calc(12 * var(--u)); font-size: calc(9.5 * var(--u)); }

/* 1561..1754. Three photographs, not a text event rail. */
.h4-ref .ref-calendar { min-height: calc(193 * var(--u)); }
.h4-ref .ref-calendar .ref-section-heading { height: calc(32 * var(--u)); }
.h4-ref .ref-calendar-grid { display: grid; grid-template-columns: 224fr 221fr 226fr; gap: calc(6 * var(--u)); margin-inline: calc(1 * var(--u)); }
.h4-ref .ref-calendar-grid img { height: calc(120 * var(--u)); }

/* 1754..1885. Two horizontal thumbnail + copy guides. */
.h4-ref .ref-guides { min-height: calc(131 * var(--u)); }
.h4-ref .ref-guides .ref-section-heading { height: calc(33 * var(--u)); }
.h4-ref .ref-guide-grid { display: grid; grid-template-columns: 322fr 343fr; gap: calc(20 * var(--u)); }
.h4-ref .ref-guide { display: grid; grid-template-columns: 172fr 139fr; gap: calc(11 * var(--u)); }
.h4-ref .ref-guide:nth-child(2) { grid-template-columns: 181fr 151fr; }
.h4-ref .ref-guide > img { height: calc(85 * var(--u)); }
.h4-ref .ref-guide-copy { padding-top: calc(4 * var(--u)); position: relative; }
.h4-ref .ref-guide-copy h3 { font: 400 calc(14.5 * var(--u))/calc(15 * var(--u)) var(--serif); letter-spacing: calc(-.25 * var(--u)); }
.h4-ref .ref-guide-copy p { color: var(--muted); margin-top: calc(3 * var(--u)); }
.h4-ref .ref-guide-copy .ref-accent-link { position: absolute; bottom: calc(10 * var(--u)); left: 0; }

/* 1885..1966. Compact band, center input, faded city photograph on right. */
.h4-ref .ref-newsletter { height: calc(81 * var(--u)); position: relative; margin-inline: calc(20 * var(--u)) calc(15 * var(--u)); }
.h4-ref .ref-newsletter::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(1 * var(--u)); background: var(--section-rule); }
.h4-ref .ref-newsletter-city { position: absolute; right: 0; top: calc(1 * var(--u)); width: calc(271 * var(--u)); height: calc(80 * var(--u)); }
.h4-ref .ref-newsletter h2 { position: absolute; left: 0; top: calc(3 * var(--u)); display: flex; align-items: center; gap: calc(10 * var(--u)); font: 400 calc(22 * var(--u))/calc(25 * var(--u)) var(--serif); letter-spacing: calc(-.5 * var(--u)); }
.h4-ref .ref-newsletter h2::after { content: ''; width: calc(33 * var(--u)); height: calc(1.5 * var(--u)); background: var(--short-rule); }
.h4-ref .ref-newsletter p { position: absolute; left: 0; top: calc(34 * var(--u)); width: calc(210 * var(--u)); color: var(--muted); font: 400 calc(10 * var(--u))/calc(12 * var(--u)) var(--serif); }
.h4-ref .ref-newsletter-form { position: absolute; left: calc(238 * var(--u)); top: calc(31 * var(--u)); width: calc(246 * var(--u)); height: calc(28 * var(--u)); display: flex; }
.h4-ref .ref-newsletter-form input { flex: 1; min-width: 0; background: #fff; border: calc(1 * var(--u)) solid var(--border); padding: 0 calc(9 * var(--u)); font: 400 calc(7.5 * var(--u))/1 var(--sans); }
.h4-ref .ref-newsletter-form button { width: calc(65 * var(--u)); flex: none; background: var(--button); color: #fff; border: 0; font: 400 calc(9 * var(--u))/1 var(--sans); }

/* 1966..2172. Brand, six navigation columns, sector row, copyright. */
.h4-ref .ref-footer { height: calc(206 * var(--u)); position: relative; padding-inline: calc(20 * var(--u)); border-top: calc(1 * var(--u)) solid #f2f2f3; }
.h4-ref .ref-footer-main { display: grid; grid-template-columns: 142fr 62fr 76fr 69fr 76fr 75fr 75fr; gap: calc(18 * var(--u)); padding-top: calc(16 * var(--u)); }
.h4-ref .ref-footer-brand { font: 700 calc(28 * var(--u))/calc(31 * var(--u)) 'H4 Libre Bodoni',serif; letter-spacing: calc(-.7 * var(--u)); color: #000; white-space: nowrap; }
.h4-ref .ref-footer-tagline { font: 700 calc(5 * var(--u))/calc(8 * var(--u)) var(--sans); letter-spacing: calc(1.15 * var(--u)); text-transform: uppercase; color: var(--micro); }
.h4-ref .ref-footer-social { display: flex; gap: calc(14 * var(--u)); margin-top: calc(17 * var(--u)); }
.h4-ref .ref-footer-social svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.h4-ref .ref-footer-main h3 { font: 400 calc(9 * var(--u))/calc(12 * var(--u)) var(--serif); margin-bottom: calc(5 * var(--u)); }
.h4-ref .ref-footer-main ul { list-style: none; font: 400 calc(8.5 * var(--u))/calc(13 * var(--u)) var(--serif); color: var(--muted); }
.h4-ref .ref-footer-sectors { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(122 * var(--u)); height: calc(36 * var(--u)); display: flex; align-items: center; justify-content: space-between; border-block: calc(1 * var(--u)) solid #f3f3f4; font: 700 calc(5 * var(--u))/calc(8 * var(--u)) var(--sans); letter-spacing: calc(1.15 * var(--u)); color: var(--micro); text-transform: uppercase; }
.h4-ref .ref-footer-sectors nav { display: flex; gap: calc(22 * var(--u)); }
.h4-ref .ref-copyright { position: absolute; left: calc(20 * var(--u)); right: calc(20 * var(--u)); top: calc(168 * var(--u)); display: flex; justify-content: space-between; font: 400 calc(7 * var(--u))/calc(10 * var(--u)) var(--sans); color: var(--muted); }

/* Deliberately no invented mobile design in a desktop-reference scaffold. */
@media (prefers-reduced-motion: reduce) {
  .h4-ref *, .h4-ref *::before, .h4-ref *::after { animation: none !important; transition: none !important; }
}