/*
  Nour Bakehouse
  Harmony: complementary, red against green. Cherry red (about 4deg) is taken from the red line drawings on the tiled
  bakery wall in the photo shoot. Deep bay leaf green (about 130deg) is its complement and keeps the page fresh
  instead of the usual all-brown bakery look. Crust apricot and flour white echo the dough and bread in the photos.
  60%  --flour   #F7F6F1  page background
  30%  --green   #27402C  bands, menu headers, quote paper edge, footer
       --ink     #1D2A1F  body text
       --muted   #5A6B5C  secondary text
  10%  --cherry  #B8322B  buttons, key marks
       --crust   #F4C9A0  highlights on green
  Contrast (WCAG): ink on flour 13.83, muted on flour 5.26, cherry on flour 5.50, white on cherry 5.95 (buttons),
  flour on green 10.46, crust on green 7.39, green on crust 7.39.
*/
:root {
  --flour: #F7F6F1;
  --green: #27402C;
  --ink: #1D2A1F;
  --muted: #5A6B5C;
  --cherry: #B8322B;
  --crust: #F4C9A0;
  --paper: #FFFFFF;
  --wide: "Unbounded", "Source Serif 4", sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --pad: clamp(1rem, 4vw, 3.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--flour); color: var(--ink); font: 400 1.1rem/1.6 var(--serif); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--wide); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: -.03em; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cherry); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hide { display: none; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--green); color: var(--flour); padding: .6rem 1rem; z-index: 60; }
.skip:focus { top: 1rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: .9rem 1.6rem; font: 600 .95rem/1 var(--wide); letter-spacing: -.01em; text-decoration: none; border: 2px solid transparent; border-radius: 999px; cursor: pointer; transition: transform .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--cherry { background: var(--cherry); color: #fff; }
.btn--cherry:hover { background: #9C2822; }
.btn--ghost { border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--flour); }
.btn--crust { background: var(--crust); color: var(--green); }
.btn--crust:hover { background: #F7D8B9; }
.btn--wide { width: 100%; }
.more { font: 600 .9rem/1 var(--wide); color: var(--cherry); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 4px; }

/* Header */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); padding: .8rem var(--pad); background: var(--flour); border-bottom: 2px solid var(--green); }
.logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--green); font: 800 .95rem/1.05 var(--wide); letter-spacing: -.02em; margin-right: auto; }
.logo svg { width: 40px; height: 40px; }
.nav { display: flex; gap: clamp(.9rem, 2.2vw, 2rem); font: 500 .85rem/1 var(--wide); }
.nav a { text-decoration: none; padding: .5rem 0; position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--cherry); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.top__cta { background: var(--green); color: var(--flour); text-decoration: none; font: 600 .85rem/1 var(--wide); padding: .9rem 1.2rem; border-radius: 999px; }
.top__cta:hover { background: var(--cherry); }
.burger { display: none; min-height: 46px; padding: 0 1rem; border: 2px solid var(--green); border-radius: 999px; background: transparent; color: var(--green); font: 600 .85rem/1 var(--wide); cursor: pointer; }

/* Hero */
.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 70px); }
.hero__copy { padding: clamp(2.5rem, 6vw, 5rem) var(--pad); display: flex; flex-direction: column; justify-content: center; }
.hero__kicker { font: 500 .95rem/1.4 var(--serif); font-style: italic; color: var(--muted); margin-bottom: 1.2rem; }
.hero h1 { font-size: clamp(2.8rem, 5.6vw, 5.6rem); color: var(--green); font-weight: 800; }
.hero__lede { font-size: 1.25rem; max-width: 36ch; margin-top: 1.5rem; }
.hero__cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 2.2rem; }
.hero__media { position: relative; background: var(--green); }
.hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ticket { background: var(--paper); color: var(--ink); padding: 1.2rem 1.3rem 1.3rem; width: min(290px, 80%); font-size: .98rem; position: relative; filter: drop-shadow(0 18px 24px rgba(20, 30, 20, .35)); }
.ticket::before, .ticket::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: radial-gradient(circle at 5px 0, transparent 5px, var(--paper) 5.5px) 0 0 / 10px 10px repeat-x; }
.ticket::before { top: -10px; transform: scaleY(-1); }
.ticket::after { bottom: -10px; }
.ticket--float { position: absolute; left: -12%; bottom: 10%; transform: rotate(-3deg); animation: print 1s .2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes print { from { transform: translateY(40px) rotate(-3deg); opacity: 0; } to { transform: rotate(-3deg); opacity: 1; } }
.ticket__head { font: 700 .8rem/1 var(--wide); color: var(--cherry); padding-bottom: .8rem; border-bottom: 2px dashed #cfd3c8; }
.ticket ul { list-style: none; padding: 0; margin: .6rem 0; }
.ticket li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.ticket li b { font-family: var(--wide); font-size: .9rem; }
.ticket__foot { font-size: .88rem; color: var(--muted); padding-top: .7rem; border-top: 2px dashed #cfd3c8; }

/* Strip */
.strip { background: var(--green); color: var(--crust); display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 2.4rem; padding: 1.3rem var(--pad); font: 500 clamp(.85rem, 1.2vw, 1rem)/1.3 var(--wide); }
.strip p { display: flex; align-items: center; gap: .7rem; }
.strip p::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cherry); flex: none; }

/* Sections */
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.sec-head h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); color: var(--green); max-width: 18ch; }
.menus-teaser { padding: clamp(4rem, 8vw, 7rem) var(--pad); max-width: 1440px; margin: 0 auto; }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); }
.card { background: var(--paper); display: flex; flex-direction: column; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card__body { padding: 1.4rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.card h3 { font-size: 1.35rem; color: var(--green); }
.card__price { margin-top: auto; padding-top: .8rem; font: 700 1.7rem/1 var(--wide); color: var(--cherry); }
.card__price span { font: 400 .95rem/1 var(--serif); color: var(--muted); }
.card--green { background: var(--green); color: var(--flour); }
.card--green h3 { color: var(--crust); }
.card--green .card__price { color: var(--crust); }
.card--green .card__price span { color: #d7ddd3; }

.how { display: grid; grid-template-columns: .9fr 1.1fr; background: var(--crust); }
.how__photo img { width: 100%; height: 100%; object-fit: cover; }
.how__copy { padding: clamp(3rem, 7vw, 6rem) var(--pad); }
.how h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); color: var(--green); }
.how__steps { list-style: none; counter-reset: h; padding: 0; margin: 2rem 0 2.4rem; display: grid; gap: 1.3rem; }
.how__steps li { counter-increment: h; display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; color: var(--ink); }
.how__steps li::before { content: counter(h); grid-row: span 2; width: 3rem; height: 3rem; border-radius: 50%; background: var(--green); color: var(--crust); display: grid; place-items: center; font: 700 1.1rem/1 var(--wide); }
.how__steps b { font: 600 1.05rem/1.3 var(--wide); color: var(--green); display: block; margin-bottom: .2rem; }

.words { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(4rem, 8vw, 7rem) var(--pad); max-width: 1440px; margin: 0 auto; }
.words blockquote { margin: 0; border-left: 4px solid var(--cherry); padding-left: 1.4rem; }
.words p { font: 400 clamp(1.4rem, 2.3vw, 2rem)/1.3 var(--serif); font-style: italic; }
.words footer { margin-top: .9rem; color: var(--muted); font-size: 1rem; }

/* Inner page header */
.phead { padding: clamp(3rem, 6vw, 5rem) var(--pad) clamp(2rem, 4vw, 3rem); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem; align-items: end; }
.phead h1 { font-size: clamp(3rem, 7vw, 6.4rem); color: var(--green); font-weight: 800; }
.phead p { max-width: 46ch; font-size: 1.15rem; }
.jump { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.jump a { font: 500 .85rem/1 var(--wide); text-decoration: none; padding: .8rem 1.1rem; border: 2px solid var(--green); border-radius: 999px; color: var(--green); }
.jump a:hover { background: var(--green); color: var(--flour); }

/* Menus page */
.menus { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.4vw, 2rem); padding: 0 var(--pad) clamp(3rem, 6vw, 5rem); max-width: 1440px; margin: 0 auto; }
.menus > div { scroll-margin-top: 90px; }
.menu { background: var(--paper); height: 100%; display: flex; flex-direction: column; }
.menu__head { background: var(--green); color: var(--flour); padding: 1.4rem; display: grid; gap: .5rem; }
.menu__head h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); color: var(--crust); }
.menu__price { font: 600 1rem/1 var(--wide); }
.menu img { aspect-ratio: 9 / 7; object-fit: cover; width: 100%; }
.menu__note { padding: 1.2rem 1.4rem 0; font-style: italic; color: var(--muted); }
.menu__secs { padding: 1rem 1.4rem 1.6rem; display: grid; gap: 1.2rem; }
.menu__sec h3 { font: 600 .85rem/1.2 var(--wide); color: var(--cherry); margin-bottom: .5rem; letter-spacing: 0; }
.menu__sec ul { list-style: none; padding: 0; margin: 0; }
.menu__sec li { padding: .45rem 0; border-bottom: 1px dashed #cfd3c8; }
.menu--green .menu__head { background: var(--cherry); }
.menu--green .menu__head h2 { color: #fff; }
.dozen { background: var(--green); color: var(--flour); padding: clamp(3rem, 7vw, 5.5rem) var(--pad); scroll-margin-top: 70px; }
.dozen h2 { font-size: clamp(2rem, 4vw, 3.4rem); color: var(--crust); max-width: 1340px; margin: 0 auto; }
.dozen > p { max-width: 1340px; margin: .8rem auto 0; color: #d7ddd3; }
.dozen__list { max-width: 1340px; margin: 2.2rem auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 3rem; }
.dozen__list div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(244, 201, 160, .35); }
.dozen__list dt { font-size: 1.1rem; }
.dozen__list dd { margin: 0; font: 600 .95rem/1 var(--wide); color: var(--crust); white-space: nowrap; }

/* Quote builder: signature */
.phead--quote { padding-bottom: 1.5rem; }
.builder { display: grid; grid-template-columns: 1.3fr .9fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding: 0 var(--pad) clamp(3rem, 6vw, 5rem); max-width: 1440px; margin: 0 auto; }
.builder__form { display: grid; gap: 1.2rem; }
.block { border: 0; margin: 0; padding: 1.6rem; background: var(--paper); display: grid; gap: 1rem; }
.block legend { float: left; width: 100%; display: flex; align-items: center; gap: .8rem; font: 700 1.2rem/1.2 var(--wide); color: var(--green); margin-bottom: .4rem; padding: 0; }
.block legend span { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--green); color: var(--crust); display: grid; place-items: center; font-size: .95rem; flex: none; }
.guests { display: grid; gap: .6rem; }
.guests__num { font: 800 clamp(3.2rem, 6vw, 4.6rem)/1 var(--wide); color: var(--cherry); letter-spacing: -.04em; }
.guests__num::after { content: " guests"; font: 400 1.1rem/1 var(--serif); color: var(--muted); letter-spacing: 0; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--cherry) var(--fill, 20%), #e3e5dc var(--fill, 20%)); }
input[type="range"]::-moz-range-track { height: 10px; border-radius: 10px; background: #e3e5dc; }
input[type="range"]::-moz-range-progress { height: 10px; border-radius: 10px; background: var(--cherry); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -11px; border-radius: 50%; background: var(--green); border: 5px solid var(--crust); }
input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--green); border: 5px solid var(--crust); }
.guests__scale { display: flex; justify-content: space-between; font-size: .9rem; color: var(--muted); }
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.pick label, .extras label { position: relative; cursor: pointer; }
.pick input, .extras input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick span { display: grid; gap: .3rem; height: 100%; padding: 1rem; border: 2px solid #d4d8cc; background: var(--flour); transition: border-color .15s ease, background-color .15s ease; }
.pick b { font: 600 .95rem/1.25 var(--wide); color: var(--green); }
.pick em { font-style: normal; color: var(--muted); font-size: .95rem; }
.pick input:checked + span { border-color: var(--green); background: var(--green); }
.pick input:checked + span b { color: var(--crust); }
.pick input:checked + span em { color: #d7ddd3; }
.extras { display: grid; gap: .5rem; }
.extras span { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 1rem .85rem 3.2rem; border: 2px solid #d4d8cc; position: relative; min-height: 54px; }
.extras span::before { content: ""; position: absolute; left: 1rem; top: 50%; width: 22px; height: 22px; margin-top: -11px; border: 2px solid var(--green); background: var(--paper); }
.extras em { font-style: normal; color: var(--muted); font-size: .95rem; white-space: nowrap; }
.extras input:checked + span { border-color: var(--green); }
.extras input:checked + span::before { background: var(--cherry) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / 16px no-repeat; border-color: var(--cherry); }
.pick input:focus-visible + span, .extras input:focus-visible + span { outline: 3px solid var(--cherry); outline-offset: 2px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f { display: grid; gap: .4rem; font: 600 .95rem/1.3 var(--serif); }
.f input, .f textarea, .f select { font: 400 1rem/1.4 var(--serif); min-height: 52px; padding: .75rem .9rem; border: 2px solid #c9cfc2; background: var(--flour); color: var(--ink); width: 100%; border-radius: 0; }
.f input::placeholder, .f textarea::placeholder { color: #6f7d70; }
.f input:focus, .f textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(39, 64, 44, .2); }
.f input.is-bad { border-color: var(--cherry); }
.status { font-weight: 600; min-height: 1.5em; }
.status.is-ok { color: var(--green); }
.receipt { position: sticky; top: 90px; display: grid; gap: 1rem; background: var(--green); padding: 1.6rem 1.4rem 1.4rem; }
.receipt__paper { background: var(--paper); padding: 1.6rem 1.4rem 1.4rem; position: relative; font-size: 1rem; }
.receipt__paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: radial-gradient(circle at 5px 0, transparent 5px, var(--paper) 5.5px) 0 0 / 10px 10px repeat-x; transform: scaleY(-1); }
.receipt__brand { font: 800 1.2rem/1 var(--wide); color: var(--green); }
.receipt__sub { color: var(--muted); margin-top: .4rem; padding-bottom: 1rem; border-bottom: 2px dashed #cfd3c8; }
.receipt__lines { list-style: none; padding: .6rem 0; margin: 0; border-bottom: 2px dashed #cfd3c8; min-height: 7rem; }
.receipt__lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .4rem 0; animation: line .3s ease both; }
.receipt__lines li small { display: block; color: var(--muted); font-size: .85rem; }
.receipt__lines li b { font: 600 .9rem/1.6 var(--wide); white-space: nowrap; }
@keyframes line { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.receipt__total, .receipt__dep { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-top: 1rem; }
.receipt__total span { font: 600 .9rem/1.2 var(--wide); }
.receipt__total b { font: 800 2.4rem/1 var(--wide); color: var(--cherry); letter-spacing: -.03em; }
.receipt__dep { padding-top: .5rem; color: var(--muted); font-size: .95rem; }
.receipt__dep b { font: 600 1rem/1 var(--wide); color: var(--ink); }
.receipt__per { margin-top: .8rem; font-size: .9rem; color: var(--muted); font-style: italic; }
.receipt__note { color: #d7ddd3; font-size: .9rem; }

/* About */
.story { display: grid; grid-template-columns: .8fr 1.2fr; grid-template-rows: auto auto; gap: clamp(1.5rem, 4vw, 4rem); padding: 0 var(--pad) clamp(3rem, 6vw, 5rem); max-width: 1440px; margin: 0 auto; }
.story figure { margin: 0; }
.story__a { grid-row: span 2; }
.story__a img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; height: 100%; }
.story__text h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); color: var(--green); margin-bottom: 1.2rem; }
.story__text p { max-width: 58ch; }
.story__text p + p { margin-top: 1rem; }
.story__b img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.facts { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.facts li { border-top: 4px solid var(--cherry); padding-top: .8rem; color: var(--muted); font-size: .95rem; }
.facts b { display: block; font: 800 1.6rem/1.1 var(--wide); color: var(--green); margin-bottom: .3rem; }
.contact { background: var(--green); color: var(--flour); display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); padding: clamp(3.5rem, 7vw, 6rem) var(--pad); }
.contact h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); color: var(--crust); }
.contact dl { margin: 2rem 0 0; display: grid; gap: 1rem; }
.contact dl div { border-bottom: 1px solid rgba(244, 201, 160, .3); padding-bottom: 1rem; }
.contact dt { font: 600 .85rem/1.2 var(--wide); color: var(--crust); margin-bottom: .3rem; }
.contact dd { margin: 0; }
.contact__form { background: var(--flour); color: var(--ink); padding: clamp(1.3rem, 3vw, 2.2rem); display: grid; gap: 1rem; align-content: start; }
.contact__form .btn { justify-self: start; }

/* Footer */
.foot { background: var(--ink); color: #d7ddd3; padding: clamp(3rem, 6vw, 5rem) var(--pad) 2.5rem; }
.foot__big { font: 800 clamp(2rem, 5.5vw, 5rem)/1 var(--wide); color: var(--crust); letter-spacing: -.04em; max-width: 16ch; }
.foot__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; font-size: .98rem; }
.foot b { color: var(--flour); font-family: var(--wide); font-size: .85rem; }
.foot a { color: var(--flour); }
.foot__credit { font-size: .88rem; }

@media (max-width: 1080px) {
  .nav { font-size: .78rem; gap: .9rem; }
  .menus { grid-template-columns: 1fr 1fr; }
  .builder { grid-template-columns: 1fr; }
  .receipt { position: static; }
  .pick { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .burger { display: block; }
  .top__cta { display: none; }
  .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--flour); padding: .4rem var(--pad) 1.2rem; border-bottom: 2px solid var(--green); display: none; font-size: .95rem; }
  .top.is-open .nav { display: flex; }
  .nav a { padding: 1rem .2rem; border-bottom: 1px solid #d4d8cc; }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--cherry); }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { height: 70vh; min-height: 440px; }
  .ticket--float { left: 1rem; bottom: 1.5rem; }
  .trio, .words, .how, .phead, .story, .contact { grid-template-columns: 1fr; }
  .story__a { grid-row: auto; max-width: 520px; }
  .dozen__list { grid-template-columns: 1fr 1fr; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 1.02rem; }
  .hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .menus, .dozen__list, .pair, .facts, .foot__cols { grid-template-columns: 1fr; }
  .strip { justify-content: flex-start; gap: .5rem 1.4rem; }
  .block { padding: 1.2rem; }
  .extras span { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .how__photo img { aspect-ratio: 4 / 3; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}