@font-face { font-family: "Shoulders"; src: url(/fonts/big-shoulders-display-latin-900-normal.woff2) format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Shoulders"; src: url(/fonts/big-shoulders-display-latin-800-normal.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Schibsted"; src: url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }

@property --paper { syntax: "<color>"; inherits: true; initial-value: #f2b705; }
@property --ink { syntax: "<color>"; inherits: true; initial-value: #1b1712; }

:root {
	--mustard: #f2b705;
	--cobalt: #0f3fd0;
	--sticker: #e8341c;
	--char: #1b1712;
	--gutter: clamp(16px, 3vw, 40px);
	font-family: Schibsted, system-ui, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: var(--char);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 4rem; }
body { margin: 0; background: #fff; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentcolor; outline-offset: 3px; }
h1, h2 { font-family: Shoulders, Impact, sans-serif; font-weight: 900; line-height: 0.88; margin: 0; }
h2 { font-size: clamp(3rem, 8.5vw, 8.5rem); }
h3 { font-size: 1.1rem; margin: 0 0 0.75rem; }

.skip { left: -999px; position: absolute; }
.skip:focus { background: #fff; left: 8px; padding: 0.5rem; top: 8px; z-index: 20; }

.bar {
	align-items: center;
	color: var(--bar-ink, var(--char));
	display: flex;
	gap: 1.5rem;
	inset: 0 0 auto;
	padding: 0.9rem var(--gutter);
	position: absolute;
	transition: color 0.9s;
	z-index: 10;
}
.mark { font-weight: 800; text-decoration: none; }
.bar nav { display: flex; gap: 1.25rem; margin-inline-start: auto; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }
.cart { font-size: 0.85rem; white-space: nowrap; }
.cart-n { display: inline-block; font-weight: 800; }
.cart-n.bump { animation: bump 0.4s; }
@keyframes bump { 40% { transform: scale(1.8) rotate(-8deg); } }

/* The hero: the paper is the page, and the slider sets it. */
.hero {
	--title: min(8.1vw, 30svh);

	background: var(--paper);
	color: var(--ink);
	display: grid;
	gap: 0 var(--gutter);
	grid-template:
		"title  title" auto
		"ticket slider" 1fr
		"tags   tags" auto / minmax(16rem, 1fr) minmax(0, 2.4fr);
	height: 100svh;
	min-height: 40rem;
	overflow: clip;
	padding: 3.4rem var(--gutter) 1rem;
	position: relative;
	transition: --paper 0.9s ease, --ink 0.9s ease;
}
.hero h1 {
	font-size: var(--title);
	grid-area: title;
	letter-spacing: -0.01em;
	pointer-events: none;
	position: relative;
	white-space: nowrap;
	z-index: 3;
}
.hero-slider {
	--gs-per-view: 1;
	align-self: stretch;
	cursor: grab;
	grid-area: slider;
	margin-block-start: calc(var(--title) * -0.3);
	min-height: 0;
	z-index: 1;
}
.hero-slider .gs-track, .hero-slider .gs-slide { height: 100%; }
.hero-slider img { height: 100%; object-fit: cover; width: 100%; }
.ticket { align-self: end; grid-area: ticket; padding-block: 1rem; position: relative; z-index: 2; }
.ticket-name { font-weight: 600; margin: 0; }
.price {
	display: flex;
	font-family: Shoulders, Impact, sans-serif;
	font-size: clamp(3.5rem, min(9vw, 16svh), 9rem);
	font-variant-numeric: tabular-nums;
	font-weight: 900;
	line-height: 1;
	margin: 0 0 0.75rem;
}
.price .digit { display: inline-block; height: 1em; overflow: hidden; text-align: center; width: 0.5em; }
.price .reel { display: block; transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.2, 1); }
.price .reel span { display: block; height: 1em; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.buy, .pause, .download {
	border: 2px solid currentcolor;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.6rem 1rem;
}
.buy { background: var(--ink); border-color: var(--ink); color: var(--paper); transition: transform 0.15s; }
.buy:active { transform: translateY(2px); }
.pause { background: none; color: inherit; }
.step { align-items: center; display: inline-flex; justify-content: center; padding-inline: 0.8em; }
.step svg { display: block; height: 1.15em; width: 1.15em; }
.tags { grid-area: tags; padding-block-start: 1rem; position: relative; z-index: 2; }
.tags p { font-size: 0.85rem; margin: 0 0 0.5rem; }
.tag-rail { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }

.tag {
	background: none;
	border: 0;
	border-block-end: 2px solid transparent;
	color: inherit;
	cursor: pointer;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	opacity: 0.72;
	padding: 0.25rem 0.1rem;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.tag:hover { opacity: 1; }
.tag[aria-pressed="true"] { border-block-end-color: currentColor; opacity: 1; }
.tag:focus-visible { outline-offset: 1px; }

.intro {
	align-items: end;
	display: grid;
	gap: 2rem var(--gutter);
	grid-template-columns: minmax(0, 46rem) auto;
	justify-content: space-between;
	padding: clamp(3rem, 8vw, 7rem) var(--gutter);
}
.intro p { font-size: clamp(1.25rem, 2.4vw, 2rem); line-height: 1.3; margin: 0; }
.download { background: var(--sticker); border-color: var(--sticker); color: #fff; display: inline-block; text-decoration: none; white-space: nowrap; }
.download:hover { background: var(--char); border-color: var(--char); }

/* Each layout on its own roll of paper. */
.band { background: var(--paper); color: var(--ink); overflow: clip; padding: clamp(3rem, 6vw, 6rem) 0; transition: --paper 0.9s ease, --ink 0.9s ease; }
.band-head {
	align-items: center;
	display: grid;
	gap: 0.75rem 1.5rem;
	grid-template-columns: minmax(0, 1fr) auto;
	margin-block-end: clamp(1.5rem, 3vw, 3rem);
	padding-inline: var(--gutter);
}
.band-head p { grid-column: 1; margin: 0; max-width: 34rem; }
.band-head .sticker { grid-column: 2; grid-row: 1; }

/* A price-gun sticker. */
.sticker {
	align-items: center;
	border-radius: 50%;
	display: flex;
	font-family: Shoulders, Impact, sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	height: 4rem;
	justify-content: center;
	rotate: -12deg;
	width: 4rem;
}
.sticker.free { background: var(--ink); color: var(--paper); }
.sticker.pro { background: var(--sticker); color: #fff; }

.product figcaption { align-items: baseline; display: flex; flex-wrap: wrap; gap: 0.1rem 0.75rem; justify-content: space-between; padding-block-start: 0.5rem; }
.product figure { margin: 0; }
.product img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.product .p { font-family: Shoulders, Impact, sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.product figcaption { align-items: baseline; display: grid; gap: 0.5rem; grid-template-columns: minmax(0, 1fr) auto; }
.product .n { font-size: 0.9rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product .buy { font-size: 0.8rem; margin-block-start: 0.5rem; padding: 0.3rem 0.7rem; width: 100%; }

.row { --gs-per-view: 1.3; --gs-gap: 12px; cursor: grab; margin-inline: var(--gutter) 0; }
.stage { padding-block: 1rem; position: relative; }
.flow figcaption, .grid figcaption { display: none; }
.flow .buy { display: none; }
.flow-caption { align-items: baseline; display: flex; gap: 0.75rem; justify-content: center; margin: 0.75rem 0 0; }
.flow-caption b { font-family: Shoulders, Impact, sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.flow { --gs-per-view: 1; cursor: grab; margin-inline: auto; overflow: visible; width: min(68vw, 30rem); }
.grid { --gs-per-view: 2; --gs-gap: 8px; margin-inline: var(--gutter); }
.grid .product img { aspect-ratio: 1; }
.tick { --gs-per-view: 2.2; --gs-gap: 8px; }
.tick .product img { aspect-ratio: 1; }
@media (min-width: 720px) {
	.row { --gs-per-view: 3.4; }
	.grid { --gs-per-view: 4; }
	.tick { --gs-per-view: 6; }
}

/* The till. */
.till {
	align-items: start;
	background: var(--char);
	color: #fff;
	display: grid;
	gap: 3rem var(--gutter);
	grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 22rem);
	padding: clamp(3rem, 7vw, 7rem) var(--gutter);
}
.till-text p { margin: 1rem 0 0; max-width: 38rem; }
.till-text h2 { margin-block-end: 1.5rem; }
.note { color: var(--mustard); font-weight: 600; }
.receipt {
	--z: 10px;
	background: #fff;
	color: var(--char);
	font-variant-numeric: tabular-nums;
	mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--z) calc(var(--z) / 2) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--z) / 2 + 1px) no-repeat;
	padding: 1.25rem 1.25rem 2rem;
	position: sticky;
	rotate: 1.2deg;
	top: 2rem;
}
.receipt-head { border-bottom: 2px dashed #0004; font-weight: 800; margin: 1rem 0 0.25rem; padding-block-end: 0.25rem; }
.receipt-head:first-child { margin-block-start: 0; }
.receipt dl { margin: 0; }
.receipt dl div { display: flex; justify-content: space-between; padding-block: 0.15rem; }
.receipt dd { font-weight: 700; margin: 0; }
.receipt dd.tick-up { animation: bump 0.35s; }
.barcode { background: repeating-linear-gradient(90deg, #000 0 2px, #0000 2px 5px, #000 5px 6px, #0000 6px 10px); height: 3rem; margin-block-start: 1.25rem; }

.plans { padding: clamp(3rem, 7vw, 7rem) var(--gutter); }
.plan-columns { display: grid; gap: 2rem var(--gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-block-start: 2rem; }
.plan-columns ul { margin: 0; padding-inline-start: 1.1rem; }
.plan-columns li { margin-block-end: 0.45rem; max-width: 34rem; }
.price-note { font-weight: 700; margin-block-start: 1rem; }
.again { margin-block-start: clamp(3rem, 7vw, 6rem); }
.lede { margin-block: 1rem 1.5rem; max-width: 40rem; }
table { border-collapse: collapse; width: 100%; }
th, td { border-block-end: 2px solid var(--char); padding: 0.6rem 0.75rem 0.6rem 0; text-align: start; }
thead th { font-size: 0.9rem; }
tbody th { font-weight: 500; }

.foot { background: var(--mustard); display: grid; gap: 1.5rem; justify-items: start; padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.foot p { font-size: 0.875rem; margin: 0; max-width: 46rem; }

@media (max-width: 780px) {
	.hero { grid-template: "title" auto "slider" minmax(50vh, 1fr) "ticket" auto "tags" auto / minmax(0, 1fr); --title: 19vw; height: auto; min-height: 100svh; }
	.hero h1 { white-space: normal; }
	.bar nav { display: none; }
	.cart { margin-inline-start: auto; }
	.band-head p { grid-column: 1 / -1; }
	.intro, .till { grid-template-columns: minmax(0, 1fr); }
	.receipt { position: static; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero, .band, .bar, .price .reel { transition: none; }
	.tag, .cart-n.bump, .receipt dd.tick-up { animation: none; transition: none; }
}