/* =========================================================================
   GLYF — public site styles
   Design source: Figma file 418vM6WFpvdnxLRAFDkCbq
     - home-provisional  (node 2298:1730)
     - privacidad        (node 2236:645)
   Tokens below are pulled from Figma variables where available; the four
   core brand tokens (ink, cream, accent, font-mono) were supplied directly.

   Layout philosophy: fully fluid. There are NO viewport-width breakpoints
   in this file. Every size, gap and position is either a percentage of its
   fluid parent, a CSS clamp() between a readable floor and the Figma
   reference ceiling, or a fr-ratio grid — so proportions scale smoothly and
   continuously from small phones to large desktop with no discrete jumps.
   ========================================================================= */

/* ---------- Fonts (self-hosted, no CDN) ---------- */

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */

:root {
  /* Core brand tokens */
  --ink: #141414;
  --cream: #f4f2ea;
  --accent: #ff5a1f;

  /* Additional tokens read from Figma variable defs */
  --bg-page: #e2e2d6;           /* bg/page — privacy page canvas */
  --border-inverse-strong: #636965; /* border/inverse-strong — hairline dividers */
  --wordmark-glyf: #da340f;     /* exact fill of the real exported "GLYF" wordmark
                                   vector — distinct from --accent (#ff5a1f) */

  /* Type families */
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: "Switzer", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Fluid spacing — scales continuously with viewport width, no breakpoints.
     Floors/ceilings anchor to the Figma space/5 (20px) and space/10 (40px)
     tokens; the vw term is what makes them breathe in between. */
  --pad-y: clamp(0.9rem, 0.7rem + 1vw, 1.25rem);
  --pad-x: clamp(1.1rem, 0.4rem + 3.5vw, 2.5rem);
  --gap-sm: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
  --gap-lg: clamp(1.25rem, 0.4rem + 4vw, 2.5rem);
  --gap-xl: clamp(1.5rem, 0.5rem + 5vw, 4rem); /* 64px ref — policy-row label/desc gap */

  /* font/ui at 11px in Figma (nav tags, footer, policy labels) — was shipped
     as a flat 0.6875rem everywhere; floored so it still shrinks fluidly
     instead of staying pixel-fixed while everything else breathes. */
  --font-label: clamp(0.5625rem, 0.45rem + 0.6vw, 0.6875rem);

  --container-max: 90rem; /* 1440px, the Figma desktop reference width */
}

/* ---------- Reset ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* figure/dl/dt/dd carry UA-stylesheet default margins (e.g. <figure> ships
   a 40px left/right margin) that silently break a fluid, edge-to-edge
   layout — reset them explicitly. */
figure,
dl,
dt,
dd {
  margin: 0;
}

a {
  color: inherit;
}

/* Visible focus state everywhere — accessibility is part of done */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--gap-sm);
  top: -3rem;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  padding: 0.5rem 1rem;
  z-index: 100;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--gap-sm);
}

/* ---------- Shared: brand mark ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.8125em; /* 13px at the Figma reference 1rem/16px logo font-size */
  text-decoration: none;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1rem);
  letter-spacing: 0.02em;
}

.logo__icon {
  display: inline-block;
  width: 2.2em;
  height: 1.1em;
  flex-shrink: 0;
}

.logo__icon svg,
.footer-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The "GLYF" logotype next to the globe is a real vector asset in Figma
   (same wordmark used rotated in the hero, viewBox 272.965x77.3136), not
   styled text — reused here via <!--WORDMARK-GLYF--> at its natural
   orientation, recoloring via currentColor to match the surrounding logo. */
.logo__word {
  display: inline-block;
  height: 1.1em;
  aspect-ratio: 272.965 / 77.3136;
  flex-shrink: 0;
}

.logo__word svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The privacy header tile fills edge-to-edge with the real flattened app-icon
   crop (globe+camera on the brand rust tile, assets/img/logo-tile.jpg) —
   Figma's own fill-transform on this node zooms/crops it to bleed past the
   tile's padding, it is not a padded globe glyph on --accent. */
.logo--tile .logo__icon {
  width: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
  height: clamp(2.75rem, 2.2rem + 2vw, 3.5rem);
  background: var(--wordmark-glyf);
  border-radius: 22%;
  overflow: hidden;
}

.logo--tile .logo__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo--tile {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.25rem);
  gap: 0.455em; /* 9.1px at the Figma reference 1.25rem/20px tile font-size */
}

/* ---------- Shared: site footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--cream);
  border-top: 1px solid var(--border-inverse-strong);
}

.footer-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap-lg);
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-sm) var(--gap-lg);
}

.footer-links a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: inherit;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-copy {
  color: var(--cream);
}

/* 49.038x24 at the Figma reference (ratio 2.043, matching the globe's own
   viewBox exactly) expressed in em against the footer's own fluid font-size,
   so the mark scales in lockstep with the footer text instead of sitting at
   a flat, wrong-ratio rem size. */
.footer-mark {
  width: 4.458em;
  height: 2.182em;
  color: var(--cream);
}

/* =========================================================================
   HOME PAGE
   ========================================================================= */

.home {
  background: var(--ink);
  color: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.home-nav__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--pad-y) var(--pad-x);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm) var(--gap-lg);
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.home-nav .logo {
  color: var(--cream);
}

/* ---- Hero canvas: fluid recreation of the 1440x884 Figma composition.
   Every child is positioned with percentages of this canvas (which is
   itself fluid, width:100% up to --container-max) plus clamp()-bound
   font sizes, so the whole composition scales continuously at any
   viewport width — including the touching-corners photo layout — with
   no breakpoint switch to a different mobile layout. ---- */

.hero {
  flex: 1;
  position: relative;
}

.hero-canvas {
  position: relative;
  max-width: var(--container-max);
  margin-inline: auto;
  aspect-ratio: 1440 / 884;
  container-type: inline-size;
}

.hero-copy {
  position: absolute;
  left: 2.78%;
  top: 28.32%;
  width: clamp(7.5rem, 2.7rem + 23.13cqw, 20.8rem);
  display: flex;
  flex-direction: column;
  /* 27px at the Figma reference — 0.75x the h1 clamp below (27/36),
     scaled by the same cqw rate so the gap stays proportional to the
     heading size at every width instead of a flat em margin. */
  gap: clamp(0.6375rem, 0.225rem + 1.875cqw, 1.6875rem);
}

.hero-copy h1 {
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(0.85rem, 0.3rem + 2.5cqw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.hero-copy p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(0.625rem, 0.35rem + 0.97cqw, 0.875rem);
  line-height: 1.4;
  color: rgba(244, 242, 234, 0.55); /* Figma: text/inverse-primary at 55% */
  /* Figma renders this line as single-line, but that's a fixed-1440-canvas
     design; the copy block's own width above is sized only to the heading
     (narrower than this sentence). Rather than white-space:nowrap — which
     reads fine at the Figma reference width but silently clips the tail of
     the sentence off-canvas at small viewports with no scrollbar to reveal
     it — give the paragraph its own escape-hatch width: wide enough (45cqw)
     to fit the whole sentence on one line at the reference size and above
     (matching Figma) while still stopping short of the primary photo at
     49.17%, and letting it wrap normally instead of clipping if a viewport
     is ever narrow enough that 45cqw can't fit it on one line. */
  width: 45cqw;
}

.hero-photo {
  position: absolute;
  overflow: hidden;
  background: linear-gradient(155deg, #2a2a2a, #141414 65%);
}

.hero-photo--primary {
  left: 49.17%;
  top: 28.32%;
  width: 50.83%;
  height: 30.32%;
}

.hero-photo--secondary {
  left: 24.31%;
  top: 58.64%;
  width: 24.86%;
  height: 18.21%;
}

.hero-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-stamp {
  position: absolute;
  right: 2.78%;
  top: 0;
  height: 14.25%;
  font-family: var(--font-mono);
  font-size: clamp(0.5rem, 0.3rem + 0.76cqw, 0.6875rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  white-space: nowrap;
}

/* The real wordmark asset is a horizontal vector (viewBox 272.965x77.31)
   rotated 90deg to sit vertically in the hero, matching Figma's own export.
   container-type:size + cqw/cqh sizing pre-swaps the child's dimensions so
   that after the rotation its visual footprint exactly fills this fluid
   percentage-sized box at any viewport width — the same technique Figma's
   own generated code uses (h-[100cqw] w-[100cqh] rotate-90).
   NOTE: Chrome resolves cqh incorrectly (same as cqw) on a container-type:size
   box whose own width/height come from percentages when that box is ALSO a
   flex container (align-items/justify-content) — verified with an isolated
   repro. So centering is done via absolute + translate(-50%,-50%) instead of
   flex, which sidesteps the bug and centers the rotated element identically. */
.hero-wordmark {
  position: absolute;
  right: 2.5%;
  top: 67.8%;
  width: 5.37%;
  height: 30.88%;
  container-type: size;
}

.hero-wordmark-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100cqw;
  width: 100cqh;
  transform: translate(-50%, -50%) rotate(90deg);
  color: var(--wordmark-glyf);
}

.hero-wordmark-inner svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* =========================================================================
   PRIVACY PAGE
   ========================================================================= */

.privacy {
  background: var(--bg-page);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.privacy-header {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding: var(--pad-x) var(--pad-x) 0;
}

.privacy-header .logo--tile {
  color: var(--ink);
}

.privacy-title {
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding: var(--pad-x) var(--pad-x) 0;
}

.privacy-title h1 {
  margin: 0 0 0.556em; /* 20px at the Figma reference 2.25rem/36px h1 size */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.25rem);
  line-height: 1;
  text-transform: uppercase;
}

.privacy-title p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 0.875rem);
  line-height: 1.4;
  color: rgba(20, 20, 20, 0.8); /* Figma: ink at 80% */
}

.privacy-main {
  flex: 1;
  max-width: var(--container-max);
  margin-inline: auto;
  width: 100%;
  padding: var(--pad-x);
}

.policy-list {
  margin: 0;
}

.policy-row {
  display: grid;
  /* fr-ratio matches the Figma column ratio (280:1016) continuously at
     every width, with a floor on the label column so it never collapses
     to an unreadable sliver on narrow screens */
  grid-template-columns: minmax(7rem, 280fr) minmax(0, 1016fr);
  /* column-gap 64px / row padding 40px at the Figma reference */
  gap: var(--gap-sm) var(--gap-xl);
  padding: var(--gap-lg) 0;
  border-top: 1px solid var(--border-inverse-strong);
}

/* Matches the Figma source exactly: no divider between sections 03 and 04 */
.policy-row--no-divider {
  border-top: none;
}

.policy-row dt {
  font-family: var(--font-mono);
  font-size: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(20, 20, 20, 0.5); /* Figma: ink at 50% */
}

.policy-row dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.8125rem, 0.7rem + 0.5vw, 0.875rem);
  line-height: 1.4;
  color: rgba(20, 20, 20, 0.8); /* Figma: ink at 80% */
}

.policy-row dd a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.policy-row dd a:hover {
  color: var(--accent);
}

.privacy-mark {
  display: flex;
  justify-content: center;
  padding: var(--pad-x) 0;
}

/* Real Figma export: the globe half (partials/icon-globe.svg, same vector
   used in the nav/footer/header logos) stacked over a cropped photo of the
   camera body (assets/img/privacy-mark-camera.jpg), matching node 2236:679
   ("Frame 12") of the privacy Figma node. Sized as one fluid unit via the
   same clamp() previously applied to the hand-drawn placeholder; the globe
   width, gap and camera width below are literal ratios of Figma's own
   145.581 x 118.503 bounding box (globe 145.581 x 71.25, gap 9.5, camera
   130.5 x 37.753) so the composition keeps its exact proportions at any
   viewport width. */
.privacy-mark__graphic {
  width: clamp(5rem, 3rem + 12vw, 9rem);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.526cqw;
}

.privacy-mark__globe {
  width: 100%;
  aspect-ratio: 145.581 / 71.25;
  color: var(--ink);
}

.privacy-mark__globe svg {
  display: block;
  width: 100%;
  height: 100%;
}

.privacy-mark__camera {
  display: block;
  width: 89.642%;
  height: auto;
}