/*
Theme Name: Hokkaido Sheet
Theme URI: https://example.com/hokkaido-sheet
Author: Kayo Tsuchiya
Description: A survey-sheet theme for long-form road notes. Every decorative map is inline SVG generated in PHP from one coordinate file — real coastline, national routes, relief interpolated from named summits, DEM pass profiles, distance rings. No image files, no map tiles, no webfonts. Recolours for dark mode and prints without loss.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hokkaido-sheet
Tags: blog, one-column, custom-colors, editor-style, block-patterns, translation-ready
*/

/* -------------------------------------------------------------------------
   1. Tokens
   The map palette. Light mode is a white survey sheet; dark mode is the same
   sheet inverted, with the line work brightened so relief stays legible.
   ---------------------------------------------------------------------- */
:root {
	--hs-paper:   #ffffff;
	--hs-paper-2: #f7f8f8;
	--hs-ink:     #14171a;
	--hs-ink-2:   #6b7378;
	--hs-rule:    #e3e5e5;
	--hs-contour: #c3c0b7;
	--hs-water:   #a9c0cb;
	--hs-land:    #f2f4f4;
	--hs-accent:  #12495c;
	--hs-faint:   #eef0f0;

	--hs-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--hs-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--hs-measure: 680px;
	--hs-wide: 960px;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--hs-paper:   #121517;
		--hs-paper-2: #181c1f;
		--hs-ink:     #e0e3e2;
		--hs-ink-2:   #949c9f;
		--hs-rule:    #2f3438;
		--hs-contour: #8b8474;
		--hs-water:   #5b7684;
		--hs-land:    #1e2327;
		--hs-accent:  #79b4c9;
		--hs-faint:   #282d31;
	}
}

/* Manual override, set by the footer toggle. */
:root[data-hs-scheme="light"] {
	--hs-paper: #ffffff; --hs-paper-2: #f7f8f8; --hs-ink: #14171a; --hs-ink-2: #6b7378;
	--hs-rule: #e3e5e5; --hs-contour: #c3c0b7; --hs-water: #a9c0cb; --hs-land: #f2f4f4;
	--hs-accent: #12495c; --hs-faint: #eef0f0; color-scheme: light;
}
:root[data-hs-scheme="dark"] {
	--hs-paper: #121517; --hs-paper-2: #181c1f; --hs-ink: #e0e3e2; --hs-ink-2: #949c9f;
	--hs-rule: #2f3438; --hs-contour: #8b8474; --hs-water: #5b7684; --hs-land: #1e2327;
	--hs-accent: #79b4c9; --hs-faint: #282d31; color-scheme: dark;
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--hs-paper);
	color: var(--hs-ink);
	font-family: var(--hs-serif);
	font-variant-numeric: oldstyle-nums proportional-nums;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

a { color: var(--hs-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--hs-ink); text-decoration-color: var(--hs-accent); }
img, svg, iframe, video { max-width: 100%; }
img { height: auto; }

.hs-mono,
.hs-label,
.hs-table,
.hs-figcaption { font-variant-numeric: tabular-nums lining-nums; }

.hs-label {
	font: 500 10px/1.6 var(--hs-mono);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hs-ink-2);
	margin: 0 0 10px;
}
.hs-label--accent { color: var(--hs-accent); }
.hs-section-no {
	font: 500 10px/1.6 var(--hs-mono);
	letter-spacing: .16em;
	color: var(--hs-accent);
	margin: 34px 0 6px;
}
.hs-skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--hs-paper); color: var(--hs-ink);
	padding: 10px 14px; z-index: 99;
}
.hs-skip-link:focus { left: 0; }

.hs-wrap { max-width: var(--hs-wide); margin: 0 auto; padding: 0 20px; }
.hs-measure { max-width: var(--hs-measure); margin: 0 auto; }

/* -------------------------------------------------------------------------
   3. Masthead — the road network runs faintly behind it
   ---------------------------------------------------------------------- */
.hs-header {
	position: relative;
	overflow: hidden;
	background: var(--hs-paper-2);
	border-bottom: 1.5px solid var(--hs-ink);
}
.hs-header__map {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	opacity: .5;
	pointer-events: none;
}
.hs-header__inner {
	position: relative;
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 16px; flex-wrap: wrap;
	padding: 14px 20px;
	max-width: var(--hs-wide); margin: 0 auto;
}
.hs-brand { text-decoration: none; color: var(--hs-ink); }
.hs-brand__name { font: 600 19px/1 var(--hs-serif); letter-spacing: .01em; }
.hs-brand__sub {
	display: block;
	font: 500 10px/1.6 var(--hs-mono);
	letter-spacing: .14em; text-transform: uppercase; color: var(--hs-ink-2);
}
.hs-nav ul { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; flex-wrap: wrap; }
.hs-nav a {
	font: 500 11px/1 var(--hs-mono);
	letter-spacing: .1em; text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   4. Plates — every map is framed like a printed plate
   ---------------------------------------------------------------------- */
.hs-plate {
	position: relative;
	margin: 30px 0 12px;
	padding: 0;
	border: 1px solid var(--hs-rule);
	background: var(--hs-paper-2);
	box-shadow: 0 1px 0 var(--hs-rule), 0 0 0 5px var(--hs-paper), 0 0 0 6px var(--hs-faint);
}
.hs-plate svg { display: block; width: 100%; height: auto; }
.hs-figcaption {
	padding: 10px 14px;
	border-top: 1px solid var(--hs-rule);
	font: 500 10px/1.7 var(--hs-mono);
	letter-spacing: .09em; text-transform: uppercase; color: var(--hs-ink-2);
	margin: 0;
}
.hs-divider { display: block; width: 100%; height: 34px; margin: 34px 0 24px; }

/* -------------------------------------------------------------------------
   5. Article
   ---------------------------------------------------------------------- */
.hs-article { padding-bottom: 56px; }
.hs-title {
	margin: 0 0 16px;
	font-size: clamp(29px, 6.6vw, 46px);
	line-height: 1.07; font-weight: 500; letter-spacing: -.015em;
	text-wrap: balance;
}
.hs-dek {
	margin: 0 0 20px;
	font-size: 18px; line-height: 1.6; color: var(--hs-ink-2);
	text-wrap: pretty;
}
.hs-byline {
	display: flex; flex-wrap: wrap; gap: 6px 22px;
	padding: 12px 0;
	border-top: 1px solid var(--hs-rule);
	border-bottom: 1px solid var(--hs-rule);
	font: 500 11px/1.7 var(--hs-mono);
	color: var(--hs-ink-2);
	margin: 0;
}
.hs-disclosure {
	margin: 16px 0 0;
	padding: 12px 14px;
	background: var(--hs-paper-2);
	border-left: 3px solid var(--hs-contour);
	font-size: 14px; line-height: 1.6; color: var(--hs-ink-2);
}
.hs-content { font-size: 18.5px; line-height: 1.72; }
.hs-content > p { margin: 0 0 18px; text-wrap: pretty; }
.hs-content > h2 {
	margin: 0 0 12px;
	font-size: 25px; line-height: 1.25; font-weight: 500; letter-spacing: -.005em;
}
.hs-content > h3 { margin: 26px 0 10px; font-size: 20px; line-height: 1.3; font-weight: 500; }
.hs-content > ul, .hs-content > ol { margin: 0 0 20px; padding-left: 1.3em; }
.hs-content > blockquote {
	margin: 0 0 26px;
	padding: 18px 0 18px 20px;
	border-left: 3px solid var(--hs-accent);
	background: var(--hs-paper-2);
	font-size: 19px; line-height: 1.6; font-style: italic;
}
.hs-content > blockquote cite,
.hs-content > blockquote footer {
	display: block; margin-top: 10px;
	font: 500 11px/1.6 var(--hs-mono); font-style: normal; color: var(--hs-ink-2);
}
.hs-content .hs-drop::first-letter {
	float: left;
	font-size: 4.1em; line-height: .78;
	padding: .06em .1em 0 0;
	color: var(--hs-accent);
}
.hs-coord { font: 500 11.5px/1.5 var(--hs-mono); color: var(--hs-ink-2); }

/* -------------------------------------------------------------------------
   6. The seven-column comparison table
   Container query, not a viewport query: the table reacts to the width of the
   column it actually sits in, so it also works inside a narrow sidebar or a
   two-column pattern. Under 600px each row becomes a labelled record.
   ---------------------------------------------------------------------- */
.hs-tablewrap { container-type: inline-size; margin: 0 0 8px; }
.hs-table { display: block; font-size: 15px; line-height: 1.5; }
.hs-table__head { display: none; }
.hs-table__row { display: block; padding: 6px 0 16px; border-bottom: 1px solid var(--hs-rule); }
.hs-table__cell {
	display: flex; justify-content: space-between; align-items: baseline;
	gap: 14px; padding: 7px 0;
	border-bottom: 1px solid var(--hs-rule);
}
.hs-table__cell:first-child, .hs-table__cell:last-child { border-bottom: none; }
.hs-table__lab {
	flex: 0 0 auto;
	font: 500 11px/1.2 var(--hs-mono);
	letter-spacing: .08em; text-transform: uppercase; color: var(--hs-ink-2);
}
.hs-table__val { text-align: right; }
.hs-table__company { font-weight: 600; font-size: 17px; }
.hs-table__flag {
	display: block;
	font: 500 9.5px/1.6 var(--hs-mono);
	letter-spacing: .14em; text-transform: uppercase; color: var(--hs-accent);
}
.hs-table__num { font-family: var(--hs-mono); }
.hs-table__total { font-family: var(--hs-mono); font-weight: 600; color: var(--hs-accent); }
.hs-table__note { color: var(--hs-ink-2); font-size: 14.5px; line-height: 1.55; max-width: 34ch; }
.hs-table__source {
	margin: 0 0 26px;
	font: 500 10px/1.7 var(--hs-mono);
	letter-spacing: .08em; text-transform: uppercase; color: var(--hs-ink-2);
}

@container (min-width: 600px) {
	.hs-table {
		display: grid;
		grid-template-columns: 1.45fr .85fr 1.05fr .5fr .5fr .95fr 1.7fr;
		border-top: 1.5px solid var(--hs-ink);
	}
	.hs-table--matrix { grid-template-columns: 1.5fr .7fr .8fr .7fr .7fr .6fr 1.5fr; }
	.hs-table__row, .hs-table__head { display: contents; }
	.hs-table__cell { display: block; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--hs-rule); }
	.hs-table__cell:first-child, .hs-table__cell:last-child { border-bottom: 1px solid var(--hs-rule); }
	.hs-table__lab { display: none; }
	.hs-table__val { text-align: left; }
	.hs-table__th {
		padding: 8px 12px 8px 0;
		border-bottom: 1.5px solid var(--hs-ink);
		font: 500 10px/1.5 var(--hs-mono);
		letter-spacing: .1em; text-transform: uppercase; color: var(--hs-ink-2);
	}
}

/* -------------------------------------------------------------------------
   7. Checklist, sources, author
   ---------------------------------------------------------------------- */
.hs-checklist { margin: 0 0 30px; padding: 0; list-style: none; border-top: 1.5px solid var(--hs-ink); }
.hs-checklist li {
	display: grid; grid-template-columns: 24px 1fr; gap: 12px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--hs-rule);
	font-size: 16.5px; line-height: 1.55;
}
.hs-checklist svg { width: 20px; height: 20px; margin-top: 2px; }
.hs-sources { margin: 0 0 34px; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; line-height: 1.55; }
.hs-sources li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.hs-sources__checked { font: 500 11px/1.5 var(--hs-mono); color: var(--hs-ink-2); }
.hs-author {
	display: grid; grid-template-columns: 96px 1fr; gap: 18px;
	padding: 20px;
	border: 1px solid var(--hs-rule);
	background: var(--hs-paper-2);
}
.hs-author svg { border: 1px solid var(--hs-rule); }
.hs-author p { margin: 0 0 8px; font-size: 16.5px; line-height: 1.6; }

/* -------------------------------------------------------------------------
   8. Index
   ---------------------------------------------------------------------- */
.hs-lede { padding: 28px 0 8px; }
.hs-lede h1 {
	margin: 0 0 14px;
	font-size: clamp(30px, 7vw, 50px); line-height: 1.04;
	font-weight: 500; letter-spacing: -.015em; text-wrap: balance;
}
.hs-lede p { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.62; color: var(--hs-ink-2); text-wrap: pretty; }
.hs-list { border-top: 1.5px solid var(--hs-ink); margin-top: 34px; }
.hs-card {
	display: grid; grid-template-columns: 76px 1fr; gap: 16px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid var(--hs-rule);
}
.hs-card__map { border: 1px solid var(--hs-rule); background: var(--hs-paper-2); }
.hs-card h2 { margin: 0 0 7px; font-size: 21px; line-height: 1.25; font-weight: 500; }
.hs-card h2 a { color: var(--hs-ink); text-decoration: none; border-bottom: 1px solid var(--hs-rule); }
.hs-card h2 a:hover { border-bottom-color: var(--hs-accent); }
.hs-card p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--hs-ink-2); text-wrap: pretty; }
.hs-pagination {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 24px 0 0;
	font: 500 11px/1.6 var(--hs-mono); letter-spacing: .1em; text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   9. Distance matrix
   ---------------------------------------------------------------------- */
.hs-matrix { margin: 0 0 34px; }
.hs-matrix__head {
	display: flex; flex-wrap: wrap; gap: 16px;
	justify-content: space-between; align-items: flex-end;
	padding: 0 0 14px;
	border-bottom: 1.5px solid var(--hs-ink);
}
.hs-matrix__updated {
	margin: 0; padding: 8px 12px;
	border: 1.5px solid var(--hs-accent); color: var(--hs-accent);
	font: 600 12px/1.4 var(--hs-mono); letter-spacing: .06em; white-space: nowrap;
}
.hs-matrix__map { border: 1px solid var(--hs-rule); border-top: none; background: var(--hs-paper-2); }
.hs-matrix__map svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.hs-matrix__readout {
	display: flex; flex-wrap: wrap; gap: 6px 20px;
	padding: 10px 14px; border-top: 1px solid var(--hs-rule);
	font: 500 10px/1.7 var(--hs-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--hs-ink-2);
}
.hs-matrix__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 18px; }
.hs-chip {
	min-height: 44px;
	padding: 6px 12px;
	border: 1px solid var(--hs-rule);
	background: transparent; color: var(--hs-ink);
	font: 500 12px/1.2 var(--hs-mono);
	cursor: pointer; text-decoration: none;
	display: inline-flex; align-items: center;
}
.hs-chip[aria-current="true"], .hs-chip:hover { border-color: var(--hs-accent); color: var(--hs-accent); }
.hs-chip[aria-current="true"] { background: var(--hs-accent); color: var(--hs-paper); }
.hs-node { cursor: pointer; }
.hs-method {
	margin: 14px 0 0;
	font: 500 10.5px/1.8 var(--hs-mono);
	letter-spacing: .07em; text-transform: uppercase; color: var(--hs-ink-2);
}
.hs-matrix.is-loading { opacity: .55; }

/* -------------------------------------------------------------------------
   10. Comments — reader mail is quoted, so it is set as quotation
   ---------------------------------------------------------------------- */
.hs-comments { padding: 0 0 40px; }
.hs-comments ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.hs-comment {
	padding: 16px 18px;
	border: 1px solid var(--hs-rule);
	background: var(--hs-paper-2);
}
.hs-comment__body { font-size: 17px; line-height: 1.6; }
.hs-comment__body p { margin: 0 0 10px; }
.hs-comment__meta { font: 500 11px/1.6 var(--hs-mono); color: var(--hs-ink-2); }
.hs-comments .comment-respond input[type="text"],
.hs-comments .comment-respond input[type="email"],
.hs-comments .comment-respond input[type="url"],
.hs-comments .comment-respond textarea {
	width: 100%; padding: 9px 11px;
	border: 1px solid var(--hs-rule); background: var(--hs-paper); color: var(--hs-ink);
	font-family: var(--hs-serif); font-size: 16px;
}
.hs-comments .comment-respond .submit,
.hs-button {
	min-height: 44px; padding: 10px 16px;
	border: 1px solid var(--hs-accent); background: transparent; color: var(--hs-accent);
	font: 500 11.5px/1.2 var(--hs-mono); letter-spacing: .12em; text-transform: uppercase;
	cursor: pointer;
}

/* -------------------------------------------------------------------------
   11. Footer — the coverage map
   ---------------------------------------------------------------------- */
.hs-footer { border-top: 1.5px solid var(--hs-ink); background: var(--hs-paper-2); }
.hs-footer__inner {
	max-width: var(--hs-wide); margin: 0 auto;
	padding: 26px 20px 40px;
	display: grid; gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.hs-footer__map { border: 1px solid var(--hs-rule); background: var(--hs-paper); max-width: 240px; }
.hs-corridors { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font: 500 12.5px/1.6 var(--hs-mono); }
.hs-corridors li {
	display: flex; justify-content: space-between; gap: 12px;
	border-bottom: 1px dotted var(--hs-rule); padding-bottom: 3px;
}
.hs-colophon { margin: 0; font: 500 11px/1.7 var(--hs-mono); color: var(--hs-ink-2); }
.hs-footer p { font-size: 14.5px; line-height: 1.6; color: var(--hs-ink-2); text-wrap: pretty; }
.hs-scheme-toggle {
	margin-top: 12px;
	background: transparent; border: 1px solid var(--hs-rule); color: var(--hs-ink-2);
	font: 500 10px/1.2 var(--hs-mono); letter-spacing: .12em; text-transform: uppercase;
	padding: 9px 12px; min-height: 40px; cursor: pointer;
}
.hs-scheme-toggle:hover { border-color: var(--hs-accent); color: var(--hs-accent); }

/* -------------------------------------------------------------------------
   12. Block editor guards — keep author-inserted blocks inside the measure
   ---------------------------------------------------------------------- */
.hs-content > .alignwide { max-width: var(--hs-wide); margin-left: calc(50% - min(var(--hs-wide), 100vw - 40px) / 2); margin-right: auto; width: min(var(--hs-wide), 100vw - 40px); }
.hs-content > .alignfull { width: 100%; }
.hs-content figure { margin: 26px 0; }
.hs-content figcaption { font: 500 10px/1.7 var(--hs-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--hs-ink-2); }
.wp-block-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.wp-block-table td, .wp-block-table th { border: 1px solid var(--hs-rule); padding: 9px 11px; text-align: left; }

/* -------------------------------------------------------------------------
   13. Print — readers use this offline, in a car, in the rain
   ---------------------------------------------------------------------- */
@media print {
	:root {
		--hs-paper: #fff; --hs-paper-2: #fff; --hs-ink: #000; --hs-ink-2: #444;
		--hs-rule: #bbb; --hs-accent: #000; --hs-land: #f4f4f4; --hs-contour: #999; --hs-faint: #eee;
	}
	.hs-nav, .hs-matrix__chips, .hs-scheme-toggle, .hs-pagination, .comment-respond, .hs-skip-link { display: none !important; }
	.hs-plate { box-shadow: none; break-inside: avoid; }
	.hs-table__row, .hs-checklist li, figure { break-inside: avoid; }
	.hs-header { border-bottom-width: 1pt; }
	body { font-size: 11pt; }
	.hs-content { font-size: 11pt; line-height: 1.55; }
	a { text-decoration: none; }
	.hs-sources a::after { content: " (" attr(href) ")"; font: 500 8pt var(--hs-mono); color: #555; }
}