/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --concrete: #E1DFDA;     /* page ground                                    */
  --concrete-2: #D3D0CA;   /* alternate band                                 */
  --concrete-3: #C4C0B9;   /* rules and wells on the alternate band          */
  --paper: #F3F1ED;        /* cards                                          */
  --paper-2: #FBFAF7;      /* receipts, inputs                               */
  --ink: #161616;          /* black steel: type, buttons, footer             */
  --ink-2: #262626;

  /* Text */
  --text: var(--ink);
  --text-muted: #5C5853;   /* 5.3:1 on concrete, 4.6:1 on concrete-2         */
  --text-faint: #77736D;   /* large text and decoration only                 */
  --text-on-ink: #EDEBE6;
  --text-on-ink-muted: #A9A5A0;

  /* Accent and states */
  --bronze: #7D5629;       /* accent text on light grounds, 4.9:1            */
  --bronze-light: #C49A62; /* accent on ink and felt                         */
  --bronze-wash: rgba(125, 86, 41, 0.1);
  --danger: #A33A2E;
  --danger-wash: rgba(163, 58, 46, 0.09);
  --success: #2F6B44;
  --success-wash: rgba(47, 107, 68, 0.1);

  /* Lines */
  --line: rgba(22, 22, 22, 0.13);
  --line-strong: rgba(22, 22, 22, 0.28);
  --line-on-ink: rgba(237, 235, 230, 0.14);
  --line-hover: rgba(22, 22, 22, 0.45);
  --focus-ring: rgba(22, 22, 22, 0.12);
  --wash-1: rgba(22, 22, 22, 0.06);   /* loading shimmer                    */
  --wash-2: rgba(22, 22, 22, 0.11);

  /* What stays the same in both themes. Steel is for the surfaces that are
     dark whatever the screen (the photo hero, the name going past, the
     footer), chalk for the light things laid on them. --ink, by contrast,
     is "the strongest colour on this screen": black on the light theme,
     near-white on the dark one. */
  --steel: #161616;
  --chalk: #F3F1ED;
  --danger-solid: #A33A2E;  /* For rows that turn to --ink when pointed at: their quieter words. */
  --inverse-muted: #A9A5A0;
  --inverse-accent: #C49A62;

  color-scheme: light;

  /* Type: a quiet scale (13 14 16 18 20, then 22–28, 28–40, 32–56 on the
     largest screens), so the homepage headline is the only loud thing. */
  --font: 'Geologica', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --size-xs: 0.8125rem;    /* 13 */
  --size-sm: 0.875rem;     /* 14 */
  --size-base: 1rem;       /* 16 */
  --size-md: 1.125rem;     /* 18 */
  --size-lg: 1.25rem;      /* 20 */
  --size-xl: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  --size-2xl: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --size-3xl: clamp(2rem, 1.2rem + 2.8vw, 3.5rem);
  --track-display: -0.035em;
  --track-heading: -0.03em;
  --leading-body: 1.6;

  /* Space and layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(3.5rem, 2.2rem + 4.4vw, 6.5rem);
  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --max-width: 82.5rem;    /* 1320px */
  --measure: 64ch;

  /* Shape */
  --radius-sm: 3px;        /* controls                                       */
  --radius: 6px;           /* cards                                          */
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.03), 0 24px 48px -30px rgba(22, 22, 22, 0.38);

  /* Motion. --ease-out settles like something put down; --ease-cut is a
     blade: quick in, dead stop. */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cut: cubic-bezier(0.7, 0, 0.2, 1);
  --fast: 120ms;
  --normal: 200ms;
  --slow: 480ms;
}

/* The shop after closing: the same materials with the lights down. The
   ground is a warm near-black, cards a step lighter, type the off-white of
   the footer, bronze lifted so it still reads as money. Used when the
   visitor's phone or computer is set to dark, unless they chose light with
   the light/dark button; or when they chose dark. (The same values twice:
   once for the system setting, once for the choice.) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --concrete: #141312;
    --concrete-2: #1B1A18;
    --concrete-3: #34312D;
    --paper: #211F1D;
    --paper-2: #282624;
    --ink: #EDEBE6;
    --ink-2: #D8D4CD;
    --text-muted: #ADA9A3;
    --text-faint: #8A867F;
    --bronze: #CDA36B;
    --bronze-wash: rgba(205, 163, 107, 0.13);
    --danger: #E3806F;
    --danger-wash: rgba(227, 128, 111, 0.12);
    --success: #7CC394;
    --success-wash: rgba(124, 195, 148, 0.12);
    --line: rgba(237, 235, 230, 0.12);
    --line-strong: rgba(237, 235, 230, 0.26);
    --line-hover: rgba(237, 235, 230, 0.5);
    --focus-ring: rgba(237, 235, 230, 0.16);
    --wash-1: rgba(237, 235, 230, 0.05);
    --wash-2: rgba(237, 235, 230, 0.1);
    --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.25), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
    --steel: #0C0B0A;
    --inverse-muted: #5C5853;
    --inverse-accent: #7D5629;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --concrete: #141312;
  --concrete-2: #1B1A18;
  --concrete-3: #34312D;
  --paper: #211F1D;
  --paper-2: #282624;
  --ink: #EDEBE6;
  --ink-2: #D8D4CD;
  --text-muted: #ADA9A3;
  --text-faint: #8A867F;
  --bronze: #CDA36B;
  --bronze-wash: rgba(205, 163, 107, 0.13);
  --danger: #E3806F;
  --danger-wash: rgba(227, 128, 111, 0.12);
  --success: #7CC394;
  --success-wash: rgba(124, 195, 148, 0.12);
  --line: rgba(237, 235, 230, 0.12);
  --line-strong: rgba(237, 235, 230, 0.26);
  --line-hover: rgba(237, 235, 230, 0.5);
  --focus-ring: rgba(237, 235, 230, 0.16);
  --wash-1: rgba(237, 235, 230, 0.05);
  --wash-2: rgba(237, 235, 230, 0.1);
  --shadow-card: 0 1px 0 rgba(0, 0, 0, 0.25), 0 24px 48px -28px rgba(0, 0, 0, 0.7);
  --steel: #0C0B0A;
  --inverse-muted: #5C5853;
  --inverse-accent: #7D5629;
  color-scheme: dark;
}

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

* {
  margin: 0;
}

/* Hidden means hidden, even on an element whose class sets a display. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  background: var(--concrete);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   3. Utilities and layout
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 200;
  padding: var(--space-3) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-4);
}

.shell {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
}

.band {
  background: var(--concrete-2);
}

.section-head__title,
.h2 {
  font-size: var(--size-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--track-heading);
}

.section-head__intro {
  margin-top: var(--space-5);
  max-width: 34ch;
  color: var(--text-muted);
}

/* The one honest marker on sample content: a small stamp, not a banner. */
.chip {
  display: inline-block;
  padding: 0.38em 0.6em 0.3em;
  border: 1px solid color-mix(in srgb, var(--bronze) 45%, transparent);
  border-radius: 2px;
  color: var(--bronze);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* Heavy and tight over light and wide: the same lockup from the 26px header
   to the 64px footer, scaled from one property. */
.wordmark {
  --wordmark-size: 1.625rem;
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: var(--ink);
}

.wordmark__name {
  font-size: var(--wordmark-size);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.9;
  text-transform: uppercase;
  white-space: nowrap;
  transition: font-size var(--normal) var(--ease);
}

.wordmark__tagline {
  margin-top: calc(var(--wordmark-size) * 0.27);
  font-size: calc(var(--wordmark-size) * 0.35);
  font-weight: 500;
  letter-spacing: 0.44em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  transition: font-size var(--normal) var(--ease), margin-top var(--normal) var(--ease);
}

/* The header's wordmark steps down a size once the page is scrolled. */
.header.is-scrolled .wordmark {
  --wordmark-size: 1.375rem;
}

.wordmark--lg {
  --wordmark-size: clamp(2.25rem, 1.75rem + 1.6vw, 3rem);
}

.wordmark--on-ink {
  color: var(--text-on-ink);
}

.wordmark--on-ink .wordmark__tagline {
  color: var(--bronze-light);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--concrete) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--normal) var(--ease), background-color var(--normal) var(--ease);
}

.header.is-scrolled {
  background: color-mix(in srgb, var(--concrete) 97%, transparent);
  border-bottom-color: var(--line);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-5);
  transition: padding var(--normal) var(--ease);
}

.header.is-scrolled .header__inner {
  padding-block: var(--space-3);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-4), 2.2vw, var(--space-6));
}

.nav__link {
  position: relative;
  padding-block: var(--space-2);
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 2px;
  height: 1.5px;
  background: var(--ink);
  transition: right var(--normal) var(--ease);
}

.nav__link:hover,
.nav__link:focus-visible {
  color: var(--ink);
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  right: 0;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Two states side by side: both visible, the current one filled. */
.lang-switch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.lang-switch__btn {
  appearance: none;
  min-width: 40px;
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--size-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.lang-switch__btn:hover {
  color: var(--ink);
}

.lang-switch__btn.is-active {
  background: var(--ink);
  color: var(--paper);
}

.lang-switch--on-ink {
  border-color: var(--line-on-ink);
}

.lang-switch--on-ink .lang-switch__btn {
  color: var(--text-on-ink-muted);
}

.lang-switch--on-ink .lang-switch__btn:hover {
  color: var(--text-on-ink);
}

.lang-switch--on-ink .lang-switch__btn.is-active {
  background: var(--text-on-ink);
  color: var(--steel);
}

/* Light or dark. The icon is the theme a press switches to: a moon on the
   light theme, a sun on the dark one. Shown only with the script that makes
   it work (js/theme.js marks the page before it is drawn). */
.theme-toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.has-theme-toggle .theme-toggle {
  display: inline-flex;
}

.theme-toggle:hover {
  border-color: var(--line-hover);
  color: var(--ink);
}

.theme-toggle svg,
.nav__theme svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__sun {
  display: none;
}

:root[data-theme='dark'] .theme-toggle__sun {
  display: block;
}

:root[data-theme='dark'] .theme-toggle__moon {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .theme-toggle__sun {
    display: block;
  }

  :root:not([data-theme='light']) .theme-toggle__moon {
    display: none;
  }
}

/* Pressing it, the colours cross-fade for a moment rather than jump. */
@media (prefers-reduced-motion: no-preference) {
  .theme-switching *,
  .theme-switching *::before,
  .theme-switching *::after {
    transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
      border-color 0.35s var(--ease), fill 0.35s var(--ease), stroke 0.35s var(--ease) !important;
  }
}

.nav-toggle {
  display: none;
  appearance: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--normal) var(--ease);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before {
  top: -6px;
}

.nav-toggle__bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Only inside the phone menu sheet. Scoped to .nav so the general .btn rule,
   which comes later, cannot switch them back on at desktop width. */
.nav .nav__close,
.nav .nav__book,
.nav .nav__theme {
  display: none;
}

/* Light or dark, written out, in the menu sheet of the narrower phones, where
   the header has no room for the icon button. */
.nav__theme {
  appearance: none;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  margin-top: var(--space-2);
  padding: 0 var(--space-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.nav__theme:hover {
  border-color: var(--line-hover);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--size-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease),
    border-color var(--fast) var(--ease), transform var(--fast) var(--ease),
    box-shadow var(--fast) var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--ink);
  color: var(--paper);
}

.btn--primary:hover:not([disabled]) {
  background: var(--ink-2);
  border-color: var(--ink-2);
  transform: translateY(-1px);
  box-shadow: 0 12px 20px -14px rgba(22, 22, 22, 0.7);
}

.btn--primary:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: none;
}

.btn--secondary:hover:not([disabled]) {
  background: var(--ink);
  color: var(--paper);
}

.btn--ghost {
  border-color: transparent;
  color: var(--text-muted);
  padding-inline: var(--space-3);
}

.btn--ghost:hover:not([disabled]) {
  color: var(--ink);
}

.btn--danger {
  background: var(--danger-solid);
  border-color: var(--danger-solid);
  color: #fff;
}

.btn--danger:hover:not([disabled]) {
  background: #8C3127;
  border-color: #8C3127;
}

.btn--on-ink {
  border-color: var(--text-on-ink);
  color: var(--text-on-ink);
}

.btn--on-ink:hover:not([disabled]) {
  background: var(--text-on-ink);
  color: var(--steel);
}

/* The main action on a dark ground: paper, so it is read first. */
.btn--paper {
  background: var(--chalk);
  border-color: var(--chalk);
  color: var(--steel);
}

.btn--paper:hover:not([disabled]) {
  background: #fff;
  border-color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.9);
}

.btn--paper:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: none;
}

.btn--sm {
  min-height: 42px;
  padding: 0 var(--space-4);
  font-size: var(--size-xs);
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

/* Mid-request: the label stays where it is and a thin line runs underneath. */
.btn.is-busy {
  position: relative;
  pointer-events: none;
  overflow: hidden;
}

.btn.is-busy::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  animation: sweep 1s var(--ease) infinite;
}

@keyframes sweep {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

/* The shop's photo, edge to edge, darkened most where the words sit: along
   the bottom and towards the left. On it, the two-line headline on the left
   and, behind a bronze rule, the introduction and the two buttons on the
   headline's baseline. Narrower screens stack them. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(26rem, 66vh, 44rem);
  overflow: hidden;
  background: var(--steel);
  color: var(--text-on-ink);
}

.hero__photo,
.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__photo {
  z-index: -2;
}

.hero__photo img {
  object-fit: cover;
  /* The barber's face, his hands at work and the shop's sign sit a little
     above the middle of the picture; a wide screen keeps that band. */
  object-position: 50% 38%;
  /* As the page opens the room comes up out of the dark, settling from a
     little closer. */
  animation: photo-settle 2.2s var(--ease-out) both;
}

@keyframes photo-settle {
  from {
    opacity: 0.35;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Over the photo, the darkening. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* The photo is low-key already (black and white, a dark room), so above
   the words it is barely darkened: the barber's face and the sign stay in
   view. */
.hero::before {
  background:
    linear-gradient(
      to top,
      rgba(22, 22, 22, 0.95) 0%,
      rgba(22, 22, 22, 0.72) 34%,
      rgba(22, 22, 22, 0.18) 70%,
      rgba(22, 22, 22, 0.06) 100%
    ),
    linear-gradient(to right, rgba(22, 22, 22, 0.4) 0%, rgba(22, 22, 22, 0) 58%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(5rem, 2rem + 9vw, 9rem) clamp(2.75rem, 1.5rem + 3.5vw, 5rem);
}

/* The headline's column is its measure: the size is capped at 10.3% of the
   column, which keeps the longest line (Η ΚΟΥΛΤΟΥΡΑ ΣΟΥ., about 9.4em wide)
   on one line whatever the screen. */
.hero__title {
  container-type: inline-size;
  min-width: 0;
}

.hero__headline {
  /* Older browsers without container units keep the regular display size. */
  font-size: var(--size-3xl);
  font-size: min(clamp(2rem, 0.8rem + 4.6vw, 5.5rem), 10.3cqi);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--chalk);
}

.hero__headline span {
  display: block;
}

/* Each line is cut into view from the left, a thin bronze blade leading the
   edge; the second line follows the first. The text itself is never moved,
   so a browser that skips the animation shows the finished headline. */
.hero__line {
  position: relative;
  overflow: hidden;
  /* Room under the clip for the last letter's overhang and the tops of the
     capitals, taken back with the margins so the lines sit as before. */
  padding: 0.05em 0.08em 0.05em 0;
  margin-block: -0.05em;
}

.hero__line-text {
  clip-path: inset(0 100% 0 0);
  animation: cut-in 0.7s var(--ease-cut) forwards;
  animation-delay: 0.35s;
}

.hero__line::after {
  content: '';
  position: absolute;
  top: 6%;
  bottom: 6%;
  left: 0;
  width: 3px;
  background: var(--bronze-light);
  opacity: 0;
  animation: blade 0.7s var(--ease-cut) forwards;
  animation-delay: 0.35s;
}

.hero__line:nth-child(2) .hero__line-text,
.hero__line:nth-child(2)::after {
  animation-delay: 0.62s;
}

@keyframes cut-in {
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes blade {
  0% {
    left: 0;
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

.hero__foot {
  display: grid;
  justify-items: start;
  gap: var(--space-5);
  padding-left: var(--space-6);
  border-left: 2px solid var(--bronze-light);
  opacity: 0;
  animation: settle 0.6s var(--ease-out) forwards;
  animation-delay: 0.95s;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero :focus-visible {
  outline-color: var(--bronze-light);
}

/* The band under the hero: the name going past as on a lit sign. Pauses
   when pointed at. */
.ticker {
  overflow: hidden;
  background: var(--steel);
  color: var(--text-on-ink);
  border-top: 1px solid var(--line-on-ink);
}

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-run 70s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__run {
  display: flex;
  align-items: center;
  flex: none;
  padding-block: 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.44em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticker__name {
  font-weight: 800;
  letter-spacing: 0.18em;
}

.ticker__tag {
  color: var(--bronze-light);
}

/* A small bronze diamond between the words. */
.ticker__mark {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-inline: 1.6rem;
  background: var(--bronze-light);
  transform: rotate(45deg);
}

@keyframes ticker-run {
  to {
    transform: translateX(-50%);
  }
}

.hero__lead {
  max-width: 44ch;
  color: rgba(237, 235, 230, 0.86);
  font-size: var(--size-md);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   8. Price list
   -------------------------------------------------------------------------- */
.prices {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.prices .chip {
  margin-top: var(--space-5);
}

/* The price list as a white menu card on the concrete: a thin rule between
   services, the figures large with a small bronze euro sign. Each row is a
   link to the booking page, and it turns black when you point at it, tab to
   it or tap it. */
.price-list {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--paper-2);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(22, 22, 22, 0.06), 0 24px 48px -36px rgba(0, 0, 0, 0.35);
}

.price-list > .state {
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}

.price-list__item {
  --row-x: clamp(1.25rem, 3vw, 2rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 5.5rem;
  align-items: center;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  padding: var(--space-5) var(--row-x);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
  /* Printed one row after the other as the list comes in. */
  animation: row-in 0.45s var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Hairlines between services, inset from the edges of the card. */
.price-list__item + .price-list__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: var(--row-x);
  right: var(--row-x);
  border-top: 1px solid var(--line);
  transition: opacity 0.2s var(--ease);
}

.price-list__item:hover,
.price-list__item:focus-visible,
.price-list__item:active {
  background: var(--ink);
  color: var(--paper);
}

/* A black row needs no rule above or below it. */
.price-list__item:hover::after,
.price-list__item:focus-visible::after,
.price-list__item:active::after,
.price-list__item:hover + .price-list__item::after,
.price-list__item:focus-visible + .price-list__item::after,
.price-list__item:active + .price-list__item::after {
  opacity: 0;
}

.price-list__item:focus-visible {
  outline: 2px solid var(--inverse-accent);
  outline-offset: -2px;
}

.price-list__main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.price-list__name {
  font-size: var(--size-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.price-list__desc {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--size-sm);
  line-height: 1.45;
  transition: color 0.2s var(--ease);
}

.price-list__time {
  color: var(--text-muted);
  font-size: var(--size-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

/* The figure carries the weight; the euro sign sits small and raised, in
   the bronze kept for money. */
.price-list__price {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price-list__amount {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}

.price-list__euro {
  margin-top: 0.125rem;
  color: var(--bronze);
  font-size: var(--size-sm);
  font-weight: 700;
  line-height: 1;
  transition: color 0.2s var(--ease);
}

.price-list__item:hover .price-list__desc,
.price-list__item:focus-visible .price-list__desc,
.price-list__item:active .price-list__desc,
.price-list__item:hover .price-list__time,
.price-list__item:focus-visible .price-list__time,
.price-list__item:active .price-list__time {
  color: var(--inverse-muted);
}

.price-list__item:hover .price-list__euro,
.price-list__item:focus-visible .price-list__euro,
.price-list__item:active .price-list__euro {
  color: var(--inverse-accent);
}

/* Three across on a laptop or wider. Where only two fit, a last card left
   on its own takes the whole row rather than half of it. */
.team {
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: var(--space-5);
  margin-top: var(--space-7);
}

@container (min-width: 43.5rem) and (max-width: 65.99rem) {
  /* Across the whole row, a square photo would be enormous: the photo
     takes the left half instead, the name and services the right. */
  .team > .barber-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team > .barber-card:last-child:nth-child(odd) .barber-card__body {
    align-self: center;
  }
}

/* The photo across the whole card, the name and services under it. */
.barber-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--paper);
  border-radius: var(--radius);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.barber-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* Until there is a photograph, the barber's initials stand in for one; a
   portrait is never invented. */
.barber-card__face {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--steel);
  color: var(--text-on-ink);
  font-size: 4.5rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

/* A portrait cropped to the square keeps the face: its upper part shows. */
.barber-card__face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform 0.6s var(--ease-out);
}

.barber-card:hover .barber-card__face img {
  transform: scale(1.04);
}

.barber-card__body {
  padding: var(--space-5);
  min-width: 0;
}

.barber-card__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.barber-card__services {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
}

.barber-card__services li {
  padding: 0.3rem 0.55rem;
  background: var(--concrete);
  border-radius: 2px;
  color: var(--text-muted);
  font-size: var(--size-xs);
}

.barber-card__link {
  display: inline-block;
  margin-top: var(--space-4);
  font-size: var(--size-sm);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--fast) var(--ease), text-underline-offset var(--fast) var(--ease);
}

.barber-card__link:hover {
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Up to four photos laid out like prints on a table, each opening full
   screen. Runs straight on into Το κουρείο, which brings its own space above. The
   section is the size reference for the prints (cqi units below), so the
   whole arrangement scales as one piece and every print keeps its shape. */
.gallery {
  container-type: inline-size;
  padding-bottom: 0;
}

/* Prints on a table: a twelve-column board with short rows, each print
   placed on it so that some overlap a little, in a different arrangement
   for one, two, three or four photos. No gaps: the overlaps are the point. */
.prints {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: 3.5cqi;
}

.prints__head {
  position: relative;
  z-index: 0;
  align-self: end;
  padding-right: var(--space-5);
}

.prints__intro {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--size-md);
}

/* A print: the photo inside a white paper border, with a soft shadow on the
   concrete. Each lies at its own slight angle, as prints put down by hand
   do. Pointing at one picks it up off the pile. */
.prints__print {
  --tilt: 0deg;
  --lift: 0px;
  appearance: none;
  position: relative;
  display: block;
  min-width: 0;
  padding: clamp(0.3rem, 0.6cqi, 0.55rem);
  border: 0;
  border-radius: 2px;
  background: var(--paper-2);
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.1), 0 18px 36px -18px rgba(22, 22, 22, 0.45);
  cursor: zoom-in;
  transform: rotate(var(--tilt)) translateY(var(--lift));
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.prints__print--1 { --tilt: -1.4deg; }
.prints__print--2 { --tilt: 1.2deg; }
.prints__print--3 { --tilt: -0.8deg; }
.prints__print--4 { --tilt: 1.8deg; }

/* The first time the table is scrolled into view, the prints land on it
   one after the other: from a little above, turning as they settle. */
.prints.reveal .prints__print {
  opacity: 0;
  transform: rotate(calc(var(--tilt) * 4)) translateY(-28px) scale(1.04);
}

.prints.reveal.is-revealed .prints__print {
  opacity: 1;
  transform: rotate(var(--tilt)) translateY(var(--lift));
  transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), box-shadow 0.35s var(--ease);
  transition-delay: calc(var(--i, 0) * 0.13s), calc(var(--i, 0) * 0.13s), 0s;
}

/* Once landed, pointing at a print lifts it at once. */
.prints.reveal.is-revealed .prints__print:hover,
.prints.reveal.is-revealed .prints__print:focus-visible {
  transition-delay: 0s;
}

.prints__print img,
.prints__blank {
  display: block;
  width: 100%;
  height: 100%;
}

.prints__print img {
  object-fit: cover;
}

button.prints__print:hover,
button.prints__print:focus-visible {
  --lift: -8px;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(22, 22, 22, 0.1), 0 28px 48px -20px rgba(22, 22, 22, 0.55);
}

button.prints__print:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* A print waiting for its photo: the paper border round an empty frame
   with a faint camera, so it reads as a place for a picture. */
.prints__blank {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--concrete-2);
  color: var(--text-faint);
}

.prints__blank svg {
  width: 2rem;
  height: 2rem;
  opacity: 0.55;
}

/* Four: a large landscape top left, a tall one top right, a third laid
   across both, a small landscape bottom right, and the heading bottom left. */
.prints--n4 .prints__print--1 { grid-column: 1 / span 6; grid-row: 1 / span 9; z-index: 1; }
.prints--n4 .prints__print--2 { grid-column: 8 / span 4; grid-row: 2 / span 11; z-index: 1; }
.prints--n4 .prints__print--3 { grid-column: 5 / span 4; grid-row: 8 / span 9; z-index: 3; }
.prints--n4 .prints__print--4 { grid-column: 9 / span 4; grid-row: 12 / span 6; z-index: 2; }
.prints--n4 .prints__head { grid-column: 1 / span 4; grid-row: 11 / span 6; }

/* The full-screen viewer. */
.viewer {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 6vw, 6rem);
  border: 0;
  background: transparent;
  color: var(--text-on-ink);
}

.viewer[open] {
  display: grid;
  place-items: center;
}

.viewer::backdrop {
  background: rgba(22, 22, 22, 0.92);
}

.viewer__figure {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin: 0;
}

.viewer__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 10rem);
  border-radius: var(--radius-sm);
  object-fit: contain;
}

.viewer__caption {
  color: var(--text-on-ink-muted);
  font-size: var(--size-sm);
  text-align: center;
}

.viewer__btn {
  appearance: none;
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1.5px solid rgba(237, 235, 230, 0.4);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-on-ink);
  font-size: var(--size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.viewer__btn:hover {
  background: var(--text-on-ink);
  color: var(--steel);
}

.viewer__btn:focus-visible {
  outline: 2px solid var(--bronze-light);
  outline-offset: 2px;
}

.viewer__close {
  top: var(--space-4);
  right: var(--space-4);
}

.viewer__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--size-md);
}

.viewer__nav--prev {
  left: var(--space-4);
}

.viewer__nav--next {
  right: var(--space-4);
}

body.viewer-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   12. About and contact
   -------------------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
}

.about__lead {
  max-width: 46ch;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
}

/* The address and the ways to reach the shop on the left, the week's hours
   down the right. */
.facts {
  /* How many lines sit beside the hours (set by the page). */
  --beside: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

/* The lines take the rows they need at the top; whatever height the hours
   need beyond that goes into a last, empty row. */
.facts--with-hours {
  grid-template-rows: repeat(var(--beside), auto) 1fr;
}

.facts__hours {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: stretch;
}

/* A day to a line: the day, then its hours, lined up; today stands out. */
.hours {
  display: grid;
  gap: 2px;
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  white-space: normal;
}

.hours__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 3px 0;
  font-weight: 600;
}

.hours__time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hours__row.is-closed {
  color: var(--text-muted);
  font-weight: 500;
}

.hours__row.is-today {
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bronze-wash);
  color: var(--ink);
  font-weight: 800;
}

.facts > div {
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border-radius: var(--radius);
}

.facts dt {
  color: var(--text-muted);
  font-size: var(--size-xs);
}

.facts dd {
  margin: var(--space-1) 0 0;
  font-weight: 700;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.facts dd a {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.facts__place {
  display: grid;
  gap: var(--space-1);
}

.facts__map {
  justify-self: start;
  font-size: var(--size-sm);
  font-weight: 600;
}

.facts__soon {
  color: var(--text-faint);
  font-weight: 600;
}

.socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.map {
  margin-top: var(--space-5);
  aspect-ratio: 16 / 9;
  max-width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--concrete-2);
}

.map__consent {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-5);
}

.map__note {
  max-width: 48ch;
  color: var(--text-muted);
  font-size: var(--size-sm);
}

.map__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.map__more {
  font-size: var(--size-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------------
   13. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--steel);
  color: var(--text-on-ink);
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7);
  align-items: end;
  padding-block: var(--space-8) var(--space-6);
}

.footer__note {
  margin-top: var(--space-4);
  max-width: 36ch;
  color: var(--text-on-ink-muted);
  font-size: var(--size-sm);
}

.footer__side {
  display: grid;
  justify-items: end;
  gap: var(--space-5);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--size-sm);
}

.footer__links a {
  color: var(--text-on-ink-muted);
  text-decoration: none;
  transition: color var(--fast) var(--ease);
}

.footer__links a:hover {
  color: var(--text-on-ink);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line-on-ink);
  color: var(--text-on-ink-muted);
  font-size: var(--size-xs);
}

.footer :focus-visible {
  outline-color: var(--bronze-light);
}

/* The company's details, on its own line above the copyright. */
.footer__company {
  flex-basis: 100%;
}

.company-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
}

.company-line__item {
  display: flex;
  gap: 0.4em;
}

.company-line dd {
  margin: 0;
  color: var(--text-on-ink);
  overflow-wrap: anywhere;
}

/* A slim footer for the privacy and terms pages. */
.footer--slim .footer__bottom {
  border-top: 0;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.footer__bottom a {
  color: var(--text-on-ink-muted);
  text-decoration: none;
}

.footer__bottom a:hover {
  color: var(--text-on-ink);
}

/* Inner pages: a quiet way back to the homepage, beside the language switch. */
.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: var(--space-2);
  color: var(--text-muted);
  font-size: var(--size-sm);
  font-weight: 500;
  text-decoration: none;
}

.back-link:hover {
  color: var(--ink);
}

/* Not-found page */
.lost {
  padding-block: clamp(4rem, 3rem + 6vw, 9rem);
}

.lost__code {
  font-size: clamp(5rem, 3rem + 8vw, 8.5rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--concrete-3);
}

.lost .section-head__title {
  margin-top: var(--space-5);
}

/* --------------------------------------------------------------------------
   14. Shared states
   -------------------------------------------------------------------------- */
.state {
  padding: var(--space-5) 0;
  color: var(--text-muted);
  font-size: var(--size-sm);
}

.state--error {
  color: var(--danger);
}

.notice {
  max-width: var(--measure);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--ink);
  background: var(--paper);
  font-size: var(--size-sm);
}

.alert {
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--danger-wash);
  font-size: var(--size-sm);
  animation: alert-in 0.3s var(--ease-out);
}

@keyframes alert-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.skeleton {
  min-height: 1rem;
  background: linear-gradient(90deg, var(--wash-1), var(--wash-2), var(--wash-1));
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .hero__inner,
.prices,
.about {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__inner {
    gap: var(--space-5);
  }

  .hero__foot {
    padding-left: 0;
    border-left: 0;
  }

  /* Stacked, the words cover more of the picture, so more of it is
     darkened; the top still shows the room. */
  .hero::before {
    background: linear-gradient(
      to top,
      rgba(22, 22, 22, 0.95) 0%,
      rgba(22, 22, 22, 0.8) 48%,
      rgba(22, 22, 22, 0.28) 82%,
      rgba(22, 22, 22, 0.12) 100%
    );
  }

  

  .footer__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .footer__side {
    justify-items: start;
  }

  .footer__links {
    justify-content: flex-start;
  }
}

/* Phones and tablets: the links move into a menu sheet. The Greek labels
   need about 960px to sit on one line beside the buttons. */
@media (max-width: 60rem) {
  /* A blurred backdrop turns the header into the containing block for
     anything fixed inside it, which would trap the full-screen menu in the
     header strip. Phones and tablets get a solid header instead. */
  .header,
  .header.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--concrete);
  }

  .nav-toggle {
    display: inline-flex;
  }

  .header__actions .btn--primary {
    display: none;
  }

  /* The menu becomes a full-screen sheet. It fades in place rather than
     sliding in from off-screen, because an off-screen box still counts
     towards the page width and lets a phone drag the site sideways. */
  .nav {
    position: fixed;
    inset: 0;
    z-index: 150;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-8) var(--gutter);
    background: var(--concrete);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.75rem);
    transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease),
      visibility 0s linear var(--normal);
  }

  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--normal) var(--ease), transform var(--normal) var(--ease),
      visibility 0s linear 0s;
  }

  .nav__link {
    display: flex;
    align-items: center;
    min-height: 52px;
    color: var(--ink);
    font-size: var(--size-xl);
    font-weight: 800;
    letter-spacing: var(--track-heading);
  }

  .nav__link::after {
    display: none;
  }

  .nav .nav__close {
    display: inline-flex;
    position: absolute;
    top: var(--space-5);
    right: var(--gutter);
  }

  .nav .nav__book {
    display: inline-flex;
    margin-top: var(--space-5);
  }
}

@media (max-width: 48rem) {
  /* Phones: the heading on top, then the prints cascade down the screen,
     left and right in turn, each overlapping the one above a little. The
     same places whatever the number of photos. */
  .prints {
    grid-auto-rows: 6cqi;
  }

  .prints .prints__head { grid-column: 1 / -1; grid-row: 1 / span 5; align-self: start; }
  .prints .prints__print--1 { grid-column: 1 / span 9; grid-row: 6 / span 9; z-index: 1; }
  .prints .prints__print--2 { grid-column: 4 / span 9; grid-row: 13 / span 9; z-index: 2; }
  .prints .prints__print--3 { grid-column: 1 / span 8; grid-row: 21 / span 8; z-index: 3; }
  .prints .prints__print--4 { grid-column: 5 / span 8; grid-row: 27 / span 7; z-index: 4; }

  .viewer__nav {
    top: auto;
    bottom: var(--space-4);
    transform: none;
  }

  /* Phones: name and price on the first line, the minutes beneath. */
  .price-list__item {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'main price'
      'time time';
    align-items: start;
    row-gap: var(--space-2);
    padding-block: var(--space-4);
  }

  .price-list__main {
    grid-area: main;
  }

  .price-list__time {
    grid-area: time;
  }

  .price-list__price {
    grid-area: price;
  }

  .price-list__amount {
    font-size: 1.5rem;
  }

  .barber-card__body {
    padding: var(--space-4) var(--space-5);
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts--with-hours {
    grid-template-rows: none;
  }

  .facts__hours {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Phones. Inner pages: the wordmark already links home, so the back link
   gives its room to the light/dark button and the language switch. */
@media (max-width: 30rem) {
  .header__actions .back-link {
    display: none;
  }
}

/* Most phones: the homepage header keeps the language switch and the menu
   button; the light/dark button moves into the menu, with its name. */
@media (max-width: 25.5rem) {
  .has-theme-toggle .header__theme {
    display: none;
  }

  .has-theme-toggle .nav .nav__theme {
    display: inline-flex;
  }
}

/* Small phones (360px): tighter gaps. */
@media (max-width: 22.5rem) {
  .header__inner {
    gap: var(--space-3);
  }

  .header__actions {
    gap: var(--space-2);
  }
}

/* The narrowest (320px): the header wordmark a size down as well. */
@media (max-width: 21.5rem) {
  .header .wordmark {
    --wordmark-size: 1.375rem;
  }
}

body.nav-open {
  overflow: hidden;
}

@media print {
  .header,
  .footer,
  .btn,
  .skip-link {
    display: none !important;
  }

  :root:not(#print) {
    --concrete: #fff;
    --concrete-2: #fff;
    --concrete-3: #C4C0B9;
    --paper: #fff;
    --paper-2: #fff;
    --ink: #161616;
    --text-muted: #5C5853;
    --text-faint: #77736D;
    --bronze: #7D5629;
    --line: rgba(22, 22, 22, 0.13);
    --line-strong: rgba(22, 22, 22, 0.28);
    color-scheme: light;
  }

  body {
    background: #fff;
  }
}