/**
 * Knotful — the shared look.
 *
 * The primitives every product is built from, so Circle, Desk and Gallery are
 * recognisably the same thing rather than three products that happen to use the
 * same colours. Layout stays with each product; this is the vocabulary.
 *
 * Colours come from the palette (see palettes.php) as custom properties, so
 * nothing here names a colour directly. Fallbacks are the house palette, so a
 * page still looks right if a palette has not been applied yet.
 *
 * The house rules, in short: square corners, hairline borders, a serif for
 * anything that speaks and a sans for anything that labels, and the metal used
 * sparingly — a rule, an outline, a marker — rather than as filled colour.
 */

:root {
	--kn-bg:      var( --bg, #1d201a );
	--kn-text:    var( --text, #f0ebe1 );
	--kn-metal:   var( --metal, var( --brass, #c2a06b ) );
	--kn-line:    var( --line, rgba( 240, 235, 225, 0.14 ) );
	--kn-muted:   var( --muted, rgba( 240, 235, 225, 0.55 ) );
	--kn-btn-bg:  var( --btn-bg, #f0ebe1 );
	--kn-btn-fg:  var( --btn-fg, #1d201a );
	--kn-serif:   "Cormorant", Georgia, "Times New Roman", serif;
	--kn-sans:    "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Box model ────────────────────────────────────────────────────────
   Padding and border are counted inside the width, not added on top of it.
   Without this a full-width field or button measures 100% plus its own
   padding, which is wider than the space it was given, and it hangs off the
   side of the page. Scoped to these components so the stylesheet never
   changes how a product's own markup behaves. */
.kn-panel,
.kn-row,
.kn-field,
.kn-btn,
.kn-tag,
.kn-figure,
.kn-figures,
.kn-table,
.kn-table th,
.kn-table td,
.kn-mode {
	box-sizing: border-box;
}

/* ── Geometry ─────────────────────────────────────────────────────────
   Nothing is rounded. The one exception is a shape that is meant to be a
   circle, which asks for it explicitly. */
.kn-square,
.kn-panel,
.kn-field,
.kn-btn,
.kn-tag {
	border-radius: 0;
}

/* ── Type ─────────────────────────────────────────────────────────── */
.kn-display,
.kn-title {
	font-family: var( --kn-serif );
	font-weight: 400;
	letter-spacing: 0.01em;
	line-height: 1.12;
	margin: 0;
}

.kn-display { font-size: clamp( 30px, 5vw, 48px ); }
.kn-title   { font-size: clamp( 21px, 2.4vw, 30px ); }

/* The small uppercase label. The wide spacing is most of the character —
   it is what stops a label looking like ordinary small text. */
.kn-eyebrow {
	font-family: var( --kn-sans );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var( --kn-metal );
	margin: 0;
}

.kn-muted { color: var( --kn-muted ); }

/* ── The rule ─────────────────────────────────────────────────────────
   A short metal hairline under a heading. Used instead of a heavier divider,
   and it is the single most recognisable mark in the house style. */
.kn-rule {
	width: 46px;
	height: 1px;
	background: var( --kn-metal );
	border: 0;
	margin: 18px 0 20px;
}

.kn-rule--full {
	width: 100%;
	background: var( --kn-line );
}

/* ── Buttons ──────────────────────────────────────────────────────────
   Ink on the page colour, square, wide-spaced capitals. Hovering empties it
   to an outline rather than darkening it. */
.kn-btn {
	display: inline-block;
	background: var( --kn-btn-bg );
	color: var( --kn-btn-fg );
	border: 1px solid var( --kn-btn-bg );
	padding: 13px 32px;
	font-family: var( --kn-sans );
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.kn-btn:hover,
.kn-btn:focus-visible {
	background: transparent;
	color: var( --kn-text );
	border-color: var( --kn-text );
}

.kn-btn--quiet {
	background: transparent;
	color: var( --kn-text );
	border-color: var( --kn-line );
}

.kn-btn--quiet:hover {
	border-color: var( --kn-metal );
	color: var( --kn-metal );
}

.kn-btn[disabled] { opacity: 0.55; cursor: default; }

/* ── Tags and states ──────────────────────────────────────────────── */
.kn-tag {
	display: inline-block;
	font-family: var( --kn-sans );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-metal );
	border: 1px solid var( --kn-metal );
	padding: 5px 11px;
}

.kn-tag--quiet {
	color: var( --kn-muted );
	border-color: var( --kn-line );
}

/* ── Panels and rows ──────────────────────────────────────────────────
   Rows separated by hairlines read better than floating cards, and they keep
   a long list calm. */
.kn-panel {
	background: transparent;
	border: 1px solid var( --kn-line );
	padding: 20px 22px;
}

.kn-rows { border-top: 1px solid var( --kn-line ); }

.kn-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var( --kn-line );
}

/* ── Figures ──────────────────────────────────────────────────────────
   Numbers are set in the serif and drawn in the metal; it is where a screen
   full of data earns a little shine. */
.kn-figures {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 120px, 1fr ) );
	gap: 1px;
	background: var( --kn-line );
	border: 1px solid var( --kn-line );
}

.kn-figure {
	background: var( --kn-bg );
	padding: 15px 12px;
	text-align: center;
}

.kn-figure b {
	display: block;
	font-family: var( --kn-serif );
	font-weight: 400;
	font-size: 28px;
	color: var( --kn-metal );
}

.kn-figure span {
	font-family: var( --kn-sans );
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-muted );
}

/* ── Fields ───────────────────────────────────────────────────────── */
.kn-field {
	width: 100%;
	background: transparent;
	color: var( --kn-text );
	border: 1px solid var( --kn-line );
	padding: 12px 14px;
	font-family: var( --kn-sans );
	font-size: 16px; /* 16px keeps iOS from zooming the page on focus. */
}

.kn-field:focus {
	outline: 0;
	border-color: var( --kn-metal );
}

.kn-label {
	display: block;
	font-family: var( --kn-sans );
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-muted );
	margin: 0 0 6px;
}

/* ── The light / dark switch ──────────────────────────────────────────
   The same control on every product, so the gesture is learned once. */
.kn-mode {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	padding: 0;
}

.kn-mode svg { width: 20px; height: 20px; display: block; }

/* Show the sun on a dark page and the moon on a light one: the icon offers
   what you would get, not what you already have. */
.kn-mode .kn-sun  { display: block; }
.kn-mode .kn-moon { display: none; }

:root[data-theme="light"] .kn-mode .kn-sun  { display: none; }
:root[data-theme="light"] .kn-mode .kn-moon { display: block; }

@media ( prefers-color-scheme: light ) {
	:root:not([data-theme]) .kn-mode .kn-sun  { display: none; }
	:root:not([data-theme]) .kn-mode .kn-moon { display: block; }
}

/* ── Tables ───────────────────────────────────────────────────────────
   A table is the thing that breaks on a phone: it either runs off the side or
   squashes into columns nobody can read. On a narrow screen each row becomes a
   little stack instead, with the column name shown beside its value. Give each
   cell a data-label and it works without any markup change beyond that.

   <td data-label="Wedding">Amelia &amp; Rowan</td>
*/
.kn-table {
	width: 100%;
	border-collapse: collapse;
	font-family: var( --kn-sans );
}

.kn-table th {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var( --kn-muted );
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var( --kn-line );
}

.kn-table td {
	padding: 13px 12px;
	border-bottom: 1px solid var( --kn-line );
	vertical-align: top;
}

/* ── Mobile ───────────────────────────────────────────────────────────
   The products are shown to friends on a phone as often as they are worked on
   at a desk, so this is not an afterthought. */

/* Never let anything push the page sideways. A single wide image or a long
   unbroken word is all it takes, and the whole layout starts sliding. */
.kn-panel,
.kn-row,
.kn-figures,
.kn-table {
	max-width: 100%;
}

.kn-panel img,
.kn-row img {
	max-width: 100%;
	height: auto;
}

.kn-title,
.kn-display,
.kn-row {
	overflow-wrap: anywhere;
}

@media ( max-width: 782px ) {
	/* Comfortable targets. Anything you tap should be at least 48px, which is
	   about the width of an adult fingertip. */
	.kn-btn {
		padding: 16px 28px;
		min-height: 48px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.kn-mode {
		width: 48px;
		height: 48px;
	}

	.kn-tag { padding: 7px 12px; }

	/* A row that was side by side becomes stacked, so a long name and its
	   status are not fighting over the same line. */
	.kn-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	/* Figures go two across rather than shrinking to nothing. */
	.kn-figures { grid-template-columns: repeat( 2, 1fr ); }

	/* Tables become stacks. */
	.kn-table,
	.kn-table tbody,
	.kn-table tr,
	.kn-table td {
		display: block;
		width: 100%;
	}

	.kn-table thead { display: none; }

	.kn-table tr {
		border-bottom: 1px solid var( --kn-line );
		padding: 12px 0;
	}

	.kn-table td {
		border: 0;
		padding: 5px 0;
		display: flex;
		justify-content: space-between;
		gap: 16px;
	}

	.kn-table td::before {
		content: attr( data-label );
		font-size: 10px;
		font-weight: 600;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var( --kn-muted );
		flex: none;
	}

	/* A cell with no label just fills the width. */
	.kn-table td:not([data-label])::before { content: none; }
}

@media ( max-width: 480px ) {
	.kn-figures { grid-template-columns: 1fr; }
	.kn-panel { padding: 16px 16px; }
	.kn-btn { width: 100%; }
}

/* Keep content clear of the rounded corners and the home indicator on a
   modern phone, in landscape as well as portrait. */
@supports ( padding: max( 0px ) ) {
	.kn-safe {
		padding-left: max( 16px, env( safe-area-inset-left ) );
		padding-right: max( 16px, env( safe-area-inset-right ) );
		padding-bottom: max( 16px, env( safe-area-inset-bottom ) );
	}
}

/* Respect a person who has asked for less movement. */
@media ( prefers-reduced-motion: reduce ) {
	.kn-btn { transition: none; }
}