/* ==========================================================================
   linefeed.be — the site.

   "Cream Studio" is the design: warm cream paper lit from the top-left corner,
   a floating pill dock, an oversized tight headline with a profile card beside
   it, product cards resting on soft shadows, and a near-black block at the end.

   Its distinguishing marks:
     · one soft steel blue accent, and neutrals with any green cast taken out
       of them;
     · the photographed portrait in the profile card;
     · an abstract steel-blue showpiece as the backdrop of the first screen;
     · product cards carrying each product's own colour and own logo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The typefaces, shipped with the site.

   Both are variable fonts under the SIL Open Font License; the licence text
   travels with them in assets/fonts/. Two subsets each — latin and latin-ext —
   which together cover every character this page and any western-European name
   can need. Only the upright cuts are shipped; the page uses no italic.

   `swap` keeps the text readable while the file arrives, exactly as the CDN
   stylesheet did before, so the first paint looks the same as it always has.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin.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: 'Manrope';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('assets/fonts/manrope-latin-ext.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin-ext.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;
}

/* Both palettes in one place. `light-dark()` resolves them from the used
   color-scheme, so the operating system decides by default and nothing is
   repainted after load — no flash of the wrong theme. */
:root {
  color-scheme: light dark;

  --paper: light-dark(#f7f0e2, #0f1114);
  --paper-2: light-dark(#fffdf6, #171a1e);
  --ink: light-dark(#1b1c1e, #eef1f4);
  --ink-2: light-dark(#5c6068, #a4abb4);
  --ink-3: light-dark(#8b9099, #737a83);

  /* The accent. Soft steel blue — muted, close to grey, deliberately quiet. */
  --accent: light-dark(#3f5f7e, #8fb0cf);
  --accent-soft: light-dark(rgba(63, 95, 126, 0.10), rgba(143, 176, 207, 0.14));
  --glow: light-dark(rgba(63, 95, 126, 0.16), rgba(143, 176, 207, 0.14));
  --on-accent: light-dark(#f7f0e2, #0d0f12);

  --edge: light-dark(#e8dfcb, #242830);
  /* `light-dark()` resolves colours, never whole shadow values — so the colour
     is the part that switches and the geometry stays fixed. */
  --shade: light-dark(rgba(56, 48, 20, 0.38), rgba(0, 0, 0, 0.85));
  --shade-deep: light-dark(rgba(56, 48, 20, 0.46), rgba(0, 0, 0, 0.95));
  --shadow: 0 18px 40px -22px var(--shade);
  --shadow-lift: 0 30px 60px -26px var(--shade-deep);

  --slab: light-dark(#14161a, #050609);
  --slab-ink: #f4f1e6;
  --slab-ink-2: #a6acb6;
  --slab-accent: #a8c4dd;

  --dock-h: 58px;
  --r: 20px;
}

/* An explicit choice from the switch overrides the operating system. */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--dock-h) + 28px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  font-size: 16.5px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

a { color: inherit; }

h1, h2 {
  font-family: 'Plus Jakarta Sans', 'Segoe UI Semibold', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin: 0;
}

img { max-width: 100%; }

/* --- The corner glow ------------------------------------------------------ */

/* Soft daylight falling in from the top-left. Atmosphere only — never clickable. */
.glow {
  position: fixed;
  top: -18vmax;
  left: -14vmax;
  width: 62vmax;
  height: 62vmax;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, var(--glow), transparent 68%);
  filter: blur(28px);
}

/* --- Floating dock -------------------------------------------------------- */

.dock {
  position: fixed;
  z-index: 20;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 26px);
  width: calc(100% - 24px);
  max-width: 720px;
  height: var(--dock-h);
  padding: 0 8px 0 18px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: light-dark(rgba(255, 253, 246, 0.82), rgba(23, 26, 30, 0.82));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.dock__mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

/* One word, not three: the dock's gap must not fall inside the wordmark. */
.dock__word { white-space: nowrap; }

.dock__sep { color: var(--accent); }

.dock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.dock__links {
  display: flex;
  gap: 20px;
  margin-left: auto;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.dock__links a {
  position: relative;
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.2s ease;
}

.dock__links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transition: right 0.25s ease;
}

.dock__links a:hover,
.dock__links a:focus-visible { color: var(--ink); }
.dock__links a:hover::after,
.dock__links a:focus-visible::after { right: 0; }

/* The switch only works with scripting, so it is only shown when scripting runs. */
#theme-toggle { display: none; }
.js #theme-toggle { display: inline-flex; }

.dock__switch {
  align-items: center;
  gap: 8px;
  margin-left: auto;
  padding: 9px 16px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.js .dock__links { margin-left: auto; }
.js .dock__switch { margin-left: 0; }

.dock__switch:hover,
.dock__switch:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  transform: translateY(-1px);
}

.dock__orb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* --- Layout --------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(var(--dock-h) + clamp(28px, 5vw, 48px)) clamp(20px, 5vw, 44px) 0;
}

.tag,
.kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.tag__mark {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.kicker__bar {
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* --- The showpiece -------------------------------------------------------- */

/* The abstract visual, carried as the backdrop of the first screen. It spans
   the full width behind the headline and fades into the paper before the text
   below needs the contrast. Atmosphere only — never clickable. */
.showpiece {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: clamp(220px, 23vw, 360px);
  pointer-events: none;
}

.showpiece__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Quiet enough to sit under the headline, stronger in the dark mode where
     the same tints have less paper to fight. */
  opacity: light-dark(0.55, 0.7);
  /* The bottom edge dissolves instead of cutting. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%);
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
  /* Room at the top so the backdrop reads before the headline starts. */
  padding-top: clamp(30px, 7vw, 96px);
  padding-bottom: clamp(64px, 10vw, 120px);
}

.hero__title {
  font-size: clamp(3rem, 10.5vw, 6.6rem);
  line-height: 0.9;
  margin: 0 0 24px;
}

.hero__title-accent { color: var(--accent); }

.hero__lede {
  margin: 0 0 30px;
  max-width: 46ch;
  font-size: clamp(1.02rem, 2.1vw, 1.2rem);
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn--solid {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow);
}

.btn--ghost {
  border-color: var(--edge);
  background: var(--paper-2);
  color: var(--ink);
}

.btn:hover,
.btn:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--ghost:hover,
.btn--ghost:focus-visible { border-color: var(--accent); }

.btn__arrow { transition: transform 0.2s ease; }
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(4px); }

/* --- Profile card --------------------------------------------------------- */

.profile {
  padding: 26px 26px 24px;
  border: 1px solid var(--edge);
  border-radius: 26px;
  background: var(--paper-2);
  box-shadow: var(--shadow);
}

/* The photograph, cropped to a square that sits inside the profile card. */
.profile__avatar {
  display: block;
  width: 88px;
  height: 88px;
  margin-bottom: 18px;
  border-radius: 24px;
  object-fit: cover;
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--edge);
}

.profile__name {
  margin: 0 0 4px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.profile__role {
  margin: 0 0 16px;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.profile__status {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
}

.pulse {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2.2s ease-out infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

.profile__motto {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Bands ---------------------------------------------------------------- */

.band { padding-bottom: clamp(64px, 10vw, 118px); }

.band__title {
  max-width: 20ch;
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  line-height: 1.06;
  margin-bottom: 28px;
}

.band__title--sm { max-width: 24ch; }

.prose {
  display: grid;
  gap: 14px;
  max-width: 62ch;
  color: var(--ink-2);
}

.prose p { margin: 0; }

.prose__pull {
  margin-top: 8px;
  padding-left: 20px;
  border-left: 3px solid var(--accent);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* --- Product cards -------------------------------------------------------- */

/* Each card carries its own product's colour, read off that product's own
   site. The shape is shared, so the three still read as one page. */
.card--brainhurricane {
  --brand: #4a90e2;
  --brand-soft: rgba(74, 144, 226, 0.14);
  --brand-wash: rgba(74, 144, 226, 0.07);
}

.card--signallock {
  --brand: light-dark(#1857b8, #6aa1ff);
  --brand-soft: light-dark(rgba(24, 87, 184, 0.12), rgba(106, 161, 255, 0.16));
  --brand-wash: light-dark(rgba(24, 87, 184, 0.06), rgba(106, 161, 255, 0.08));
}

.card--kaisa {
  --brand: #d4952a;
  --brand-soft: rgba(212, 149, 42, 0.16);
  --brand-wash: rgba(212, 149, 42, 0.08);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(16px, 2.4vw, 22px);
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  padding: 30px 24px 20px;
  border: 1px solid var(--edge);
  border-radius: var(--r);
  background:
    linear-gradient(to bottom, var(--brand-wash), transparent 190px),
    var(--paper-2);
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* The product's colour, stated plainly across the top of its card. */
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--brand);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: var(--brand);
  outline: none;
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--brand-soft);
  color: var(--brand);
}

.card__logo {
  display: block;
  width: 34px;
  height: 34px;
}

/* SignalLock's mark closes on hover, the way it does on its own site. */
.card__logo-fill {
  transform-origin: center;
  transform: scale(0);
  transition: transform 0.3s ease;
}

.card:hover .card__logo-fill,
.card:focus-visible .card__logo-fill { transform: scale(1); }

.card__name {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.card__line {
  color: var(--ink-2);
  font-size: 0.96rem;
  line-height: 1.5;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}

.card__host {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.card__arrow {
  color: var(--brand);
  font-size: 1.05rem;
  transition: transform 0.25s ease;
}

.card:hover .card__arrow,
.card:focus-visible .card__arrow { transform: translateX(5px); }

/* --- The dark block ------------------------------------------------------- */

.slab {
  margin-bottom: clamp(40px, 7vw, 80px);
  padding: clamp(34px, 6vw, 62px) clamp(24px, 5vw, 56px);
  border-radius: 30px;
  /* In dark mode the paper is nearly as dark as the block, so a hairline keeps
     the block reading as a block. */
  border: 1px solid light-dark(transparent, rgba(244, 241, 230, 0.12));
  background: var(--slab);
  color: var(--slab-ink);
  box-shadow: var(--shadow);
}

.kicker--onslab { color: var(--slab-accent); }
.kicker--onslab .kicker__bar { background: var(--slab-accent); }

.slab__title {
  max-width: 22ch;
  margin-bottom: 30px;
  font-size: clamp(1.6rem, 4.2vw, 2.5rem);
  line-height: 1.08;
}

.socials {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.social {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 22px;
  border: 1px solid rgba(244, 241, 230, 0.16);
  border-radius: var(--r);
  background: rgba(244, 241, 230, 0.05);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.social:hover,
.social:focus-visible {
  background: rgba(244, 241, 230, 0.1);
  border-color: var(--slab-accent);
  transform: translateY(-3px);
  outline: none;
}

.social__net {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.social__handle {
  color: var(--slab-ink-2);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.social__arrow {
  margin-left: auto;
  color: var(--slab-accent);
  transition: transform 0.25s ease;
}

.social:hover .social__arrow,
.social:focus-visible .social__arrow { transform: translateX(5px); }

/* --- Foot ----------------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: space-between;
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 44px) 44px;
  border-top: 1px solid var(--edge);
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* --- Arrival -------------------------------------------------------------- */

/* Sections settle in as they come into view. Only with scripting: without it
   every section is simply there from the start. */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse::after { animation: none; }
  .card__logo-fill { transform: scale(1); }
  * { transition-duration: 0.01ms !important; }
}

/* --- Narrow screens ------------------------------------------------------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .profile { max-width: 420px; }
}

@media (max-width: 640px) {
  .dock { gap: 8px; padding: 0 6px 0 14px; }
  .dock__links { display: none; }
  .dock__switch, .js .dock__switch { margin-left: auto; padding: 8px 13px; }
  /* A narrow screen crops the wide drawing hard, so it is kept shallow and
     pushed off-centre to hold the blue dot inside the frame. */
  .showpiece { height: clamp(190px, 60vw, 280px); }
  .showpiece__img { object-position: 62% center; }
  .hero { padding-top: clamp(46px, 22vw, 110px); }
  .hero__title { font-size: clamp(2.6rem, 13vw, 4rem); }
  .slab { border-radius: 24px; }
}