/* Picaporte Labs, «Umbral» (the threshold): a lab at night, seen from just
   outside an open door. Dark only, whatever the system scheme.
   ink #0B0F19 is the night ground; slate #111827 the raised rooms and the
   door's leaf; room #0E3B3A the lit interior; teal #2DD4BF draws the frame,
   the lines and the links; lime #D9F99D is the knob and only the knob: the
   primary action, the door's knob and the focus ring.
   Bricolage Grotesque (condensed, lowercase) is the display voice and Source
   Serif 4 the reading text, both self-hosted (fonts/, SIL OFL).
   The logo files are used as they are; the door is CSS: borders, gradients
   and one 3D-rotated box, with no script.
   Contrast (WCAG 2.2 AA asks 4.5:1 for text, 3:1 for the focus ring): on ink,
   paper 16.3:1, mist 8.7:1, teal 10.3:1, lime 16.4:1; on slate, #D4DCDC
   12.7:1, teal 9.5:1; on room, paper 10.5:1, #C9D3D2 8.1:1, teal 6.6:1,
   lime 10.5:1; ink on lime 16.4:1 and on teal 10.3:1. */

/* ---------- Fonts ---------- */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-v9-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  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: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-v9-latin-ext.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  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: "Source Serif 4";
  src: url("/fonts/source-serif-4-v15-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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: "Source Serif 4";
  src: url("/fonts/source-serif-4-v15-latin-ext.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-v15-latin-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  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: "Source Serif 4";
  src: url("/fonts/source-serif-4-v15-latin-ext-italic.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* How far the door stands open. Registered so that it can be animated; its
   initial value is the open door, which is what a reader who asked for less
   motion sees. */
@property --open { syntax: '<angle>'; inherits: true; initial-value: 68deg; }

/* ---------- Tokens ---------- */

:root {
  --ink: #0B0F19;
  --slate: #111827;
  --room: #0E3B3A;
  --teal: #2DD4BF;
  --lime: #D9F99D;
  --paper: #E8EEEC;
  --mist: #A3B1B8;
  --line: rgba(45, 212, 191, .46);
  --line-soft: rgba(45, 212, 191, .2);

  --font-display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-text: "Source Serif 4", Georgia, "Times New Roman", serif;
  /* The mockup's names for the two stacks: --text is the reading font, not a colour. */
  --display: var(--font-display);
  --text: var(--font-text);

  --gutter: clamp(20px, 6.67vw, 96px);
  --max: 1248px;
  --room-pad: clamp(96px, 11vw, 160px);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ink); color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-size: clamp(17px, 1.25vw, 18px);
  line-height: 1.62;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

.skip {
  position: absolute;
  z-index: 20;
  left: var(--gutter);
  top: -200px;
  padding: 10px 16px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 640;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* The display voice: condensed, lowercase, tight. */
.display {
  font-family: var(--font-display);
  font-stretch: 78%;
  font-weight: 620;
  letter-spacing: -.022em;
  line-height: .92;
  text-transform: lowercase;
  margin: 0;
  text-wrap: balance;
}
.room-title { font-size: clamp(46px, 6.4vw, 92px); }
.nw { white-space: nowrap; }

.eyebrow { font-style: italic; color: var(--mist); font-size: clamp(18px, 1.4vw, 20px); margin-bottom: 30px; }
.lead { max-width: 30em; font-size: clamp(18px, 1.45vw, 21px); line-height: 1.55; }

/* Inline links in reading text. */
.ln {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: rgba(45, 212, 191, .5);
}
.ln:hover { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-size: 18px;
  text-decoration: none;
  white-space: nowrap;
}
/* The knob: lime, the one primary action of a page. */
.btn-primary {
  padding: 15px 24px 16px;
  background: var(--lime);
  color: var(--ink);
  border-radius: 2px;
  font-weight: 640;
}
.btn-primary:hover { background: #E8FBC4; }
.btn-secondary {
  padding-block: 6px;
  color: var(--paper);
  border-bottom: 1.5px solid var(--line);
  font-weight: 520;
}
.btn-secondary:hover { color: var(--teal); border-color: var(--teal); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; }

/* The way out to kubelatch.com in the bar: a teal frame. */
.btn-frame {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px 9px;
  border: 1.5px solid var(--teal);
  border-radius: 2px;
  color: var(--teal);
  text-decoration: none;
  font-weight: 560;
  white-space: nowrap;
  background: rgba(11, 15, 25, .55);
}
.btn-frame:hover { background: var(--teal); color: var(--ink); }

/* ---------- The bar (sync:nav) ---------- */

.navbar { position: relative; z-index: 6; background: var(--ink); }
.nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  padding-block: 28px;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-size: 16px;
}
.lockup { display: block; flex: none; }
.lockup-logo { height: 34px; width: auto; }
.nav-links { display: flex; gap: 30px; margin-left: auto; }
.nav-links a, .lang a { text-decoration: none; color: var(--paper); }
.nav-links a:hover, .lang a:hover { color: var(--teal); }
.nav-links a[aria-current="page"] { color: var(--teal); }
.nav-end { display: flex; align-items: center; gap: 26px; }
.lang { color: var(--mist); white-space: nowrap; }
.lang span[aria-current] { color: var(--paper); font-weight: 600; }
.lang a { color: var(--mist); }

/* ---------- The floor (sync:footer) ---------- */

.foot { padding-block: clamp(64px, 7vw, 96px) 40px; font-family: var(--font-display); font-stretch: 92%; font-size: 16px; }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 48px; }
.foot-brand { grid-column: 1 / 5; }
.foot-brand p { margin-top: 20px; max-width: 22em; color: var(--mist); font-family: var(--font-text); font-size: 16px; line-height: 1.5; }
.foot-col { grid-column: span 2; }
.cols-3 > .foot-col:first-of-type { grid-column: 7 / span 2; }
.cols-4 > .foot-col:first-of-type { grid-column: 5 / span 2; }
.foot-col h2 { font-size: 15px; font-weight: 500; color: var(--mist); margin: 0 0 16px; letter-spacing: 0; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-col a { text-decoration: none; }
.foot-col a:hover, .foot-col a[aria-current="page"] { color: var(--teal); }
.foot-base { display: flex; justify-content: space-between; gap: 10px 24px; margin-top: 72px; padding-top: 24px; border-top: 1px solid var(--line-soft); color: var(--mist); font-size: 15px; }

/* ---------- Home: the stage ----------
   The hero and the products share one overflow box, so the door can be
   cropped at the top and its light can fall into the next room. On the home
   the bar fades out over the top of the door. */

.home .navbar {
  background: linear-gradient(180deg, var(--ink) 0, var(--ink) 58%, rgba(11, 15, 25, .82) 74%, rgba(11, 15, 25, 0) 100%);
  padding-bottom: 72px;
  margin-bottom: -72px;
}
.stage { position: relative; overflow: hidden; isolation: isolate; }

.hero { position: relative; padding-top: clamp(72px, 10vw, 150px); padding-bottom: clamp(104px, 11vw, 160px); }
.hero-copy { position: relative; z-index: 4; }
.hero-title {
  font-size: clamp(66px, 11.2vw, 168px);
  font-stretch: 75%;
  font-weight: 620;
  line-height: .84;
  letter-spacing: -.018em;
}
.hero-title span { display: block; }
/* The second sentence in teal: the care is what stays. */
.hero-title .turn { color: var(--teal); }
.hero .lead { margin-top: 48px; }
.hero .actions { margin-top: 44px; }

/* ---------- The door (decorative, aria-hidden) ---------- */

.door {
  --dw: min(40vw, 590px);
  position: absolute;
  z-index: 1;
  top: -230px;
  bottom: 0;
  right: max(var(--gutter), (100% - var(--max)) / 2);
  width: var(--dw);
  animation: swing 2.2s cubic-bezier(.3, .7, .15, 1) .25s both;
}
.door-frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--teal);
  border-bottom: 0;
  background:
    radial-gradient(85% 30% at 72% 100%, rgba(45, 212, 191, .34), transparent 72%),
    linear-gradient(180deg, #0C3333 0%, var(--room) 55%, #0F4341 100%);
  overflow: hidden;
}
/* The lab beyond: a back wall and the floor lines, very faint. */
.door-frame::before {
  content: "";
  position: absolute;
  left: 26%; right: 15%; bottom: 21%; height: 46%;
  border: 1px solid rgba(45, 212, 191, .2);
  border-top: 0;
}
.door-frame::after {
  content: "";
  position: absolute;
  left: 85%; right: 0; bottom: 0; height: 21%;
  background: linear-gradient(to top right, transparent calc(50% - .6px), rgba(45, 212, 191, .26) 50%, transparent calc(50% + .6px));
}
.door-sill {
  position: absolute;
  left: -22px; right: -22px; bottom: -1px;
  height: 2px;
  background: var(--teal);
}
.door-sill::after {
  content: "";
  position: absolute;
  left: -26px; right: -26px; top: 11px;
  height: 1px;
  background: var(--line);
}
.door-leaf {
  position: absolute;
  inset: 2px 2px 0 2px;
  transform-origin: 0 50%;
  transform: perspective(calc(var(--dw) * 4.5)) rotateY(calc(var(--open, 68deg) * -1));
  transform-style: preserve-3d;
  border: 2px solid var(--teal);
  background: linear-gradient(90deg, #0F1522 0%, var(--slate) 55%, #16243A 100%);
}
.door-leaf i { position: absolute; border: 1.5px solid rgba(45, 212, 191, .5); }
/* Turned, the leaf narrows its vertical lines by cos(angle), under a pixel at
   68deg: widen them by as much, so they read as wide as the horizontal ones. */
.door-leaf i { border-inline-width: calc(1.5px / cos(var(--open))); }
.door-leaf i:nth-child(1) { left: 11%; width: 33%; top: 8%; bottom: 40%; }
.door-leaf i:nth-child(2) { right: 11%; width: 33%; top: 8%; bottom: 40%; }
.door-leaf i:nth-child(3) { left: 11%; width: 33%; top: 66%; bottom: 6%; }
.door-leaf i:nth-child(4) { right: 11%; width: 33%; top: 66%; bottom: 6%; }
.door-knob {
  --k: clamp(13px, calc(var(--dw) * .04), 24px);
  position: absolute;
  right: 5%;
  top: 61.5%;
  width: var(--k);
  height: var(--k);
  margin-top: calc(var(--k) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #F1FDD6 0 22%, var(--lime) 48%, #B9E07A 100%);
  transform: translateZ(calc(var(--k) * 1.1)) rotateY(var(--open, 68deg));
}
/* The light from the doorway, falling on the floor in front of it and into the next room. */
.door-spill {
  position: absolute;
  top: 100%;
  left: -34%;
  right: -40%;
  height: min(78vw, 900px);
  clip-path: polygon(46.5% 0, 77.5% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, rgba(45, 212, 191, .2) 0%, rgba(45, 212, 191, .07) 38%, rgba(45, 212, 191, 0) 82%);
  animation: dawn 1.8s ease-out 1s both;
}

@keyframes swing { from { --open: 0deg; } to { --open: 68deg; } }
@keyframes dawn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Home: the rooms ---------- */

.room { position: relative; padding-block: var(--room-pad); }
.room-head { position: relative; }

/* Products: in the light from the door. */
.room-products { padding-top: clamp(40px, 5vw, 72px); }
.products {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
}
.products > .room-head { grid-column: 1 / 6; align-self: start; }
.product { grid-column: 7 / 13; margin-top: clamp(48px, 10.5vw, 156px); }
.product-name {
  font-size: clamp(72px, 8.8vw, 128px);
  font-stretch: 75%;
  font-weight: 640;
  line-height: .8;
  letter-spacing: -.02em;
  color: var(--paper);
}
.product-line { font-style: italic; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.25; margin-top: 30px; max-width: 18em; }
.product-body { margin-top: 26px; max-width: 32em; }
.product-free { margin-top: 34px; padding-top: 18px; border-top: 1.5px solid var(--line); max-width: 30em; color: var(--mist); }
.room-links { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 30px; font-family: var(--font-display); font-stretch: 92%; font-size: 18px; font-weight: 540; }
.who-text .room-links { margin-top: 32px; }

/* How we work: a four-panel door you read. */
.room-how { background: var(--slate); }
.how-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.how-head .room-head { grid-column: 1 / 8; }
.panels {
  list-style: none;
  margin: clamp(56px, 7vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid var(--line);
  border-bottom: 0;
  position: relative;
}
.panels::after {
  content: "";
  position: absolute;
  left: -24px; right: -24px; bottom: 0;
  height: 2px;
  background: var(--teal);
}
.panel {
  position: relative;
  padding: 46px 34px 60px;
  display: flex;
  flex-direction: column;
  gap: clamp(96px, 13vw, 190px);
}
.panel + .panel { border-left: 2px solid var(--line); }
.panel::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--line-soft);
  pointer-events: none;
}
.panel-n { font-family: var(--font-display); font-stretch: 75%; font-weight: 500; font-size: 44px; line-height: 1; color: var(--teal); }
.panel h3 { font-size: clamp(26px, 2.2vw, 31px); line-height: 1; min-height: 2em; margin-bottom: 18px; font-stretch: 82%; }
.panel p { font-size: 17px; line-height: 1.58; color: #D4DCDC; }
/* In four columns the Spanish titles run to three lines: the texts still start level. */
@media (min-width: 1101px) {
  .panels:lang(es) h3 { min-height: 3em; }
}

/* Who: the portrait is a door with the initials in it. */
.who { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.who > .room-head { grid-column: 1 / 13; margin-bottom: clamp(56px, 7vw, 96px); }
.portrait {
  grid-column: 1 / 4;
  position: relative;
  aspect-ratio: 58 / 82;
  width: 100%;
  max-width: 240px;
  border: 2px solid var(--teal);
  background: linear-gradient(180deg, #0C3333, var(--room));
  display: flex;
  align-items: flex-end;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 640;
  font-size: clamp(64px, 6vw, 88px);
  line-height: .8;
  letter-spacing: -.03em;
  color: var(--paper);
}
.portrait::after {
  content: "";
  position: absolute;
  left: -16px; right: -16px; bottom: -2px;
  height: 2px;
  background: var(--teal);
}
.who-text { grid-column: 5 / 12; }
.who-name { font-family: var(--font-display); font-stretch: 88%; font-size: 20px; font-weight: 560; color: var(--mist); }
.who-name strong { color: var(--paper); font-weight: 620; }
.who-quote { font-style: italic; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.22; margin-top: 22px; max-width: 20em; }
.who-body { margin-top: 28px; max-width: 34em; }

/* From the blog: the newest posts (sync:latest). */
.room-blog { padding-top: 0; }
.blog-room { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: var(--room-pad); border-top: 1px solid var(--line-soft); }
.blog-room > .room-head { grid-column: 1 / 5; align-self: start; }
.blog-room .room-title { font-size: clamp(40px, 4.4vw, 64px); }
.blog-list { grid-column: 5 / 13; }
.latest { list-style: none; margin: 0; padding: 0; }
.latest a {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 24px 0 26px;
  border-bottom: 1px solid var(--line-soft);
  text-decoration: none;
}
.latest li:first-child a { padding-top: 6px; }
.latest time { font-family: var(--font-display); font-stretch: 92%; font-size: 15px; color: var(--mist); white-space: nowrap; }
.latest-title { font-family: var(--font-display); font-stretch: 84%; font-weight: 520; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
.latest a:hover .latest-title { color: var(--teal); }
.all { display: inline-block; margin-top: 30px; font-family: var(--font-display); font-stretch: 92%; font-size: 18px; font-weight: 540; }

/* Contact: the room inside, and the doorway out. */
.room-contact { background: var(--room); padding-bottom: 0; }
.contact {
  position: relative;
  border: 2px solid var(--line);
  border-bottom: 0;
  padding: clamp(56px, 7vw, 104px) clamp(22px, 6vw, 96px) clamp(80px, 9vw, 140px);
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  column-gap: 24px;
  background: radial-gradient(70% 55% at 50% 100%, rgba(45, 212, 191, .14), transparent 75%);
}
.contact::after {
  content: "";
  position: absolute;
  left: -24px; right: -24px; bottom: 0;
  height: 2px;
  background: var(--teal);
}
.contact > .room-title { grid-column: 1 / 5; }
.contact-text { grid-column: 5 / 11; }
.contact-main { font-size: clamp(21px, 2vw, 28px); line-height: 1.42; }
.contact-main .ln { white-space: nowrap; }
.contact-aside { margin-top: 32px; max-width: 32em; color: #C9D3D2; }
.contact-aside + .contact-aside { margin-top: 14px; }

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
  .nav-links { gap: 22px; }
  .panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel:nth-child(3) { border-left: 0; }
  .panel:nth-child(n + 3) { border-top: 2px solid var(--line); }
}

@media (max-width: 860px) {
  /* The bar takes two rows: the logo, the switch and the way out, then the sections. */
  .nav { flex-wrap: wrap; gap: 14px 20px; padding-block: 18px 16px; background: var(--ink); }
  .nav .lockup-logo { height: 27px; }
  .nav-end { margin-left: auto; gap: 14px; }
  .nav-links { order: 3; width: 100%; margin-left: 0; gap: 8px 22px; flex-wrap: wrap; font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
  .btn-frame { padding: 6px 10px 7px; font-size: 14px; }
  .lang { font-size: 15px; }

  /* A smaller door, so the headline is on the first screen of a phone. */
  .door { --dw: min(46vw, 300px); top: -260px; bottom: auto; height: calc(260px + clamp(180px, 52vw, 340px)); }
  .hero { padding-top: calc(clamp(180px, 52vw, 340px) + 56px); padding-bottom: 96px; }
  .hero .eyebrow { margin-bottom: 22px; }
  .hero-title { font-size: min(15.5vw, 66px); }
  .hero-title span { display: inline; }
  .hero-title span:nth-child(2)::after { content: "\A"; white-space: pre; }
  .hero .lead { margin-top: 32px; }

  .products > .room-head, .product { grid-column: 1 / -1; }
  .product { margin-top: 56px; }
  .how-head .room-head { grid-column: 1 / -1; }

  .portrait { grid-column: 1 / 6; max-width: 150px; font-size: 60px; }
  .who-text { grid-column: 1 / -1; margin-top: 44px; }

  .blog-room > .room-head, .blog-list { grid-column: 1 / -1; }
  .blog-list { margin-top: 44px; }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact > .room-title, .contact-text { grid-column: 1 / -1; }
  .contact-text { margin-top: 36px; }

  .foot-brand { grid-column: 1 / -1; }
  .foot-col, .cols-3 > .foot-col:first-of-type, .cols-4 > .foot-col:first-of-type { grid-column: span 6; }
}

@media (max-width: 600px) {
  .panels { grid-template-columns: minmax(0, 1fr); }
  .panel + .panel { border-left: 0; border-top: 2px solid var(--line); }
  .panel { padding: 34px 28px 44px; gap: 48px; }
  .panel h3 { min-height: 0; }
  .latest a { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .contact-main .ln { white-space: normal; overflow-wrap: anywhere; }
  .foot-col:last-of-type { grid-column: 1 / -1; }
  .foot-base { flex-direction: column; }
}

/* The Spanish sections are longer: at phone width a narrower gap keeps them on
   one row, so the bar stays at two. */
@media (max-width: 400px) {
  .nav-links:lang(es) { gap: 8px 16px; }
}

/* Less motion: the door stands open from the start, its light already on the floor. */
@media (prefers-reduced-motion: reduce) {
  .door, .door-spill { animation: none; }
}

/* === inner pages (legal, privacy, 404, blog) === */
/* The reading rooms. Legal, privacy, the blog index and the posts share one
   layout, .read: a page head where a small door built in CSS stands ajar on
   the threshold, its light falling into the room, then a narrow measure of
   Source Serif 4 on the night ground, headings in Bricolage and teal links.
   The blog index lists the posts as doorways (.doorways); the 404 is a closed
   door with light under it (.door-closed). Everything comes from the custom
   properties of :root and from .wrap and .btn; no other rule of this sheet is
   needed. Lime is the knobs and the focus ring, nothing else. Contrast on
   --ink: --paper 16.3:1, --mist 8.7:1, --teal 10.3:1; on --room, where a
   doorway lights up: --paper 10.5:1, --mist 5.6:1, --teal 6.6:1, and in its
   glow at the brightest (teal at 14% over --room) --paper 7.8:1 and --teal
   4.9:1; under the door's light at its brightest (teal at 20% over --ink):
   --paper 11.0:1, --mist 5.9:1, --teal 7.0:1. The motion (the leaf opening,
   the light coming on, a locked door tried once) is CSS only, and stops
   under reduced motion with the door open and the light on. */

@property --read-open { syntax: "<angle>"; inherits: true; initial-value: 62deg; }

.read,
.door-closed-page {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
  font-optical-sizing: auto;
}
.read :focus-visible,
.door-closed-page :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

/* The page head: the name of the room, and its door on the threshold. */
.read-head { padding-top: clamp(56px, 7vw, 104px); }
.read-head-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(20px, 6vw, 112px);
  border-bottom: 1px solid var(--line-soft);
}
.read-head-text { padding-bottom: clamp(36px, 4.4vw, 64px); }
.read-title {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 620;
  font-size: clamp(54px, 8.6vw, 124px);
  line-height: .86;
  letter-spacing: -.018em;
  text-transform: lowercase;
  text-wrap: balance;
  color: var(--paper);
}
/* A post keeps its title as written: it names a piece, not a room. */
.read-title--post {
  font-size: clamp(38px, 5.6vw, 84px);
  font-stretch: 78%;
  line-height: .94;
  letter-spacing: -.014em;
  text-transform: none;
}
.read-meta,
.post-meta {
  margin: 24px 0 0;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist);
}

/* The door: a frame onto the lit room, the leaf ajar on its hinge, the lime
   knob, the sill, and the light it lets out across the floor. */
.read-door {
  --rd-w: clamp(58px, 10.5vw, 156px);
  position: relative;
  width: var(--rd-w);
  aspect-ratio: 5 / 8;
  animation: read-swing 1.9s cubic-bezier(.3, .7, .15, 1) .2s both;
}
.read-door-frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--teal);
  border-bottom: 0;
  background:
    radial-gradient(90% 34% at 70% 100%, color-mix(in srgb, var(--teal) 34%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--room) 86%, var(--ink)) 0%, var(--room) 55%, color-mix(in srgb, var(--room) 92%, var(--teal)) 100%);
  overflow: hidden;
}
.read-door-frame::before {
  content: "";
  position: absolute;
  left: 30%;
  right: 14%;
  bottom: 20%;
  height: 44%;
  border: 1px solid var(--line-soft);
  border-top: 0;
}
.read-door-leaf {
  position: absolute;
  inset: 2px 2px 0;
  z-index: 1; /* swung out over the sill, as on the home page */
  transform-origin: 0 50%;
  transform: perspective(calc(var(--rd-w) * 4.5)) rotateY(calc(var(--read-open, 62deg) * -1));
  transform-style: preserve-3d;
  border: 1.5px solid var(--teal);
  background: linear-gradient(90deg, var(--ink) 0%, var(--slate) 55%, color-mix(in srgb, var(--slate) 86%, var(--teal)) 100%);
}
.read-door-leaf::before,
.read-door-leaf::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  border: 1px solid var(--line);
}
.read-door-leaf::before { top: 8%; bottom: 44%; }
.read-door-leaf::before,
.read-door-leaf::after { border-inline-width: calc(1px / cos(var(--read-open))); }
.read-door-leaf::after { top: 62%; bottom: 7%; }
.read-door-knob {
  --k: clamp(6px, calc(var(--rd-w) * .07), 11px);
  position: absolute;
  right: 6%;
  top: 53%;
  width: var(--k);
  height: var(--k);
  margin-top: calc(var(--k) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--lime) 45%, white) 0 22%, var(--lime) 50%, color-mix(in srgb, var(--lime) 78%, var(--teal)) 100%);
  transform: translateZ(calc(var(--k) * 1.1)) rotateY(var(--read-open, 62deg));
}
.read-door::after {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: -1px;
  height: 2px;
  background: var(--teal);
}
.read-door::before {
  content: "";
  position: absolute;
  top: 100%;
  left: -70%;
  right: -70%;
  height: clamp(220px, 34vw, 520px);
  clip-path: polygon(46% 0, 71% 0, 100% 100%, 4% 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 20%, transparent) 0%, color-mix(in srgb, var(--teal) 6%, transparent) 40%, transparent 85%);
  pointer-events: none;
  animation: read-dawn 1.6s ease-out .9s both;
}

/* The room: one narrow measure, in the light from the door. */
.read-body {
  position: relative;
  z-index: 1;
  padding-block: clamp(44px, 5.4vw, 80px) clamp(96px, 11vw, 160px);
  font-size: clamp(17px, 1.3vw, 19px);
  line-height: 1.7;
  overflow-wrap: break-word;
}
.read-body > * { max-width: 40rem; }
.read-body p { margin: 1.15em 0 0; }
.read-body > :first-child { margin-top: 0; }
.read-lead {
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.5;
  color: var(--paper);
}
.read-body section { margin: 0; }
.read-body h2 {
  margin: clamp(52px, 5.6vw, 80px) 0 0;
  font-family: var(--font-display);
  font-stretch: 84%;
  font-weight: 580;
  font-size: clamp(27px, 2.4vw, 36px);
  line-height: 1.06;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--paper);
}
/* A lintel over each heading: the same teal line as the sill. */
.read-body h2::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 20px;
  background: var(--teal);
}
.read-body h2 + p { margin-top: .75em; }
.read-body a {
  color: var(--teal);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  text-decoration-color: color-mix(in srgb, var(--teal) 50%, transparent);
}
.read-body a:hover { text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.read-body strong { font-weight: 650; color: var(--paper); }
.read-body ul,
.read-body ol { margin: 1.15em 0 0; padding-left: 1.3em; }
.read-body ul { list-style: square; }
.read-body li { margin-top: .55em; padding-left: .2em; }
.read-body li::marker { color: var(--teal); }
.read-body code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .84em;
}
.read-body :not(pre) > code {
  padding: .06em .32em;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: var(--slate);
  color: var(--paper);
  overflow-wrap: anywhere;
}
/* Code may run wider than the measure. */
.read-body > pre { max-width: 56rem; }
.read-body pre {
  margin: 1.4em 0 0;
  padding: 18px 20px;
  overflow-x: auto;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--teal);
  background: var(--slate);
  color: var(--paper);
  font: 14px/1.6 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  tab-size: 2;
}

/* The blog index: the posts as doorways, side by side on one floor. The
   title comes first in the markup; the date hangs at the top of the door,
   where a house number would. */
.read-body > .doorways {
  max-width: none;
  list-style: none;
  margin: clamp(56px, 6.4vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 5vw, 72px) 32px;
}
.doorways .doorway {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(56px, 1fr) auto auto;
  min-height: clamp(320px, 30vw, 430px);
  margin: 0;
  padding: clamp(28px, 2.6vw, 40px) clamp(56px, 5.4vw, 80px) clamp(34px, 3vw, 48px) clamp(26px, 3vw, 44px);
  border: 2px solid var(--line);
  border-bottom: 0;
  transition: background-color .35s ease, border-color .35s ease;
}
.doorways .doorway::before {
  content: "";
  position: absolute;
  inset: 12px 12px 0;
  border: 1px solid var(--line-soft);
  border-bottom: 0;
  pointer-events: none;
}
.doorways .doorway::after {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  bottom: 0;
  height: 2px;
  background: var(--teal);
}
.doorways .doorway-date {
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 92%;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mist);
}
.doorways .doorway-title {
  grid-row: 3;
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 82%;
  font-weight: 600;
  font-size: clamp(27px, 2.5vw, 38px);
  line-height: 1.04;
  letter-spacing: -.012em;
  text-wrap: balance;
  color: var(--paper);
}
.doorways .doorway-title::before { content: none; }
.doorways .doorway-title a {
  color: inherit;
  text-decoration: none;
}
/* The whole door is the link. */
.doorways .doorway-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.doorways .doorway-summary {
  grid-row: 4;
  margin: 16px 0 0;
  max-width: 30em;
  font-size: 17px;
  line-height: 1.55;
}
/* Its knob, on the lock rail, in the room the right padding keeps. */
.doorways .doorway-date::after {
  content: "";
  position: absolute;
  right: clamp(24px, 2.4vw, 34px);
  top: 55%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--lime) 45%, white) 0 22%, var(--lime) 50%, color-mix(in srgb, var(--lime) 78%, var(--teal)) 100%);
}
.doorways .doorway:hover,
.doorways .doorway:focus-within {
  border-color: var(--teal);
  background-color: var(--room);
  background-image: radial-gradient(80% 40% at 50% 100%, color-mix(in srgb, var(--teal) 14%, transparent), transparent 75%);
}
.doorways .doorway:hover .doorway-title,
.doorways .doorway:focus-within .doorway-title { color: var(--teal); }
/* The focus ring goes round the door, not round the words of the title. */
.doorways .doorway-title a:focus-visible { outline: none; }
.doorways .doorway:focus-within { outline: 2px solid var(--lime); outline-offset: 6px; }

/* The 404: the same door, closed, and light under it from a room that is
   not this one. */
.door-closed-page { padding-block: clamp(56px, 7vw, 104px) clamp(112px, 12vw, 180px); }
.door-closed-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(32px, 8vw, 140px);
}
.door-closed-code {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  color: var(--teal);
}
.door-closed-title {
  margin: 28px 0 0;
  font-family: var(--font-display);
  font-stretch: 75%;
  font-weight: 620;
  font-size: clamp(54px, 8.4vw, 124px);
  line-height: .86;
  letter-spacing: -.018em;
  text-transform: lowercase;
  text-wrap: balance;
  color: var(--paper);
}
.door-closed-lead {
  margin: 36px 0 0;
  max-width: 26em;
  font-size: clamp(18px, 1.45vw, 21px);
  line-height: 1.55;
}
.door-closed-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 44px;
}
.door-closed {
  --dc-w: clamp(150px, 22vw, 300px);
  position: relative;
  width: var(--dc-w);
  aspect-ratio: 5 / 8;
  margin-bottom: 40px;
  border: 2px solid var(--teal);
  border-bottom: 0;
  background: linear-gradient(0deg, var(--teal) 0, color-mix(in srgb, var(--teal) 55%, transparent) 2px, transparent 7px), var(--ink);
}
.door-closed-leaf {
  position: absolute;
  inset: 3px 3px 5px;
  border: 1.5px solid var(--line);
  background: linear-gradient(90deg, var(--ink) 0%, var(--slate) 45%, color-mix(in srgb, var(--slate) 88%, var(--teal)) 100%);
  animation: door-closed-try .8s ease-in-out 1.1s both;
}
.door-closed-leaf i {
  position: absolute;
  width: 32%;
  border: 1.5px solid var(--line);
}
.door-closed-leaf i:nth-child(1) { left: 12%; top: 7%; bottom: 42%; }
.door-closed-leaf i:nth-child(2) { right: 12%; top: 7%; bottom: 42%; }
.door-closed-leaf i:nth-child(3) { left: 12%; top: 64%; bottom: 6%; }
.door-closed-leaf i:nth-child(4) { right: 12%; top: 64%; bottom: 6%; }
.door-closed-knob {
  --k: clamp(11px, calc(var(--dc-w) * .055), 18px);
  position: absolute;
  right: 5%;
  top: 56%;
  width: var(--k);
  height: var(--k);
  margin-top: calc(var(--k) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--lime) 45%, white) 0 22%, var(--lime) 50%, color-mix(in srgb, var(--lime) 78%, var(--teal)) 100%);
}
.door-closed::before {
  content: "";
  position: absolute;
  left: -26px;
  right: -26px;
  bottom: -1px;
  height: 2px;
  background: var(--teal);
  box-shadow: 0 12px 0 -.5px var(--line-soft);
}
.door-closed::after {
  content: "";
  position: absolute;
  top: 100%;
  left: -40%;
  right: -40%;
  height: clamp(56px, 7vw, 104px);
  background: radial-gradient(46% 100% at 50% 0, color-mix(in srgb, var(--teal) 30%, transparent), transparent 72%);
  pointer-events: none;
  animation: read-dawn 2.2s ease-out .3s both;
}

@keyframes read-swing { from { --read-open: 0deg; } to { --read-open: 62deg; } }
@keyframes read-dawn { from { opacity: 0; } to { opacity: 1; } }
@keyframes door-closed-try {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-2px); }
  30% { transform: translateX(2px); }
  45% { transform: translateX(-1.5px); }
  60% { transform: translateX(1px); }
  75% { transform: translateX(0); }
}

/* ---------- The newsletter sign-up (sync:newsletter) ---------- */

/* The block: a doorway at the foot of the blog room, after the blog's
   doorways and on /newsletter/; the card: the same, leaning in from the
   corner of a post once the reader is past its middle (newsletter.js). */
.nl-block {
  margin-top: clamp(48px, 5vw, 72px);
  padding: 28px 32px 32px;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--teal);
  background: var(--slate);
}
.read-body > .nl-block { margin-top: clamp(64px, 7vw, 104px); max-width: 40rem; }
.nl-eyebrow { margin: 0; font-style: italic; font-size: 17px; color: var(--mist); }
.nl-title {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-stretch: 80%;
  font-weight: 600;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1;
  letter-spacing: -.014em;
  text-transform: lowercase;
  text-wrap: balance;
  color: var(--paper);
}
/* In a page's .read-body (/blog/, /newsletter/), whose h2 and p rules weigh
   more than one class: the block keeps its own spacing and type, and no lintel. */
.read-body .nl-eyebrow { margin: 0; }
.read-body .nl-title { margin: 8px 0 0; font-stretch: 80%; font-weight: 600; font-size: clamp(28px, 2.6vw, 38px); line-height: 1; letter-spacing: -.014em; }
.read-body .nl-title::before { content: none; }
.read-body .nl-text,
.read-body .nl-fine { margin-top: 16px; }
.nl-text { margin-top: 16px; max-width: 34em; font-size: 17px; line-height: 1.6; color: #D4DCDC; }
.nl-form { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; margin-top: 26px; }
.nl-field { display: grid; gap: 6px; flex: 1 1 240px; }
.nl-field label { font-family: var(--font-display); font-stretch: 92%; font-size: 15px; color: var(--mist); }
.nl-field input {
  width: 100%;
  padding: 10px 0 9px;
  border: 0;
  border-bottom: 1.5px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font-family: var(--font-text);
  font-size: 18px;
}
.nl-field input::placeholder { color: rgba(163, 177, 184, .6); }
.nl-field input:focus { outline: none; border-bottom-color: var(--lime); }
.nl-form .btn-primary { padding-block: 12px 13px; }
/* The trap for robots: off screen, out of the tab order, hidden from readers. */
.nl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.nl-fine { margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--mist); }
.nl-fine a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: rgba(45, 212, 191, .5); }

.nl-card {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 5;
  width: min(380px, calc(100% - 56px));
  padding: 22px 24px 24px;
  border: 1px solid var(--line-soft);
  border-top: 2px solid var(--teal);
  background: var(--slate);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .7);
  max-height: calc(100vh - 56px);
  max-height: calc(100dvh - 56px);
  overflow-y: auto;
  transform: translateY(16px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.nl-card.is-open { transform: none; opacity: 1; }
.nl-card[hidden] { display: none; }
.nl-close { position: absolute; right: 10px; top: 8px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--mist); font: 22px/1 var(--font-display); cursor: pointer; }
.nl-close:hover { color: var(--paper); }
.nl-card .nl-title { font-size: 24px; }
.nl-card .nl-text { margin-top: 10px; font-size: 15px; }
.nl-card .nl-form { margin-top: 16px; gap: 10px 12px; }
.nl-card .nl-field { flex-basis: 160px; }
.nl-card .nl-field input { padding-block: 7px 6px; font-size: 16px; }
.nl-card .btn-primary { padding: 9px 16px 10px; font-size: 16px; }
.nl-card .nl-fine { margin-top: 12px; font-size: 13px; }
/* The notice of an expired link, shown only when the page is opened at #expired. */
.nl-expired { display: none; padding: 14px 18px; border-left: 2px solid var(--teal); background: var(--slate); color: var(--paper); }
.nl-expired:target { display: block; }

@media (max-width: 860px) {
  .read-body > .doorways { gap: 48px 28px; }
  .doorways .doorway { min-height: 300px; }
  .door-closed-in { grid-template-columns: minmax(0, 1fr); }
  .door-closed { --dc-w: clamp(112px, 30vw, 168px); order: -1; margin-bottom: 72px; }
}

@media (max-width: 640px) {
  .read-body > .doorways { grid-template-columns: minmax(0, 1fr); }
  .doorways .doorway { min-height: 0; grid-template-rows: auto 40px auto auto; }
  .doorways .doorway::before { inset: 10px 10px 0; }
  .read-body pre { margin-inline: calc(var(--gutter) * -1); border-inline-width: 0 0; border-left-width: 2px; font-size: 13px; padding: 16px var(--gutter) 16px 18px; }
  .nl-card { right: 0; bottom: 0; width: 100%; border-inline: 0; }
  .nl-block { padding: 22px 20px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .read-door,
  .read-door::before,
  .door-closed-leaf,
  .door-closed::after { animation: none; }
  .doorways .doorway { transition: none; }
  .nl-card { transition: none; transform: none; }
}

/* The footer's backer: Jaraxa's wordmark in the text's colour, as a mask, so it greys with the line and lights up on hover. */
.backer { display: inline-block; vertical-align: -7px; margin-left: 2px; color: inherit; }
.backer:hover, .backer:focus-visible { color: var(--paper); }
.backer-logo { display: block; width: 46px; height: 23px; background: currentColor; -webkit-mask: url(/brand/jaraxa.svg) center / contain no-repeat; mask: url(/brand/jaraxa.svg) center / contain no-repeat; }