/* ==========================================================================
   Atelier Ranunculus: the one stylesheet for the whole site.

   1.  Design tokens   <- change colours, fonts and spacing here
   2.  Fonts           <- the font files in assets/fonts/
   3.  Base
   4.  Layout helpers
   5.  Header and menu
   6.  Buttons and links
   7.  Footer
   8.  Shared page parts
   9.  Home page
   10. Services page
   11. About page
   12. Contact page
   13. Text pages (privacy, 404, new page)
   14. Reduced motion
   ========================================================================== */


/* 1. Design tokens
   -------------------------------------------------------------------------
   Every colour, font and spacing on the site comes from this list.
   Change a value here and it changes everywhere. */

:root {
  /* EDIT: colours */
  --color-background: #f5f0e8;  /* Page background: warm off-white */
  --color-surface: #ebe3d6;     /* Footer and panels: one shade darker than the page */
  --color-text: #1e2b24;        /* Body text: almost black, with a hint of green */
  --color-text-soft: #4f5a52;   /* Captions and small print: softer, still easy to read */
  --color-primary: #23412f;     /* Deep green: headings, links and the dark sections */
  --color-on-primary: #f5f0e8;  /* Text on top of the deep green */
  --color-accent: #e8836b;      /* Ranunculus coral: buttons and decorations. Dark text sits on it, so keep it fairly light */
  --color-line: #d4c9b8;        /* Thin dividing lines */

  /* EDIT: fonts (the files are in assets/fonts/; see section 2 below) */
  --font-heading: "Site Heading", Georgia, serif;                   /* Headings and the business name (now Fraunces) */
  --font-body: "Site Body", "Helvetica Neue", Arial, sans-serif;    /* All other text (now Instrument Sans) */

  /* Text sizes */
  --text-small: 0.875rem;                                  /* Captions and the footer */
  --text-body: 1.0625rem;                                  /* Normal text (17px) */
  --text-lead: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);    /* Intro paragraphs: a little larger */

  /* Spacing, from small to large ("clamp" grows the space on bigger screens) */
  --space-xs: 0.5rem;                             /* Extra small: between a heading and its text */
  --space-s: 1rem;                                /* Small: between paragraphs */
  --space-m: 1.5rem;                              /* Medium: between buttons and list items */
  --space-l: clamp(2rem, 1.6rem + 2vw, 3rem);     /* Large: between blocks inside a section */
  --space-xl: clamp(3.5rem, 2.5rem + 5vw, 7rem);  /* Extra large: between page sections */
  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);      /* Space at the left and right edges of the screen */
  --max-width: 76rem;                             /* The widest the content gets */

  /* Shapes */
  --radius: 0.25rem;          /* Corner rounding of photos and panels */
  --radius-button: 999px;     /* Buttons are fully rounded */
}


/* 2. Fonts
   -------------------------------------------------------------------------
   The fonts are stored with the site in assets/fonts/, one file per style:
   nothing is loaded from Google or anywhere else.
   EDIT: fonts. To change a font, replace these files with new ones under
   the SAME names (see GUIDE.html). Nothing else needs to change.
   Now: Fraunces (heading-*.woff2) and Instrument Sans (body-*.woff2). */

/* Headings, normal */
@font-face {
  font-family: "Site Heading";
  src: url("../fonts/heading-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Headings, italic (the slanted words in headings and captions) */
@font-face {
  font-family: "Site Heading";
  src: url("../fonts/heading-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Text, normal */
@font-face {
  font-family: "Site Body";
  src: url("../fonts/body-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Text, semi-bold (buttons, labels, bold words) */
@font-face {
  font-family: "Site Body";
  src: url("../fonts/body-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}


/* 3. Base
   ------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
}

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

figure {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0 0 var(--space-s);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.6rem, 1.5rem + 5vw, 6rem);
  line-height: 1;
}

h2 {
  font-size: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
}

h3 {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  line-height: 1.2;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
}

p,
ul,
ol,
dl,
address {
  margin: 0 0 var(--space-s);
}

p {
  max-width: 38em;
  text-wrap: pretty;
}

address {
  font-style: normal;
}

strong {
  font-weight: 600;
}

a {
  color: var(--color-primary);
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-color: currentColor;
}

/* Keyboard focus: a clear outline on everything you can tab to */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* Hides text visually but keeps it for screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Skip to content" link: appears when you press Tab */
.skip-link {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: var(--color-on-primary);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}


/* 4. Layout helpers
   ------------------------------------------------------------------------- */

/* Centres content and keeps it away from the screen edges */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--max-width));
  margin-inline: auto;
}

/* Vertical breathing room between sections */
.section {
  padding-block: var(--space-xl);
}

.section + .section {
  padding-top: 0;
}

/* Small label above a heading */
.eyebrow {
  margin-bottom: var(--space-s);
  color: var(--color-text-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Larger intro paragraph */
.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
}

/* Photo captions */
figcaption {
  margin-top: 0.6rem;
  color: var(--color-text-soft);
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-style: italic;
}

/* Photos keep their shape and fill their space without stretching */
.photo img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}


/* 5. Header and menu
   ------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--color-line);
}

.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-s);
  min-height: 4.5rem;
}

/* The business name, top left. The flower mark is drawn in the accent colour. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 0.8rem + 1.2vw, 1.375rem);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.logo::before {
  content: "";
  flex: none;
  width: 1.4em;
  height: 1.4em;
  background: var(--color-accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='16' cy='17.5' r='13'/%3E%3Ccircle cx='16' cy='15.5' r='8'/%3E%3C/g%3E%3Ccircle cx='16' cy='14.5' r='3.4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Menu button: only on small screens */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/* Three-line menu icon */
.menu-toggle::before {
  content: "";
  width: 1rem;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}

.menu-toggle[aria-expanded="true"] {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* The menu is closed until the button opens it */
.site-nav {
  display: none;
  flex-basis: 100%;
}

.menu-toggle[aria-expanded="true"] + .site-nav {
  display: block;
}

.nav-list {
  margin: 0;
  padding: 0 0 var(--space-m);
  list-style: none;
}

.nav-list a {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  border-top: 1px solid var(--color-line);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  text-decoration: none;
}

.nav-list a[aria-current="page"] {
  font-style: italic;
}

/* Without JavaScript there is no menu button: show the links as a simple row */
@media (scripting: none) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: block;
  }

  .nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-m);
    padding-bottom: var(--space-xs);
  }

  .nav-list a {
    min-height: 44px;
    border-top: 0;
    font-family: var(--font-body);
    font-size: 1rem;
  }
}

/* Larger screens: the links sit next to the name, no menu button */
@media (min-width: 48em) {
  .menu-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    flex-basis: auto;
  }

  .nav-list {
    display: flex;
    gap: var(--space-l);
    padding: 0;
  }

  .nav-list a {
    min-height: 44px;
    border-top: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    text-decoration: underline 2px transparent;
    text-underline-offset: 0.4em;
  }

  .nav-list a:hover,
  .nav-list a[aria-current="page"] {
    text-decoration-color: var(--color-accent);
  }

  .nav-list a[aria-current="page"] {
    font-style: normal;
  }
}


/* 6. Buttons and links
   ------------------------------------------------------------------------- */

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-m);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}

.button:hover {
  border-color: color-mix(in srgb, var(--color-accent) 70%, white);
  background: color-mix(in srgb, var(--color-accent) 70%, white);
}

/* Outlined button: takes the text colour of the section it is in */
.button-outline {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.button-outline:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Link with an arrow, e.g. "All services and prices" */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  font-weight: 600;
}

.arrow-link::after {
  content: "";
  flex: none;
  width: 1.4em;
  height: 0.9em;
  background: var(--color-accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 14'%3E%3Cpath d='M14 1.5 19.5 7 14 12.5M19 7H1' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* 7. Footer
   ------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-xl) var(--space-l);
  background: var(--color-surface);
  font-size: var(--text-small);
}

.footer-grid {
  display: grid;
  gap: var(--space-l) var(--space-m);
}

.footer-name {
  margin-bottom: var(--space-xs);
  color: var(--color-primary);
  font-family: var(--font-heading);
  font-size: 1.75rem;
  line-height: 1.1;
}

.footer-heading {
  margin-bottom: var(--space-xs);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.footer-meta {
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
  color: var(--color-text-soft);
}

.footer-meta p {
  max-width: none;
  margin-bottom: var(--space-xs);
}

.footer-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }
}


/* 8. Shared page parts
   ------------------------------------------------------------------------- */

/* Big heading at the top of the inner pages */
.page-intro {
  padding-block: var(--space-xl) var(--space-l);
}

.page-intro h1 {
  max-width: 14em;
}

@media (min-width: 64em) {
  .page-intro .lead {
    margin-left: calc(100% / 12 * 5);
  }
}

/* Opening hours list (home and contact page) */
.hours {
  max-width: 26rem;
}

.hours-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-m);
  padding-block: 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}

.hours dt {
  font-weight: 600;
}

.hours dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Address, phone and email list (contact page) */
.contact-block {
  margin-bottom: var(--space-l);
}

.contact-block h2 {
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.2rem);
}

.contact-block a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Closing call to action at the bottom of inner pages */
.closing {
  padding-block: var(--space-xl);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.closing h2 {
  color: var(--color-on-primary);
}

.closing a:not(.button) {
  color: var(--color-on-primary);
}

.closing :focus-visible,
.visit :focus-visible {
  outline-color: var(--color-accent);
}


/* 9. Home page
   ------------------------------------------------------------------------- */

/* Hero: heading on the left, photo running off the right edge of the screen */
.hero {
  display: grid;
  grid-template-columns: var(--gutter) minmax(0, 1fr) var(--gutter);
  row-gap: var(--space-l);
  padding-block: var(--space-l) var(--space-xl);
}

.hero-text {
  grid-column: 2;
}

.hero-figure {
  position: relative;
  grid-column: 2 / 4;
}

.hero-figure img {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* Coral block peeking out behind the photo */
.hero-figure::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--space-s));
  left: calc(-1 * var(--space-s));
  z-index: -1;
  width: 45%;
  height: 55%;
  background: var(--color-accent);
  border-radius: var(--radius);
}

.hero-figure figcaption {
  padding-right: var(--gutter);
}

@media (min-width: 48em) {
  .hero {
    grid-template-columns:
      minmax(var(--gutter), 1fr)
      repeat(12, minmax(0, calc(var(--max-width) / 12)))
      minmax(var(--gutter), 1fr);
    align-items: center;
    padding-top: var(--space-xl);
  }

  .hero-text {
    grid-row: 1;
    grid-column: 2 / span 6;
    padding-right: var(--space-l);
  }

  .hero-figure {
    grid-row: 1;
    grid-column: 8 / -1;
  }

  .hero-figure img {
    height: clamp(26rem, 78vh, 50rem);
    aspect-ratio: auto;
  }

  .hero-figure::before {
    top: calc(-1 * var(--space-l));
    left: calc(-1 * var(--space-l));
    width: 40%;
    height: 50%;
  }
}

/* What we make: numbered list next to the section heading */
.highlights {
  display: grid;
  gap: var(--space-l);
}

.highlight-list {
  display: grid;
  gap: 0 var(--space-l);
  padding: 0;
  list-style: none;
  counter-reset: highlight;
}

.highlight {
  padding-block: var(--space-m);
  border-top: 1px solid var(--color-line);
  counter-increment: highlight;
}

.highlight::before {
  content: counter(highlight, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--color-text-soft);
  font-family: var(--font-heading);
  font-style: italic;
}

.highlight p {
  margin: 0;
}

@media (min-width: 48em) {
  .highlight-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64em) {
  .highlights {
    grid-template-columns: 4fr 1fr 7fr;
    align-items: start;
  }

  .highlights-intro {
    position: sticky;
    top: var(--space-l);
  }

  .highlight-list {
    grid-column: 3;
  }
}

/* Gallery: photos in a staggered row. Copy a <figure> block to add a photo. */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-l) var(--space-s);
  margin-top: var(--space-l);
}

.gallery-item img {
  aspect-ratio: 4 / 5;
}

.gallery-item:nth-child(even) {
  margin-top: var(--space-l);
}

@media (min-width: 64em) {
  .gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-m);
    align-items: start;
  }

  .gallery-item:nth-child(4n + 2) {
    margin-top: var(--space-l);
  }

  .gallery-item:nth-child(4n + 3) {
    margin-top: var(--space-s);
  }

  .gallery-item:nth-child(4n + 4) {
    margin-top: var(--space-xl);
  }
}

/* Short story: photo and text side by side */
.story {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.story-figure img {
  aspect-ratio: 4 / 5;
}

/* On phones, photos next to text sit at three-quarter width, against the
   right edge. From tablet width they fill their column again. */
.story-figure,
.owner-figure,
.contact-figure {
  width: 75%;
  margin-left: auto;
}

@media (min-width: 48em) {
  .story-figure,
  .owner-figure {
    width: auto;
    margin-left: 0;
  }
}

@media (min-width: 64em) {
  .contact-figure {
    width: auto;
    margin-left: 0;
  }
}

@media (min-width: 48em) {
  .story {
    grid-template-columns: 5fr 1fr 6fr;
  }

  .story-figure {
    grid-column: 1;
  }

  .story-text {
    grid-column: 3;
  }
}

/* Visit: the deep green block with opening hours and buttons */
.visit {
  padding-block: var(--space-xl);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.visit h2,
.visit h3 {
  color: var(--color-on-primary);
}

.visit-inner {
  display: grid;
  gap: var(--space-l);
}

.visit-hours h3 {
  font-size: 1.5rem;
}

@media (min-width: 64em) {
  .visit-inner {
    grid-template-columns: 7fr 1fr 4fr;
    align-items: end;
  }

  .visit-hours {
    grid-column: 3;
  }
}


/* 10. Services page
   ------------------------------------------------------------------------- */

.services-layout {
  display: grid;
  gap: var(--space-l);
}

/* One service: name, price and description. Copy an <article> to add one. */
.service {
  padding-block: var(--space-m) var(--space-s);
  border-top: 1px solid var(--color-line);
}

.service h2 {
  margin-bottom: var(--space-xs);
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
}

.service-price {
  display: inline-block;
  margin-bottom: var(--space-s);
  padding: 0.2rem 0.75rem;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-text);
  font-weight: 600;
}

.services-figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
  align-items: start;
}

.services-figures img {
  aspect-ratio: 4 / 5;
}

.services-figures .photo:nth-child(2) {
  margin-top: var(--space-l);
}

@media (min-width: 64em) {
  .services-layout {
    grid-template-columns: 7fr 1fr 4fr;
    align-items: start;
  }

  .service {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: var(--space-m);
  }

  .service-price {
    grid-row: 1;
    grid-column: 2;
    align-self: start;
    margin-top: 0.4rem;
  }

  .service p:not(.service-price) {
    grid-column: 1;
  }

  .services-figures {
    position: sticky;
    top: var(--space-l);
    grid-column: 3;
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }

  .services-figures .photo:nth-child(2) {
    margin-top: 0;
    margin-left: calc(-1 * var(--space-xl));
    margin-right: var(--space-xl);
  }
}

/* How to order: numbered steps */
.steps {
  display: grid;
  gap: var(--space-m) var(--space-l);
  margin-top: var(--space-l);
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  padding-top: var(--space-s);
  border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: block;
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-size: 3rem;
  font-style: italic;
  line-height: 1;
}

.steps h3 {
  margin: var(--space-xs) 0;
  color: inherit;
  font-size: 1.4rem;
}

.steps p {
  margin: 0;
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64em) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* 11. About page
   ------------------------------------------------------------------------- */

.owner {
  display: grid;
  gap: var(--space-l);
  align-items: start;
}

.owner-figure img {
  aspect-ratio: 4 / 5;
}

@media (min-width: 48em) {
  .owner {
    grid-template-columns: 6fr 1fr 5fr;
  }

  .owner-text {
    grid-column: 1;
    grid-row: 1;
    padding-top: var(--space-l);
  }

  .owner-figure {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Wide photo that runs across the full screen width */
.band img {
  width: 100%;
  border-radius: 0;
  height: clamp(16rem, 45vw, 40rem);
  object-fit: cover;
}

.band figcaption {
  width: min(100% - 2 * var(--gutter), var(--max-width));
  margin-inline: auto;
}

/* How we work: principles in two columns */
.principles {
  display: grid;
  gap: var(--space-m) var(--space-xl);
  margin-top: var(--space-l);
  padding: 0;
  list-style: none;
}

.principles li {
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
}

.principles p {
  margin: 0;
}

@media (min-width: 48em) {
  .principles {
    grid-template-columns: 1fr 1fr;
  }

  .principles li:nth-child(even) {
    margin-top: var(--space-l);
  }
}


/* 12. Contact page
   ------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-l);
  padding-bottom: var(--space-xl);
}

.contact-figure img {
  aspect-ratio: 4 / 3;
}

.contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 64em) {
  .contact-layout {
    grid-template-columns: 5fr 1fr 6fr;
    align-items: start;
  }

  .contact-details {
    grid-column: 1;
  }

  .contact-side {
    grid-column: 3;
  }
}


/* 13. Text pages (privacy, 404, new page)
   ------------------------------------------------------------------------- */

.prose {
  padding-bottom: var(--space-xl);
}

.prose > * {
  max-width: 42rem;
}

/* On wide screens the text lines up with the intro paragraph above it */
@media (min-width: 64em) {
  .prose {
    padding-left: calc(100% / 12 * 5);
  }
}

.prose h2 {
  margin-top: var(--space-l);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.2rem);
}

.prose ul {
  padding-left: 1.2em;
}

.prose li {
  margin-bottom: var(--space-xs);
}

.not-found {
  min-height: 60vh;
}


/* 14. Reduced motion
   -------------------------------------------------------------------------
   Smooth scrolling and small fades only for people who have not asked
   their device to reduce motion. */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}