:root {
	--color-bg: #ffffff;
	--color-raise: #f2f4f5;
	--color-text: #12161a;
	--color-muted: #545a63;
	--color-accent: #0a6a8a;
	--color-accent-deep: #08536b;
	--color-border: #dbdfe3;
	--font-head: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--font-mark: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--container: 1200px;
	--radius: 0px;
	--band: clamp(36px, 6.5vw, 66px);
	--edge: clamp(18px, 4vw, 34px);
}

* { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.62;
}

::selection { background: #cfe8f0; color: var(--color-text); }

[id] { scroll-margin-top: 24px; }

.wl-bound {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--edge);
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-deep); }

:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

h1, h2, h3 {
	font-family: var(--font-head);
	font-weight: 650;
	line-height: 1.14;
	margin: 0 0 18px;
	letter-spacing: -0.026em;
}

h1 { font-size: clamp(2.05rem, 6.6vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 4.4vw, 2.6rem); }
h3 { font-size: clamp(1.06rem, 2.2vw, 1.2rem); letter-spacing: -0.012em; }

p { margin: 0 0 16px; }

img { max-width: 100%; height: auto; display: block; }

.wl-mast {
	padding: 18px 0 0;
	border-bottom: 1px solid var(--color-border);
}

.wl-mast__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

.wl-mark {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: clamp(1.15rem, 3.4vw, 1.4rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text);
	text-decoration: none;
	padding: 11px 0;
	min-height: 44px;
}

.wl-mark svg { color: var(--color-accent); flex: 0 0 auto; }

.wl-mast__mail {
	font-family: var(--font-mark);
	font-size: 0.79rem;
}

.wl-mast__mail a {
	display: inline-block;
	padding: 14px 0;
	min-height: 44px;
}

.wl-links ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 26px;
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.wl-links a {
	display: inline-block;
	padding: 12px 0;
	min-height: 44px;
	font-family: var(--font-mark);
	font-size: 0.75rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-muted);
	border-bottom: 2px solid transparent;
	transition: 140ms ease;
}

.wl-links a:hover {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

.wl-open { padding: clamp(40px, 7vw, 80px) 0 clamp(28px, 4vw, 44px); }

.wl-open p { max-width: 38em; }

.wl-stamp {
	font-family: var(--font-mark);
	font-size: 0.74rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 20px;
}

.wl-open h1 { max-width: 15em; }

.wl-answer {
	font-size: clamp(1.06rem, 2.6vw, 1.28rem);
	line-height: 1.55;
	border-left: 3px solid var(--color-accent);
	padding-left: clamp(16px, 3vw, 24px);
	max-width: 40em;
	margin-top: 26px;
}

.wl-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px 48px;
	padding: var(--band) 0;
}

.wl-row--line { border-top: 1px solid var(--color-border); }

.wl-row__side {
	font-family: var(--font-mark);
	font-size: 0.73rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--color-muted);
	line-height: 1.5;
}

.wl-row__side b {
	display: block;
	font-size: clamp(2rem, 5vw, 2.9rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--color-accent);
	margin-bottom: 10px;
}

.wl-row__main { min-width: 0; max-width: 44em; }

.wl-bullets { padding-left: 22px; }
.wl-bullets li { margin-bottom: 12px; }
.wl-bullets li::marker { color: var(--color-accent); }

.wl-pairs { margin: 0; }

.wl-pairs dt {
	font-weight: 650;
	margin-top: 20px;
}

.wl-pairs dd {
	margin: 4px 0 0;
	color: var(--color-muted);
}

.wl-swipe {
	display: none;
	font-family: var(--font-mark);
	font-size: 0.71rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 8px;
}

.wl-scroll {
	overflow-x: auto;
	margin: 4px 0 12px;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
}

table {
	border-collapse: collapse;
	width: 100%;
	min-width: 660px;
	font-size: 0.94rem;
	line-height: 1.55;
}

caption {
	text-align: left;
	font-size: 1rem;
	font-weight: 650;
	line-height: 1.45;
	padding-bottom: 16px;
}

th, td {
	padding: 14px 20px 14px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--color-border);
}

thead th {
	font-family: var(--font-mark);
	font-size: 0.66rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--color-muted);
	padding-bottom: 11px;
	border-bottom-color: var(--color-text);
}

tbody th { font-weight: 650; padding-right: 28px; }

tbody tr:last-child th,
tbody tr:last-child td { border-bottom: 0; }

.wl-figs {
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
	margin: 26px 0 0;
}

.wl-figs img { background: var(--color-raise); }

.wl-figs figcaption {
	font-family: var(--font-mark);
	font-size: 0.72rem;
	line-height: 1.6;
	color: var(--color-muted);
	margin-top: 10px;
}

.wl-cite {
	font-style: italic;
	font-size: 0.88rem;
	color: var(--color-muted);
	max-width: 42em;
	margin-bottom: 0;
}

details {
	border-top: 1px solid var(--color-border);
}

details:last-of-type { border-bottom: 1px solid var(--color-border); }

summary {
	cursor: pointer;
	padding: 16px 0;
	min-height: 44px;
	font-weight: 650;
	line-height: 1.45;
	list-style: none;
	display: flex;
	gap: 14px;
	align-items: baseline;
	transition: 140ms ease;
}

summary:hover { color: var(--color-accent); }

summary::-webkit-details-marker { display: none; }

summary::before {
	content: "+";
	flex: 0 0 auto;
	width: 16px;
	color: var(--color-accent);
	font-family: var(--font-mark);
	font-weight: 400;
}

details[open] summary::before { content: "\2212"; }

details p { padding: 0 0 18px 30px; max-width: 42em; margin: 0; color: var(--color-muted); }

.wl-units { list-style: none; margin: 26px 0 0; padding: 0; }

.wl-units > li {
	border-top: 1px solid var(--color-border);
	padding: 28px 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px 48px;
}

.wl-units > li:first-child { border-top-color: var(--color-text); }

.wl-units__id { min-width: 0; }

.wl-units__id img { margin-bottom: 12px; background: var(--color-raise); }

.wl-tag {
	font-family: var(--font-mark);
	font-size: 0.7rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0;
}

.wl-units p:last-child { margin-bottom: 0; }

.wl-cta {
	display: inline-block;
	min-height: 44px;
	padding: 14px 26px;
	border: 1px solid var(--color-accent);
	background: var(--color-bg);
	color: var(--color-accent);
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: 140ms ease;
}

.wl-cta:hover {
	background: var(--color-accent);
	color: #ffffff;
}

.wl-cta--fill {
	background: var(--color-accent);
	color: #ffffff;
}

.wl-cta--fill:hover {
	background: var(--color-accent-deep);
	border-color: var(--color-accent-deep);
}

.wl-tiny {
	font-size: 0.85rem;
	color: var(--color-muted);
	max-width: 40em;
	margin-top: 18px;
}

.wl-shop { list-style: none; margin: 22px 0 0; padding: 0; max-width: 46em; }

.wl-shop li { border-top: 1px solid var(--color-border); }

.wl-shop li:last-child { border-bottom: 1px solid var(--color-border); }

.wl-shop a {
	display: block;
	padding: 16px 0;
	min-height: 44px;
	text-decoration: none;
}

.wl-shop a:hover { text-decoration: underline; }

.wl-inbox {
	background: var(--color-raise);
	padding: clamp(24px, 5vw, 38px) clamp(20px, 4vw, 32px);
	margin-top: 8px;
	max-width: 44em;
}

.wl-inbox p:last-child { margin-bottom: 0; }

.wl-inbox__addr {
	display: inline-block;
	font-family: var(--font-mark);
	font-size: clamp(1.02rem, 4.4vw, 1.52rem);
	word-break: break-word;
	margin: 8px 0 16px;
	padding: 6px 0 5px;
	min-height: 44px;
	border-bottom: 2px solid var(--color-accent);
	text-decoration: none;
}

.wl-base {
	border-top: 1px solid var(--color-text);
	margin-top: clamp(30px, 5vw, 46px);
	padding: 36px 0 50px;
	font-size: 0.91rem;
}

.wl-base__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.wl-base h2 {
	font-family: var(--font-mark);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 12px;
}

.wl-base ul { list-style: none; margin: 0; padding: 0; }
.wl-base a { display: inline-block; padding: 12px 0; min-height: 44px; }
.wl-base p { color: var(--color-muted); margin-bottom: 8px; line-height: 1.6; }

.wl-seal {
	margin-top: 30px;
	padding-top: 18px;
	border-top: 1px solid var(--color-border);
	color: var(--color-muted);
	font-family: var(--font-mark);
	font-size: 0.74rem;
	letter-spacing: 0.04em;
}

.wl-paper { max-width: 42em; padding: clamp(30px, 5vw, 50px) 0 22px; }
.wl-paper h2 { font-size: clamp(1.3rem, 3vw, 1.75rem); margin-top: 40px; }
.wl-paper > p:first-of-type { color: var(--color-muted); }

.wl-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--color-text);
	color: #eef1f3;
	border-top: 3px solid var(--color-accent);
	padding: 18px 0 20px;
	z-index: 60;
}

.wl-bar p { margin: 0 0 14px; font-size: 0.89rem; line-height: 1.6; max-width: 60em; }
.wl-bar a { color: #7fcde3; }

.wl-bar__set { display: flex; flex-wrap: wrap; gap: 12px; }

.wl-bar .wl-cta {
	background: transparent;
	border-color: #eef1f3;
	color: #eef1f3;
	flex: 1 1 auto;
}

.wl-bar .wl-cta:hover { background: #eef1f3; color: var(--color-text); }

.wl-void { padding: clamp(50px, 10vw, 90px) 0 clamp(60px, 12vw, 108px); max-width: 36em; }

@media (max-width: 700px) {
	.wl-swipe { display: block; }
}

@media (min-width: 560px) {
	.wl-bar .wl-cta { flex: 0 0 auto; }
	.wl-units > li { grid-template-columns: 130px minmax(0, 1fr); }
}

@media (min-width: 800px) {
	.wl-row { grid-template-columns: 200px minmax(0, 1fr); }
	.wl-units > li { grid-template-columns: 250px minmax(0, 1fr); }
	.wl-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wl-base__cols { grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; }
}

.wl-browsers { list-style: none; margin: 18px 0 0; padding: 0; max-width: 42em; }

.wl-browsers li { border-top: 1px solid var(--color-border); }

.wl-browsers li:last-child { border-bottom: 1px solid var(--color-border); }

.wl-browsers a {
	display: block;
	padding: 14px 0;
	min-height: 44px;
	text-decoration: none;
}

.wl-browsers a:hover { text-decoration: underline; }

@media (max-width: 719px) {
	.wl-links ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 0 22px;
	}

	.wl-links ul::-webkit-scrollbar { display: none; }

	.wl-links a { white-space: nowrap; }
}

.wl-goods { list-style: none; margin: 8px 0 20px; padding: 0; }

.wl-goods > li {
	border-top: 1px solid var(--color-border);
	padding: 26px 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px 48px;
}

.wl-goods > li:first-child { border-top-color: var(--color-text); }

.wl-goods > li:last-child { border-bottom: 1px solid var(--color-border); }

.wl-goods__id { min-width: 0; }

.wl-goods__id b {
	display: block;
	font-family: var(--font-mark);
	font-size: 1.35rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--color-accent);
	margin-bottom: 8px;
}

.wl-goods h3 { margin-bottom: 10px; }

.wl-goods p:last-child { margin-bottom: 0; }

.wl-cta--plain {
	border-color: var(--color-border);
	color: var(--color-text);
	margin-top: 10px;
}

.wl-cta--plain:hover { background: var(--color-text); border-color: var(--color-text); color: #ffffff; }

@media (min-width: 800px) {
	.wl-goods > li { grid-template-columns: 200px minmax(0, 1fr); }
}

.wl-open__art { margin: 34px 0 0; }

.wl-open__art img { width: 100%; max-width: 640px; }

.wl-open__art figcaption {
	font-family: var(--font-mark);
	font-size: 0.72rem;
	line-height: 1.6;
	color: var(--color-muted);
	margin-top: 12px;
	max-width: 44em;
}