/*
 * Home page: Skyline design.
 */

@font-face { font-family: "Big Shoulders Display"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Big Shoulders Display"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); }

body.tyog {
	--red: #8e1118;
	--red-hi: #a8141c;
	--deep: #3e070b;
	--black: #0b0909;
	--card: #161213;
	--white: #ffffff;
	--bone: #e9e3e3;
	--smoke: #a0969a;
	--display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
	--body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--gutter: clamp(16px, 4vw, 40px);

	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: var(--body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.tyog *, .tyog *::before, .tyog *::after { box-sizing: border-box; }
.tyog a { color: inherit; text-decoration: none; }
.tyog a:focus-visible, .tyog button:focus-visible, .tyog input:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

/* Header */
.tyog-hd { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px var(--gutter); background: var(--red); }
.tyog-brand { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: .02em; line-height: 1.1; }
.tyog-brand-line { display: block; }
.tyog-brand-line + .tyog-brand-line { font-weight: 800; font-size: .8em; letter-spacing: .04em; }

/* Hero */
.tyog-hero { position: relative; overflow: hidden; padding: clamp(24px, 5vw, 56px) var(--gutter) 0; background: linear-gradient(180deg, var(--red) 0%, #6a0c12 55%, var(--deep) 100%); }
.tyog-title { margin: 0; font-family: var(--display); font-weight: 900; line-height: .82; font-size: clamp(64px, 15vw, 200px); letter-spacing: -.01em; position: relative; z-index: 1; }
.tyog-title span { display: block; }
.tyog-outline { -webkit-text-stroke: 2px var(--white); color: transparent; }
.tyog-author { margin: clamp(16px, 2.5vw, 28px) 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 60px); letter-spacing: .06em; line-height: 1; position: relative; z-index: 1; }
.tyog-sub { margin: 10px 0 0; font-size: clamp(16px, 1.8vw, 21px); letter-spacing: .02em; color: var(--bone); position: relative; z-index: 1; }
.tyog-sky { display: block; width: calc(100% + 2 * var(--gutter)); height: auto; margin: clamp(-20px, -2vw, -8px) calc(-1 * var(--gutter)) 0; position: relative; z-index: 2; }

/* Formats */
.tyog-lower { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 5vw, 56px); align-items: start; padding: 0 var(--gutter) clamp(32px, 5vw, 64px); }
.tyog-cover { display: block; width: clamp(200px, 28vw, 340px); max-width: 100%; height: auto; margin-top: clamp(-110px, -9vw, -40px); position: relative; z-index: 3; box-shadow: 0 24px 60px rgba(0, 0, 0, .8), 0 0 60px rgba(142, 17, 24, .45); }
.tyog-tix { display: grid; gap: 14px; padding-top: clamp(12px, 3vw, 32px); }
.tyog-tik { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 18px 20px; background: var(--card); border-left: 6px solid var(--red); }
.tyog-tik h2 { margin: 0; font-size: 17px; font-weight: 700; color: var(--white); }
.tyog-when { grid-column: 1; margin: 0; font-size: 15px; color: var(--white); }
.tyog-price { grid-row: 1 / span 2; grid-column: 2; margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.5vw, 44px); line-height: 1; text-align: right; white-space: nowrap; }
.tyog-btn { grid-column: 1 / -1; justify-self: start; display: inline-block; margin-top: 6px; padding: 12px 22px; background: var(--white); color: var(--black); border: 0; font: 700 15px/1.2 var(--body); cursor: pointer; }
.tyog-btn:hover { background: var(--bone); }
/* Button text: black on the white buttons. Needs this specificity to beat ".tyog a". */
.tyog a.tyog-btn, .tyog a.tyog-btn:hover { color: var(--black); }
.tyog-btn-red { background: var(--red); color: var(--white); }
.tyog-btn-red:hover { background: var(--red-hi); }

/* Signup */
.tyog-sign { background: var(--bone); color: var(--black); padding: clamp(28px, 5vw, 56px) var(--gutter); display: grid; gap: 16px; }
.tyog-sign h2 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(34px, 5vw, 56px); line-height: .9; }
.tyog-form { display: grid; gap: 14px; max-width: 620px; margin: 0; }
.tyog-field { display: grid; gap: 6px; font-size: 15px; font-weight: 500; }
.tyog-field input { padding: 12px 14px; border: 2px solid var(--black); background: var(--white); color: var(--black); font: 400 17px/1.3 var(--body); border-radius: 0; }
.tyog-field input:focus-visible, .tyog-consent input:focus-visible { outline-color: var(--red); }
.tyog-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.tyog-consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--red); }
.tyog-consent span { font-style: italic; }
.tyog-sign .tyog-btn { grid-column: auto; }

/* Footer */
.tyog-ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 22px; padding: 18px var(--gutter); font-size: 14px; color: var(--smoke); }
.tyog-ft nav { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.tyog-ft a:hover { color: var(--white); }
.tyog-ft .tyog-ft-copy { flex-basis: 100%; margin: 0; font-size: 13px; } /* Copyright line (owner, 11 October 2026) */

@media (max-width: 700px) {
	.tyog-lower { grid-template-columns: 1fr; }
	.tyog-cover { margin-inline: auto; width: min(70vw, 300px); }
	.tyog-brand { font-size: 17px; max-width: 16ch; }
	.tyog-outline { -webkit-text-stroke-width: 1.5px; }
}

/* Interim home page (before launch) */
.tyog-headline { margin: 0; max-width: 18ch; color: var(--white); font-family: var(--display); font-weight: 900; line-height: .95; font-size: clamp(40px, 7vw, 92px); text-wrap: balance; position: relative; z-index: 1; }
.tyog-formats { padding: clamp(8px, 2vw, 16px) var(--gutter) clamp(32px, 5vw, 64px); }
.tyog-formats .tyog-tix { max-width: 860px; }
.tyog-note { max-width: 860px; margin: 18px 0 0; color: var(--bone); font-size: 15px; }
.tyog-has-cover { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
.tyog-home-cover { display: block; width: clamp(200px, 26vw, 340px); height: auto; margin-top: clamp(-110px, -8vw, -40px); position: relative; z-index: 3; box-shadow: 0 24px 60px rgba(0, 0, 0, .8), 0 0 60px rgba(142, 17, 24, .45); }
@media (max-width: 700px) {
	.tyog-has-cover { grid-template-columns: 1fr; }
	.tyog-home-cover { width: min(70vw, 300px); margin-inline: auto; margin-top: -24px; }
}

/* Coming Soon page */
.tyog-soon { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 0 var(--gutter); background: linear-gradient(180deg, var(--red) 0%, #6a0c12 55%, var(--deep) 100%); overflow: hidden; }
.tyog-soon-inner { position: relative; z-index: 1; padding-bottom: clamp(80px, 14vw, 170px); }
.tyog-soon-brand { margin: 0; font-size: clamp(24px, 4vw, 40px); }
.tyog-soon-title { margin: clamp(16px, 3vw, 32px) 0 0; font-family: var(--display); font-weight: 900; font-size: clamp(64px, 18vw, 200px); line-height: .85; letter-spacing: -.01em; text-transform: uppercase; color: var(--white); }
.tyog-soon-sky { position: absolute; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: clamp(70px, 14vw, 170px); }
.tyog .tyog-btn-closed { background: transparent; color: var(--bone); border: 1px solid var(--smoke); cursor: default; }

/* Header: uppercase site name and "PRE-ORDER NOW" button (owner, 7 October 2026) */
html { scroll-behavior: smooth; }
#formats { scroll-margin-top: 16px; }
.tyog-brand { text-transform: uppercase; }
/* Hover changes colour only: a hover rule that repeats the layout overrides the phone layout below and makes the first tap miss. */
.tyog .tyog-hd-cta { flex: none; padding: 10px 16px; background: var(--white); color: var(--black); font: 700 14px/1 var(--body); letter-spacing: .06em; white-space: nowrap; }
.tyog .tyog-hd-cta:hover { background: var(--bone); color: var(--black); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Header: PRE-ORDER NOW, Cart and the menu button; the pages are in the menu
   (owner, 15 October 2026). On phones PRE-ORDER NOW keeps the full bottom line. */
.tyog-hd { position: relative; }
.tyog-hd-actions { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); margin-left: auto; }
.tyog-hd-cart { font-weight: 500; font-size: 15px; }
.tyog-hd-cart:hover { text-decoration: underline; text-underline-offset: 4px; }
.tyog-menu > summary { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -4px -10px -4px 0; list-style: none; cursor: pointer; }
.tyog-menu > summary::-webkit-details-marker { display: none; }
.tyog-menu > summary:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
.tyog-burger-bars, .tyog-burger-bars::before, .tyog-burger-bars::after { display: block; width: 24px; height: 2px; background: var(--white); }
.tyog-burger-bars { position: relative; }
.tyog-burger-bars::before, .tyog-burger-bars::after { content: ""; position: absolute; left: 0; }
.tyog-burger-bars::before { top: -7px; }
.tyog-burger-bars::after { top: 7px; }
.tyog-menu[open] .tyog-burger-bars { background: transparent; }
.tyog-menu[open] .tyog-burger-bars::before { top: 0; transform: rotate(45deg); }
.tyog-menu[open] .tyog-burger-bars::after { top: 0; transform: rotate(-45deg); }
.tyog-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tyog-menu-panel { position: absolute; top: 100%; right: var(--gutter); z-index: 50; min-width: 260px; padding: 6px 0; background: var(--black); border-top: 4px solid var(--white); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.tyog-menu-panel a { display: block; padding: 14px 22px; font-weight: 700; font-size: 16px; color: var(--white); border-bottom: 1px solid #2a2224; }
.tyog-menu-panel a:last-child { border-bottom: 0; }
.tyog-menu-panel a:hover, .tyog-menu-panel a:focus-visible { background: var(--red); outline-offset: -3px; }
@media (max-width: 700px) {
	.tyog-hd { flex-wrap: wrap; }
	.tyog-hd-actions { display: contents; }
	.tyog-hd-cart { margin-left: auto; }
	.tyog-menu-panel { left: 0; right: 0; min-width: 0; }
	.tyog .tyog-hd-cta { order: 3; flex-basis: 100%; text-align: center; padding: 12px 16px; }
}