/* minimal-v4 design system — shared by index.html and integration.html.
   Edit here, not in a page.

   2026-09-03: placeholders retired. Every image on both pages is now a real
   asset from /assets/images/landingv4/. The CSS placeholder system (.ph and
   its four abstract marks) is gone, along with the capability rows, scenario
   vignettes and scatter plots that no longer appear on either page. */
:root{
  --ground:#F2F2F1;
  --well:#E5E5E3;
  --ink:#111110;
  --ink-2:#5E5E5A;
  --rule:#DCDCDA;

  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px;
  --max:1280px;
  --gutter:clamp(24px,5vw,64px);
  /* the reference spends ~1,350px of scroll per visual. This is the single
     biggest compositional difference and it is bought with this one value. */
  --rhythm:clamp(120px,15vw,260px);
  --r:40px;        /* reference uses 52px on a 1408px stage; 40 scales to ours */
  --r-sm:10px;
  --sans:Archivo,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ground);color:var(--ink);
  font-family:Archivo,system-ui,sans-serif;
  font-size:17px;line-height:1.6;font-weight:400;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}

/* ── type: lighter and tighter than v3 ──────────────────────────────
   w400 not w500, -0.052em not -0.035em. Most of the reference's
   "expensive" feeling lives in these two numbers. */
.display{font-size:clamp(46px,8.6vw,116px);line-height:.93;font-weight:400;letter-spacing:-.052em;text-wrap:balance}
h2{font-size:clamp(28px,3.6vw,46px);line-height:1.04;font-weight:400;letter-spacing:-.042em;text-wrap:balance;max-width:820px}
h3{font-size:clamp(24px,2.4vw,32px);line-height:1.1;font-weight:400;letter-spacing:-.035em}
.lede{font-size:clamp(20px,1.9vw,25px);line-height:1.45;letter-spacing:-.022em;max-width:34ch}
.body{font-size:17px;color:var(--ink-2);max-width:46ch}
.label{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:'wdth' 125;color:var(--ink-2);line-height:1.4}
.quiet{color:var(--ink-2)}

/* ── section heads ──────────────────────────────────────────────────
   Was a 12px uppercase eyebrow, which disappeared on a scan and did not
   use the same word as the nav link that led here. Now the section opens
   with an h2 that matches the nav exactly, on a full-width hairline, with
   the old eyebrow demoted to a gloss on the right. */
.sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s2) var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--rule)}
.sec-h h2{max-width:none;
  /* 2026-09-04: the section title is the only place the site breaks its own
     w400 rule. At w400 it read as a paragraph on a scan; the nav word and the
     section it names have to look like the same object. */
  font-size:clamp(34px,4.9vw,62px);font-weight:600;letter-spacing:-.046em}
.sec-h .label{padding-bottom:6px}
.sec-body{margin-top:var(--s6)}

/* ── the one button on the site ─────────────────────────────────────
   The reference has no buttons at all, and v4 followed it: every action was
   a text link with an arrow. That is too quiet for the only thing this page
   asks anyone to do, so exactly one button style exists and it is spent on
   the ask. Everything else stays a text link. */
.btn{display:inline-flex;align-items:center;gap:12px;
  background:var(--ink);color:var(--ground);
  border-radius:999px;padding:17px 30px;
  font-size:17px;font-weight:500;letter-spacing:-.012em;line-height:1;
  transition:background .16s ease,transform .16s ease}
.btn:hover{background:#37372F}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:22px 38px;font-size:clamp(18px,2vw,22px);gap:16px}
.btn--sm{padding:10px 19px;font-size:15px;gap:8px}
.btn .arw{font-size:1.05em;line-height:1}
/* "Show us one week of your work" is 413px wide; a 375px phone has ~327px of
   room inside the gutter, so the large variant loses its padding first */
@media(max-width:520px){.btn--lg{padding:18px 24px;font-size:17px;gap:12px}}

/* ── image cards ────────────────────────────────────────────────────
   A real screenshot, no device frame, inset on a quiet gradient panel with
   generous room on every side. object-fit is contain, never cover, so no
   screen is ever cropped: a portrait capture just takes more side padding
   than a landscape one. The gradient is CSS, not a photograph, so all six
   cards are cohesive by construction and there is nothing to keep current. */
/* grid-template of minmax(0,1fr) rather than a bare `display:grid` — an auto
   track sizes to the image and the img's `max-height:100%` then has nothing
   definite to resolve against, so a portrait capture overflows its panel. */
.shot{position:relative;overflow:hidden;border-radius:var(--r);background:var(--well);
  display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;
  padding:clamp(20px,4.4%,60px)}
.shot::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 88% at 20% 8%, #F7F7F5, transparent 62%),
    radial-gradient(92% 80% at 88% 96%, rgba(17,17,16,.14), transparent 66%);
}
.shot img{
  /* height:auto is load-bearing. The width/height HTML attributes are a
     presentational hint for `height`, so without it the image renders at its
     natural height and breaks out of the panel. */
  position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:var(--r-sm);
  /* the hairline ring matters: most of these captures are near-white at the
     edges and would otherwise bleed into the panel with only a shadow to
     separate them */
  box-shadow:0 0 0 1px rgba(17,17,16,.08), 0 1px 1px rgba(17,17,16,.05),
             0 26px 54px -20px rgba(17,17,16,.30);
}
/* a photograph fills its panel edge to edge instead — no inset, no shadow */
.shot--full{padding:0}
.shot--full img{max-width:none;max-height:none;width:100%;height:100%;
  object-fit:cover;border-radius:0;box-shadow:none}
/* caption sits under the card, not on top of the image */
.shot-cap{margin-top:var(--s2)}

/* ── hero ───────────────────────────────────────────────────────────
   Type alone on the screen. The band comes after, with real air. */
/* left rag, not centred: the reference centres only its wordmark and its
   image panels — every heading and paragraph on it is text-align:start */
.hero{padding:var(--s7) 0 0}
.hero .lede{margin:var(--s5) 0 0}
.hero-band{margin-top:var(--rhythm)}
.hero-band .shot{aspect-ratio:16/7}

/* ── sections: one idea per screen ──────────────────────────────────
   No section holds two things side by side. v3's 3-col bento and 3x2
   vignette grid are gone; both were Linear patterns, not this one. */
section{padding:var(--rhythm) 0}
/* a document page (impresszum, and any legal page that follows) is a table of
   facts, not a marketing page. The full rhythm was built to spend ~1,350px of
   scroll per visual; on ten rows of legal data it reads as three pages with
   nothing on them. */
body.doc{--rhythm:var(--s6)}

/* ── work: one product per band, full width ─────────────────────── */
.work + .work{margin-top:var(--rhythm)}
.work .shot{aspect-ratio:16/9}
.work-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);margin-top:var(--s4)}
.work-cap p{color:var(--ink-2);font-size:17px}
.work-cap .go{margin-left:auto;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--rule);padding-bottom:3px}
.work-cap .go:hover{color:var(--ink);border-bottom-color:var(--ink)}
/* status marker on a project that is no longer maintained. Rides inside the h3
   so it cannot be read as part of the name, and borrows .label rather than
   inventing a second small-caps style. */
.work-state{margin-left:var(--s2);vertical-align:middle;
  border:1px solid var(--rule);border-radius:999px;padding:3px 9px}
/* the two supporting shots ride under the main one, still one row of one idea */
.work-sub{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s3)}
/* square, not 4:3 — both supporting captures are portrait or square, and a
   landscape panel gave them so much side air that the frame read louder than
   the screen. Padding is a larger percentage here to compensate for the
   smaller card. */
.work-sub .shot{aspect-ratio:1/1;padding:clamp(20px,7%,52px)}
.work-sub--one{grid-template-columns:1fr}
.work-sub--one .shot{aspect-ratio:21/9}
/* three phone screens in ONE panel, not three panels. The bezel is the whole
   point: a cropped phone capture ends mid-content and reads as broken, so the
   dark ring says "this is a phone" and lets the screen end where it ends.
   max-width AND max-height are both set — an <img> with auto dimensions fits
   inside both, so the panel governs on desktop (height) and the column
   governs on narrow screens (width), with no media query for the images. */
.work .shot--phones{aspect-ratio:3/2;margin-top:var(--s3);display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3.4%,46px);padding:clamp(18px,3.6%,52px)}
.shot--phones img{max-width:31%;max-height:100%;
  border-radius:clamp(10px,1.5vw,22px);
  box-shadow:0 0 0 clamp(4px,.62vw,9px) #17171A,
             0 26px 54px -22px rgba(17,17,16,.42)}

/* ── impresszum: label/value pairs ──────────────────────────────────
   A <dl> and a two-column grid. The legal page is a table of facts, and a
   table of facts is what a reader (and an authority) should see. */
.dl{display:grid;grid-template-columns:minmax(160px,20%) 1fr;gap:var(--s2) var(--s4);max-width:860px}
.dl dt{color:var(--ink-2);font-size:15px;line-height:1.5}
@media(max-width:640px){
  .dl{grid-template-columns:1fr;gap:0}
  .dl dt{margin-top:var(--s3)}
  .dl dt:first-child{margin-top:0}
}

/* ── doc-prose: long legal documents ────────────────────────────────
   privacy.html and terms.html were Tailwind pages on a CDN script with their
   own type stack and an old square logo. They now run on the same tokens as
   everything else, and every utility class in their markup was stripped, so
   this block is the whole of their styling. Bare element selectors, because
   the markup underneath has no classes left at all. */
.doc-prose{max-width:860px}
/* the document's own <section> tags are nested inside the page <section>, so the
   bare `section{padding:var(--rhythm) 0}` rule was giving every clause 104px of
   air top and bottom. The page rhythm belongs to the page, not to clause 7. */
.doc-prose section{padding:0}
.doc-prose h2{font-size:clamp(20px,1.8vw,25px);line-height:1.15;letter-spacing:-.03em;
  padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
/* h3 has to be pulled DOWN, not styled up. The site's global h3 is a section
   heading at up to 32px, which made every "3.1" sub-clause larger than the
   numbered section above it. In a legal document the sub-heading is a label. */
.doc-prose h3{font-size:16px;font-weight:500;letter-spacing:-.01em;line-height:1.4;
  color:var(--ink);margin-top:var(--s3)}
.doc-prose p,.doc-prose li{color:var(--ink-2);font-size:16px;line-height:1.65;max-width:72ch}
.doc-prose p{margin-top:var(--s2)}
.doc-prose ul,.doc-prose ol{margin-top:var(--s2);padding-left:1.15em}
.doc-prose li{margin-top:6px}
.doc-prose strong{color:var(--ink);font-weight:500}
.doc-prose a{border-bottom:1px solid var(--rule)}
.doc-prose a:hover{border-bottom-color:var(--ink)}
.doc-prose section + section{margin-top:var(--s5)}
/* the controller and contact details were cards. A left rule and tight leading
   group them the same way without introducing a second surface colour, which
   this palette does not have room for. */
.doc-prose section > div{margin-top:var(--s3);padding-left:var(--s3);
  border-left:1px solid var(--rule)}
.doc-prose section > div p{margin-top:2px}

/* the table of contents. Two columns because fifteen to twenty numbered links
   in one column is a screenful of nothing before the document starts. */
.doc-toc{margin-bottom:var(--s6);padding:var(--s3) var(--s4) var(--s4);
  background:var(--well);border-radius:var(--r-sm)}
.doc-toc h2{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:'wdth' 125;color:var(--ink-2);
  border-bottom:0;padding-bottom:0}
.doc-toc ol{columns:2;column-gap:var(--s4);margin-top:var(--s3);padding-left:0;list-style:none}
.doc-toc li{margin-top:0;padding:3px 0;break-inside:avoid;max-width:none}
.doc-toc a{border-bottom:0;color:var(--ink-2)}
.doc-toc a:hover{color:var(--ink)}
@media(max-width:640px){.doc-toc ol{columns:1}}

/* ── footer ─────────────────────────────────────────────────────── */
footer{padding:var(--rhythm) 0 var(--s6)}
/* the services page moved its ask up into .close, so its footer is small print
   only. A full rhythm of air above 16px of legal text reads as a deletion, not
   as space, so that footer gets a shorter run-up. */
footer.footer--quiet{padding-top:var(--s6)}
footer.footer--quiet p.small{margin-top:0}
footer .big{font-size:clamp(26px,3.2vw,40px);font-weight:400;letter-spacing:-.04em;line-height:1.1}
footer .btn{margin-top:var(--s5)}
footer p.small{margin-top:var(--s4);color:var(--ink-2);font-size:16px}
/* About left the top nav on 2026-09-07. Three header items beat four, and on a
   one-person site the who-are-you check is taken AFTER interest, not before it.
   It sits under the ask and above the hairline, not inside the legal row: parked
   between Impresszum and ÁSZF it reads as boilerplate, here it reads as an offer.
   One anchor for both footer shapes — the full footer and .footer--quiet, whose
   ask lives up in .close. */
/* two links now (About and the blog). A wrapping flex row rather than a second
   line, and the blog link went HERE and not into the nav on purpose: the
   Hungarian nav already overflows at 500px (board row 40) because
   'Szolgaltatasok' and 'Kapcsolat' are long words, and About was moved down
   here in c6c56eb for exactly that reason. */
footer .who{margin-top:var(--s3);font-size:16px;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
footer .who a{border-bottom:1px solid var(--rule);padding-bottom:3px}
footer .who a:hover{border-bottom-color:var(--ink)}

@media(max-width:700px){
  .work-sub{grid-template-columns:1fr}
  .hero-band .shot{aspect-ratio:4/3}
  .work .shot{aspect-ratio:4/3}
  /* AFTER .work .shot on purpose — same specificity, so order decides.
     Three phones side by side shrink to 124px on a 500px screen, which is a
     picture of an app rather than a look at one. Scroll the strip instead and
     let the third phone hang off the edge as the affordance. */
  .work .shot--phones{aspect-ratio:auto;overflow-x:auto;justify-content:flex-start;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .shot--phones img{max-width:none;max-height:none;width:62vw;flex:none;scroll-snap-align:center}
}

/* ── the close on the services page ─────────────────────────────────
   Set at heading size, not body size, because it is literally the second
   half of the section's h2: the head opens the sentence, the tool wall is
   the evidence, this finishes it. Body weight would break that reading. */
.close{margin-top:var(--rhythm);padding-top:var(--s6);border-top:1px solid var(--rule)}
.close .ask,.close .ans{font-size:clamp(26px,3.4vw,42px);line-height:1.1;
  font-weight:400;letter-spacing:-.042em;text-wrap:balance}
.close .ask{max-width:20ch}
.close .ans{margin-top:var(--s4)}
.close .btn{margin-top:var(--s5)}
.close-note{margin-top:var(--s4);color:var(--ink-2);font-size:16px;max-width:52ch}

/* the services teaser on the home page. Its top border is now the section
   head's hairline, so it only carries a bottom one. */
.teaser{border-bottom:1px solid var(--rule);padding-bottom:var(--s6)}
/* ── hero variant: full-bleed image behind the text ─────────────────
   The reference does NOT do this: its image is a contained panel with no text
   over it. It was kept switchable for a while, then chosen on 2026-09-03.
   body.hero-bg is now hardcoded on the homepage and ONLY the homepage. The
   services page keeps the contained band, and the difference between the two
   IS the hierarchy, so do not put this class on a second page. */
body.hero-bg .hero{position:relative;padding:0;min-height:min(88vh,860px);display:grid;align-items:center}
/* :not(.hero-band) matters — the band IS a .wrap child of .hero, so without it
   this rule outranks the absolute-positioning rule below and the background
   stays in the flow */
body.hero-bg .hero > .wrap:not(.hero-band){position:relative;z-index:2;width:100%;padding-top:var(--s7);padding-bottom:var(--s7)}
body.hero-bg .hero > .hero-band{position:absolute;inset:0;margin:0;max-width:none;padding:0;z-index:0;height:auto}
/* the band is absolutely positioned so it has no intrinsic height; the panel
   must stretch to the section, not to its own aspect-ratio */
body.hero-bg .hero-band .shot{border-radius:0;aspect-ratio:auto;position:absolute;inset:0;padding:0}
body.hero-bg .hero-band .shot img{width:100%;height:100%;object-fit:cover;max-width:none;max-height:none;border-radius:0;box-shadow:none}
/* dark type over a mid-tone photograph fails contrast without this */
/* z-index:2 is load-bearing and was missing until this variant was first
   actually rendered on 2026-09-03. `.shot img` carries z-index:1 from the base
   image-card rule, so without this the photograph paints OVER its own scrim and
   the headline sits on raw sky. `.hero-band` is z-index:0 and positioned, so it
   makes its own stacking context and the 2 here stays under the text at 2. */
body.hero-bg .hero-band::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(to right, var(--ground) 0%, rgba(242,242,241,.92) 34%, rgba(242,242,241,.55) 62%, rgba(242,242,241,.18) 100%),
    linear-gradient(to bottom, rgba(242,242,241,.5) 0%, transparent 22%, transparent 62%, var(--ground) 100%);
}
/* Was position:relative + padding-bottom:0, which put the bar in the flow ABOVE
   the photograph and left zero room under the Contact pill. Fixed instead: the
   photograph runs to the top of the viewport and the translucent bar floats on
   it, so there is no seam to get wrong. */
body.hero-bg header.bar{position:fixed;top:0;left:0;right:0;z-index:20}
/* the hero is the first thing in the document, so nothing needs offsetting;
   its own padding-top already clears the bar by ~85px */
body.hero-bg .hero .lede{max-width:30ch}
@media(max-width:700px){
  /* on a phone the horizontal scrim has nowhere to fade to, so it goes vertical */
  body.hero-bg .hero-band::after{
    background:linear-gradient(to bottom, rgba(242,242,241,.72) 0%, rgba(242,242,241,.86) 45%, var(--ground) 100%);
  }
}

/* ── the wordmark ───────────────────────────────────────────────────
   Grift Black, lowercase, +0.16em — the mark already in use on soltella.com,
   not the body face typed out. Copied from the live index.html so the two
   cannot drift. */
@font-face{
  font-family:'Grift';
  src:url('/assets/fonts/grift-black.ttf') format('truetype');
  font-weight:900;font-style:normal;font-display:swap;
}
.wordmark{
  font-family:'Grift',var(--sans);
  font-weight:900;letter-spacing:.16em;text-transform:lowercase;
  font-size:17px;
}

/* ── nav ────────────────────────────────────────────────────────────
   The reference has no nav at all. Added on request: on a 7,000px page a
   reader who already knows what they want should not have to scroll for it.
   Sticky, quiet, and it never grows a third level. Both words are the exact
   h2 of the section they land on. */
/* 2026-09-04: half-transparent with a blur instead of a solid --ground band.
   Solid, it read as a hard cut across the hero photograph. */
header.bar{position:sticky;top:0;z-index:20;padding:var(--s3) 0;text-align:left;
  background:rgba(242,242,241,.62);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%)}
/* no blur support (older Firefox): fall back to a mostly-opaque band rather
   than leaving the type over raw photograph */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header.bar{background:rgba(242,242,241,.93)}
}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
header.bar nav{display:flex;align-items:center;gap:var(--s4)}
header.bar nav a{font-size:15px;color:var(--ink-2)}
header.bar nav a:hover,header.bar nav a[aria-current]{color:var(--ink)}
/* The one-button rule stands for NAVIGATION links; the nav's contact pill is
   the ask, which is exactly what the button is reserved for. */
header.bar nav a.btn,header.bar nav a.btn:hover{color:var(--ground)}
@media(max-width:520px){header.bar nav{gap:var(--s3)}.btn--sm{padding:9px 15px;font-size:14px}}

/* ── the tool wall ──────────────────────────────────────────────────
   Names set in type, not logo files. Third-party marks on a commercial page
   imply a partnership nobody granted, a logo grid looks like every template
   on the internet, and this way there are no assets to source or keep
   current. Size is weighted by how central the tool is TO THIS BUYER, not by
   global fame — which is why Számlázz.hu is bigger than Slack. */
.tools{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) var(--s4);max-width:1000px}
.tools span{font-weight:400;letter-spacing:-.03em;line-height:1.1;white-space:nowrap}
.t1{font-size:clamp(30px,4.4vw,54px);color:var(--ink)}
.t2{font-size:clamp(21px,2.6vw,32px);color:var(--ink)}
.t3{font-size:clamp(15px,1.6vw,19px);color:var(--ink-2)}

/* ── legal strip ────────────────────────────────────────────────────
   Placeholder wording. A Hungarian commercial site needs an Impresszum by law
   (Ekertv. 2001/CVIII), and this business would be a data PROCESSOR for its
   clients, which is a heavier obligation than a normal marketing site. */
.legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:14px;line-height:1.6;color:var(--ink-2);max-width:70ch}
.legal a{border-bottom:1px solid var(--rule)}
.legal a:hover{border-bottom-color:var(--ink)}
.legal nav{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s2)}

/* ── Hungarian sets longer ───────────────────────────────────────────
   "Csak nem beszélnek egymással." is 29 characters where the English line it
   replaces ("We put it to work.") is 18. On the shared clamp the homepage h1
   wrapped to FOUR lines and swamped the hero, so the Hungarian pages get their
   own ceiling. Not a translation problem, a typographic one: any language that
   compounds will need this. */
html[lang="hu"] .display{font-size:clamp(38px,5.6vw,78px)}
html[lang="hu"] .lede{max-width:36ch}
html[lang="hu"] .sec-h h2{font-size:clamp(30px,4.1vw,52px)}

/* ── about page ─────────────────────────────────────────────────────
   Portrait beside the bio. Single column under 820px, where a narrow
   text column beside a portrait stops being readable. */
.bio{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s5)}
.bio-text p{font-size:19px;line-height:1.6;max-width:52ch}
.bio-text p + p{margin-top:var(--s4)}
/* The only pull quote on the site, and since 2026-09-07 there is exactly ONE per
   page. It used to carry a market claim with the turn a step below it in
   .bio-turn; two emphasis levels inside six paragraphs meant neither read as the
   point, so the market claim went and the turn took the quote. The reader is
   meant to catch this one on a scan without reading the paragraphs around it, so
   it gets size and a hairline rather than weight — the site never buys emphasis
   with weight. It KEEPS the 52ch measure inherited from `.bio-text p`: a narrower
   measure at this size turns the quote into a tall thin stack that reads as a
   heading, not as a sentence. (`.bio-text p` is (0,1,1) and beats a bare
   `.bio-big`, which is why font-size needs !important and why max-width is not
   set here at all.) */
.bio-big{font-size:clamp(24px,2.3vw,31px) !important;line-height:1.22;letter-spacing:-.035em;
  color:var(--ink);
  margin-top:var(--s5) !important;padding-top:var(--s4);border-top:1px solid var(--rule)}
.bio-big + p{margin-top:var(--s4)}
/* The real portrait landed 2026-09-07. It pairs with .shot--full, which is the
   site's rule for a photograph: fills the panel edge to edge, no inset, no
   shadow. Only the ratio lives here. */
.portrait{aspect-ratio:4/5}
@media(max-width:820px){
  .bio{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .bio > div:first-child{max-width:280px}
}

/* ── language switcher + current-page marker ─────────────────────────
   The switch is a circular flag. Flags name COUNTRIES, not languages, so the
   visible flag alone is not an accessible control: every one carries an
   aria-label and a title, and the accessible name stays the language word.
   Each page has exactly one language link, so the SVGs are inlined at the call
   site rather than defined once and referenced. */
.flag{display:block;width:22px;height:22px;border-radius:50%;overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.16) inset;transition:transform .16s ease}
header.bar nav a:has(.flag){display:flex;align-items:center;padding:2px}
header.bar nav a:hover .flag{transform:scale(1.08)}

/* Which page you are on was a colour change only, which is invisible unless you
   already know the other links are grey. It now also carries a rule, so the
   answer is legible without a comparison. */
header.bar nav a[aria-current]{color:var(--ink);position:relative}
header.bar nav a[aria-current]:not(:has(.flag))::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--ink);border-radius:2px}
/* the translation disclosure on /hu/rolam/. Quieter than the bio, boxed off a
   hairline so it reads as a note about the page rather than part of the story */
.note{font-size:15px !important;color:var(--ink-2);max-width:52ch;
  margin-top:var(--s5) !important;padding-top:var(--s3);border-top:1px solid var(--rule)}

/* ── 2026-09-07 restructure ─────────────────────────────────────────
   /services/ became the homepage and the projects moved to /work/. Three
   additions, no changes to anything above. */

/* A hero with no image band under it. /work/ and /hu/munkak/ open on type
   alone, because their first real object is a screenshot 200px later and two
   images stacked in the first screen read as a gallery, not a page. */
.hero--page{padding-bottom:var(--s6)}

/* The why-now beat on the homepage, between the hero and the tool wall. One
   statement, wider than .lede's 34ch because it is three sentences and not a
   subtitle, and quieter than .close's ask so it cannot compete with it. */
.why-sec{padding:var(--rhythm) 0 0}
.why{font-size:clamp(21px,2.2vw,28px);line-height:1.35;letter-spacing:-.028em;
  font-weight:400;max-width:30ch;text-wrap:balance}

/* ── the archive card on /work/ ──────────────────────────────────────
   REVERSED 2026-09-08 on the owner's call. This was a full-width row at the
   live type scale under an "Archived" section head at .sec-h size, and the
   head shouted a stopped project as loudly as the live work above it. It is
   now one small bordered card with no section head at all: the card boundary
   does the ranking the type scale used to do, so the type CAN step down here
   without flattening the name into the body. The badge is the only label the
   section gets. Still dimmed to rank it, still lifts on hover, because it is
   ranked below the live work, not hidden. */
.archive{padding-top:var(--s6)}
.work-rows{list-style:none;display:flex;flex-direction:column;gap:var(--s3)}
.work-row{opacity:.66;transition:opacity .15s ease;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:var(--s3);max-width:640px}
.work-row:hover,.work-row:focus-within{opacity:1}
.work-row-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2)}
.work-row-h h3{font-size:19px;letter-spacing:-.02em}
.work-row-year{margin-left:auto;font-size:14px;color:var(--ink-2);
  font-variant-numeric:tabular-nums}
.work-row p{margin-top:var(--s2);color:var(--ink-2);font-size:15px;line-height:1.55}
.work-row .go{display:inline-block;margin-top:var(--s2);font-size:14px;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:3px}
.work-row .go:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:700px){
  .work-row-year{margin-left:0;width:100%}
}

/* ── blog: the index list and the article shell ─────────────────────
   2026-09-07. Two small blocks, because the two patterns that already
   exist are both wrong for a post list: .work-rows dims every row to
   .62 to rank archived work below live work, and an article list has no
   such ranking, so every post would arrive pre-faded. The article BODY
   is not here at all — it reuses .doc-prose, which is already the site's
   long-form prose and needs no second version. */
/* the list has no section head, so it does not need a full band of air above it */
.posts-sec{padding-top:var(--s5)}
.posts{list-style:none;display:flex;flex-direction:column;gap:var(--s4)}
.post{padding-top:var(--s4);border-top:1px solid var(--rule)}
.post:first-child{border-top:0;padding-top:0}
.post-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
.post-h h3{font-size:clamp(22px,2.3vw,29px);letter-spacing:-.032em;max-width:24ch}
.post-date{margin-left:auto;font-size:15px;color:var(--ink-2);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.post p{margin-top:var(--s2);color:var(--ink-2);font-size:17px;max-width:62ch}
.post .go{display:inline-block;margin-top:var(--s2);font-size:15px;color:var(--ink-2);
  border-bottom:1px solid var(--rule);padding-bottom:3px}
.post .go:hover{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:700px){ .post-date{margin-left:0;width:100%} }

/* The article's own header: byline, dates, and the standing scope line.
   Every article carries all three — the byline because E-E-A-T needs a
   named author, the dates because a rule that was true in September is
   the whole value of the piece, and the scope line because this site is
   competent on the interface and not on the obligation. */
.post-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--rule);margin-top:var(--s3)}
.post-meta p{font-size:15px;color:var(--ink-2);margin:0}
.post-meta a{border-bottom:1px solid var(--rule)}
.post-meta a:hover{border-bottom-color:var(--ink)}
.post-scope{margin-top:var(--s4);padding-left:var(--s3);border-left:2px solid var(--rule);
  font-size:15px;color:var(--ink-2);max-width:62ch}

/* ── the article page reads like an article ─────────────────────────
   2026-09-08. The post shell reused .display (up to 116px) and .doc-prose
   (16px), which are a landing-page headline and a legal-document body. An
   article is read end to end, not scanned, so the headline steps down and
   the body steps up to a real reading size and measure. */
.hero--post .display{font-size:clamp(33px,4.3vw,56px);line-height:1.06;
  letter-spacing:-.038em;max-width:20ch}
.hero--post .lede{font-size:clamp(18px,1.5vw,21px);max-width:52ch}
/* html[lang="hu"] .display is (0,2,1) and outranks the rule above no matter
   where it sits in the file, so the Hungarian article needs its own. */
html[lang="hu"] .hero--post .display{font-size:clamp(30px,3.9vw,50px)}
.doc-prose--post{max-width:none}
.doc-prose--post p,.doc-prose--post li{font-size:18px;line-height:1.72;max-width:64ch}
/* the body follows the header. section{padding:var(--rhythm)} left ~260px of
   dead air between the byline and the first sentence, which reads as a missing
   hero image rather than as space. */
.hero--post + section{padding-top:var(--s5)}
.doc-prose--post h2{font-size:clamp(24px,2.2vw,30px);margin-top:var(--s2)}
/* .doc-prose h3 is 16px, which is SMALLER than the 18px article body: a subhead
   under its own paragraphs. */
.doc-prose--post h3{font-size:19px;font-weight:500;margin-top:var(--s4)}