/*==========================================================================*
 * Classic Barber — Higher Parr Street, St Helens
 *
 * Palette is taken from the materials of a traditional shop rather than from
 * a brand guideline: tiled petrol-green walls, porcelain basins, oxblood
 * leather, brass fittings. There are no photographs anywhere on this site —
 * we hold no rights to the shop's own pictures and stock photos of somebody
 * else's barbershop would be a lie — so type, colour and the pole carry it.
 *
 * ONE piece of ornament is allowed: the barber pole down the left edge.
 * Everything else stays disciplined. If something new wants to be decorative,
 * the answer is no.
 *==========================================================================*/

:root {
	--petrol:       #0E2E34;
	--petrol-deep:  #08211F;
	--petrol-line:  #1B4048;
	--porcelain:    #F3EFE7;
	--porcelain-dim:#C6C0B4;
	--oxblood:      #8E2230;
	--oxblood-lift: #B03040;
	--brass:        #C08F40;
	--ink:          #10171A;

	--pole-w: 14px;

	--display: "Bevan", "Clarendon", "Rockwell", Georgia, serif;
	--body:    "Archivo", "Helvetica Neue", Arial, sans-serif;

	/* One scale, used everywhere. Sizes clamp rather than switching at a
	   breakpoint, so the type keeps its proportions on any width. */
	--t-hero:  clamp(3.4rem, 15vw, 9rem);
	--t-h2:    clamp(1.9rem, 5.2vw, 3.1rem);
	--t-h3:    clamp(1.05rem, 2.4vw, 1.3rem);
	--t-body:  clamp(1rem, 1.9vw, 1.12rem);
	--t-small: 0.8rem;

	--gap:   clamp(1.25rem, 3vw, 2rem);
	--bleed: clamp(1.5rem, 6vw, 6rem);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	padding-left: var(--pole-w);
	background: var(--petrol);
	color: var(--porcelain);
	font-family: var(--body);
	font-size: var(--t-body);
	line-height: 1.6;
	overflow-x: hidden;
}

/*-- The pole ---------------------------------------------------------------*
 * A real barber pole reads as endlessly climbing because the helix is drawn
 * on a cylinder that turns — the stripes never actually go anywhere. That is
 * reproduced here by sliding a repeating gradient, not by rotating anything.
 *--------------------------------------------------------------------------*/
.pole {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--pole-w);
	background: var(--porcelain);
	border-right: 1px solid rgba(0, 0, 0, .35);
	overflow: hidden;
	z-index: 50;
}

.pole__helix {
	position: absolute;
	inset: -60% 0;
	background: repeating-linear-gradient(
		-58deg,
		var(--oxblood)  0px, var(--oxblood)  11px,
		var(--porcelain) 11px, var(--porcelain) 22px,
		var(--petrol-line) 22px, var(--petrol-line) 33px,
		var(--porcelain) 33px, var(--porcelain) 44px
	);
	animation: climb 2.6s linear infinite;
}

@keyframes climb { to { transform: translateY(44px); } }

/*-- Utility ----------------------------------------------------------------*/
.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: .8rem 1.2rem;
	background: var(--porcelain);
	color: var(--ink);
	font-weight: 600;
	z-index: 100;
}
.skip:focus { left: calc(var(--pole-w) + .5rem); }

:where(a, button, [tabindex]):focus-visible {
	outline: 3px solid var(--brass);
	outline-offset: 3px;
}

.label {
	margin: 0 0 .9rem;
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brass);
}

.link {
	color: inherit;
	text-decoration-color: var(--brass);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
.link:hover { color: var(--brass); }

/*-- Hero -------------------------------------------------------------------*/
.hero {
	padding: clamp(3.5rem, 11vh, 8rem) var(--bleed) clamp(3rem, 8vh, 5rem);
	border-bottom: 1px solid var(--petrol-line);
}

.eyebrow {
	margin: 0 0 clamp(1rem, 3vh, 2rem);
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--porcelain-dim);
}

/* The name is set as big as the viewport will take. It is a shopfront sign:
   on a real street it is the largest thing there, so it is here too. */
.hero__name {
	margin: 0;
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--t-hero);
	line-height: .84;
	letter-spacing: -.015em;
	text-transform: uppercase;
}

.hero__line { display: block; }
.hero__line--indent {
	color: var(--brass);
	padding-left: .14em;
}

.hero__pitch {
	max-width: 34ch;
	margin: clamp(1.5rem, 4vh, 2.4rem) 0 0;
	font-size: clamp(1.05rem, 2.6vw, 1.4rem);
	color: var(--porcelain);
}

/*-- Open / closed ----------------------------------------------------------*
 * The first question a haircut page has to answer is "can I go right now",
 * so it is answered in the hero instead of at the bottom next to the hours.
 *--------------------------------------------------------------------------*/
.status {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	margin: clamp(1.4rem, 3vh, 2rem) 0 0;
	padding: .5rem .95rem;
	border: 1px solid var(--petrol-line);
	border-radius: 999px;
	font-size: .92rem;
	font-weight: 500;
}

.status__dot {
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--porcelain-dim);
	flex: none;
}

.status[data-state="open"]   { border-color: #2C6E49; }
.status[data-state="open"] .status__dot { background: #57BB7E; }
.status[data-state="closed"] .status__dot { background: var(--oxblood-lift); }

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem;
	margin-top: clamp(1.6rem, 4vh, 2.4rem);
}

.hero__rating {
	margin: clamp(1.4rem, 3vh, 2rem) 0 0;
	font-size: .95rem;
	color: var(--porcelain-dim);
}
.hero__rating strong { color: var(--porcelain); }
.stars { color: var(--brass); letter-spacing: .1em; margin-right: .4rem; }

/*-- Buttons ----------------------------------------------------------------*/
.btn {
	display: inline-block;
	padding: .9rem 1.5rem;
	border: 2px solid transparent;
	border-radius: 2px;
	font-family: var(--body);
	font-size: 1rem;
	font-weight: 600;
	text-decoration: none;
	transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
	background: var(--oxblood);
	border-color: var(--oxblood);
	color: var(--porcelain);
}
.btn--primary:hover { background: var(--oxblood-lift); border-color: var(--oxblood-lift); }

.btn--ghost {
	border-color: var(--porcelain-dim);
	color: var(--porcelain);
}
.btn--ghost:hover { border-color: var(--porcelain); background: rgba(243, 239, 231, .08); }

.btn--block { display: block; margin-top: .6rem; text-align: center; }

/*-- Sections ---------------------------------------------------------------*
 * `.section` owns spacing. Modifiers only ever change colour, so a modifier
 * can never cancel the base padding — a common way these files rot.
 *--------------------------------------------------------------------------*/
.section {
	padding: clamp(3.5rem, 9vh, 6.5rem) var(--bleed);
	border-bottom: 1px solid var(--petrol-line);
}

.section--warm {
	background: var(--porcelain);
	color: var(--ink);
	border-bottom-color: var(--porcelain);
}

.section__h {
	margin: 0 0 clamp(1.6rem, 4vh, 2.4rem);
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--t-h2);
	line-height: 1.02;
	letter-spacing: -.01em;
}

.prose { max-width: 58ch; margin: 0 0 2rem; }

/*-- Clipper grades ---------------------------------------------------------*
 * Drawn at their real relative densities: a 0 is nearly skin, a 4 is four
 * times the length. Plenty of people sit down and say "the usual" because
 * nobody ever told them the vocabulary — this puts it on the wall.
 *--------------------------------------------------------------------------*/
.grades { margin: 0 0 clamp(2.5rem, 6vh, 3.5rem); }

.grades__intro { max-width: 46ch; margin: 0 0 1.4rem; color: var(--porcelain-dim); }

.grades__row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(.5rem, 1.6vw, 1rem);
	max-width: 34rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.grade { text-align: center; }

/* Hair standing on the scalp, drawn at its actual length. The comb spacing
   stays identical across all five so the ONLY thing that changes is height —
   which is the only thing that actually changes between guards. An earlier
   version varied the hatching density instead and read as a barcode, with
   the shortest cut appearing to have the most hair in it. */
.grade__swatch {
	display: block;
	height: clamp(3.2rem, 11vw, 4.6rem);
	margin-bottom: .6rem;
	border: 1px solid var(--petrol-line);
	border-bottom: 2px solid var(--brass);   /* the scalp */
	background-color: var(--petrol-deep);
	background-image: repeating-linear-gradient(
		90deg,
		var(--porcelain-dim) 0 2px,
		transparent 2px 5px
	);
	background-repeat: repeat-x;
	background-position: bottom;
}

.grade__swatch[data-grade="0"] { background-size: 100% 7%; }
.grade__swatch[data-grade="1"] { background-size: 100% 26%; }
.grade__swatch[data-grade="2"] { background-size: 100% 46%; }
.grade__swatch[data-grade="3"] { background-size: 100% 68%; }
.grade__swatch[data-grade="4"] { background-size: 100% 92%; }

.grade__n {
	display: block;
	font-family: var(--display);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--brass);
}
.grade__mm {
	display: block;
	font-size: .75rem;
	letter-spacing: .06em;
	color: var(--porcelain-dim);
}

/*-- Cuts -------------------------------------------------------------------*/
.cuts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cut {
	padding-top: 1.1rem;
	border-top: 2px solid var(--oxblood);
}

.cut__h {
	margin: 0 0 .5rem;
	font-family: var(--display);
	font-weight: 400;
	font-size: var(--t-h3);
	line-height: 1.15;
}

.cut__p { margin: 0; font-size: .97rem; color: var(--porcelain-dim); }

/*-- Quotes -----------------------------------------------------------------*/
.quote {
	max-width: 50ch;
	margin: 0 0 1.8rem;
	padding-left: 1.2rem;
	border-left: 3px solid var(--oxblood);
}
.quote blockquote { margin: 0; }
.quote p {
	margin: 0 0 .5rem;
	font-family: var(--display);
	font-size: clamp(1.1rem, 2.6vw, 1.4rem);
	font-style: italic;
	line-height: 1.35;
}
.quote figcaption {
	font-size: var(--t-small);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #6C6558;
}

/*-- Find us ----------------------------------------------------------------*/
.find {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--gap);
}

.find__card {
	padding: clamp(1.3rem, 3vw, 1.8rem);
	background: var(--petrol-deep);
	border: 1px solid var(--petrol-line);
}

.find__h {
	margin: 0 0 1rem;
	font-size: var(--t-small);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--brass);
}

.find__addr { font-style: normal; margin: 0 0 1rem; line-height: 1.7; }
.find__p { margin: 0 0 1rem; color: var(--porcelain-dim); font-size: .97rem; }

.hours { margin: 0; }

.hours__row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: .38rem 0;
	border-bottom: 1px solid rgba(27, 64, 72, .6);
	font-size: .95rem;
}
.hours__row:last-child { border-bottom: 0; }
.hours dt { color: var(--porcelain-dim); }
.hours dd { margin: 0; font-variant-numeric: tabular-nums; }

/* Today is marked so the reader finds their own row without counting. */
.hours__row[data-today="true"] { color: var(--brass); }
.hours__row[data-today="true"] dt { color: var(--brass); font-weight: 600; }

/*-- Footer -----------------------------------------------------------------*/
.foot {
	padding: clamp(2.5rem, 7vh, 4rem) var(--bleed);
	background: var(--petrol-deep);
}

.foot__name {
	margin: 0 0 .8rem;
	font-family: var(--display);
	font-size: 1.4rem;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.foot__legal {
	margin: 0 0 .4rem;
	font-size: .84rem;
	line-height: 1.7;
	color: var(--porcelain-dim);
}

/*-- Reveal on scroll -------------------------------------------------------*
 * Deliberately small: a short lift, once, on the section headings and cards.
 * Anything more and the page starts performing instead of informing.
 *--------------------------------------------------------------------------*/
.reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .5s ease, transform .5s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.pole__helix { animation: none; }
	.reveal { opacity: 1; transform: none; transition: none; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/*-- Narrow screens ---------------------------------------------------------*
 * The pole moves to the top on a phone: a 14px column stolen from a 360px
 * screen is a real cost, and the sign is what matters at that width.
 *--------------------------------------------------------------------------*/
@media (max-width: 40rem) {
	body { padding-left: 0; padding-top: 8px; }
	.pole { inset: 0 0 auto 0; width: auto; height: 8px; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.35); }
	.pole__helix { inset: 0 -60%; animation-name: climb-x; }
	.skip:focus { left: .5rem; top: 12px; }
	.hero__actions .btn { flex: 1 1 100%; text-align: center; }
	.grades__row { grid-template-columns: repeat(5, 1fr); gap: .35rem; }
	.grade__mm { font-size: .65rem; }
}

@keyframes climb-x { to { transform: translateX(44px); } }

@media print {
	.pole, .hero__actions, .skip { display: none; }
	body { background: #fff; color: #000; padding: 0; }
}