/* ==========================================================================
   NUBI — the style layer
   ==========================================================================

   Warm off-white paper, near-black ink, one grey between them. No accent
   colour anywhere, which is the constraint the whole thing is built on: with
   nothing to point at, emphasis has to come from size, weight and space.

   ---------------------------------------------------------------------------
   THE PALETTE IS IN THE DEMO, NOT IN HERE
   ---------------------------------------------------------------------------

   Colours live in unodevs_demo_settings( 'nubi' ) and arrive as custom
   properties. Repeating them here would give a site two sources for the same
   colour, and the one in the stylesheet would quietly win over a colour the
   person changed in Studio. So this file uses --u-bg, --u-text, --u-muted and
   --u-border, and states no hex of its own except where a value is genuinely
   a shape rather than a colour.

   ---------------------------------------------------------------------------
   WHAT ACTUALLY MAKES IT LOOK LIKE THIS
   ---------------------------------------------------------------------------

   Three decisions, and they are the only ones that matter:

     Two type sizes, far apart.  Display type set enormous at the LIGHTEST
     weight, tracked in hard so the counters close and the line reads as a
     shape before it reads as a sentence. Everything else set small, in a
     monospace, at label size. The middle of the scale is deliberately empty —
     that gap is the entire hierarchy.

     Flat, with real corners.  24px radii and a hairline. No shadow anywhere:
     on paper this pale, a shadow is the only thing on the page implying a
     light source, and the eye reads it as a rendering fault rather than as
     depth.

     Restraint as the loudest element.  One ink, one grey, a lot of paper.

   Scoped to body.u-style-nubi throughout, so nothing here can reach a site
   running any other demo.
   ========================================================================== */

body.u-style-nubi {
	/*
	 * Tighter than the theme's default. At display sizes the default tracking
	 * leaves the letters swimming; pulling them together is what turns a
	 * headline into a mark.
	 */
	--nubi-display-tracking: -0.045em;
	--nubi-label-tracking: 0.14em;

	/* One radius, used everywhere, so nothing looks like an exception. */
	--nubi-radius: 24px;

	/*
	 * ONE RHYTHM UNIT, AND EVERYTHING IS A MULTIPLE OF IT.
	 *
	 * Every gap in this demo used to be its own clamp(), picked by eye. Twelve
	 * separate judgements never line up: the page ended up with 158px between
	 * bands and 85px under a heading, which are not related to each other by
	 * anything, and the result reads as a set of large boxes rather than as a
	 * page with a rhythm.
	 *
	 * The steps are 1, 2, 3, 5, 8 — each one roughly the sum of the two before
	 * it. The ratio between neighbours stays near 1.6 all the way up, so a jump
	 * from one step to the next is always the same SIZE of jump to the eye,
	 * whether it is 26px or 104px.
	 *
	 * The unit itself scales with the viewport, so the whole ladder breathes
	 * together instead of thirty clamps each breathing on their own schedule.
	 */
	/*
	 * The floor is what a phone gets, and it is the number that matters most.
	 *
	 * 0.9vw is 3px at 375px wide, so below about 1100px the floor is the only
	 * thing setting the unit — every band on a phone is eight of it. Swept live
	 * at 375px: .72rem gave 98px of padding per band, .6 gave 82, .5 gave 68,
	 * .42 gave 57. 98px above and below every band on a 812px screen is a band
	 * of nothing taller than a thumb; .42 starts to run the bands together.
	 */
	--nubi-unit: clamp(0.5rem, 0.9vw, 1rem);
	--nubi-s1: var(--nubi-unit);
	--nubi-s2: calc(var(--nubi-unit) * 2);
	--nubi-s3: calc(var(--nubi-unit) * 3);
	--nubi-s5: calc(var(--nubi-unit) * 5);
	--nubi-s8: calc(var(--nubi-unit) * 8);
}


/* --------------------------------------------------------------------------
   1. Display type
   --------------------------------------------------------------------------

   clamp() rather than a breakpoint. The headline is the page's only large
   element, so it has to keep filling the measure at every width — a stepped
   size leaves it stranded at exactly the widths between steps.

   font-weight 400 on purpose. The instinct at this size is to go heavier, and
   heavier is what makes it look like a poster template. Light and enormous is
   the whole effect.
   -------------------------------------------------------------------------- */

/*
 * THE MEASURE HAS TO MOVE WITH THE TYPE.
 *
 * main.css caps .u-hero-editorial .u-hero-inner at 22ch, which is a sensible
 * measure for the 7rem headline that layout was designed around. `ch` there
 * resolves against the INNER DIV's font size, not the title's, so the cap is
 * a fixed ~235px whatever the headline does.
 *
 * 35.0.0 raised the title to 11rem and left that cap alone. The result on a
 * 1024px screen was 128px type rendering into a 236px column: every word on
 * its own line, each one wider than the box, clipped down the right-hand
 * edge. It looked like a broken font or a broken grid, and it was neither —
 * it was a container tuned for a size that no longer existed.
 *
 * So the cap is released and the measure moves onto the title, in ch against
 * the title's OWN size, which is the unit that actually tracks it.
 */
body.u-style-nubi .u-hero-editorial .u-hero-inner {
	max-width: none;
}

/*
 * 7.4vw, not 12.5vw.
 *
 * At 12.5vw the headline measured 180px on a 1440 screen and stood 367px tall
 * — a third of the window before a single word of anything else. That is not
 * confidence, it is a headline with nowhere to sit. At 7.4vw it is still far
 * and away the largest thing on the page and there is a page around it.
 */
body.u-style-nubi .u-hero-title {
	font-size: clamp(2.75rem, 7.4vw, 6.5rem);
	font-weight: 400;
	line-height: 0.92;
	letter-spacing: var(--nubi-display-tracking);
	text-wrap: balance;

	/* ~14 characters of ITS OWN size: a long line at display scale, and it
	   shrinks with the clamp instead of staying a fixed pixel width. */
	max-width: 14ch;
}

/* The lead and the meta row keep a reading measure of their own — releasing
   the inner would otherwise run body copy the full width of a wide container. */
body.u-style-nubi .u-hero-editorial .u-lead,
body.u-style-nubi .u-hero-editorial .u-hero-meta {
	max-width: 46rem;
}

body.u-style-nubi .u-section-title {
	/* 72px section headings competed with a 180px hero and lost to it; at 43
	   they are clearly second in the hierarchy, which is what they are. */
	font-size: clamp(1.6rem, 3vw, 2.75rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
}

/*
 * The lead sits close to the headline rather than under it at a polite
 * distance — the space in this design is between the BANDS, not inside them.
 */
body.u-style-nubi .u-lead {
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--u-muted);

	/*
	 * Two steps clear of the headline.
	 *
	 * The note above says the space in this design is between the bands rather
	 * than inside them, and that was taken far enough that the lead sat almost
	 * against the headline while the bands were 158px apart. Space has to exist
	 * at both scales or the inside of a band reads as one solid lump.
	 */
	margin-top: var(--nubi-s2);
}


/* --------------------------------------------------------------------------
   2. The small end: monospace labels
   --------------------------------------------------------------------------

   Every small piece of text is a label, and labels are set in the mono stack
   at one size. Uppercase with wide tracking, because at this size a lowercase
   mono reads as code rather than as a caption.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-eyebrow,
body.u-style-nubi .u-hero-meta dt,
body.u-style-nubi .u-card-more,
body.u-style-nubi .u-cs-index-mark,
body.u-style-nubi .u-cs-index-meta {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: var(--nubi-label-tracking);
	text-transform: uppercase;
	color: var(--u-muted);
}

/* The meta row under an editorial hero: label above value, ruled off. */
body.u-style-nubi .u-hero-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--nubi-s2) var(--nubi-s3);
	margin-top: var(--nubi-s5);
	padding-top: 1.25rem;
	border-top: 1px solid var(--u-border);
}

body.u-style-nubi .u-hero-meta dd {
	margin: 0.35rem 0 0;
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--u-text);
}


/* --------------------------------------------------------------------------
   3. Surfaces
   --------------------------------------------------------------------------

   Flat, generous corners, hairline separation. The radius is applied to the
   media as well as to the card, or the picture's square corner sits inside a
   rounded one and the whole thing looks unfinished.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-card,
body.u-style-nubi .u-cs-media,
body.u-style-nubi .u-cs-grid-item {
	border-radius: var(--nubi-radius);
	box-shadow: none;
	background: var(--u-bg);
}

body.u-style-nubi .u-card-media,
body.u-style-nubi .u-cs-media img {
	border-radius: var(--nubi-radius);
	overflow: hidden;
}

body.u-style-nubi .u-card-title {
	font-weight: 400;
	letter-spacing: -0.015em;
}

/*
 * A hairline, not a box.
 *
 * Bordering every card on a ground this pale draws a grid of grey rectangles
 * and the pictures stop being the subject. One rule under each item is enough
 * to say where it ends.
 */
body.u-style-nubi .u-card {
	border: 0;
	border-bottom: 1px solid var(--u-border);
	padding-bottom: 1.25rem;
}


/* --------------------------------------------------------------------------
   4. The header: a floating pill
   --------------------------------------------------------------------------

   The nav is the only element on the page with a fully round edge, which is
   what makes it read as an object sitting ON the paper rather than as part of
   it. It uses the theme's own --u-radius-pill rather than a number of its own:
   a large radius is clamped to half the box, so one token gives a true pill at
   every height and there is no second definition to drift.
   -------------------------------------------------------------------------- */

/*
 * A QUIETER PILL.
 *
 * It measured 80px tall, which on a 900px window is nearly a tenth of the
 * screen given to a logo and four links. A studio header should be the last
 * thing you look at — it is wayfinding, not content. Every number below is
 * one notch down, and the pill still reads as an object on the paper because
 * that comes from the radius and the blur, not from its size.
 */
body.u-style-nubi .u-header-classic .u-header-nav {
	gap: 0.1rem;
	padding: 0.25rem 0.3rem;
	border: 1px solid var(--u-border);
	border-radius: var(--u-radius-pill);
	background: color-mix(in srgb, var(--u-bg) 82%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body.u-style-nubi .u-header-classic .u-header-nav a {
	padding: 0.38rem 0.78rem;
	border-radius: var(--u-radius-pill);
	font-size: 0.82rem;

	/*
	 * The single biggest thing in the header, and it was invisible.
	 *
	 * The links inherit the body's line-height — 1.6 for reading — so a 14px
	 * label built a 22px line box and the pill came out 46px tall, taller than
	 * anything else in the bar and therefore the thing setting its height.
	 * A nav label is one word; it needs a line box, not a reading measure.
	 * Measured: pill 46px to 40px, header 73px to 67px, from this line alone.
	 */
	line-height: 1.15;
	transition: background-color 200ms var(--u-ease-out);
}

body.u-style-nubi .u-header-classic .u-header-nav a:hover,
body.u-style-nubi .u-header-classic .u-header-nav a:focus-visible {
	background: var(--u-surface, var(--u-border));
}


/*
 * The bar itself, not just the pill inside it.
 *
 * Shrinking the nav alone leaves the same air above and below it, so the
 * header barely moves. This is the other half of the 80px.
 */
body.u-style-nubi .u-header .u-header-bar {
	/*
	 * Just over half a unit, which is the one place the ladder is not used
	 * whole — a header is a band of a different kind and a full step here put
	 * 26px of air around a 40px pill.
	 *
	 * Swept live at 1, .75, .55 and .4 units: 67, 60, 55 and 51px of header.
	 * .4 starts to look cramped against the pill's own radius; .55 is the last
	 * step that still reads as deliberate space.
	 */
	padding-block: calc(var(--nubi-unit) * 0.55);
}

/* The CTA and the icon buttons follow the nav down, or they become the tallest
   thing in the bar the moment the nav stops being it. */
body.u-style-nubi .u-header .u-btn {
	line-height: 1.15;
	padding-block: 0.42rem;
	font-size: 0.82rem;
}

/* The search and menu buttons. u-icon-btn and u-burger are what the templates
   actually emit — u-search-trigger and u-menu-toggle are the FUNCTION names,
   and styling those would have been a rule matching nothing. Caught by the
   check that every class this file styles is one the theme renders. */
body.u-style-nubi .u-header .u-icon-btn,
body.u-style-nubi .u-header .u-burger {
	width: 32px;
	height: 32px;
}

body.u-style-nubi .u-header .u-logo-text {
	font-size: 0.95rem;
	letter-spacing: -0.015em;

	/* Tight. A lockup is a mark, not a paragraph: at reading leading a 16px
	   name sits in a 26px box, and stacked with the tagline that is 42px of
	   header for twenty characters of type. */
	line-height: 1.2;
}

/* Whatever the logo is — a word or an uploaded mark — it follows the bar down,
   or a 40px image sits in a 55px header and sets the height again. */
body.u-style-nubi .u-header .u-logo-text img { max-height: 26px; }


/* --------------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------------

   Pills, matching the nav. Solid ink or nothing at all — with no accent there
   is no third state, and inventing one with a grey fill produces a button
   that looks disabled.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-btn {
	border-radius: var(--u-radius-pill);
	padding-inline: 1.5em;
	font-weight: 450;
	letter-spacing: -0.005em;
	box-shadow: none;
}

body.u-style-nubi .u-btn-ghost {
	background: transparent;
	border: 1px solid var(--u-border);
	color: var(--u-text);
}

body.u-style-nubi .u-btn-ghost:hover {
	border-color: var(--u-text);
	background: transparent;
}


/* --------------------------------------------------------------------------
   6. Rhythm
   --------------------------------------------------------------------------

   The space between bands is where this design puts its money, so the section
   padding is larger than the theme's default and the heading block sits well
   clear of what follows it.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   THE SCATTER HERO'S TOP PADDING
   --------------------------------------------------------------------------

   .u-hero in main.css opens with `padding-block: clamp(90px, 13vw, 180px)`.
   That number was set for a hero that starts the page under an OPAQUE header,
   where the padding is the only thing holding the headline off the top edge.

   Nubi's header is transparent and sits over the hero, so the header's own
   height is already part of that gap rather than added above it. 180px of
   padding at 1440 with a ~44px bar floating in it leaves about 136px of empty
   paper before the first word — and the bands below it are 104px apart, so
   the emptiest part of the page is the part with the headline in it.

   Re-expressed on the ladder: five units of air, plus a fixed allowance for
   the bar that is standing in it. 109px at 1440, of which roughly 65px — five
   units — is actually visible above the type. The bottom takes the plain band
   value, so the hero hands off to the next section at the same rhythm as every
   other gap on the page.

   Scoped to the scatter layout inside the Nubi demo. The generic clamp is
   correct everywhere it is not covered by a floating bar, and no other demo
   or layout is touched.

   The tile field is `inset: 0` on this section, so it shrinks with the box —
   the scatter stays proportional instead of needing its own adjustment.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-hero-scatter {
	padding-block: calc(var(--nubi-s5) + 2.75rem) var(--nubi-s8);
}

/* --------------------------------------------------------------------------
   THE PROMPT HERO, CENTRED
   --------------------------------------------------------------------------

   Centring is a move away from this demo, not toward it. Nubi is left-ranged
   editorial: huge light type against paper, monospaced micro-labels, hairline
   rules. Centre the stack and the same page can read as a stock SaaS hero in
   Nubi's colours.

   Asked for centred, so: centred, with the two things that decide whether it
   still looks like this demo rather than a template.

   ONE — THE HEADLINE STAYS LIGHT AND ENORMOUS.

   The instinct with a centred hero is to go bold and drop a size. Bold and
   medium in the middle of the page is exactly the shape every landing-page
   template has. Weight 400 at 7.4vw is the whole character of this demo and
   it is what survives the move.

   TWO — THE FIELD IS A RULE, NOT A PILL.

   main.css gives it a bordered, filled, rounded row, which is right almost
   everywhere and wrong here: a floating capsule in the middle of a sheet of
   paper is the one element that would announce itself as bolted on. It is a
   single hairline under the text instead, with the button as words at the end
   of it — the same line the bands elsewhere on the page are drawn with.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-hero-prompt {
	/* Same reasoning as the scatter hero above: the generic .u-hero clamp is
	   set for an opaque header sitting ABOVE the hero, and this demo's header
	   floats inside that gap. */
	padding-block: calc(var(--nubi-s5) + 2.75rem) var(--nubi-s8);
	text-align: center;
}

/*
 * Centring text does not centre a block.
 *
 * The headline, the lead and the field all carry their own max-width, and a
 * max-width without auto margins sits hard left inside a centred parent —
 * text centred within a column that is itself off to one side. The same pair
 * of rules that had to go into the closing band.
 */
body.u-style-nubi .u-hero-prompt .u-hero-title,
body.u-style-nubi .u-hero-prompt .u-lead,
body.u-style-nubi .u-hero-prompt .u-hero-find {
	margin-inline: auto;
}

body.u-style-nubi .u-hero-prompt .u-hero-title {
	/* Wider than the 14ch the left-ranged heroes use. A centred line breaking
	   every three words makes a diamond, and a diamond of type reads as a
	   poster rather than a headline. */
	max-width: 18ch;
	font-weight: 400;
}

body.u-style-nubi .u-hero-prompt .u-lead {
	max-width: 46rem;
	margin-top: var(--nubi-s2);
}

/* ---- the field ----------------------------------------------------------

   TWO CONTROLS, NOT ONE RULE.

   This was a single hairline with the button as words at the end of it, on
   the argument that a capsule floating on a sheet of paper announces itself
   as bolted on. Asked for the other treatment instead: a bordered field with
   a solid button beside it, which is the shape people have been trained to
   read as "type here, then press that".

   It keeps the demo's character in the parts that carry it — the headline is
   still light and enormous, the type is still the demo's, the note under it
   is still monospaced. What changes is the one element that has a job to do,
   and legibility beats consistency on the element somebody has to use.

   The corner radius is small and the fill is flat. A pill with a shadow
   would be the bolted-on thing the hairline was avoiding.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-hero-prompt .u-hero-find {
	max-width: 42rem;
	margin-top: var(--nubi-s5);
}

body.u-style-nubi .u-hero-prompt .u-hero-find-label {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .16em;
}

/*
 * The row stops being a control and goes back to being a row.
 *
 * main.css makes it the bordered pill that HOLDS the input and the button.
 * Here the two carry their own edges, so the wrapper keeps only the job of
 * spacing them.
 */
body.u-style-nubi .u-hero-prompt .u-hero-find-row {
	max-width: none;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	gap: 0.6rem;
	justify-content: center;
}

/*
 * AND ITS FOCUS RING GOES WITH IT.
 *
 * main.css draws the ring here, on :focus-within, because there the pill is
 * the visible edge and the input inside it has none. That is no longer true:
 * a ring around this row would now be a rectangle drawn around BOTH controls
 * and the gap between them.
 *
 * main.css also sets `outline: none` on the input, on the strength of that
 * ring existing. So moving it is not optional tidying — without the rule
 * below, this demo would have no focus indicator on the field at all, which
 * is the exact failure the allowlist entry in verify.py is there to prevent.
 */
body.u-style-nubi .u-hero-prompt .u-hero-find-row:focus-within {
	border: 0;
	box-shadow: none;
}

body.u-style-nubi .u-hero-prompt .u-hero-find-input {
	flex: 1 1 18rem;
	padding: 0.9rem 1.1rem;

	/*
	 * Through the variables, not around them.
	 *
	 * This layer decides what the field looks like by default, and it wins
	 * against main.css on specificity — so writing the values flat here
	 * would mean the Prompt hero colour settings did nothing at all on the
	 * one demo the layout was designed for. The fallback is what this demo
	 * wanted; the variable is only present when somebody set it.
	 */
	border: 1px solid var(--u-pf-border, var(--u-border));
	border-radius: var(--u-pf-radius, 0.6rem);
	background: var(--u-pf-bg, var(--u-surface));
	color: var(--u-pf-text, var(--u-text));
	font-size: 1rem;

	/* Left, not centre. A centred placeholder reads as a label until you
	   click it; a field you type an address into should look like one. */
	text-align: left;
}

/* The ring, on the element that now owns the edge. */
body.u-style-nubi .u-hero-prompt .u-hero-find-input:focus {
	outline: 2px solid var(--u-text);
	outline-offset: 2px;
	border-color: var(--u-text);
}

body.u-style-nubi .u-hero-prompt .u-hero-find-go {
	padding: 0.9rem 1.35rem;
	border: 1px solid var(--u-pf-btn-bg, var(--u-text));
	border-radius: var(--u-pf-radius, 0.6rem);
	background: var(--u-pf-btn-bg, var(--u-text));
	color: var(--u-pf-btn-text, var(--u-bg));
	font-size: 1rem;
	font-weight: 500;
}

/* The hover inverts whatever the two colours are, rather than naming them
   again — a hover written against the default would be invisible on a
   field whose button has been recoloured. */
body.u-style-nubi .u-hero-prompt .u-hero-find-go:hover {
	background: transparent;
	color: var(--u-pf-btn-bg, var(--u-text));
}

body.u-style-nubi .u-hero-prompt .u-hero-find-go:focus-visible {
	outline: 2px solid var(--u-text);
	outline-offset: 2px;
}

body.u-style-nubi .u-hero-prompt .u-hero-find-note,
body.u-style-nubi .u-hero-prompt .u-hero-find-eg {
	justify-content: center;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .66rem;
	letter-spacing: .08em;
}

body.u-style-nubi .u-hero-prompt .u-hero-find-note {
	margin-top: var(--nubi-s2);
}

/*
 * Under 560px the button goes under the field.
 *
 * It wraps on its own at that width — but a submit sitting left under a
 * centred input looks like a mistake rather than a wrap, so it is centred
 * with everything else.
 */
@media (max-width: 560px) {
	body.u-style-nubi .u-hero-prompt .u-hero-find-row { justify-content: center; }
	body.u-style-nubi .u-hero-prompt .u-hero-find-input { flex-basis: 100%; }
}

/* --------------------------------------------------------------------------
   THE PAGES NOBODY DESIGNS: 404, SEARCH, ARCHIVES
   --------------------------------------------------------------------------

   This demo had no rule for any of them. They rendered in the generic
   treatment — a centred 404 and a boxed search field — on a site where
   every other page is left-ranged paper with huge light type, so the two
   pages a visitor only ever reaches by accident were the two that did not
   look like the site.

   They are also the pages that matter most when something has gone wrong,
   which is the argument for doing them properly rather than the argument
   for skipping them.
   -------------------------------------------------------------------------- */

/*
 * :not(.u-page-head-lg) on purpose.
 *
 * The designed pages — Unolab, Referenzen, Branding — use .u-page-head with
 * .u-page-head-lg for their heroes, and each has its own spacing already.
 * Styling the base class alone would reach into all of them and undo it.
 * This is only for the plain heads: search, archive, single.
 */
body.u-style-nubi .u-page-head:not(.u-page-head-lg) {
	padding-block: calc(var(--nubi-s5) + 2.75rem) var(--nubi-s3);
}

body.u-style-nubi .u-page-title {
	font-size: clamp(2.25rem, 5.5vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--nubi-display-tracking);
}

body.u-style-nubi .u-breadcrumbs {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* ---- 404 ---- */

/*
 * Left, not centred.
 *
 * main.css centres this band, which is right for a demo whose headings are
 * centred. Every heading in this one is ranged left, and a centred 404 in a
 * left-ranged site reads as a page from somewhere else — which is a strange
 * thing to show somebody who is already lost.
 */
body.u-style-nubi .u-404 {
	padding-block: calc(var(--nubi-s8) + 2.75rem) var(--nubi-s8);
	text-align: left;
}

body.u-style-nubi .u-404 .u-eyebrow {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: .16em;
	color: var(--u-muted);
}

body.u-style-nubi .u-404 .u-display {
	font-size: clamp(2.75rem, 7.4vw, 6.5rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: var(--nubi-display-tracking);
	max-width: 16ch;
}

body.u-style-nubi .u-404 .u-lead { max-width: 46rem; }

/* The actions follow the text leftward. justify-content is what centres
   them in main.css, and text-align above does not reach a flex row. */
body.u-style-nubi .u-404-actions {
	justify-content: flex-start;
	align-items: center;
	margin-top: var(--nubi-s5);
	gap: var(--nubi-s3);
}

/* ---- the search form ---- */

/*
 * A rule, not a box.
 *
 * The same decision as the hero's field before it was changed on request:
 * on a sheet of paper a bordered, filled input is the one element that
 * announces itself as a control bolted on from somewhere else. Here there
 * is no instruction to the contrary, so it stays a line.
 */
body.u-style-nubi .u-searchform {
	align-items: center;
	gap: var(--nubi-s2);
	max-width: 34rem;
	border-bottom: 1px solid var(--u-text);
}

body.u-style-nubi .u-searchform input {
	padding: 0.65rem 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 1.05rem;
}

/*
 * The ring moves to the FORM, because the form is now the visible edge.
 *
 * main.css draws a focus ring on the input, which had a border of its own
 * there. With the border moved to the parent, a ring on the input would be
 * a rectangle floating inside a single line. The rule thickens instead —
 * the same signal in this demo's vocabulary, and still a visible change.
 */
body.u-style-nubi .u-searchform input:focus {
	outline: none;
	box-shadow: none;
}

body.u-style-nubi .u-searchform:focus-within {
	border-bottom-width: 2px;
}

body.u-style-nubi .u-searchform .u-btn {
	padding: 0;
	border: 0;
	border-bottom: 1px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--u-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
}

body.u-style-nubi .u-searchform .u-btn:hover,
body.u-style-nubi .u-searchform .u-btn:focus-visible {
	border-bottom-color: var(--u-text);
}

body.u-style-nubi .u-section {
	/* 8 units — 104px at 1440, down from 158. Two bands used to cost 316px of
	   nothing between them, which is a scroll, not a pause. */
	padding-block: var(--nubi-s8);
}

body.u-style-nubi .u-section-head {
	margin-bottom: var(--nubi-s5);
}

/* A single rule between bands rather than alternating fills: two paper tones
   this close together read as a printing error rather than as a change. */
body.u-style-nubi .u-section + .u-section {
	border-top: 1px solid var(--u-border);
}


/* --------------------------------------------------------------------------
   7. Narrow
   --------------------------------------------------------------------------

   The display size is already fluid, so the only things that need saying here
   are the ones that are fluid in the wrong direction: tracking, which becomes
   too tight to read once the type is small, and the pill nav, which has no
   room to be a pill.
   -------------------------------------------------------------------------- */

@media (max-width: 780px) {
	body.u-style-nubi {
		--nubi-display-tracking: -0.03em;
		--nubi-radius: 18px;
	}

	body.u-style-nubi .u-header-classic .u-header-nav {
		padding: 0.25rem 0.3rem;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	body.u-style-nubi .u-section + .u-section { border-top: 0; }
}


/* --------------------------------------------------------------------------
   8. Reduced motion
   --------------------------------------------------------------------------

   There is almost nothing to turn off, which is the point — this style carries
   its character in the type rather than in movement. The hover transition goes,
   because it is the only thing here that moves on its own.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.u-style-nubi .u-header-classic .u-header-nav a { transition: none; }
}


/* ==========================================================================
   9. THE SECTIONS
   ==========================================================================

   35.0.0 shipped this demo as a palette and a type scale, which is not a
   demo — every section still arrived in the theme's default dress, so the
   page was Studio wearing different colours. This is the part that was
   missing.

   One idea runs through all of it: RULES, NOT BOXES.

   A card is a rectangle with a background, a border and usually a shadow,
   and it works on a ground with some tone to it. On paper this pale a grid
   of cards becomes a grid of faintly grey rectangles, and the eye reads the
   rectangles instead of the content. So every section here is a ruled list
   or a ruled grid: one hairline between items, no fill, no edge, no lift.

   The second idea is that the LABEL carries the structure. Each item leads
   with a mono label at 0.7rem and follows with the content at reading size.
   That pairing is what makes a list of very different things — a service, a
   step, a price, a question — look like one system.
   ========================================================================== */


/* --- section heads --------------------------------------------------------

   Ruled off, with the eyebrow above the rule and the title below it, so the
   heading block is a masthead rather than a paragraph that happens to be
   large.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-section-head {
	display: grid;
	gap: var(--nubi-s2);
	padding-top: 1.25rem;
	border-top: 1px solid var(--u-border);
}

body.u-style-nubi .u-section-head .u-section-text {
	max-width: 52ch;
	color: var(--u-muted);
}


/* --- services: a ruled list, not a bento grid -----------------------------

   The bento is a deliberate composition of unequal tiles, and it is the
   right answer on the demos it was built for. Here it fights the page: the
   tiles need fills to read as tiles, and a fill on this paper is a smudge.

   Flattened to one item per row — label left, description right — which is
   also what lets a six-item list stay legible without any of them shouting.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-bento {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

body.u-style-nubi .u-bento > * {
	/* The bento's tile sizes are set per item; none of them survive a
	   single-column list, and leaving them makes every third row twice as
	   tall for no reason. */
	grid-column: auto !important;
	grid-row: auto !important;
}

body.u-style-nubi .u-tile-link,
body.u-style-nubi .u-bento > * > .u-tile-copy {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.5rem;
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--u-border);
	background: none;
	border-radius: 0;
	box-shadow: none;
}

@media (min-width: 900px) {
	body.u-style-nubi .u-tile-link,
	body.u-style-nubi .u-bento > * > .u-tile-copy {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
		gap: 3rem;
		align-items: start;
	}
}

/* The icon is decoration on a design that has none. */
body.u-style-nubi .u-tile-icon,
body.u-style-nubi .u-tile-visual { display: none; }


/* --- stats: the figure is the whole point ---------------------------------

   Set at display size and light, so the number reads as type rather than as
   a badge, with its label in mono underneath.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-stats-shell,
body.u-style-nubi .u-stats-row {
	background: none;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

body.u-style-nubi .u-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 2.5rem 3rem;
}

body.u-style-nubi .u-stat {
	padding-top: 1rem;
	border-top: 1px solid var(--u-border);
	background: none;
	border-radius: 0;
}

body.u-style-nubi .u-stat strong {
	display: block;
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.035em;
}


/* --- process: a numbered list, ruled -------------------------------------

   The stack cards carry u-glass, u-conic and u-spotlight. All three are off
   in this demo's settings, but the classes still arrive, so they are
   flattened here by name rather than left to chance — a glass rule that
   comes back in a later version would otherwise reappear only on this demo
   and only on this section.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-stack-card {
	background: none;
	border: 0;
	border-top: 1px solid var(--u-border);
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 1.75rem 0;
}

body.u-style-nubi .u-stack-n {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: var(--nubi-label-tracking);
	color: var(--u-muted);
	background: none;
	border: 0;
	width: auto;
	height: auto;
	border-radius: 0;
}


/* --- the FAQ: a ruled list ------------------------------------------------ */

body.u-style-nubi .u-faq > * {
	background: none;
	border: 0;
	border-bottom: 1px solid var(--u-border);
	border-radius: 0;
	box-shadow: none;
}


/* --------------------------------------------------------------------------
   PRICING
   --------------------------------------------------------------------------

   Cards, not the ruled list the rest of this demo uses.

   Everywhere else Nubi strips the panel away, because a filled box is the
   loudest thing the theme can put on a page and most bands do not need to
   shout. Pricing is the exception and it is worth saying why rather than
   just doing it: three plans side by side are a COMPARISON, and a comparison
   needs each column bounded so the eye can tell where one offer stops and
   the next begins. A ruled list of three plans reads as nine paragraphs.

   The card is paper on paper — a warm tint a shade off the page, no shadow,
   no glass. It is doing the work of a boundary, not of a highlight.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-package {
	position: relative;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border: 1px solid var(--u-border);
	border-radius: 0.9rem;

	/* A tint of the page's own ink rather than a second colour, so it sits
	   on whatever palette the demo is set to instead of only on the default
	   one. */
	background: rgba(var(--u-text-rgb), .025);
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

/* The one being recommended is darker, not brighter. Louder here would mean
   a colour, and a colour would be the only one on the page. */
body.u-style-nubi .u-package.is-featured {
	border-color: rgba(var(--u-text-rgb), .22);
	background: rgba(var(--u-text-rgb), .05);
}

/*
 * The badge sits IN the flow, above the plan name.
 *
 * main.css pins it to the top-right corner, which works on a card whose
 * first line is short. These cards open with a small-caps plan name and the
 * corner badge lands level with it — two competing labels on one line, and
 * on a narrow column they overlap. In the flow it reads as what it is: a
 * note about the plan, before the plan.
 */
body.u-style-nubi .u-package .u-badge {
	position: static;
	display: inline-block;
	margin-bottom: 1rem;
	background: rgba(var(--u-text-rgb), .1);
	color: var(--u-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .62rem;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* The plan name is a label, so it is set like one. The price is the heading
   of this card and takes the size. */
body.u-style-nubi .u-package-name {
	margin: 0 0 .5em;
	font-size: .74rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--u-muted);
}

body.u-style-nubi .u-package-price {
	font-size: clamp(2rem, 3.4vw, 2.8rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0 0 .45em;
}

body.u-style-nubi .u-package-summary {
	color: var(--u-muted);
	font-size: .92rem;
	line-height: 1.6;
}

/*
 * The rule goes on the LIST, not after the summary.
 *
 * A summary is optional — a plan with none would otherwise leave a rule
 * floating under the price with nothing above it. Hung off the tick list,
 * which every plan has, the line is always separating two real things.
 */
body.u-style-nubi .u-package .u-ticks {
	margin-top: var(--nubi-s3);
	padding-top: var(--nubi-s3);
	border-top: 1px solid var(--u-border);
	gap: 14px;
}

body.u-style-nubi .u-package .u-ticks li {
	color: var(--u-text);
	font-size: .94rem;
}

/* The tick takes the ink colour. The palette accent on a paper card is the
   one bright thing in the band, repeated fifteen times. */
body.u-style-nubi .u-package .u-ticks li::before {
	border-left-color: var(--u-text);
	border-bottom-color: var(--u-text);
}

/*
 * Full width, and last.
 *
 * margin-top:auto pushes it to the bottom of the card — the three plans have
 * different numbers of features, and buttons at three different heights read
 * as a broken grid rather than as three different lists.
 */
body.u-style-nubi .u-package .u-btn {
	margin-top: auto;
	justify-content: center;
	width: 100%;
	border-radius: var(--u-radius-pill);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding-block: 1rem;
}

/* The recommended plan's button is filled; the others are outlines. That is
   the only difference in weight between the three, and it is enough. */
body.u-style-nubi .u-package.is-featured .u-btn {
	background: var(--u-text);
	border-color: var(--u-text);
	color: var(--u-bg);
}

body.u-style-nubi .u-package.is-featured .u-btn:hover {
	background: transparent;
	color: var(--u-text);
}


/* --- the closing band: one enormous line ----------------------------------

   The panel is removed rather than restyled. A filled panel is the single
   loudest thing the theme can put on a page, and this design closes by
   saying one short sentence at the largest size it has and stopping.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-closing-panel {
	background: none;
	border: 0;
	border-top: 1px solid var(--u-border);
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: clamp(3rem, 8vw, 6rem) 0 0;
	text-align: left;
}

/*
 * THE AUTO MARGINS HAVE TO GO WITH THE text-align.
 *
 * main.css centres the closing panel and then centres the heading and the
 * paragraph a SECOND time, as blocks: `max-width: 20ch; margin-inline: auto`.
 * Those two declarations are independent of text-align, so switching the
 * panel to `left` above moved the button — an inline-block, positioned by
 * text-align — hard against the left edge while the heading and the lead
 * stayed centred in the middle of the panel.
 *
 * Reported as "the closing call to action is out of order", and it read as a
 * broken layout rather than a CSS one because nothing was misaligned in
 * isolation: three elements, each correctly positioned by a different rule.
 *
 * So the block centring is released here too. One declaration decides the
 * alignment of this panel instead of two disagreeing.
 */
body.u-style-nubi .u-closing-panel > * {
	margin-inline: 0;
}

/*
 * h2, not .u-section-title.
 *
 * unodevs_render_cta() emits a bare <h2> — it has never carried that class,
 * so this rule matched nothing and the closing heading was the only display
 * type in the demo still at main.css's size and weight. Which is why it came
 * out bold and small in a design where every other heading is large and
 * light.
 */
body.u-style-nubi .u-closing-panel h2 {
	font-size: clamp(2.5rem, 8vw, 6.5rem);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: var(--nubi-display-tracking);
	max-width: 18ch;
}

/* The lead keeps a reading measure — releasing the width along with the
   centring would run it the full width of the container. */
body.u-style-nubi .u-closing-panel p {
	max-width: 46rem;
}

/* Clear of the text, at the rhythm the rest of the page uses. */
body.u-style-nubi .u-closing-panel .u-btn {
	margin-top: var(--nubi-s5);
}


/* --- the bottom bar -------------------------------------------------------

   The same object as the header nav, at the other end of the screen: a pill
   floating clear of the paper. Its glass is off in this demo's settings, so
   it takes a plain tinted ground and a hairline instead.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-bottomnav {
	border: 1px solid var(--u-border);
	border-radius: var(--u-radius-pill);
	background: color-mix(in srgb, var(--u-bg) 88%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: none;
}

body.u-style-nubi .u-bnav-tab {
	border-radius: var(--u-radius-pill);
	font-size: 0.8rem;
	font-weight: 400;
	letter-spacing: -0.005em;
}

body.u-style-nubi .u-bnav-tab.is-current {
	background: var(--u-surface);
	color: var(--u-text);
}


/* --- narrow --------------------------------------------------------------- */

@media (max-width: 780px) {
	body.u-style-nubi .u-tile-link,
	body.u-style-nubi .u-bento > * > .u-tile-copy { padding: 1.25rem 0; }

	body.u-style-nubi .u-closing-panel { padding-top: 2.5rem; }

	body.u-style-nubi .u-bottomnav {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}


/* --------------------------------------------------------------------------
   10. The lockup header and the index footer, in this language
   --------------------------------------------------------------------------

   Both layouts are the theme's, not the demo's — they are in the dropdown for
   every demo and carry their own base styling in main.css. All that happens
   here is that their small text joins the monospace label system, so the
   header tagline, the footer column headings and the section eyebrows are one
   size and one face rather than three near-misses.
   -------------------------------------------------------------------------- */

body.u-style-nubi .u-mark-tagline,
body.u-style-nubi .u-findex-label {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.68rem;
	font-weight: 400;
	letter-spacing: var(--nubi-label-tracking);
	text-transform: uppercase;
	color: var(--u-muted);
}

/* The nav pill and the contact pill are the same object at the same weight —
   the contact one is filled, which is the only thing separating them. */
body.u-style-nubi .u-header-mark .u-mark-nav {
	background: color-mix(in srgb, var(--u-bg) 82%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/*
 * THE MARK HEADER'S NAV — the same line-height trap, a second time.
 *
 * The fix for the classic header was written as
 * `.u-header-classic .u-header-nav a`, which does not touch this layout at
 * all. So the mark header kept a 14px label inside a 27px line box, the pill
 * came out 52px, and the header stayed at 66 while the numbers said 55.
 *
 * Measured on unodevs.com/lab at 1440, one line at a time:
 *   line-height alone   header 66 -> 59   (menu item 38 -> 31)
 *   padding as well     header 59 -> 56   (pill 45 -> 39)
 */
body.u-style-nubi .u-header-mark .u-mark-nav a {
	font-size: 0.82rem;
	line-height: 1.15;
	padding-block: 0.34rem;
}

body.u-style-nubi .u-header-mark .u-mark-nav {
	padding: 0.22rem 0.28rem;
}

/*
 * THE LOCKUP — the other half.
 *
 * Two lines of type set at reading leading: a 16px name in a 26px box above an
 * 11px tagline in a 14px box, with a gap between them. Stacked, that is 42px
 * of header from two short lines that together hold about twenty characters.
 *
 * A lockup is a mark, not a paragraph. Tight leading is what makes two lines
 * read as one object.
 *
 *   leading       header 56 -> 54
 *   gap           header 54 -> 53
 */
body.u-style-nubi .u-header-mark .u-mark-tagline {
	font-size: 0.62rem;
	line-height: 1.1;
}

body.u-style-nubi .u-header-mark .u-mark-lockup { gap: 1px; }

/*
 * The wordmark is fainter here than the theme's default.
 *
 * On a ground this pale the default 7% reads as a smudge rather than as
 * type — there is not enough contrast range below the paper for it to look
 * deliberate. Dropped further, so it is unmistakably a watermark.
 */
body.u-style-nubi .u-findex-word span {
	font-weight: 400;
	opacity: .055;
}

body.u-style-nubi .u-footer-index { padding-top: clamp(4rem, 9vw, 7rem); }

@media (prefers-reduced-motion: reduce) {
	body.u-style-nubi .u-header-mark .u-mark-nav {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}