/* =====================================================================
   Site stylesheet - light, open, Apple-like.
   Bootstrap is loaded first (local copy); this file overrides/extends it.
   ===================================================================== */

/* Inter, served locally from assets/fonts/inter (no external requests).
   Weights used by the site: 400 regular, 500 medium, 600 semibold, 700 bold.
   Italics come from the older "Inter UI" build in the same folder. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/inter/Inter-Regular.woff2') format('woff2'),
       url('../fonts/inter/Inter-Regular.woff') format('woff'),
       url('../fonts/inter/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/inter/Inter-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/inter/Inter-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/inter/Inter-Bold.woff2') format('woff2'),
       url('../fonts/inter/Inter-Bold.woff') format('woff'),
       url('../fonts/inter/Inter-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/inter/Inter-UI-Italic.woff2') format('woff2'),
       url('../fonts/inter/Inter-UI-Italic.woff') format('woff');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('../fonts/inter/Inter-UI-MediumItalic.woff2') format('woff2'),
       url('../fonts/inter/Inter-UI-MediumItalic.woff') format('woff');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 600 700; font-display: swap;
  src: url('../fonts/inter/Inter-UI-BoldItalic.woff2') format('woff2'),
       url('../fonts/inter/Inter-UI-BoldItalic.woff') format('woff');
}

:root {
  --wrap: 969px;                 /* content width on desktop */
  --gutter: 20px;                /* side padding on small screens */
  --ink: #111111;                /* primary text / nav */
  --ink-2: #5f6368;              /* secondary text */
  --ink-3: #8a8f94;              /* muted text */
  --nav-bg: #121212;             /* navbar background */
  --nav-ink: #ffffff;            /* navbar text */
  --nav-hover: #5a5a5a;          /* navbar underline on hover (dark gray) */
  --line: rgba(0, 0, 0, .08);
  --card: #ffffff;
  --accent: #ff8a3d;             /* one warm accent, used sparingly */
  --accent-ink: #d96b1f;
  --link: #0073de;               /* text links */
  --link-hover: #0057a8;         /* text links on hover (darker) */
  --banner-bg: #9269DD;          /* home-page banner (flat fallback) */
  --banner-gradient: linear-gradient(153deg, rgba(146, 105, 221, 1) 0%, rgba(96, 69, 220, 1) 18%, rgba(79, 88, 255, 1) 78%, rgba(91, 108, 227, 1) 100%);
  --banner-ink: #ffffff;         /* banner text */
  --radius: 10px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 12px 32px rgba(0,0,0,.06);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.10);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --bs-font-sans-serif: var(--font);   /* make Bootstrap components use Inter too */
}

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

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "calt", "cv11";   /* Inter: kerning, ligatures, single-storey a */
  background: #fcfcfc;
  background: linear-gradient(180deg, rgba(252, 252, 252, 1) 0%, rgba(228, 235, 237, 1) 100%);
  background-attachment: fixed;   /* constant background, does not scroll */
  display: flex;
  flex-direction: column;
}
@supports (-webkit-touch-callout: none) {
  /* iOS Safari ignores fixed attachment; paint the gradient on a fixed layer instead */
  body { background-attachment: scroll; }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(241, 241, 241, 1) 0%, rgba(227, 229, 230, 1) 100%);
  }
}

.site-main { flex: 1 0 auto; }

/* Content column ------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Scrollbar jump fix: 100vw includes the scrollbar, 100% does not, so this is half the
     scrollbar width when there is one and 0 when there is not. Nudging the centered column
     by that amount keeps it in the same place on short and long pages. Full-width bars
     (navbar, banner, footer) are unaffected. */
  position: relative;
  left: calc((100vw - 100%) / 2);
}
.wrap-narrow { max-width: calc(720px + var(--gutter) * 2); }
.wrap-wide   { max-width: calc(1200px + var(--gutter) * 2); }   /* admin tables (blog list) */

/* Text links: blue, darker + underlined on hover.
   Block links (cards, nav, buttons, footer) reset this further down. */
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--link-hover); text-decoration: underline; }
.btn, .btn:hover, .nav-link, .nav-link:hover, .brand,
.work-card, .work-card:hover, a.card-soft, a.card-soft:hover, .stat a, .stat a:hover,
.footer-links a, .footer-legal a, .post-back a { text-decoration: none; }
.work-card, a.card-soft, .stat a { color: var(--ink); }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--ink); color: #fff; padding: .5rem .9rem; border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
.site-header.is-scrolled { border-bottom-color: rgba(255,255,255,.12); }

.site-nav { padding: 14px 0; }
.brand { display: inline-flex; line-height: 0; }
.brand img { width: 44px; height: 44px; border-radius: 11px; }

.site-menu { gap: 6px; --bs-navbar-nav-link-padding-x: 14px; }   /* keep Bootstrap's padding equal to the underline inset */
.site-menu .nav-link {
  position: relative;
  color: var(--nav-ink);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  padding: 8px 14px;
  transition: color .15s ease;
}
/* 3px line under the word: faint on hover, solid on the current page */
.site-menu .nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 3px; border-radius: 2px; background: var(--accent);   /* follows the accent set in Settings */
  opacity: 0; transition: opacity .15s ease;
}
.site-menu .nav-link:hover { color: var(--nav-ink); }
.site-menu .nav-link:hover::after { opacity: 1; background: var(--nav-hover); }   /* dark gray line on hover */
.site-menu .nav-link.active, .site-menu .nav-link.active:hover { color: var(--nav-ink); }   /* beats Bootstrap's dark active color */
.site-menu .nav-link.active::after,
.site-menu .nav-link.active:hover::after { opacity: 1; background: var(--accent); } /* current page keeps the accent */

/* Hamburger (two bars -> X) */
.nav-toggle {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 12px;
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.nav-toggle:hover { background: rgba(255,255,255,.08); }
.nav-toggle span {
  display: block; width: 22px; height: 2px; background: var(--nav-ink); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 767.98px) {
  .site-nav .wrap { flex-wrap: wrap; }
  .navbar-collapse { width: 100%; }
  .site-menu { padding: 12px 0 6px; gap: 2px; }
  .site-menu .nav-link { font-size: 20px; padding: 12px 14px; width: fit-content; }
  .site-menu .nav-link::after { bottom: 6px; }
}

/* Announcement banner (home page, under the navbar; text set in /_command/banner) */
.site-banner {
  background: var(--banner-bg); background: var(--banner-gradient); color: var(--banner-ink);
  font-weight: 500; font-size: 18px; letter-spacing: -.01em;
  text-align: center; padding: 10px 0;
}
.site-banner .wrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) { .site-banner .wrap { white-space: normal; } }

/* Typography ------------------------------------------------------------ */
h1 { letter-spacing: -1.3pt; font-weight: 500; line-height: 1.1; }
h2 { letter-spacing: -0.5pt; font-weight: 500; line-height: 1.1; }
h3, .display { letter-spacing: -.02em; font-weight: 600; line-height: 1.1; }
/* Desktop sizes here; phone sizes in the media block just below. */
.h-hero    { font-size: 56px; font-weight: 300; letter-spacing: -.05em; }   /* motto on Home */
.h-title   { font-size: 48px; }                                             /* page titles (Blog, About...) */
.h-section { font-size: 28px; margin-bottom: 3px; }                         /* section headings */
.lead-text { font-size: 22px; color: var(--ink-2); font-weight: 400; line-height: 1.45; letter-spacing: -0.2pt;}  /* intro paragraph */
@media (max-width: 767.98px) {   /* phones */
  .h-hero    { font-size: 35px; }
  .h-title   { font-size: 32px; }
  .h-section { font-size: 26px; }
  .lead-text { font-size: 18px; }
}
.muted { color: var(--ink-3); }
.eyebrow {
  display: inline-block; font-size: .8rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: .4rem;
}

/* Sections ---------------------------------------------------------------
   Plain pixel spacing. Desktop values first; the phone block at the end of
   this group overrides them below 768px. Change the numbers, nothing else. */
.section       { padding-top: 24px;  padding-bottom: 35px;
}     /* big blocks (Selected work, What I do...) */
.section-tight { padding-top: 5px;  padding-bottom: 5px;  }   /* smaller blocks (cards row, CTA band, lists) */
.section-head  { max-width: 640px; margin-bottom: 12px; }       /* heading + intro above a block */
.section-head .h-section + p { color: var(--ink-2); font-size: 1.05rem; margin: 0; }

.hero { padding-top: 64px; padding-bottom: 20px; text-align: center; }   /* headline area at the top of a page */
.hero .h-hero { margin: 0 0 16px; }
.hero .lead-text { max-width: 700px; margin: 0 auto 32px; }           /* 32px = space above the buttons on Home */
.hero .lead-text:last-child { margin-bottom: 0; letter-spacing: -0.3pt;}                     /* no buttons after it (Blog, Work, About...) */
.hero + .section-tight, .hero + .section { padding-top: 34px; padding-bottom: 35px;}       /* gap between hero text and first content */

@media (max-width: 767.98px) {   /* phones */
  .section       { padding-top: 56px; padding-bottom: 56px; }
  .section-tight { padding-top: 32px; padding-bottom: 32px; }
  .section-head  { margin-bottom: 24px; }
  .hero { padding-top: 48px; padding-bottom: 16px; }
  .hero + .section-tight, .hero + .section { padding-top: 16px; }
}

/* Buttons --------------------------------------------------------------- */
.btn-pill {
  --bs-btn-padding-x: 1.35rem; --bs-btn-padding-y: .7rem;
  --bs-btn-font-weight: 500; --bs-btn-border-radius: 999px; --bs-btn-font-size: 1rem;
  --bs-btn-border-width: 1px;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn-pill:not(.btn-ghost):not(.btn-ink):hover { transform: translateY(-1px); }   /* ghost and ink have their own lift/press rules below */

/* Pressable keys (ghost + ink) ------------------------------------------
   Rest = slightly raised (thin lit top edge + soft drop shadow).
   Hover (pointer devices only) = lifts 1px.
   Press (mouse or touch) = sinks 1px, shrinks a hair, the drop shadow collapses
   and an inner shade appears, like a physical key going down.
   Each variant only sets the --key-* palette; the mechanics are shared. */
.btn-ghost, .btn-ink {
  --bs-btn-bg: var(--key-bg); --bs-btn-color: var(--key-ink); --bs-btn-border-color: var(--key-line);
  --bs-btn-hover-bg: var(--key-bg-hover); --bs-btn-hover-color: var(--key-ink); --bs-btn-hover-border-color: var(--key-line);
  --bs-btn-active-bg: var(--key-bg-active); --bs-btn-active-color: var(--key-ink); --bs-btn-active-border-color: var(--key-line-active);

  box-shadow:
    inset 0 1px 0 var(--key-hi),                              /* lit top edge */
    0 1px 2px rgba(var(--key-shade), var(--key-drop-a)),
    0 4px 10px rgba(var(--key-shade), var(--key-drop-b));
  -webkit-tap-highlight-color: transparent;                   /* no grey flash on mobile */
  touch-action: manipulation;                                 /* no 300ms tap delay, :active fires at once */
  user-select: none; -webkit-user-select: none;
  will-change: transform;
  transition: transform .18s cubic-bezier(.2, .7, .3, 1.1),   /* release: eases back up with a touch of spring */
              box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {                   /* lift only for a real pointer, so taps never stick in a hover state */
  .btn-ghost:hover, .btn-ink:hover {/*
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 var(--key-hi),
      0 2px 4px rgba(var(--key-shade), calc(var(--key-drop-a) + .02)),
      0 8px 18px rgba(var(--key-shade), calc(var(--key-drop-b) + .04));*/
  }
}
.btn-ghost:active, .btn-ghost.is-pressed,
.btn-ink:active, .btn-ink.is-pressed {
  background-color: var(--key-bg-active); border-color: var(--key-line-active); color: var(--key-ink);
  transform: translateY(1px) scale(.985);
  box-shadow:
    inset 0 2px 4px rgba(var(--key-shade), var(--key-inset-a)),   /* inner shade: the key sits below the surface */
    inset 0 1px 1px rgba(var(--key-shade), var(--key-inset-b)),
    inset 0 -1px 0 var(--key-lip),                            /* faint light catching the lower lip */
    0 1px 1px rgba(var(--key-shade), .04);
  transition-duration: .07s;                                  /* press: near-instant */
}
.btn-ghost:focus-visible, .btn-ink:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 1px 0 var(--key-hi),
    0 1px 2px rgba(var(--key-shade), var(--key-drop-a)),
    0 4px 10px rgba(var(--key-shade), var(--key-drop-b)),
    0 0 0 3px rgba(0, 115, 222, .35);
}
.btn-ghost:disabled, .btn-ghost.disabled, .btn-ink:disabled, .btn-ink.disabled {
  transform: none; box-shadow: none; opacity: .5;
}
@media (prefers-reduced-motion: reduce) {
  .btn-ghost, .btn-ghost:hover, .btn-ghost:active,
  .btn-ink,   .btn-ink:hover,   .btn-ink:active { transform: none; transition-duration: .01s; }
}

/* Ghost: soft grey key on the page background */
.btn-ghost {
  --key-bg: #d5d9df;
  --key-bg-hover: #dde1e6;
  --key-bg-active: #c5cad1;
  --key-ink: var(--ink);
  --key-line: rgba(30, 40, 55, .14);
  --key-line-active: rgba(30, 40, 55, .24);
  --key-shade: 20, 30, 45;                                  /* rgb used by every shadow */
  --key-drop-a: .08; --key-drop-b: .06;                     /* resting drop shadow strength */
  --key-inset-a: .18; --key-inset-b: .10;                   /* pressed inner shade strength */
  --key-hi: rgba(255, 255, 255, .85);                       /* lit top edge at rest */
  --key-lip: rgba(255, 255, 255, .35);                      /* light on the lower lip when pressed */
}

/* Ink: the primary key, deep slate with white text */
.btn-ink {
  --key-bg: #47506a;
  --key-bg-hover: #515b77;
  --key-bg-active: #3b4357;
  --key-ink: #fff;
  --key-line: #47506a;
  --key-line-active: #333a4b;
  --key-shade: 20, 25, 40;
  --key-drop-a: .18; --key-drop-b: .16;                     /* a dark key throws a deeper shadow */
  --key-inset-a: .45; --key-inset-b: .25;                   /* the shade has to be stronger to read on a dark fill */
  --key-hi: rgba(255, 255, 255, .16);
  --key-lip: rgba(255, 255, 255, .08);
    background: linear-gradient(153deg, rgba(71, 80, 106, 1) 0%, rgba(52, 79, 149, 1) 76%, rgba(106, 128, 189, 1) 100%); 
}

.btn-group-hero { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Handwritten "Let's work together!" (assets/img/lwt.png, cropped to the ink) under the About intro */
.lwt {display: block;width: min(100%, 325px);height: auto;margin: -8px 0 6px -14px;}
@media (max-width: 767.98px) { .lwt { margin-left: auto; margin-right: auto; width: min(100%, 325px); } }   /* centered on phones */

/* Cards ----------------------------------------------------------------- */
.card-soft {
  background: var(--card);
  border: 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;                 /* inside of white cards (22px on phones, see below) */
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (max-width: 767.98px) { .card-soft { padding: 22px; } }
a.card-soft:hover, .card-soft.is-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card-soft h3 { font-size: 1.2rem; margin: .9rem 0 .4rem; }
/* Illustration above the title on the home-page cards (source 500x500, white background; 4:3 trims the empty top/bottom) */
.card-img {
  display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-sm); background: #fff;
}
.card-img + h3 { margin-top: 1.1rem; }
.card-soft p { color: var(--ink-2); margin: 0; font-size: .98rem; }

.icon-dot {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: #f4f4f5; color: var(--ink); font-size: 1.15rem; font-weight: 700;
}

/* Work grid & placeholders --------------------------------------------- */
.work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.work-item { grid-column: span 6; }
.work-item.wide { grid-column: span 12; }
.work-item.third { grid-column: span 4; }
@media (max-width: 767.98px) {
  .work-item, .work-item.wide, .work-item.third { grid-column: span 12; }
}

.work-card {
  display: block; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.work-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); }
.work-card .meta { padding: 18px 22px 20px; }
.work-card .meta h3 { font-size: 1.1rem; margin: 0 0 .2rem; }
.work-card .meta p { margin: 0; color: var(--ink-3); font-size: .9rem; letter-spacing: -0.1pt;}

/* Project tile images (uploaded in /_command/projects, pre-cropped to the slot ratio) */
.work-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-img.wide { aspect-ratio: 21 / 9; }

/* Placeholder artwork: a soft tinted panel with a label. Replace with real images. */
.ph {
  position: relative; aspect-ratio: 4 / 3; width: 100%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #f7f7f8 0%, #e9ebee 100%);
  color: var(--ink-3); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
}
.ph.wide { aspect-ratio: 21 / 9; }
.ph.tall { aspect-ratio: 1 / 1; }
.ph::after {
  content: ""; position: absolute; inset: 14%; border-radius: 18px;
  border: 1.5px dashed rgba(0,0,0,.12);
}
.ph-1 { background: linear-gradient(135deg, #fff2e6 0%, #ffd9bd 100%); }
.ph-2 { background: linear-gradient(135deg, #e8f1ff 0%, #cfe0ff 100%); }
.ph-3 { background: linear-gradient(135deg, #eafbf0 0%, #cdeed9 100%); }
.ph-4 { background: linear-gradient(135deg, #f6eaff 0%, #e2cffc 100%); }
.ph-5 { background: linear-gradient(135deg, #fff8dc 0%, #ffeaa3 100%); }
.ph-6 { background: linear-gradient(135deg, #f1f1f1 0%, #d9dbde 100%); }

.tag {
  display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  padding: .3em .7em; border-radius: 999px; background:#afafcc;color: #fff; margin-right: 6px;
}

/* Feature band (dark CTA) ----------------------------------------------- */
.band {
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: 45px; text-align: center; box-shadow: var(--shadow-lg);
background: #3d4854;
background: linear-gradient(153deg, rgba(61, 72, 84, 1) 0%, rgba(0, 0, 0, 1) 100%);
/*alternate*/
/*background: #020617;
background: linear-gradient(153deg, rgba(2, 6, 23, 1) 0%, rgba(11, 17, 36, 1) 18%, rgba(40, 51, 84, 1) 46%, rgba(49, 62, 96, 1) 64%, rgba(49, 67, 107, 1) 78%, rgba(30, 39, 68, 1) 100%); */    
    /* 36px on phones, see below */
}
@media (max-width: 767.98px) { .band { padding: 36px; } }
.band h2 { color: #fff; margin-bottom: .6rem; }
.band p { color: rgba(179, 237, 255, 0.7); max-width: 700px; margin: 0 auto 1.5rem; }
.band .btn-ghost {                                            /* slate key on the dark band, white text, same press mechanics */
  --key-bg: #5b667b;
  --key-bg-hover: #66718a;
  --key-bg-active: #4c566a;
  --key-ink: #fff;
  --key-line: #5b667b;
  --key-line-active: #434c5e;
  --key-shade: 0, 0, 0;
  --key-drop-a: .25; --key-drop-b: .22;
  --key-inset-a: .45; --key-inset-b: .25;
  --key-hi: rgba(255, 255, 255, .16);
  --key-lip: rgba(255, 255, 255, .08);
  background: linear-gradient(153deg, rgb(131, 145, 172) 0%, rgb(91, 102, 123) 100%);    
}

/* Steps (process) -------------------------------------------------------- */
.steps { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 767.98px) { .steps { grid-template-columns: 1fr; } }
.step { display: flex; flex-direction: column; }
.step .card-img { order: -1; margin-bottom: 1.1rem; }   /* image sits above the text */

/* Lists ------------------------------------------------------------------ */
.list-clean { list-style: none; padding: 0; margin: 0; }
.list-clean li { padding: 14px 0; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.list-clean li:last-child { border-bottom: 0; }
.list-clean strong { min-width: 150px; font-weight: 600; }
.list-clean span { color: var(--ink-2); }

/* Forms ------------------------------------------------------------------ */
.form-soft textarea.form-control { resize: none; min-height: 150px; }
.char-count { font-size: .82rem; color: var(--ink-3); text-align: right; margin-top: 6px; font-variant-numeric: tabular-nums; }
.char-count.is-near { color: #ff4242; }
.char-count.is-full { color: #ff4242; font-weight: 600; }

/* Contact: state shown in place of the form after sending */
.sent-state { min-height: 380px; display: grid; place-items: center; text-align: center; }
.sent-title { font-size: 22px; font-weight: 500; letter-spacing: -.5pt; margin: 0; }
.confetti-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; }

/* Portrait (About page) */
.portrait { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

/* Social profiles (Contact page) */
.social-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.social-list a { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--ink-2); font-size: .85rem; font-weight: 500; text-decoration: none; }
.social-list a:hover { color: var(--ink); text-decoration: none; }
.social-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; display: block; box-shadow: var(--shadow); background: #f2f2f2; }
.social-placeholder { display: grid; place-items: center; font-weight: 600; font-size: 1.2rem; color: var(--ink-3); border: 1.5px dashed rgba(0,0,0,.15); box-shadow: none; }
.social-list a:hover .social-avatar { transform: translateY(-2px); transition: transform .15s ease; }

/* Honeypot field: off-screen and inert, but present in the DOM so bots fill it */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.form-soft .form-control, .form-soft .form-select {
  background: #f2f2f2; border: 1px solid rgba(0,0,0,.1); border-radius: var(--radius-sm);
  padding: .85rem 1rem; font-size: 1rem; box-shadow: none;
}
.form-soft .form-control:focus { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(0,0,0,.06); }
.form-soft .form-label { font-weight: 500; font-size: .92rem; margin-bottom: .4rem; }
.form-soft textarea { min-height: 150px; resize: vertical; }

.alert-soft { border: 0; border-radius: var(--radius-sm); padding: 1rem 1.2rem; }
.alert-soft.ok  { background: #e8f7ee; color: #1b6b3a; }
.alert-soft.err { background: #ff4242; color: #ffffff; }

/* Footer ------------------------------------------------------------------ */
.site-footer { padding: 20px 0 20px; border-top: 1px solid var(--line); margin-top: 80px; background-color: #dbe3e4; background: linear-gradient(153deg, rgba(208, 218, 219, 1) 0%, rgba(219, 227, 228, 1) 100%);}   /* 40px on phones */
@media (max-width: 767.98px) { .site-footer { margin-top: 40px; } }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-motto { margin: 0; font-weight: 600; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: 10px; }
.footer-motto-icon { width: 35px; height: 23px; object-fit: contain; flex: 0 0 auto; position: relative; top: -3px; }
.footer-links { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.footer-links a { color: var(--ink-2); font-size: .92rem; }
.footer-links a:hover { color: var(--ink); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.footer-meta { color: var(--ink-3); font-size: .82rem; margin: 0; }
.footer-legal { list-style: none; display: flex; gap: 18px; margin: 0; padding: 0; }
.footer-legal a { color: var(--ink-3); font-size: .82rem; }
.footer-legal a:hover { color: var(--ink); }

/* Legal pages (Privacy, Terms) */
.legal-text h2 { font-size: 20px; margin: 28px 0 8px; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { color: var(--ink-2); margin: 0 0 12px; line-height: 1.6; }
.legal-text ul { color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; padding-left: 22px; }
.legal-text li { margin-bottom: 6px; }
.legal-text strong { color: var(--ink); font-weight: 600; }
.legal-text a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.legal-text a:hover { color: var(--link-hover); }
.legal-updated { font-size: .85rem; color: var(--ink-3); margin-bottom: 24px !important; padding-bottom: 16px; border-bottom: 1px solid var(--line); }

/* Reveal animation (progressive enhancement) ----------------------------- */
/* Only hide-then-reveal when JS is running (html.js is set in the <head>). Without JS everything is simply visible. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* Safe areas on notched phones */
@supports (padding: max(0px)) {
  .wrap { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
}