/* Committed single-theme design: the live line field is the ground for the
whole site, so there is no light mode to switch to. */
:root{
--ground:#0E1013;
--ink:#ECECE7;
--slate:#97A0AC;
/* small captions only: 9.4:1 on the ground vs 7.2:1 for --slate. Georgia at
14px in plain --slate reads as blurred rather than merely quiet. */
--slate-hi:#AFB7C2;
--rule:rgba(242,241,238,.12);
--rule-firm:rgba(242,241,238,.22);
--carmine:#E4636C;
/* open/closed status — green reads as 'available' the world over, and
the carmine already in the palette does duty as its opposite */
--open:#5FC08A;
--shut:#E4636C;
--carmine-deep:#9E2B33;
--carmine-soft:rgba(228,99,108,.14);
--panel-bg:rgba(255,255,255,.045);
/* Opaque, where it used to be .86 and then .94. The topbar no longer blurs
what is behind it, so the bar itself has to do all the separating, and
the 6% left at .94 was not depth: body copy scrolling underneath was
legible through the bar as letterforms — observed on /services around
y=700. Nothing is lost by closing it, because this is exactly --ground:
the bar was never tinted, only see-through. Its own bottom border is
what draws the edge. */
--bar:#0E1013;
--shadow:rgba(0,0,0,.5);
--sheet:rgba(14,16,19,.86);
/* Chosen, not inherited from the visitor's operating system — which is
what Georgia and ui-sans-serif amounted to, and why the site rendered as
a different design on every machine. Self-hosted in css/fonts.css; the
old stacks stay as fallbacks so a failed font file degrades to what was
there before rather than to Times. */
--sans:'Inter',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--serif:'Source Serif 4',Georgia,"Iowan Old Style","Palatino Linotype",Palatino,"Times New Roman",serif;
--cur-click:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='13' cy='13' r='6.5' fill='none' stroke='%23E4636C' stroke-width='2'/%3E%3Ccircle cx='13' cy='13' r='2' fill='%23E4636C'/%3E%3C/svg%3E") 13 13, pointer;
--mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--gut:clamp(1.25rem,4vw,3.5rem);--rail:10rem;--bay:clamp(3.5rem,8vw,6.5rem);
}
*{box-sizing:border-box}
/* Carmine cursors, drawn as inline SVG data URIs — native, so there is no
lag the way a JS-followed element has. Numbers after the url() are the
hotspot; the dark outline keeps the arrow visible over the light demos. */
html{
cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 2 L4 18.5 L8.6 14.2 L11.2 20.4 L14.2 19.1 L11.7 13.1 L17.8 13.1 Z' fill='%23E4636C' stroke='%230E1013' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
background:var(--ground);scroll-behavior:smooth;
}
a,button,summary,label[for],.opt,.tab,.pill,.btn{cursor:var(--cur-click)}
input,textarea{cursor:text}
/* The demo frames are other people's sites — inside them the system cursor
comes back, controls included, so a visitor can tell whose page they are
clicking on. */
.screen,.screen *{cursor:auto}
/* No -webkit-font-smoothing:antialiased here on purpose. It disables subpixel
rendering, which thins light-on-dark text — worst on small serif captions,
and worse still on fractional display scaling (e.g. 110%). */
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:1.0625rem;line-height:1.7}
/* Serif, not sans. Direction C sets the display line AND the body in Source
Serif 4 and leaves the sans to labels, buttons and UI — a bold sans
heading between a serif headline and serif body was the loudest thing on
the page and the last piece of the old default look.
Weight 400 and looser tracking: -.03em was set for a grotesk, and a serif
at that tracking closes up. Small headings take 600 below, because a 17px
serif at 400 has no presence against the body it introduces. */
h1,h2,h3{font-family:var(--serif);text-wrap:balance;font-weight:400;letter-spacing:-.02em;line-height:1.12;margin:0}
h3{font-weight:600;letter-spacing:-.01em}
a{color:inherit}
::selection{background:var(--carmine);color:#0E1013}
:focus-visible{outline:2px solid var(--carmine);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
/* ── permanent ground ──────────────────────────────────────── */
#lines{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
/* ── the ground, without a canvas ───────────────────────────
Phones get no line field at all — static lines read as a broken version
of the animated ones rather than as a decision. What is left is a near
neutral ground with the faintest lift toward the top, so the page has a
direction of light without having a colour. */
html.field-css #lines{display:none}
html.field-css body::before{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
background:
radial-gradient(ellipse 120% 55% at 50% -8%, rgba(255,255,255,.035), transparent 64%),
linear-gradient(178deg, #101216 0%, #0E1013 52%, #0C0E11 100%);
}
/* The carmine bloom that used to sit here — a wide pink wash across the top
plus a deep maroon ellipse — is gone deliberately. It was the single
loudest thing on the site and it meant nothing: a blurred coloured blob
behind the wordmark, the house style of every template of its year. The
accent now appears only where it carries information (a live word in a
headline, a label, the current nav item), which is what makes it read as
a decision rather than as decoration.
What remains is light and shade only: a faint lift at the top and a
vignette that closes the edges so the sheet sits forward. */
.scrim{
position:fixed;inset:0;z-index:1;pointer-events:none;
background:
radial-gradient(ellipse 76% 48% at 50% -6%, rgba(255,255,255,.05), transparent 62%),
radial-gradient(ellipse 84% 80% at 50% 46%, transparent 34%, rgba(8,9,11,.92) 100%);
}
/* Every view must be positioned and lifted above the fixed canvas (z 0) and
scrim (z 1). Miss one and that page's text gets painted over by the
background rather than sitting on top of it. */
#view-home,#view-serv,#view-work,#view-contact,#view-about,#view-price{position:relative;z-index:2}
/* the content column: a sheet over the live ground, lines visible either side.
Deliberately NO backdrop-filter — blurring a full-height scrolling element
over a canvas that repaints every frame pins the compositor. */
.sheet{
max-width:74rem;margin:0 auto;padding:0 var(--gut);
background:var(--sheet);
border-left:1px solid rgba(242,241,238,.07);
border-right:1px solid rgba(242,241,238,.07);
box-shadow:0 0 80px 20px rgba(14,16,19,.55);
}
.band{border-top:1px solid var(--rule);scroll-margin-top:4.5rem}
.grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(1.25rem,4vw,3.5rem);padding:var(--bay) 0}
.label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding-top:.55rem;line-height:1.8}
.label span{display:block;color:var(--carmine)}
@media (max-width:52rem){
.grid{grid-template-columns:minmax(0,1fr);gap:1.1rem}
.label{padding-top:0}.label span{display:inline;margin-right:.5rem}
}
/* ── header: arrives after the intro ───────────────────────── */
.topbar{
position:fixed;top:0;left:0;right:0;z-index:60;
/* No backdrop-filter, for the same reason .sheet has none: a fixed bar
blurring what is behind it forces the compositor to re-read and re-blur
that strip on every frame the canvas under it repaints, which is every
frame. Gecko pays for that far more heavily than Blink does. --bar is
opaque instead — see the note there for why the last of the
transparency had to go. */
background:var(--bar);
border-bottom:1px solid var(--rule);
opacity:0;transform:translateY(-100%);pointer-events:none;
transition:opacity .4s ease, transform .48s cubic-bezier(.22,.61,.36,1);
}
.topbar.show{opacity:1;transform:none;pointer-events:auto}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem var(--gut);max-width:74rem;margin:0 auto}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.9375rem;text-decoration:none;color:var(--ink)}
.brand b{font-weight:700}
.brand .hl{color:var(--carmine)}
.brand .tld{color:var(--ink)}
.mark{width:22px;height:22px;flex:none;color:var(--carmine)}
.nav{display:flex;gap:1.5rem;font-family:var(--mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.nav a,.nav button{background:none;border:0;font:inherit;color:var(--slate);text-decoration:none;cursor:var(--cur-click);padding:0 0 2px;border-bottom:1px solid transparent}
.nav a:hover,.nav button:hover{color:var(--ink);border-bottom-color:var(--carmine)}
/* ── intro ─────────────────────────────────────────────────── */
/* Deliberately short of the fold. At a full 100svh the splash gave the
reader no evidence that anything followed it, and the section below —
which is the page's entire argument and all of its indexable text — went
unread. Leaking a few rem of that section past the bottom edge slices its
first line of type, and a cut-off line is the one "there is more" signal
that needs no explaining and no animation. The clamp keeps the leak in
proportion to the window: about 4rem on a laptop, never past 5.5rem.
min-height, so a window too short for the composition still grows rather
than clipping it. */
.stage{position:relative;min-height:calc(100svh - clamp(3.5rem,7vh,5.5rem));display:flex;flex-direction:column;padding:0 var(--gut);justify-content:center}
/* No will-change here. The entrance animation runs on the children
(.stage-in > *), never on this box, so the hint bought nothing and cost
the whole splash a permanent compositor layer — which, per the note under
.item.in below, is also what turns the wordmark's antialiasing to mush. */
.stage-in{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;max-width:56rem;margin:0 auto;width:100%;padding:clamp(3rem,8vh,5rem) 0}
/* On a short window the splash's own padding is what eats the leak: the
composition fills the box, the stage grows past its min-height and the
section below starts exactly at the bottom edge instead of under it.
Tightening the padding gives the cut line its few rem back without
crowding anything — there is less to breathe around at that height. */
@media (max-height:44rem){
.stage-in{padding:clamp(1.25rem,4vh,3rem) 0}
}
.kicker{font-family:var(--mono);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--carmine);margin:0 0 1.7rem}
/* Matched on the class as well as the tag: on the index the wordmark is a
, because the page's real
belongs on the section below that says
what the business does rather than on the brand name. It has to keep
looking exactly like the headings it sits beside on every other stage. */
.stage-in h1,.stage-in .wordmark{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,7.2vw,5.6rem);line-height:1.04;letter-spacing:-.025em;color:#FBFAF8;margin:0}
.stage-in h1 em,.stage-in .wordmark em{font-style:italic;color:var(--carmine)}
/* the hero headline is the wordmark itself — mono, not the serif voice */
.stage-in .wordmark{font-family:var(--mono);font-weight:700;letter-spacing:-.045em;
font-size:clamp(2.5rem,9.5vw,6.2rem);line-height:1}
.stage-in .wordmark em{font-style:normal;color:var(--carmine)}
.stage-in .wordmark span{color:rgba(251,250,248,.38)}
/* ── the index, below the splash ──────────────────────────────
The stage is the composition; this is the substance. Set narrow and
quiet on purpose: whoever is reading it came down here on purpose, which
means they are already interested.
The bridge between the two is .stage-scroll: a link, not decoration. It
was an arrow with its animation switched off, which is the least useful
thing a page can put at the bottom of a splash — an arrow promises
movement without giving a reason for it. It now carries the same sentence
as the it points at, so the click has a stated payoff, and a keyboard
gets past a full screen of splash in one tab. */
.stage-scroll{
flex:none;align-self:center;max-width:100%;
display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
margin:0 0 clamp(1rem,3vh,1.6rem);padding:.5rem .1rem;
font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;line-height:1.45;
color:rgba(242,241,238,.5);text-decoration:none;text-align:center;
border-bottom:1px solid rgba(242,241,238,.14);
transition:color .18s ease,border-color .18s ease;
}
.stage-scroll:hover,.stage-scroll:focus-visible{color:var(--carmine);border-bottom-color:rgba(228,99,108,.55)}
.stage-scroll .ss-arrow{flex:none;font-size:.95rem;line-height:1}
/* One 3px drift every four seconds, and it stops under the pointer. Enough
to catch the eye once; nothing like the chevron that bounces forever. */
@media (prefers-reduced-motion:no-preference){
.stage-scroll .ss-arrow{animation:ssDrift 4s cubic-bezier(.4,0,.2,1) infinite}
.stage-scroll:hover .ss-arrow{animation:none}
}
@keyframes ssDrift{0%,74%,100%{transform:translateY(0);opacity:.55}84%{transform:translateY(3px);opacity:1}}
/* The hub starts with no topbar and grows one on the way down (main.js), so
scroll-margin-top is doing real work here: the anchor click from the
splash lands while the bar is arriving, and without it the bar would come
down on top of the heading. The value matches .band so the heading sits
where it does on every other page.
A ground of its own, and deliberately not .sheet — the sheet is the
subpage device, and a bordered panel under the hub's closing argument
would make the index look like one more subpage. What this needs is not a
panel but quiet: the field's lines were running through the paragraphs and
reading as underlines and strikethroughs on the one block of the site a
reader spends longest in. So it is a plain painted gradient, no
backdrop-filter — the note on .sheet is about blur forcing the compositor
to re-read the canvas every frame, and an opaque fill does none of that;
it is one paint of one rectangle. It starts fully transparent so the
sliced heading at the fold still sits on the live ground and the seam
between splash and section stays invisible. */
.home-more{
padding:0 var(--gut) clamp(3rem,7vh,5rem);position:relative;
scroll-margin-top:clamp(3rem,6vh,4.5rem);
background:linear-gradient(180deg,
rgba(14,16,19,0) 0,
rgba(14,16,19,.72) 5rem,
rgba(14,16,19,.88) 11rem,
rgba(14,16,19,.88) 100%);
}
.hm-in{max-width:44rem;margin:0 auto;padding-top:clamp(1rem,4vh,2.5rem)}
.hm-in h1{
font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,3.6vw,2.6rem);
line-height:1.14;letter-spacing:-.02em;color:#FBFAF8;margin:0;text-wrap:balance;
}
.hm-in h1 em{font-style:italic;color:var(--carmine)}
.hm-in h2{
font-family:var(--serif);font-weight:400;font-size:clamp(1.1rem,2vw,1.4rem);
color:#FBFAF8;margin:2.4rem 0 .7rem;letter-spacing:-.01em;
}
.hm-lede{font-family:var(--sans);font-size:clamp(.95rem,1.35vw,1.05rem);line-height:1.7;
color:rgba(242,241,238,.72);margin:1.2rem 0 0}
.hm-in p{font-family:var(--sans);font-size:.9375rem;line-height:1.72;
color:rgba(242,241,238,.6);margin:0}
.hm-steps{
list-style:none;counter-reset:hm;margin:2.2rem 0 0;padding:0;
display:grid;gap:.05rem;border-top:1px solid var(--rule);
}
.hm-steps li{
counter-increment:hm;position:relative;padding:.95rem 0 .95rem 2.6rem;
border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:.9375rem;
line-height:1.6;color:rgba(242,241,238,.58);
}
.hm-steps li::before{
content:counter(hm);position:absolute;left:0;top:1rem;
font-family:var(--mono);font-size:.7rem;color:var(--carmine);letter-spacing:.1em;
}
.hm-steps b{color:#FBFAF8;font-weight:600}
.hm-go{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-top:2.2rem !important}
.hm-go a{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
color:var(--slate-hi,#C3C9D2);text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:2px}
.hm-go a:hover{color:var(--carmine);border-color:var(--carmine)}
.home-more .stage-legal{margin-top:clamp(2.5rem,6vh,4rem)}
.lede{font-family:var(--sans);font-size:clamp(.9375rem,1.4vw,1.0625rem);line-height:1.65;color:rgba(242,241,238,.62);max-width:44ch;margin:1.7rem auto 0}
/* squared off, not round — on hover a diagonal hatch draws across the box
from the left. isolation + z-index:-1 keeps the lines above the button's
own background but behind the label, so the text stays readable. */
.pill{
position:relative;isolation:isolate;overflow:hidden;
display:inline-flex;align-items:center;justify-content:center;margin-top:2.4rem;
padding:.95rem 1.9rem;border-radius:0;text-decoration:none;
background:rgba(228,99,108,.16);border:1px solid rgba(228,99,108,.42);
color:#FBFAF8;font-family:var(--sans);font-size:1rem;font-weight:600;cursor:var(--cur-click);
transition:background .18s ease,border-color .18s ease;
}
.pill::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background-image:repeating-linear-gradient(
45deg,
rgba(228,99,108,.38) 0 1px,
transparent 1px 10px
);
clip-path:inset(0 100% 0 0);
transition:clip-path .34s cubic-bezier(.22,.61,.36,1);
}
.pill:hover::before,.pill:focus-visible::before{clip-path:inset(0 0 0 0)}
.pill:hover{background:rgba(228,99,108,.26);border-color:rgba(228,99,108,.7)}
.choices{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2.4rem}
.choices .pill{margin-top:0}
.pill.ghost{
background:transparent;border-color:var(--rule-firm);color:rgba(242,241,238,.82);
padding:.85rem 1.6rem;font-weight:500;
}
.pill.ghost::before{background-image:repeating-linear-gradient(
45deg,
rgba(228,99,108,.45) 0 1px,
transparent 1px 10px
)}
.pill.ghost:hover{border-color:var(--carmine);color:#fff;background:rgba(228,99,108,.06)}
@media (prefers-reduced-motion:reduce){
.pill::before{transition:opacity .18s ease;clip-path:none;opacity:0}
.pill:hover::before,.pill:focus-visible::before{opacity:1}
}
.stage-in .note{color:rgba(242,241,238,.42);margin-top:1.5rem}
/* subpage furniture */
.page-head{padding:clamp(5.25rem,11vh,7rem) 0 0}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.1rem,5vw,3.6rem);letter-spacing:-.025em;line-height:1.05;color:#FBFAF8}
.page-head h1 em{font-style:italic;color:var(--carmine)}
.page-head .prose{margin-top:1rem;color:var(--slate)}
.cue{display:flex;justify-content:center;padding-bottom:clamp(1.5rem,4vh,2.75rem);flex:none;pointer-events:none}
.cue span{display:block;width:1px;height:2.6rem;transform-origin:bottom;background:linear-gradient(rgba(242,241,238,0),rgba(228,99,108,.85));animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.22;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
.btn{font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:.85rem 1.5rem;border:1px solid var(--carmine);background:var(--carmine);color:#14161A;cursor:var(--cur-click);transition:transform .16s ease,box-shadow .16s ease;display:inline-block;font-weight:700}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px var(--shadow)}
.note{font-family:var(--mono);font-size:.75rem;color:var(--slate)}
h2{font-size:clamp(1.65rem,3.3vw,2.35rem);margin-bottom:1.05rem}
.prose{max-width:62ch}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}
.does{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem;margin-top:2.4rem}
.doe{border-top:2px solid var(--carmine);padding-top:1.2rem;display:grid;gap:.5rem;align-content:start}
.doe.sub{border-top-color:var(--rule-firm)}
.doe h3{font-size:1.0625rem}
.doe p{margin:0;font-family:var(--sans);font-size:.875rem;color:var(--slate-hi);line-height:1.6}
.doe .when{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
/* ── services catalogue ────────────────────────────────────────
Each card has to answer the same three questions in the same order:
what it is, what is in it, what it costs. */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(16.5rem,1fr));gap:1rem;margin-top:2.4rem}
.svc-card{border:1px solid var(--rule);background:var(--panel-bg);padding:1.4rem 1.35rem 1.2rem;
display:flex;flex-direction:column;gap:.65rem;transition:border-color .18s ease}
.svc-card:hover{border-color:var(--rule-firm)}
/* The stage tag never wraps under the title. It used to be free to, and the
grid gives every card in a row the same width — so a long name broke to
two lines while the card beside it did not, and the inconsistency was the
only thing you saw. nowrap + min-width:0 lets the title wrap inside its
own space instead, which is uniform at every width. */
.svc-h{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:nowrap}
/* min-width:0 lets the title shrink so the tag beside it never wraps;
break-word is the safety net that comes with it — without it a long
compound (Latvian and Russian have plenty) overflows the card
instead of wrapping once the column count goes up. */
.svc-card h3{min-width:0;overflow-wrap:break-word}
.svc-tag{flex:none}
.svc-card h3{font-size:1.0625rem;letter-spacing:-.015em}
.svc-tag{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
color:var(--carmine);border:1px solid var(--carmine-deep);padding:.2rem .5rem;white-space:nowrap}
.svc-card > p{margin:0;font-family:var(--sans);font-size:.85rem;line-height:1.6;color:var(--slate-hi)}
.svc-list{list-style:none;margin:.1rem 0 0;padding:0;display:grid;gap:.35rem}
.svc-list li{font-family:var(--sans);font-size:.8125rem;line-height:1.5;color:var(--slate);
padding-left:1.05rem;position:relative}
.svc-list li::before{content:"";position:absolute;left:0;top:.55em;width:.4rem;height:1px;background:var(--carmine)}
/* Last card in the grid: an opening, not a product. Dashed and unfilled so
it reads as "ask us" rather than as one more thing with a price behind it. */
.svc-card.ask{border-style:dashed;background:transparent}
.svc-card.ask .pill{margin-top:auto;align-self:start;font-size:.9375rem;padding:.8rem 1.5rem}
/* Two related services sharing one card. The pair is one decision for the
reader — new site or rebuild, bookings or a shop — and as two separate
cards he compared them as if they were unrelated products. The titles are
the switch, so the card keeps exactly one heading's worth of weight. */
/* The pair sits as a header strip across the very top of the card, flush to
its edges: the card drops its top padding and the strip cancels the side
padding with negative margins, so the two boxes meet the card's own border
on three sides. The stage tag moves below the strip.
The strip's bottom border doubles as the underline — one continuous rule
under both boxes, carmine on whichever is selected. Kept near 1cm tall;
no hard cap, since capping would clip a Latvian word that wraps. */
.svc-card[data-pair]{padding-top:0}
.svc-h.pair{justify-content:flex-end}
.svc-pick{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 -1.35rem}
.svc-t{
display:flex;align-items:center;justify-content:center;text-align:center;
min-height:2.6rem;padding:.5rem .45rem;
background:transparent;border:0;border-bottom:2px solid var(--rule);
font-family:var(--sans);font-weight:600;font-size:.8125rem;letter-spacing:-.01em;
color:var(--slate);cursor:var(--cur-click);
transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.svc-t + .svc-t{border-left:1px solid var(--rule)}
.svc-t:hover{color:var(--ink)}
.svc-t[aria-selected="true"],.svc-t.on{
color:var(--ink);background:rgba(255,255,255,.09);border-bottom-color:var(--carmine);
}
/* The pane carries the gap the card would otherwise give p and ul directly. */
.svc-pane{display:flex;flex-direction:column;gap:.65rem}
.svc-foot{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--rule);
display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap}
.svc-foot b{font-family:var(--mono);font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.svc-foot span{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;color:var(--slate)}
/* ── situation switcher (/services) ────────────────────────────
Five panels, one visible. All five are in the markup and the script only
flips [hidden], so every word stays in the Blade file — this needs no
runtime dictionary in main.js the way the frame's toggle does. */
.sitch{margin-top:2.4rem}
.sit-panel{border:1px solid var(--rule);background:var(--panel-bg);padding:1.6rem 1.5rem}
.sit-panel h3{font-size:1.1875rem;margin-bottom:.55rem}
.sit-panel > p{margin:0 0 1.25rem;font-family:var(--sans);font-size:.875rem;
line-height:1.65;color:var(--slate-hi);max-width:58ch}
/* The fifth panel closes with a sentence after its list and then a button.
The rule above only carries a bottom margin, so that closing line sat
flush against the last bullet — reading as a bullet that had lost its
dash — and then .pill's global 2.4rem opened a void before the button.
Same oversight .svc-card.ask already fixes for the card that ends the
grid: the space belongs above the sentence, not below it. */
.sit-panel > ul + p{margin:1.5rem 0 0}
.sit-panel .pill{margin-top:1.4rem;align-self:start}
/* What changes for the owner — not the order we do things in. Deliberately
unnumbered and free of tool names: a numbered list reads as our method,
and the method is not the thing he is buying. */
.sit-lede{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
color:var(--slate);margin:0 0 .85rem}
.sit-out{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.sit-out li{padding-left:1.5rem;position:relative;font-family:var(--sans);
font-size:.9375rem;line-height:1.5;color:var(--ink)}
.sit-out li::before{content:"";position:absolute;left:0;top:.62em;width:.75rem;height:1px;background:var(--carmine)}
/* The services named at each stage of the journey. Chips, not a list: they
are labels pointing at section 03, not things to read one by one. */
.step-svc{list-style:none;margin:.85rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.step-svc li{font-family:var(--mono);font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;
color:var(--slate);border:1px solid var(--rule-firm);padding:.28rem .55rem}
.incl{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.4rem 1.5rem;margin-top:2.4rem}
.incl-i{display:grid;gap:.3rem;align-content:start;padding-left:1.1rem;border-left:1px solid var(--rule-firm)}
.incl-i b{font-size:.9375rem;letter-spacing:-.01em}
.incl-i span{font-family:var(--sans);font-size:.8125rem;line-height:1.6;color:var(--slate)}
.steps{display:grid;margin-top:2.2rem}
.step{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:1.3rem;padding:1.7rem 0;border-top:1px solid var(--rule)}
.step:first-child{border-top:0;padding-top:.4rem}
.step-n{font-family:var(--mono);font-size:.8125rem;color:var(--carmine);font-variant-numeric:tabular-nums;padding-top:.3rem}
.step h3{font-size:1.0625rem;margin-bottom:.4rem}
.step p{margin:0;font-family:var(--sans);color:var(--slate-hi);font-size:.875rem;line-height:1.6}
.bars{display:grid;gap:1.15rem;margin-top:2.4rem;max-width:38rem}
.bar-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 4rem;gap:.9rem;align-items:center}
.bar-name{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--slate)}
.track{height:.55rem;background:var(--panel-bg);border:1px solid var(--rule);position:relative;overflow:hidden}
.fill{position:absolute;inset:0 auto 0 0;background:var(--carmine)}
.fill.dim{background:var(--slate);opacity:.4}
.bar-val{font-family:var(--mono);font-size:.8125rem;font-variant-numeric:tabular-nums;text-align:right}
@media (max-width:34rem){
.bar-row{grid-template-columns:minmax(0,1fr) 3.5rem;grid-template-areas:"n n" "t v"}
.bar-name{grid-area:n}.track{grid-area:t}.bar-val{grid-area:v}
}
.est{display:grid;grid-template-columns:minmax(0,1fr) minmax(13rem,19rem);gap:1px;background:var(--rule-firm);border:1px solid var(--rule-firm);margin-top:2.2rem}
@media (max-width:46rem){.est{grid-template-columns:minmax(0,1fr)}}
.est-in,.est-out{background:rgba(14,16,19,.75);padding:1.8rem}
.est-out{background:rgba(255,255,255,.05);display:flex;flex-direction:column;justify-content:center;gap:.5rem}
.q{display:grid;gap:.65rem;padding:1.1rem 0;border-top:1px solid var(--rule)}
.q:first-child{border-top:0;padding-top:0}
.q > p{margin:0;font-size:.9375rem}
.opts{display:flex;flex-wrap:wrap;gap:.45rem}
.opt{font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;padding:.5rem .85rem;border:1px solid var(--rule-firm);background:transparent;color:var(--slate);cursor:var(--cur-click);transition:all .15s ease}
.opt:hover{border-color:var(--carmine);color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--carmine);border-color:var(--carmine);color:#14161A;font-weight:700}
/* the davisweb chip carries the wordmark: carmine "web" while the chip is
unselected, dropped to the chip's own ink once the chip goes carmine. */
.opt .hl{color:var(--carmine)}
.opt[aria-pressed="true"] .hl{color:inherit}
.est-sum{font-family:var(--mono);font-size:clamp(1.45rem,3.2vw,2rem);font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1.1}
.est-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.est-note{font-family:var(--sans);font-size:.8125rem;color:var(--slate-hi);margin:0;line-height:1.55}
.est-out .btn{margin-top:.6rem;text-align:center}
/* ── cenas view: the calculator ─────────────────────────────
Same chip language as the old inline estimator, but the detail lives in
the output column — an itemised breakdown that redraws on every click —
rather than in an ever longer list of questions. A buyer who cannot
answer "cik lapu?" can still answer "ko jūs darāt?", so the first
question seeds the rest and everything after it is an adjustment. */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,21rem);gap:1px;
background:var(--rule-firm);border:1px solid var(--rule-firm);margin-top:2.2rem}
@media (max-width:58rem){.calc{grid-template-columns:minmax(0,1fr)}}
.calc-in{background:rgba(14,16,19,.75);padding:1.8rem}
/* sticky so the running summary stays in view while the questions scroll past */
.calc-out{background:rgba(255,255,255,.05);padding:1.8rem;align-self:start;position:sticky;top:4.6rem}
@media (max-width:58rem){.calc-out{position:static}}
.q-note{margin:-.25rem 0 0;font-family:var(--sans);font-size:.8125rem;line-height:1.5;color:var(--slate-hi)}
/* the question number, written by script so a hidden question leaves no gap
in the count — an only so it can be addressed, not to lean it over */
.q-n{font-style:normal}
.brk{margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--rule);display:grid;gap:.45rem}
.brk-row{display:flex;gap:.9rem;justify-content:space-between;align-items:baseline;font-size:.875rem;line-height:1.45}
.brk-row > span{font-family:var(--sans);color:var(--slate-hi)}
.brk-row > b{font-family:var(--sans);font-size:.8125rem;font-weight:400;color:var(--ink);
text-align:right;overflow-wrap:anywhere}
/* an untouched question, said out loud rather than left blank — a gap here
reads as "nothing needed" to whoever writes the price off this */
.brk-row.off > b{color:var(--slate)}
.calc-meta{margin:1.15rem 0 0;padding-top:1rem;border-top:1px solid var(--rule);display:grid;gap:.45rem}
.calc-meta .brk-row > b{color:var(--carmine)}
.calc-out .est-note{margin-top:1.15rem}
.calc-out .btn{margin-top:1rem;width:100%;text-align:center}
.calc-alt{display:block;margin-top:.85rem;font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;
text-transform:uppercase;color:var(--slate);text-decoration:none;text-align:center}
.calc-alt:hover{color:var(--carmine)}
/* what every price contains, laid out so it reads as a list of facts */
.inc{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr));gap:1rem 1.8rem;
margin-top:2rem;padding-top:1.7rem;border-top:1px solid var(--rule-firm)}
.inc > div{display:grid;grid-template-columns:.9rem minmax(0,1fr);gap:.7rem;font-family:var(--sans);font-size:.875rem;line-height:1.6;color:var(--slate-hi)}
.inc i{font-style:normal;font-family:var(--mono);color:var(--carmine);line-height:1.5}
.inc b{display:block;font-weight:400;color:var(--ink)}
.faq{margin-top:1.8rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:var(--cur-click);list-style:none;padding:1.05rem 2rem 1.05rem 0;position:relative;font-family:var(--sans);font-weight:700;font-size:.9875rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.35rem;top:50%;transform:translateY(-50%);font-family:var(--mono);font-weight:400;color:var(--carmine);font-size:1.1rem}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{color:var(--carmine)}
.faq .a{padding:0 2rem 1.2rem 0;margin:0;color:var(--slate-hi);font-size:.9375rem;max-width:60ch}
.faq .a a{color:var(--carmine);text-decoration:none;border-bottom:1px solid var(--carmine-soft)}
.faq .a a:hover{border-bottom-color:var(--carmine)}
/* ── about view ────────────────────────────────────────────
Two additions only. The "Pēc palaišanas" cards reuse .doe.sub, so that
section needs nothing of its own. */
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:1.6rem 1.2rem;
margin-top:2.4rem;padding-top:1.7rem;border-top:1px solid var(--rule-firm)}
.num b{display:block;font-family:var(--mono);font-size:clamp(1.5rem,3.4vw,2.1rem);
font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1.05;color:var(--carmine)}
.num span{display:block;margin-top:.55rem;font-family:var(--sans);font-size:.8125rem;
line-height:1.55;color:var(--slate-hi);text-wrap:pretty}
/* the one line on the page that gets to raise its voice */
.pull{margin:2.3rem 0;padding-left:1.4rem;border-left:2px solid var(--carmine);
font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.4;
letter-spacing:-.015em;color:#FBFAF8;max-width:34ch}
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:clamp(1.5rem,4vw,3.5rem);margin-top:1.8rem}
form{display:grid;gap:.9rem}
label{font-family:var(--mono);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:.4rem}
input,textarea{width:100%;font-family:var(--serif);font-size:1rem;color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--rule-firm);padding:.7rem .85rem}
input::placeholder,textarea::placeholder{color:rgba(151,160,172,.7)}
/* outline:none on its own was overriding the global :focus-visible rule and
leaving a keyboard on /quote's seven fields with nothing but a border one
shade off the one beside it. The border stays — it is the quieter part of
the state and it is what the design wants — and the ring goes back on top
of it for :focus-visible.
Note that a text field matches :focus-visible when it is clicked as well
as when it is tabbed to: browsers treat text entry as always warranting
the ring, and arguing with that is how a form ends up less usable than the
platform it is on. Order matters here — same specificity as the rule
above, so this has to come after it. */
input:focus,textarea:focus{border-color:var(--carmine);outline:none}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--carmine);outline-offset:2px}
textarea{resize:vertical;min-height:6rem}
.direct{font-family:var(--mono);font-size:.9375rem;display:grid;gap:1rem;align-content:start}
.direct a{color:var(--carmine);text-decoration:none;border-bottom:1px solid var(--carmine-soft)}
.direct a:hover{border-bottom-color:var(--carmine)}
/* ── opening hours ──────────────────────────────────────────
Status is never colour-only: the dot is always accompanied by the
words "Šobrīd atvērts" / "Šobrīd slēgts". */
.hrs{list-style:none;margin:0;padding:0;display:grid;gap:.15rem;font-size:.8125rem}
.hrs-row{display:flex;justify-content:space-between;gap:1rem;padding:.15rem 0;color:var(--slate)}
.hrs-row > b{font-weight:400;font-variant-numeric:tabular-nums}
.hrs-day{display:flex;align-items:center;gap:.5rem}
/* every row reserves the dot's space so the day names stay aligned;
only today's is painted */
.hrs-dot{width:.5rem;height:.5rem;border-radius:50%;flex:none;visibility:hidden;background:var(--slate)}
.hrs-row.on .hrs-dot{visibility:visible}
.hrs-row.on{color:var(--ink)}
.hrs-row.on > b{color:var(--ink)}
.hrs-row.on[data-open="1"],.hrs-row.on[data-open="1"] > b{color:var(--open)}
.hrs-row.on[data-open="1"] .hrs-dot{background:var(--open);box-shadow:0 0 0 3px rgba(95,192,138,.18)}
.hrs-row.on[data-open="0"],.hrs-row.on[data-open="0"] > b{color:var(--shut)}
.hrs-row.on[data-open="0"] .hrs-dot{background:var(--shut);box-shadow:0 0 0 3px rgba(228,99,108,.16)}
.direct .k{color:var(--slate);font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase}
footer{border-top:1px solid var(--rule);padding:2.4rem 0 3.2rem;display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;font-family:var(--mono);font-size:.75rem;color:var(--slate)}
/* ── work view ─────────────────────────────────────────────── */
.work-pad{padding:clamp(5rem,10vh,6rem) 0 3rem}
.work-head{padding:0 0 1.6rem}
.work-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.6vw,3.4rem);letter-spacing:-.025em;line-height:1.05;color:#FBFAF8}
.work-head h1 em{font-style:italic;color:var(--carmine)}
.work-head .prose{margin-top:1.1rem}
/* ── the owner's panel, under the frame ──────────────────────────────
The demos in the frame all prove the same step: somebody found you. This
block is the step after it, and it lives on the index rather than behind
a link in a demo footer — a showcase that only shows websites argues that
websites are all we build. */
.work-panels{
margin-top:clamp(2.5rem,6vw,4rem);
padding-top:clamp(1.8rem,4vw,2.6rem);
border-top:1px solid var(--rule);
}
.work-panels-head h2{
font-family:var(--serif);font-weight:400;
font-size:clamp(1.45rem,3vw,2.15rem);letter-spacing:-.02em;line-height:1.12;
color:#FBFAF8;margin:0;text-wrap:balance;
}
.work-panels-head h2 em{font-style:italic;color:var(--carmine)}
.work-panels-head .prose{margin-top:1.1rem}
.work-panel-cards{
display:grid;grid-template-columns:1fr 1fr;gap:1rem;
margin-top:clamp(1.6rem,3.5vw,2.4rem);
}
.work-panel{
border:1px solid var(--rule);border-radius:14px;
padding:clamp(1.2rem,2.6vw,1.8rem);
display:flex;flex-direction:column;gap:.55rem;
background:rgba(255,255,255,.02);
}
.wp-kind{
font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--carmine);
}
.work-panel h3{
font-family:var(--serif);font-weight:400;font-size:1.5rem;
letter-spacing:-.01em;margin:0;color:#FBFAF8;
}
.work-panel p{margin:0;color:var(--slate);font-size:.92rem;line-height:1.6}
/* Two versions per panel while one of each pair is being chosen. When the
choice is made this collapses to a single pill per card. */
.wp-go{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto;padding-top:.9rem}
/* .pill carries a top margin for the hero, which inside a card pushes the
button off the bottom edge and leaves a pair of cards misaligned. */
.wp-go .pill{margin-top:0}
/* The "and it could be something else" block. Set apart from the two cards
so the examples read as evidence and this reads as the actual offer —
without it the two panels look like the whole menu. */
.wp-more{
margin-top:clamp(1.4rem,3vw,2rem);
padding-top:clamp(1.2rem,2.5vw,1.6rem);
border-top:1px dashed var(--rule);
display:flex;flex-direction:column;gap:.8rem;
}
.wp-more p{margin:0;color:var(--slate);font-size:.93rem;line-height:1.65;max-width:64ch}
.wp-more b{color:#FBFAF8;font-weight:600}
.wp-more-cta{margin-top:.3rem !important}
/* The bullet list inside a panel card. Used by the version chooser, which
is built from these same cards so that it cannot drift into looking like
a different site — which is exactly what it did while it had a stylesheet
of its own. */
.wp-list{margin:.35rem 0 0;padding:0 0 0 1.05rem;list-style:none}
.wp-list li{
position:relative;color:var(--slate);font-size:.88rem;line-height:1.55;
padding:.22rem 0;
}
.wp-list li::before{
content:"—";position:absolute;left:-1.05rem;color:var(--carmine);opacity:.7;
}
.wp-list b{color:#FBFAF8;font-weight:600}
/* Consecutive panel sections need the rule between them, but not a second
one immediately under the page heading. */
.work-panels + .work-panels{margin-top:clamp(2rem,4.5vw,3rem)}
.wp-note{margin:1.4rem 0 0;font-size:.85rem;color:var(--slate)}
.wp-note a{color:var(--carmine);text-decoration:none}
.wp-note a:hover{text-decoration:underline}
@media (max-width:52rem){
.work-panel-cards{grid-template-columns:1fr}
}
/* The note under the frame. Sits on a rule so it reads as a closing
remark on the three demos rather than a fourth thing to look at. */
.work-range{
margin-top:clamp(2.5rem,6vw,4rem);
padding-top:clamp(1.8rem,4vw,2.6rem);
border-top:1px solid var(--rule);
}
.work-range h2{
font-family:var(--serif);font-weight:400;
font-size:clamp(1.45rem,3vw,2.15rem);letter-spacing:-.02em;line-height:1.12;
color:#FBFAF8;margin:0;text-wrap:balance;
}
.work-range h2 em{font-style:italic;color:var(--carmine)}
.work-range .prose{margin-top:1.1rem}
.work-range-cta{margin:1.6rem 0 0}
.back{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);text-decoration:none;cursor:var(--cur-click);background:none;border:0;padding:0}
.back:hover{color:var(--carmine)}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem}
.tab{font-family:var(--mono);font-size:.75rem;letter-spacing:.05em;padding:.55rem 1rem;border:1px solid var(--rule-firm);background:transparent;color:var(--slate);cursor:var(--cur-click);transition:all .15s ease}
.tab:hover{border-color:var(--carmine);color:var(--ink)}
/* Selected state is matched on either the class or aria-selected. The
switchers set both, so styling never depends on the attribute alone —
aria-selected is there for assistive tech and must not be dropped. */
.tab[aria-selected="true"],.tab.on{background:var(--carmine);border-color:var(--carmine);color:#14161A;font-weight:700}
.frame-shell{display:grid;gap:.85rem}
/* Full-size view: the inline frame shows roughly 40% scale, which flatters
nothing. This lets a visitor see a demo at the size it was designed for. */
.frame-shell.full{
position:fixed;inset:0;z-index:80;margin:0;
padding:clamp(.6rem,2vw,1.25rem);background:rgba(9,10,12,.97);
grid-template-rows:auto minmax(0,1fr) auto;
}
/* The shell lives inside #view-work, which is its own stacking context at
z-index 2 — so this overlay's z-index:80 is local and the fixed .topbar
(z-index 60, a sibling of the views) paints straight over the controls
row. Hide the site header while a demo is expanded instead. */
body.demo-full .topbar{display:none}
/* And the call bar with it. Same reasoning from the other end: the bar is
fixed at z-index 55 as a sibling of the views, so it paints over an
overlay whose z-index:80 is local to #view-work — a carmine strip across
the bottom of an expanded demo. */
body.demo-full .callbar{display:none}
.frame-shell.full .frame{min-height:0;display:flex;flex-direction:column}
.frame-shell.full .screen{flex:1;height:auto}
.frame-shell.full .hint{display:none}
.foot-right{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.frame-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.caption{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.caption b{color:var(--ink);font-weight:400}
.frame{border:1px solid var(--rule-firm);border-radius:8px;background:#22252A;box-shadow:0 24px 60px -20px rgba(0,0,0,.7);overflow:hidden}
.chrome-bar{display:flex;align-items:center;gap:.55rem;padding:.6rem .75rem;border-bottom:1px solid rgba(242,241,238,.10)}
.dot{width:9px;height:9px;border-radius:50%;background:rgba(242,241,238,.20);flex:none}
.urlbar{flex:1;background:rgba(0,0,0,.35);border:1px solid rgba(242,241,238,.10);border-radius:5px;font-family:var(--mono);font-size:.6875rem;color:rgba(242,241,238,.55);padding:.26rem .65rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.screen{container-type:inline-size;position:relative;overflow:hidden;height:min(70vh,38rem);background:#fff}
.slide{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .32s ease, visibility 0s linear .32s}
/* Inactive demos are skipped entirely for layout and paint. With six
full mini-sites behind a continuously repainting canvas, leaving them
merely transparent pinned the main thread. */
.slide.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .32s ease, visibility 0s}
.slide::-webkit-scrollbar{width:9px}
.slide::-webkit-scrollbar-track{background:rgba(0,0,0,.05)}
.slide::-webkit-scrollbar-thumb{background:rgba(0,0,0,.22);border-radius:9px}
.hint{font-family:var(--mono);font-size:.6875rem;color:var(--slate);letter-spacing:.06em}
/* ── the chooser above the frame ─────────────────────────────
Two rows, not two groups side by side: the category first, the names
second. The demos stopped being four sites plus the back office of one
of them — each category answers a different question the owner arrived
with, and a visitor who came about the telephone should not have to
read four company names to find it. */
.controls{display:grid;gap:.85rem;justify-items:start}
.cats{display:flex;flex-wrap:wrap;border:1px solid var(--rule-firm);border-radius:6px;overflow:hidden;max-width:100%}
.cat{
font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
padding:.72rem 1.4rem;background:transparent;border:0;color:var(--slate);
cursor:var(--cur-click);transition:color .15s ease,background .15s ease;
}
.cat + .cat{border-left:1px solid var(--rule-firm)}
.cat:hover{color:var(--ink)}
.cat[aria-selected="true"]{background:var(--carmine);color:#14161A;font-weight:700}
/* One line of context per category. Without it the owner's panels read as
another invented company rather than as the back of one already on show —
the job the group label used to do. */
.cat-note{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--slate);margin:0;text-wrap:pretty}
.controls .tabs{margin:0}
.tab[hidden],.tabs[hidden]{display:none}
@media (max-width:40rem){
.cats{width:100%}
.cat{flex:1 1 auto;text-align:center;padding:.72rem .9rem;letter-spacing:.1em}
}
/* ── miniature client sites keep their own light worlds ────── */
.mini{font-family:var(--sans);font-size:clamp(10px,1.5cqw,15px);line-height:1.55;color:#1b1b1b;background:#fff;min-height:100%}
/* ── Kafejnīca Malka ────────────────────────────────────────────
One dark brand colour (pine), one warm accent (clay), and paper.
Everything below reads from these six tokens — no stray hex. */
/* Scoped to .mini.a on purpose: a bare .a also matched the FAQ answers
(
), which painted them onto this demo's cream paper. */
.mini.a{
--paper:#F3F1EA; --card:#FFFFFF; --sand:#E9E3D5;
--pine:#1E3B32; --pine-2:#2C5347;
--clay:#BE5732; --a-ink:#141310; --mute:#6E6A61; --a-rule:#E0DACE;
--pad:2.6em;
background:var(--paper);color:var(--a-ink)
}
.mini.a b,.mini.a strong{font-weight:600}
/* header: identity left, wayfinding right — not a stacked template */
.a-top{display:flex;align-items:center;justify-content:space-between;gap:1.5em;
padding:1.15em var(--pad);background:var(--paper);border-bottom:1px solid var(--a-rule)}
.a-logo{font-family:var(--serif);font-size:1.5em;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.a-navwrap{display:flex;align-items:center;gap:1.8em}
.a-nav{display:flex;gap:1.5em;font-size:.72em;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.a-nav span{padding-bottom:.15em;border-bottom:1px solid transparent}
.a-nav span:hover{color:var(--a-ink)}
.a-tel{font-size:.75em;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
/* hero: type on pine, a warm plate beside it — no muddy gradient */
.a-hero{position:relative;background:var(--pine);color:#F4F1E8;
display:grid;grid-template-columns:1.15fr .85fr;align-items:stretch;gap:0;min-height:19em}
.a-hero-in{display:flex;flex-direction:column;justify-content:center;gap:.85em;padding:3em var(--pad)}
.a-hero-t{font-family:var(--serif);font-size:2.9em;line-height:1.04;letter-spacing:-.025em;max-width:11em;margin:0}
.a-hero-s{color:rgba(244,241,232,.72);font-size:.88em;line-height:1.65;max-width:26em;margin:0}
.a-acts{display:flex;flex-wrap:wrap;gap:.6em;margin-top:.7em}
/* Colour plates stand in for photography. A faint weave keeps them reading
as deliberate graphics rather than as a photo that failed to load. */
.a-plate{position:relative;background:
repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),
radial-gradient(120% 90% at 78% 22%,rgba(255,255,255,.20),transparent 60%),
linear-gradient(200deg,var(--sand) 0%,#C98F5F 52%,var(--clay) 100%)}
.a-badge{position:absolute;top:1.5em;right:1.5em;background:var(--paper);color:var(--pine);
font-size:.66em;letter-spacing:.14em;text-transform:uppercase;padding:.55em .9em;font-weight:600}
/* menu */
.a-menu{display:grid;grid-template-columns:1fr 1fr;gap:2.6em;padding:0 var(--pad) 2.2em}
.a-col h3{font-family:var(--serif);font-size:1.3em;margin:0 0 .8em;padding-bottom:.45em;
border-bottom:1px solid var(--a-rule);color:var(--pine)}
.a-item{display:grid;grid-template-columns:1fr auto;gap:.6em;align-items:baseline;padding:.5em 0}
.a-item b{font-size:.92em}
.a-item i{font-style:normal;font-size:.75em;color:var(--mute);display:block;line-height:1.5}
.a-item span{font-variant-numeric:tabular-nums;font-size:.88em;color:var(--clay);font-weight:600}
.a-hours{background:var(--pine);color:rgba(244,241,232,.82);padding:2.2em var(--pad);
display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
.a-hours div{display:grid;gap:.3em}
.a-hours b{font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,241,232,.5)}
.a-hours span{font-size:1.05em;color:#F4F1E8;font-variant-numeric:tabular-nums}
.a-foot{padding:1.2em var(--pad) 1.5em;font-size:.7em;color:rgba(244,241,232,.5);
text-align:center;background:var(--pine);border-top:1px solid rgba(244,241,232,.14)}
/* ── shared mini-site machinery: internal pages + booking widgets ── */
.mpage{display:none}
.mpage.on{display:block}
.a-nav span,.a-cta,.bk-c{cursor:pointer}
.a-nav span.on{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:.35em}
.bk-q{display:grid;gap:.45em;margin-bottom:1em}
.bk-q label{font-size:.7em;letter-spacing:.12em;text-transform:uppercase;opacity:.65;margin:0}
.bk-chips{display:flex;flex-wrap:wrap;gap:.4em}
.bk-c{border:1px solid currentColor;padding:.45em .9em;font-size:.78em;opacity:.55;transition:opacity .15s ease}
.bk-c:hover{opacity:.9}
.bk-c.on{opacity:1;font-weight:700}
.bk-c.off{opacity:.22;text-decoration:line-through;pointer-events:none}
.bk-row{display:grid;grid-template-columns:1fr 1fr;gap:.5em;margin:1em 0}
.bk-row input{font:inherit;font-size:.82em;padding:.6em .7em;border:1px solid rgba(0,0,0,.2);background:#fff;color:inherit;width:100%}
.bk-done{display:none;margin-top:1em;padding:.9em 1.1em;font-size:.82em;line-height:1.5}
.bk-done.on{display:block}
/* café: buttons, sections, components — all off the .a tokens */
.a-cta{display:inline-block;background:var(--pine);color:#F4F1E8;font-size:.78em;
padding:.8em 1.5em;letter-spacing:.02em;font-weight:600;transition:background .16s ease}
.a-cta:hover{background:var(--pine-2)}
.a-cta.clay{background:var(--clay)}
.a-cta.clay:hover{background:#A9482A}
.a-cta.hollow{background:transparent;border:1px solid rgba(244,241,232,.45);color:#F4F1E8}
.a-cta.hollow:hover{background:rgba(244,241,232,.10)}
/* the open-now bar every café site should have and almost none do */
.a-strip{background:var(--sand);color:var(--a-ink);display:flex;flex-wrap:wrap;
gap:.35em 2.2em;padding:.85em var(--pad);font-size:.75em}
.a-strip b{color:var(--pine);font-weight:600}
.a-live{width:.5em;height:.5em;border-radius:50%;background:#4E8C5B;display:inline-block;margin-right:.55em;vertical-align:.05em}
.a-sec{padding:2.6em var(--pad)}
.a-sec.tight{padding-top:0}
.a-sec.sand{background:var(--sand)}
.a-eyebrow{font-size:.66em;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);margin:0 0 .55em;font-weight:600}
.a-h{font-family:var(--serif);font-size:1.7em;line-height:1.12;letter-spacing:-.015em;margin:0 0 .3em}
.a-sub{font-size:.82em;color:var(--mute);margin:0 0 1.5em;max-width:36em;line-height:1.7}
.a-three{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6em;padding:2.6em var(--pad) 0}
.a-card{border-top:1px solid var(--a-rule);padding-top:.9em;display:grid;gap:.3em}
.a-card b{font-size:.92em}
.a-card span{font-size:.78em;color:var(--mute);line-height:1.6}
.a-line{padding:0 var(--pad) 2.2em;font-size:.75em;color:var(--mute);line-height:1.7}
.a-today{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.a-dish{background:var(--card);padding:1.3em;display:grid;gap:.3em;align-content:start;border-bottom:2px solid var(--clay)}
.a-dish .n{font-weight:600;font-size:.95em}
.a-dish .d{font-size:.76em;color:var(--mute);line-height:1.55}
.a-dish .p{font-size:1.15em;color:var(--clay);font-weight:600;font-variant-numeric:tabular-nums;margin-top:.4em}
/* gallery: honest photo placeholders — a neutral plate with an image mark
reads as "the client's photo goes here"; a coloured gradient just reads
as a mistake. */
.a-gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:6.5em;gap:.6em}
.a-tile{position:relative;overflow:hidden;padding:.9em;background:#EAE6DC;
outline:1px solid rgba(20,19,16,.08);outline-offset:-1px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55em}
.a-tile::before{content:"";width:2.1em;height:2.1em;opacity:.5;background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23141310' stroke-width='1.1'%3E%3Crect x='2.6' y='4.6' width='18.8' height='14.8'/%3E%3Ccircle cx='8.2' cy='9.6' r='1.7'/%3E%3Cpath d='M3.4 17.4l5.2-5.1 3.9 3.4 3.1-2.6 5 4.3'/%3E%3C/svg%3E") center/contain no-repeat}
.a-tile span{font-size:.64em;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);text-align:center}
.a-tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.a-tile:nth-child(4){grid-column:span 2}
.a-revs{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em}
.a-rev{background:var(--card);padding:1.4em;display:grid;gap:.6em;align-content:start;border-left:2px solid var(--sand)}
.a-stars{color:var(--clay);font-size:.78em;letter-spacing:.22em}
.a-rev p{margin:0;font-size:.82em;line-height:1.7}
.a-rev .who{font-size:.72em;color:var(--mute)}
.a-score{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7em;margin-top:1.3em;font-size:.76em;color:var(--mute)}
.a-score b{font-size:1.7em;color:var(--pine);font-family:var(--serif);font-variant-numeric:tabular-nums}
.a-ev{display:grid;grid-template-columns:1fr 1fr;gap:1.2em}
.a-evc{background:var(--card);padding:1.6em;display:grid;gap:.45em;align-content:start}
.a-evc h4{font-family:var(--serif);font-size:1.25em;margin:0;color:var(--pine)}
.a-evc p{margin:0;font-size:.82em;color:var(--mute);line-height:1.7}
.a-evc .a-cta{justify-self:start;margin-top:.9em}
/* menu page */
.a-col-x{margin-top:2em}
.a-lunch{margin:0 var(--pad) 2.6em;background:var(--card);padding:1.6em 1.8em;border-top:2px solid var(--pine)}
.a-lunch h3{font-family:var(--serif);font-size:1.3em;margin:0 0 .25em;color:var(--pine)}
.a-lunch .a-sub{margin-bottom:1.1em}
.a-lrow{display:grid;grid-template-columns:7.5em 1fr auto;gap:.9em;align-items:baseline;
padding:.6em 0;border-top:1px solid var(--a-rule);font-size:.85em}
.a-lrow b{font-size:.82em;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.a-lrow span{font-variant-numeric:tabular-nums;color:var(--clay);font-weight:600}
/* booking page */
.a-book{padding:2.6em var(--pad);max-width:34em}
.a-book h3{font-family:var(--serif);font-size:1.7em;margin:0 0 1.1em}
.a-book .bk-done{background:var(--sand);border-left:2px solid var(--clay)}
.a-bwrap{display:grid;grid-template-columns:1.35fr 1fr;align-items:start}
.a-aside{padding:2.6em var(--pad) 2.6em 0;display:grid;gap:1em;align-content:start}
.a-abox{background:var(--card);padding:1.2em;display:grid;gap:.35em;border-left:2px solid var(--sand)}
.a-abox b{font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--clay)}
.a-abox span{font-size:.82em;line-height:1.65;color:var(--mute)}
.a-book .bk-c{border-color:var(--a-rule);color:var(--a-ink);opacity:1;background:var(--card)}
.a-book .bk-c.on{border-color:var(--pine);background:var(--pine);color:#F4F1E8}
/* about page */
.a-story{display:grid;grid-template-columns:1.05fr .95fr;gap:2.2em;align-items:center}
.a-story p{margin:0 0 .9em;font-size:.87em;line-height:1.8}
.a-shot{min-height:15em;align-self:stretch;background:
repeating-linear-gradient(45deg,rgba(255,255,255,.05) 0 2px,transparent 2px 9px),
radial-gradient(110% 80% at 70% 25%,rgba(255,255,255,.18),transparent 60%),
linear-gradient(165deg,var(--sand),#C98F5F 55%,var(--pine))}
.a-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em;margin-top:2em}
.a-fact{border-top:1px solid var(--a-rule);padding-top:.8em;display:grid;gap:.2em}
.a-fact b{font-family:var(--serif);font-size:1.9em;color:var(--clay);line-height:1}
.a-fact span{font-size:.76em;color:var(--mute);line-height:1.55}
.a-team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
.a-person{display:grid;gap:.3em;justify-items:start}
.a-avatar{width:100%;height:8em;margin-bottom:.5em;background:linear-gradient(160deg,var(--sand),#8FA79A 55%,var(--pine))}
.a-person b{font-size:.95em}
.a-person span{font-size:.76em;color:var(--clay)}
.a-person i{font-style:normal;font-size:.72em;color:var(--mute)}
/* contact page */
.a-contact{display:grid;grid-template-columns:repeat(4,1fr);gap:1em;padding:2.6em var(--pad) 1.4em}
.a-cbox{background:var(--card);padding:1.2em;display:grid;gap:.35em;border-top:2px solid var(--pine)}
.a-cbox b{font-size:.68em;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.a-cbox span{font-size:.88em;line-height:1.5}
.a-map{margin:0 var(--pad) 2.6em;height:10em;position:relative;overflow:hidden;
background:var(--sand);display:grid;place-items:center;color:var(--pine);
font-size:.75em;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
/* a street grid reads as a map at a glance; a gradient never does */
.a-map::before{content:"";position:absolute;inset:0;
background-image:linear-gradient(var(--paper) 1px,transparent 1px),linear-gradient(90deg,var(--paper) 1px,transparent 1px);
background-size:2.6em 2.6em;opacity:.85}
.a-map span{position:relative;background:var(--pine);color:#F4F1E8;padding:.6em 1em}
.a-get{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4em}
.a-gbox{display:grid;gap:.3em;border-top:1px solid var(--a-rule);padding-top:.8em}
.a-gbox b{font-size:.85em}
.a-gbox span{font-size:.78em;color:var(--mute);line-height:1.6}
.a-form{display:grid;gap:.55em;max-width:32em}
.a-form input,.a-form textarea{font:inherit;font-size:.84em;padding:.75em .85em;
border:1px solid var(--a-rule);background:var(--card);color:inherit;width:100%}
.a-form input:focus,.a-form textarea:focus{outline:2px solid var(--pine);outline-offset:-2px}
.a-form textarea{min-height:5.5em;resize:none}
.a-form .a-cta{justify-self:start;margin-top:.4em}
.a-form .bk-done{background:var(--sand);border-left:2px solid var(--clay)}
/* site footer */
.a-footer{background:var(--pine);color:rgba(244,241,232,.72);display:grid;
grid-template-columns:1.4fr 1fr 1fr;gap:2em;padding:2.6em var(--pad) 2em}
.a-fcol{display:grid;gap:.4em;align-content:start;font-size:.8em}
.a-fcol b{font-size:.66em;letter-spacing:.18em;text-transform:uppercase;color:rgba(244,241,232,.45);margin-bottom:.35em}
.a-fcol .a-logo{font-size:1.4em;letter-spacing:.16em;color:#F4F1E8;margin-bottom:.35em}
.a-fcol p{margin:0;font-size:.95em;line-height:1.7}
.a-fcol span{color:#F4F1E8}
/* shared photo placeholder — honest about being a photo slot */
.ph{position:relative;background:rgba(0,0,0,.045);outline:1px solid rgba(0,0,0,.07);outline-offset:-1px;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45em;text-align:center}
.ph::before{content:"";width:1.9em;height:1.9em;opacity:.32;flex:none;background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='2.6' y='4.6' width='18.8' height='14.8'/%3E%3Ccircle cx='8.2' cy='9.6' r='1.7'/%3E%3Cpath d='M3.4 17.4l5.2-5.1 3.9 3.4 3.1-2.6 5 4.3'/%3E%3C/svg%3E") center/contain no-repeat}
.ph i{font-style:normal;font-size:.62em;letter-spacing:.1em;text-transform:uppercase;opacity:.45;padding:0 .6em}
/* ── the "before" states: three ways a small business's web presence
actually fails today. Deliberately not responsive — that's the point. ── */
/* The demo sites reflow inside the frame rather than just shrinking — which
also demonstrates the responsiveness the page is arguing for. Container
queries, so they react to the frame's width, not the window's. */
@container (max-width:40rem){
.a-hero{grid-template-columns:1fr;min-height:0}
.a-hero-in{padding:2.2em var(--pad)}
.a-hero-t{font-size:2em}
.a-plate{min-height:8em}
.a-top{flex-wrap:wrap;gap:.7em}
.a-navwrap{gap:1em;width:100%;justify-content:space-between}
.a-contact{grid-template-columns:repeat(2,1fr)}
.a-menu{grid-template-columns:1fr;gap:1.6em}
.a-hours{grid-template-columns:1fr;gap:.9em;text-align:left}
.a-nav{gap:1em;flex-wrap:wrap;justify-content:center}
.a-today,.a-revs,.a-get,.a-team,.a-facts{grid-template-columns:1fr}
.a-ev{grid-template-columns:1fr}
.a-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:5.5em}
.a-tile:nth-child(4){grid-column:span 2}
.a-bwrap{grid-template-columns:1fr}
.a-aside{padding:0 1.8em 2em}
.a-story{grid-template-columns:1fr}
.a-shot{min-height:9em}
.a-footer{grid-template-columns:1fr;gap:1.2em}
.a-lrow{grid-template-columns:1fr auto;row-gap:.2em}
.a-lrow b{grid-column:1/-1}
}
@container (max-width:26rem){
.a-item{grid-template-columns:1fr auto}
}
/* ── responsive pass ───────────────────────────────────────── */
@media (max-width:60rem){
.masthead{gap:.75rem}
.nav{gap:1.05rem;font-size:.6875rem}
}
/* ── the splash on a narrow screen ──────────────────────────────
The leak the stage is sized for is a WIDTH problem, not a height one. A
phone is 667–932px tall, so the @media (max-height:44rem) rescue above
never fires on one; what a phone is instead is 360–430px wide, and at that
width .choices used to stack the five doors into ~330px of column that the
min-height calc knows nothing about. Measured, that was worse than having
no leak at all: at 375×667 the composition ran 149px past the fold and the
primary CTA was itself sliced by the bottom edge, which reads as a broken
page rather than as an invitation.
So the composition is tightened rather than the leak given up on. The five
doors become a 2×2 grid with the one being asked for across the foot of
it — which is a better shape for a thumb than a five-high column anyway —
and the vertical rhythm comes down to phone proportions. That is about
300px back, enough for the whole splash AND the sliced heading below it on
the shortest phone in the table. Nothing is hidden and nothing is moved
off the screen. */
@media (max-width:34rem){
.brand span{display:none} /* the mark carries the identity */
.nav{gap:.85rem;font-size:.625rem;letter-spacing:.06em}
.stage-in{padding:clamp(1.25rem,3vh,2.25rem) 0}
.kicker{margin-bottom:1.1rem}
.lede{margin-top:1.15rem;line-height:1.55}
.choices{
display:grid;grid-template-columns:1fr 1fr;gap:.5rem;
width:100%;max-width:22rem;margin:1.6rem auto 0;
}
.choices .pill{width:auto;padding:.7rem .55rem;font-size:.9375rem;line-height:1.35}
/* the fifth door is the one the page is asking for, so it gets the width
of both columns and reads as the answer to the four above it */
.choices .pill:last-child{grid-column:1 / -1}
.stage-in .note{margin-top:1rem}
.stage-scroll{margin-bottom:clamp(.75rem,2vh,1.25rem);padding:.4rem .1rem}
/* comfortable tap targets */
.opt,.tab{padding:.7rem 1rem}
.faq summary{padding-top:1.15rem;padding-bottom:1.15rem}
.step{grid-template-columns:2.4rem minmax(0,1fr);gap:.9rem}
.est-in,.est-out{padding:1.35rem}
.frame-foot{gap:.5rem}
.hint{display:none}
}
/* A small phone — 320×568, 360×600 — is the one case where the composition
above still would not fit with a leak left over, and Russian, which wraps
the most, was the language it failed in first. Same treatment, one notch
further: the rhythm closes up and the lede drops to 14px. Measured, that
is about 90px back, which is the difference between a sliced heading below
the fold and a scroll link cut in half by it. Only narrow AND short, so no
laptop and no ordinary phone is touched by it. */
@media (max-width:34rem) and (max-height:40rem){
.stage-in{padding:.75rem 0}
.kicker{margin-bottom:.75rem;font-size:.6875rem}
.lede{font-size:.875rem;line-height:1.5;margin-top:.85rem}
.choices{margin-top:1.1rem;gap:.4rem}
.choices .pill{padding:.6rem .5rem}
.stage-in .note{margin-top:.7rem}
.stage-scroll{margin-bottom:.6rem}
}
@media (max-width:52rem){
.sheet{border-left:0;border-right:0}
}
/* ── scroll choreography ─────────────────────────────────────
The hidden starting state is scoped to html.js-reveal — a class set by an
inline script in the layout's
, before first paint, and taken back
off if main.js fails to load.
Without a script running there is no class, .item keeps its natural
opacity, and the page degrades to plain content.
That is not theoretical. The only thing that ever restored this opacity
was the IntersectionObserver in public/js/main.js, so with JavaScript off
/services and /contact rendered as a header, a rule and nothing else —
no h1, no copy, and no contact form, which is itself