/* Self-hosted fonts (generated from @fontsource, SIL OFL 1.1; licences in fonts/) */
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/libre-caslon-display-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/libre-caslon-display-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/dm-sans-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/dm-sans-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/dm-sans-latin-ext-500-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/dm-sans-latin-500-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* TrendHypes corporate website — the accepted design of 2 Nov 2026
   (design/accepted-2026-11-02/preview-source.html), as site CSS.

   Values are the reference's own. Deliberate differences, each for an
   accessibility check:
   - small grey text darkened just enough for WCAG AA (4.5:1): --muted;
   - 10px labels set at 11px;
   - links and buttons have at least a 44px target (padding, with negative
     margins where the layout must not move);
   - visible focus outlines.
   The @font-face rules for the self-hosted fonts are generated by
   scripts/build.mjs from the npm @fontsource packages and prepended to this
   file in dist/static/styles.css. */

/* Metric-matched fallbacks: the page keeps its line breaks and height while
   the web fonts load (font-display: swap). Values from @capsizecss/metrics. */
@font-face {
  font-family: "Libre Caslon Display Fallback";
  src: local("Georgia");
  ascent-override: 115.6221%;
  descent-override: 31.7067%;
  size-adjust: 83.894%;
}
@font-face {
  font-family: "Libre Caslon Display Fallback Times";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  ascent-override: 105.3643%;
  descent-override: 28.8937%;
  line-gap-override: 0%;
  size-adjust: 92.0615%;
}
@font-face {
  font-family: "DM Sans Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  ascent-override: 94.9001%;
  descent-override: 29.6563%;
  line-gap-override: 0%;
  size-adjust: 104.531%;
}
@font-face {
  font-family: "DM Sans Fallback Helvetica";
  src: local("Helvetica");
  ascent-override: 94.9001%;
  descent-override: 29.6563%;
  size-adjust: 104.531%;
}

:root {
  --paper: #f5f2eb;
  --ink: #35372f;
  --dark: #252920;
  --amber: #f9ad1b;
  --amber-hover: #ffc04a;
  --amber-press: #eea312;
  --sand: #e9e3d7;
  --tone: #7d7e6e;          /* second tone in headings (large text, 3.7:1) */
  --muted: #6c6e60;         /* small grey text on paper (4.65:1) */
  --muted-sand: #636658;    /* small grey text on sand (4.6:1) */
  --rule: #dcd9d0;
  --font-head: "Libre Caslon Display", "Libre Caslon Display Fallback", "Libre Caslon Display Fallback Times", Georgia, serif;
  --font-body: "DM Sans", "DM Sans Fallback", "DM Sans Fallback Helvetica", Arial, sans-serif;
  --space: 64px;
  --heading: 52px;
  --gutter: 5%;
  color-scheme: light;
  background: var(--paper);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
main { flex: 1 0 auto; }

h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--font-head); font-weight: 400; letter-spacing: -0.025em; }
h1 { font-size: var(--heading); line-height: 1.04; }
h2 { font-size: 36px; line-height: 1.12; }
em { font-style: normal; color: var(--tone); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
.perspective :focus-visible { outline-color: var(--amber); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -200px; z-index: 10;
  background: var(--dark); color: var(--paper); padding: 12px 16px; font-size: 13px;
}
.skip:focus { top: 16px; }

.arrow { display: inline-block; transition: transform 0.2s; }

/* ---- header ---------------------------------------------------------- */

.site-header {
  padding: 23.6px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--rule);
  position: relative; z-index: 2;
  background: var(--paper);
  view-transition-name: site-header;
}
.brand { display: flex; align-items: center; flex-shrink: 0; min-height: 44px; }
.brand img { display: block; width: 190px; height: auto; }

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a {
  font-size: 12px; display: inline-flex; align-items: center; justify-content: center; position: relative;
  min-height: 44px; min-width: 44px; padding: 0 6px; margin: 0 -6px; /* 44px target, same layout */
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform 0.22s;
}
.site-nav a:not(.nav-cta)::after { left: 6px; right: 6px; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav .nav-cta { border: 1px solid #b9bbac; border-radius: 6px; padding: 0 16px; margin: 0; transition: border-color 0.2s, background-color 0.2s; }
.site-nav .nav-cta::after { bottom: 2px; }
.site-nav .nav-cta .arrow { margin-left: 18px; }
.site-nav .nav-cta:hover { border-color: var(--ink); }
.site-nav .nav-cta:hover .arrow { transform: translate(3px, -3px); }
.site-nav a:active { opacity: 0.7; }
.menu-toggle { display: none; }

/* ---- shared actions --------------------------------------------------- */

/* Primary CTA (approved refinement, 3 Nov 2026). Desktop: 40px min height,
   10/16 padding. Mobile and touch: 44px, 12/16 (media block below).
   Hover is a colour change only — no lift or scaling; arrow moves 1px. */
.action {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 40px; padding: 10px 16px;
  border-radius: 6px;
  background: var(--amber); color: #282b22;
  font-size: 13px; font-weight: 500; line-height: 20px;
  transition: background-color 180ms ease;
}
.action .arrow { font-size: 12px; line-height: 1; transition: transform 180ms ease; }
.action:hover { background: var(--amber-hover); }
.action:active { background: var(--amber-press); }
.action:hover .arrow { transform: translate(1px, -1px); }
@media (max-width: 720px), (pointer: coarse) {
  .action { min-height: 44px; padding: 12px 16px; }
}

/* Underlined text links. The box is 44px tall (touch target) and the
   negative margins keep the reference's layout; the underline is drawn where
   the reference's border was. */
.text-link, .light-link {
  position: relative;
  display: flex; width: fit-content; max-width: 100%; align-items: center;
  min-height: 44px; padding: 12.4px 0;
  font-size: 12px;
}
.text-link::after, .light-link::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  transition: background-color 0.2s;
}
.text-link { margin: 3.6px 0 -8.4px; }
.text-link::after { bottom: 8.4px; background: #a49d87; }
.text-link:hover::after { background: var(--amber); }
.text-link:hover .arrow { transform: translate(2px, -2px); }
.text-link .arrow { margin-left: 0.3em; }
.text-link:active, .light-link:active, .mail:active { opacity: 0.7; }

.small-label { font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 500; }

/* ---- home: hero ------------------------------------------------------- */

.hero { display: grid; grid-template-columns: 48% 52%; min-height: 545px; }
.hero-copy {
  padding: 65px 8% 38px 10.4%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.hero-copy p { font-size: 15px; max-width: 310px; margin: 25px 0 27px; color: #5f6256; line-height: 1.7; }
.explore {
  display: inline-flex; align-items: center; gap: 22px;
  min-height: 44px; margin: 27px 0 -13px;
  font-size: 11px;
}
.explore:hover .arrow { transform: translateY(3px); }
.hero-art { position: relative; min-width: 0; overflow: hidden; background: #b3a587; }
.hero-art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 59% center;
}
.image-rule { position: absolute; left: 0; bottom: 36px; height: 3px; width: 56px; background: var(--amber); }

/* ---- home: questions (accordion) ------------------------------------- */

.decisions {
  display: grid; grid-template-columns: 45% 55%;
  padding: var(--space) var(--gutter);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 0;
}
.section-title p { margin-top: 18px; font-size: 13px; color: var(--muted); }
.acc { border-top: 1px solid #bfc0b5; }
.acc-item { border-bottom: 1px solid #cfd0c5; }
.acc-heading { font: inherit; letter-spacing: normal; }
.acc-trigger {
  display: flex; align-items: center; gap: 20px; width: 100%;
  padding: 19px 0; font-size: 17px; text-align: left;
}
.num { font-size: 11px; color: var(--muted); min-width: 13px; }
.acc-icon { margin-left: auto; font-size: 21px; font-weight: 400; transition: transform 0.25s, color 0.2s; }
.acc-trigger:hover .acc-icon { color: #000; }
.acc-trigger:hover .acc-q { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
.acc-item.is-open .acc-icon { transform: rotate(45deg); }
.acc-body { padding: 0 28px 22px 33px; }
.acc-body p { font-size: 13px; color: #65685a; max-width: 340px; }
/* Before site.js runs, closed answers are already hidden (no jump); without
   JS every answer shows and the toggles are not drawn. */
.js .acc-item:not(.is-open) .acc-panel:not([hidden]) { display: none; }
html:not(.js) .acc-icon { display: none; }
html:not(.js) .acc-trigger { cursor: default; }

/* ---- perspective (dark band) ----------------------------------------- */

.perspective {
  background: var(--dark); color: var(--paper);
  padding: var(--space) var(--gutter);
  display: grid; grid-template-columns: 30% 70%;
  border-left: 5px solid var(--amber);
}
.perspective em { color: #b8bba5; }
.perspective > .small-label { color: #bbbfaa; padding-top: 8px; }
.perspective div > p { max-width: 420px; color: #c0c3b3; font-size: 14px; margin: 22px 0; }
.light-link { gap: 34px; margin: -8.4px 0 -3.4px; color: var(--paper); }
.light-link::after { bottom: 3.4px; background: #8a8d72; }
.light-link:hover::after { background: var(--amber); }
.light-link:hover .arrow { transform: translate(3px, -3px); }
.page-about .light-link { gap: 0.3em; } /* as the reference: arrow set close on About */

/* ---- contact band ---------------------------------------------------- */

.band {
  display: flex; align-items: center; justify-content: space-between; gap: 50px;
  padding: var(--space) var(--gutter);
  background: var(--sand);
}
.band > div { max-width: 310px; }
.band p { font-size: 14px; margin-bottom: 22px; }

/* ---- footer ----------------------------------------------------------- */

.site-footer { padding: 29px var(--gutter) 22px; }
.site-footer .brand { width: fit-content; }
.tagline { font-size: 11px; color: var(--muted); margin: 4px 0 27px; }
.footer-row {
  border-top: 1px solid #d1d2c7; padding-top: 17px;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 24px;
  font-size: 11px; color: var(--muted);
}
.footer-links a { color: var(--ink); padding: 15px 4px; margin: 0 -4px; text-decoration: underline; text-decoration-color: #a49d87; text-underline-offset: 3px; transition: text-decoration-color 0.2s; }
.footer-links a:hover { text-decoration-color: var(--amber); }

/* ---- page intro (approach, products, about, contact, legal, 404) ------ */

.page-intro {
  padding: 65px var(--gutter) 55px;
  display: grid; grid-template-columns: 60% 1fr; align-items: end; gap: 20px;
}
.page-intro p { max-width: 285px; color: #66695a; font-size: 14px; }

/* ---- approach: steps -------------------------------------------------- */

.steps { padding: 15px var(--gutter) 65px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; }
.steps article { border-top: 1px solid #b8bcac; padding-top: 18px; }
.step-label { font-size: 11px; line-height: 24px; color: var(--muted); }
.steps h2 { font-size: 30px; margin: 24px 0 20px; }
.steps article > p:last-child { font-size: 13px; color: #6c7060; }

/* ---- products & projects --------------------------------------------- */

.product { margin: 0 var(--gutter) 30px; display: grid; grid-template-columns: 55% 45%; background: var(--sand); }
.product-image { position: relative; min-height: 400px; overflow: hidden; background: #baaa8b; }
.product-image img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform 0.7s ease;
}
.product:hover .product-image img { transform: scale(1.025); }
.product-tag { position: absolute; bottom: 18px; left: 22px; background: var(--paper); padding: 5px 10px; font-size: 11px; }
.product-copy {
  padding: 44px 12%;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.product-copy h2 { font-size: 42px; margin: 20px 0 16px; }
.product-desc { font-size: 14px; margin-bottom: 26px; }
.product-note { font-size: 11px; margin-top: 28px; color: var(--muted-sand); }

.closing { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px var(--gutter) 55px; }
.closing p { font-family: var(--font-head); font-size: 25px; }
.closing .text-link { margin: -2px 0; }

/* ---- contact ---------------------------------------------------------- */

.contact-page { min-height: 530px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.contact-page .contact-lead { max-width: 410px; margin: 15px 0 20px; }
.mail {
  max-width: 100%; overflow-wrap: anywhere;
  font-size: 22px; padding-bottom: 8px;
  border-bottom: 1px solid var(--amber);
}
.mail:hover .arrow { transform: translate(3px, -3px); }
.contact-page .contact-note, .company-facts p { max-width: 520px; font-size: 11px; color: var(--muted); }
.company-facts { margin-top: 1.6em; font-size: 11px; }

/* ---- legal ------------------------------------------------------------ */

.legal { padding: 0 var(--gutter) var(--space); }
.legal-section {
  display: grid; grid-template-columns: 45% 55%;
  border-top: 1px solid #b8bcac; padding: 28px 0 34px;
}
.legal-section h2 { font-size: 30px; padding-right: 24px; }
.legal-body { max-width: 34em; font-size: 14px; color: #5f6256; }
.legal-body p + p { margin-top: 12px; }
.label { font-weight: 500; color: var(--ink); }
.inline-link {
  color: var(--ink); padding: 13px 0;
  text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px;
}
.inline-link:hover { text-decoration-thickness: 2px; }

/* ---- motion ----------------------------------------------------------- */

@keyframes page { from { opacity: 0.3; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes image { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes answer { from { opacity: 0.3; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  main { animation: page 0.45s ease both; }
  .hero-copy h1 { animation: page 0.7s ease both; }
  .hero-art img { animation: image 1.2s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .js .acc-item.is-open .acc-body { animation: answer 0.28s ease-out; }
  .js .site-nav.is-open { animation: page 0.25s ease; }

  /* Page transitions between routes (progressive enhancement). */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fade-out 0.18s ease both; }
  ::view-transition-new(root) { animation: fade-in 0.3s ease both; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- small screens (the reference's 720px breakpoint) ----------------- */

@media (max-width: 720px) {
  :root { --heading: 43px; --space: 40px; --gutter: 6%; }

  .site-header { padding: 17px var(--gutter); flex-wrap: wrap; gap: 0; }
  .js .menu-toggle {
    display: flex; align-items: center; gap: 16px;
    min-height: 44px; font-size: 12px;
  }
  .menu-icon { font-size: 24px; line-height: 1; transition: transform 0.2s; }
  .menu-toggle[aria-expanded="true"] .menu-icon { transform: rotate(45deg); }
  .site-nav { width: 100%; flex-direction: column; align-items: stretch; padding-top: 25px; gap: 0; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: flex; }
  .site-nav a { font-size: 20px; padding: 15px 0; margin: 0; justify-content: flex-start; border-bottom: 1px solid #d0d2c5; }
  .site-nav a::after, .site-nav .nav-cta::after { bottom: 2px; left: 0; right: 0; }
  .site-nav .nav-cta { border: 0; padding: 15px 0; }

  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-copy { padding: 40px var(--gutter) 30px; }
  .hero h1 { font-size: 46px; }
  .hero h1 br:first-of-type { display: none; }
  .hero-copy p { font-size: 14px; max-width: 330px; margin: 22px 0; }
  .explore { display: none; }
  .hero-art { height: 260px; margin: 0 var(--gutter) 32px; }
  .hero-art img { object-position: center 55%; }

  h2 { font-size: 32px; }
  .decisions { grid-template-columns: 1fr; gap: 28px; }
  .section-title p { font-size: 12px; margin-top: 13px; }
  .section-title p br { display: none; }
  .acc-trigger { font-size: 16px; padding: 17px 0; min-height: 54px; }
  .perspective { grid-template-columns: 1fr; gap: 25px; }
  .perspective div > p { font-size: 13px; }
  .band { flex-direction: column; align-items: flex-start; gap: 25px; }
  .band h2 br { display: none; }

  .page-intro { padding: 40px var(--gutter); grid-template-columns: 1fr; gap: 22px; }
  .page-intro p { max-width: 330px; }
  .product { margin: 0 var(--gutter) 25px; grid-template-columns: 1fr; }
  .product-image { min-height: 260px; }
  .product-copy { padding: 30px 25px; }
  .product-copy h2 { margin-top: 13px; }
  .closing { padding: 8px var(--gutter) 40px; flex-direction: column; align-items: flex-start; gap: 15px; }
  .steps { grid-template-columns: 1fr; gap: 25px; padding: 0 var(--gutter) 40px; }
  .steps h2 { margin: 12px 0; }
  .steps h2 br { display: none; }
  .contact-page { min-height: 440px; }
  .mail { font-size: 18px; padding-top: 6.4px; margin-top: -6.4px; } /* 44px target at the smaller size */
  .legal-section { grid-template-columns: 1fr; gap: 14px; padding: 22px 0 26px; }
  .legal-section h2 { font-size: 26px; }
  .footer-row { gap: 4px 12px; }
}