/* ==========================================================================
   atelier SIIA — shared stylesheet
   Design tokens, layout primitives and shared components used on every page.
   Breakpoint: 900px separates the mobile (390px design) layout from the
   desktop (1440px design) layout.
   ========================================================================== */

:root {
  /* Colour */
  --petrol: #183a63;
  --petrol-hairline: #3a5a85;
  --petrol-muted: #d9dfe8;
  --petrol-label: #8fa6c2;
  --petrol-placeholder: #7e96b4;
  --paper: #fbf9f5;
  --paper-alt: #f2eee6;
  --ink: #1a1a18;
  --body-ink: #3a3730;
  --muted-ink: #5a554a;
  --label-grey: #8c8678;
  --optional-grey: #a39c8e;
  --hairline: #eae5dc;
  --field-line: #c9c4ba;
  --terracotta: #c9552f;

  /* Layout */
  --gutter: 22px;
  --container-max: 1440px;
}

@media (min-width: 900px) {
  :root {
    --gutter: 56px;
  }
}

/* ---- Reset & base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-ink);
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
p,
figure,
ul,
ol {
  margin: 0;
}

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

h1,
h2,
h3,
h4 {
  font-family: "Baskervville", Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: var(--petrol);
}

a {
  color: var(--petrol);
  text-decoration: none;
}

a:hover {
  color: var(--terracotta);
}

button {
  font-family: inherit;
}

/* ---- Focus states ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--petrol);
  outline-offset: 2px;
}

.petrol a:focus-visible,
.petrol button:focus-visible,
[data-on-petrol] :focus-visible {
  outline-color: var(--paper);
}

/* ---- Layout ---- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

main {
  display: block;
}

.section {
  padding-top: 52px;
  padding-bottom: 52px;
}

@media (min-width: 900px) {
  .section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
}

.petrol {
  background: var(--petrol);
  color: var(--petrol-muted);
}

.paper-alt {
  background: var(--paper-alt);
}

/* ---- Wordmark ---- */
.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  line-height: 1;
}

.wordmark__a {
  font-size: 10px;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  color: var(--paper);
  line-height: 1;
}

.wordmark__s {
  font-family: "Baskervville", Georgia, serif;
  font-size: 26px;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  line-height: 1.2;
  color: var(--paper);
  margin-top: 6px;
}

@media (min-width: 900px) {
  .wordmark__a {
    font-size: 11px;
  }

  .wordmark__s {
    font-size: 30px;
  }
}

.wordmark--nav .wordmark__a {
  font-size: 9px;
}

.wordmark--nav .wordmark__s {
  font-size: 17px;
  margin-top: 2px;
}

@media (min-width: 900px) {
  .wordmark--nav .wordmark__a {
    font-size: 11px;
  }

  .wordmark--nav .wordmark__s {
    font-size: 22px;
  }
}

.wordmark--hero .wordmark__a {
  font-size: 17px;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  margin-bottom: 14px;
}

.wordmark--hero .wordmark__s {
  font-size: 72px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  margin-top: 0;
}

@media (min-width: 900px) {
  .wordmark--hero .wordmark__a {
    font-size: 30px;
    margin-bottom: 20px;
  }

  .wordmark--hero .wordmark__s {
    font-size: 132px;
  }
}

.wordmark--dark .wordmark__a,
.wordmark--dark .wordmark__s {
  color: var(--petrol);
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 18px;
  letter-spacing: 0.04em;
  padding: 17px 36px;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.btn--filled {
  background: var(--petrol);
  color: var(--paper);
}

.btn--filled:hover {
  background: #12294a;
  color: var(--paper);
}

.btn--inverted {
  background: var(--paper);
  color: var(--petrol);
}

.btn--inverted:hover {
  background: #eee9df;
  color: var(--petrol);
}

.btn--outline {
  background: transparent;
  color: var(--paper);
  border-color: rgba(251, 249, 245, 0.6);
  padding: 11px 22px;
  font-size: 17px;
}

.btn--outline:hover {
  background: rgba(251, 249, 245, 0.12);
  color: var(--paper);
}

.btn--block {
  display: block;
  width: 100%;
  padding: 16px;
}

.text-link {
  font-size: 15px;
  border-bottom: 1px solid var(--field-line);
  padding-bottom: 3px;
  color: var(--body-ink);
  transition: border-color 160ms ease, color 160ms ease;
}

.text-link:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}

.text-link--underline {
  font-size: 16px;
  border-bottom: 1px solid var(--petrol);
  color: var(--petrol);
}

.text-link--on-petrol {
  color: var(--paper);
  border-bottom: 1px solid rgba(251, 249, 245, 0.5);
}

.text-link--on-petrol:hover {
  color: var(--paper);
  border-color: var(--paper);
}

/* ---- Navigation (overlaid on hero) ---- */
.site-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
}

@media (min-width: 900px) {
  .site-nav {
    padding: 32px var(--gutter);
  }
}

.site-nav__links {
  display: none;
}

@media (min-width: 900px) {
  .site-nav__links {
    display: flex;
    align-items: center;
    gap: 36px;
    font-size: 15px;
    color: #ede9e1;
  }
}

.site-nav__link {
  color: #ede9e1;
  padding-bottom: 2px;
}

.site-nav__link:hover {
  color: var(--paper);
}

.site-nav__link[aria-current="page"] {
  color: var(--paper);
  border-bottom: 1px solid var(--paper);
}

.site-nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
}

.site-nav__toggle span {
  width: 22px;
  height: 1px;
  background: var(--paper);
  display: block;
}

@media (min-width: 900px) {
  .site-nav__toggle {
    display: none;
  }
}

/* Mobile full-screen nav overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--petrol);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.mobile-menu[hidden] {
  display: none;
}

.mobile-menu__close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  font-size: 22px;
  color: var(--petrol-muted);
}

.mobile-menu__links a {
  color: var(--petrol-muted);
}

.mobile-menu__links a[aria-current="page"] {
  color: var(--paper);
  border-bottom: 1px solid var(--paper);
}

@media (min-width: 900px) {
  .mobile-menu {
    display: none !important;
  }
}

body.menu-open {
  overflow: hidden;
}

/* ---- Hero ---- */
.hero {
  position: relative;
  height: 460px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--paper);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(24, 58, 99, 0.5) 0%,
    rgba(24, 58, 99, 0.2) 40%,
    rgba(24, 58, 99, 0.66) 100%
  );
}

.hero--dark .hero__overlay {
  background: linear-gradient(
    180deg,
    rgba(24, 58, 99, 0.72) 0%,
    rgba(24, 58, 99, 0.5) 40%,
    rgba(24, 58, 99, 0.82) 100%
  );
}

.hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
}

.hero__title {
  font-size: 40px;
  line-height: 1.06;
  color: var(--paper);
  margin: 0 0 14px;
  text-wrap: pretty;
}

.hero__subline {
  font-size: 19px;
  font-style: italic;
  line-height: 1.45;
  color: #e4e8ee;
  max-width: 720px;
  margin: 0;
}

@media (min-width: 900px) {
  .hero__title {
    font-size: 74px;
    line-height: 1.04;
    margin-bottom: 18px;
    max-width: 1000px;
  }

  .hero__subline {
    font-size: 24px;
    line-height: 1.5;
  }
}

.hero--home {
  height: 560px;
}

.hero--home .hero__content {
  justify-content: center;
}

@media (min-width: 900px) {
  .hero--home {
    height: 680px;
  }
}

.hero--about {
  height: 480px;
}

@media (min-width: 900px) {
  .hero--about {
    height: 560px;
  }

  .hero__title--about {
    font-size: 78px;
  }
}

.hero--contact {
  height: 480px;
}

@media (min-width: 900px) {
  .hero--contact {
    height: 560px;
  }

  .hero__title--contact {
    font-size: 78px;
  }
}

.hero--create .hero__title {
  font-size: 62px;
}

/* ---- Petrol statement block ---- */
.statement {
  padding: 52px var(--gutter);
  display: flex;
  justify-content: center;
  text-align: left;
}

@media (min-width: 900px) {
  .statement {
    padding: 96px var(--gutter) 104px;
  }
}

.statement__inner {
  max-width: 1080px;
  width: 100%;
}

.statement h2 {
  font-size: 30px;
  line-height: 1.18;
  color: var(--paper);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.statement p {
  font-size: 19px;
  line-height: 1.65;
  color: var(--petrol-muted);
  margin: 0 0 18px;
}

.statement p:last-child {
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .statement h2 {
    font-size: 44px;
    line-height: 1.15;
    margin-bottom: 30px;
  }

  .statement p {
    font-size: 24px;
    margin-bottom: 22px;
  }
}

/* ---- Section header pattern ---- */
.section-header {
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
}

.section-header__title {
  font-size: 30px;
  margin: 0 0 8px;
  color: var(--petrol);
}

.section-header__subline {
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--muted-ink);
  margin: 0;
}

.section-header--split {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.section-header__meta {
  font-size: 18px;
  color: var(--label-grey);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .section-header {
    margin-bottom: 48px;
    padding-bottom: 18px;
  }

  .section-header__title {
    font-size: 40px;
  }

  .section-header__subline {
    font-size: 22px;
  }
}

/* ---- CTA block ("Create Your Collection") ---- */
.cta-block {
  padding: 64px var(--gutter);
  text-align: center;
}

.cta-block h2 {
  font-size: 34px;
  line-height: 1.12;
  margin: 0 0 20px;
}

.cta-block p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 880px;
  margin: 0 auto 16px;
}

.cta-block .btn {
  margin-top: 12px;
}

@media (min-width: 900px) {
  .cta-block {
    padding: 112px var(--gutter);
  }

  .cta-block h2 {
    font-size: 58px;
    line-height: 1.1;
    margin-bottom: 30px;
  }

  .cta-block p {
    font-size: 24px;
    margin-bottom: 22px;
  }
}

/* ---- Footer ---- */
.site-footer {
  background: var(--petrol);
  padding: 40px var(--gutter);
  border-top: 1px solid var(--petrol-hairline);
}

.footer__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  color: var(--petrol-muted);
}

.footer__links a {
  color: var(--petrol-muted);
}

.footer__cta {
  border: 1px solid rgba(251, 249, 245, 0.5);
  color: var(--paper);
  padding: 12px 22px;
}

.footer__cta:hover {
  color: var(--paper);
  background: rgba(251, 249, 245, 0.12);
}

.footer__social {
  display: flex;
  align-items: center;
  color: var(--paper);
  margin-top: 6px;
}

.footer__social svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 900px) {
  .site-footer {
    padding: 56px;
  }

  .footer__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer__links {
    flex-direction: row;
    align-items: center;
    gap: 36px;
    font-size: 18px;
  }

  .footer__social {
    margin-top: 0;
  }
}

/* ---- Home: collections card ---- */
.collections-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 32px;
}

.collection-card__image {
  height: 420px;
  background-size: cover;
  background-position: center;
  margin-bottom: 18px;
}

.collection-card__label {
  font-size: 16px;
  color: var(--label-grey);
  margin-bottom: 8px;
}

.collection-card__title {
  font-size: 30px;
  margin: 0 0 12px;
  color: var(--petrol);
}

.collection-card__desc {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-ink);
  margin: 0 0 16px;
}

@media (min-width: 900px) {
  .collections-grid {
    grid-template-columns: 1.6fr 1fr;
    gap: 36px;
    align-items: end;
    margin-bottom: 64px;
  }

  .collections-grid--reverse {
    grid-template-columns: 1fr 1.6fr;
  }

  .collections-grid--reverse .collection-card__image {
    order: 2;
  }

  .collection-card__image {
    height: 520px;
    margin-bottom: 0;
  }

  .collection-card__body {
    padding-bottom: 10px;
  }

  .collection-card__title {
    font-size: 40px;
    line-height: 1.15;
    margin-bottom: 16px;
  }

  .collection-card__desc {
    font-size: 17px;
  }
}

.view-all {
  display: flex;
  justify-content: center;
}

/* ---- Collections page: spec band ---- */
.spec-band {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-top: 1px solid var(--hairline);
  padding-top: 18px;
  margin-bottom: 44px;
}

.spec-band__key {
  font-size: 16px;
  color: var(--label-grey);
  margin-bottom: 6px;
}

.spec-band__value {
  font-size: 18px;
}

.spec-band__works {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.spec-band__works span span {
  color: var(--label-grey);
  margin-right: 10px;
}

@media (min-width: 900px) {
  .spec-band {
    flex-direction: row;
    gap: 32px;
    padding-top: 24px;
  }

  .spec-band > div {
    flex: 1;
  }

  .spec-band__key {
    font-size: 17px;
  }

  .spec-band__value {
    font-size: 19px;
  }
}

/* ---- Subtle image hover-zoom (art images only — not buttons/UI) ---- */
.img-zoom {
  position: relative;
  overflow: hidden;
}

.img-zoom__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.img-zoom:hover .img-zoom__media,
.img-zoom:focus-within .img-zoom__media {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .img-zoom__media {
    transition: none;
  }
}

.saltwater-image-frame {
  height: 420px;
  margin-bottom: 24px;
}

@media (min-width: 900px) {
  .saltwater-image-frame {
    height: 640px;
    margin-bottom: 56px;
  }
}

/* ---- Collections page: the three works ---- */
.works {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 16px 0;
}

.work__image {
  height: 420px;
  margin-bottom: 18px;
}

.work__number {
  font-size: 17px;
  color: var(--label-grey);
  margin-bottom: 12px;
}

.work__title {
  font-size: 27px;
  line-height: 1.16;
  margin: 0 0 14px;
  color: var(--petrol);
  text-wrap: pretty;
}

.work__desc {
  font-size: 18px;
  line-height: 1.65;
  color: var(--body-ink);
  margin: 0 0 16px;
}

.work__meta {
  border-top: 1px solid var(--hairline);
  padding-top: 14px;
  font-size: 17px;
  color: var(--label-grey);
}

@media (min-width: 900px) {
  .works {
    gap: 104px;
    padding: 16px 0 110px;
  }

  .work {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 56px;
    align-items: center;
  }

  .work--reverse {
    grid-template-columns: 1fr 1.35fr;
  }

  .work--reverse .work__image {
    order: 2;
  }

  .work__image {
    height: 820px;
    margin-bottom: 0;
  }

  .work__body {
    padding: 0 8px;
  }

  .work__title {
    font-size: 40px;
    line-height: 1.14;
    margin-bottom: 22px;
  }

  .work__desc {
    font-size: 21px;
    margin-bottom: 26px;
  }

  .work__meta {
    font-size: 18px;
    padding-top: 16px;
  }
}

/* ---- Ordering steps (Editions, petrol, 3-col) ---- */
.ordering-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-bottom: 28px;
}

.ordering-steps__item {
  border-top: 1px solid var(--petrol-hairline);
  padding-top: 14px;
}

.ordering-steps__number {
  font-size: 17px;
  color: var(--petrol-label);
  margin-bottom: 6px;
}

.ordering-steps__item p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--petrol-muted);
  margin: 0;
}

@media (min-width: 900px) {
  .ordering-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-bottom: 40px;
  }

  .ordering-steps__item {
    padding-top: 22px;
  }

  .ordering-steps__number {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .ordering-steps__item p {
    font-size: 19px;
    line-height: 1.6;
  }
}

/* ---- Editions grid ---- */
.editions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 14px;
}

.edition-card__image {
  height: 230px;
  background-color: var(--paper-alt);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.edition-card__title {
  font-size: 21px;
  margin: 12px 0 4px;
  color: var(--petrol);
}

.edition-card__subtitle {
  font-size: 16px;
  font-style: italic;
  line-height: 1.45;
  color: var(--muted-ink);
  margin: 0 0 8px;
}

.edition-card__spec {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted-ink);
}

.edition-card__footer {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
}

@media (min-width: 900px) {
  .editions-grid {
    gap: 64px 40px;
  }

  .edition-card__image {
    height: 520px;
  }

  .edition-card__title {
    font-size: 30px;
    margin: 22px 0 8px;
  }

  .edition-card__subtitle {
    font-size: 19px;
    margin-bottom: 10px;
  }

  .edition-card__spec {
    font-size: 18px;
    line-height: 1.75;
  }

  .edition-card__footer {
    margin-top: 16px;
    padding-top: 16px;
    font-size: 18px;
  }
}

/* ---- About: your world / our world / shared ---- */
.world-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}

.world-col {
  border-top: 1px solid var(--petrol);
  padding-top: 18px;
}

.world-col h3 {
  font-size: 25px;
  margin: 0 0 12px;
}

.world-col p {
  font-size: 18px;
  line-height: 1.65;
  margin: 0 0 12px;
}

.world-col p:first-of-type {
  color: var(--body-ink);
}

.world-col p:last-child {
  color: var(--muted-ink);
  margin-bottom: 0;
}

@media (min-width: 900px) {
  .world-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .world-col {
    padding-top: 24px;
  }

  .world-col h3 {
    font-size: 30px;
    margin-bottom: 16px;
  }

  .world-col p {
    font-size: 19px;
    line-height: 1.7;
    margin-bottom: 16px;
  }
}

/* ---- About: two-image band ---- */
.image-band {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.image-band__item {
  height: 300px;
  background-size: cover;
  background-position: center;
}

.image-band__item--sketch {
  background-size: auto;
  filter: brightness(1.12);
}

@media (min-width: 900px) {
  .image-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .image-band__item {
    height: 520px;
  }
}

/* ---- About: process steps ---- */
.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.process-step {
  border-top: 1px solid var(--hairline);
  padding-top: 16px;
}

.process-step__number {
  font-size: 16px;
  color: var(--label-grey);
  margin-bottom: 8px;
}

.process-step h4 {
  font-size: 23px;
  margin: 0 0 8px;
}

.process-step p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted-ink);
  margin: 0;
}

@media (min-width: 900px) {
  .process-steps {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 28px;
  }

  .process-step {
    padding-top: 22px;
  }

  .process-step__number {
    font-size: 17px;
    margin-bottom: 14px;
  }

  .process-step h4 {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .process-step p {
    line-height: 1.65;
  }
}

/* ---- Contact / enquiry form ---- */
.field-group {
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}

.field-group:first-child {
  border-top: none;
  padding-top: 0;
}

.field-group__title {
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 22px;
}

.field-group__fields {
  max-width: 900px;
}

@media (min-width: 900px) {
  .field-group {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 64px;
    padding: 56px 0;
  }

  .field-group__title {
    font-size: 28px;
    margin: 0;
  }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

@media (min-width: 640px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
  }
}

.field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.field__label {
  font-size: 18px;
  color: var(--body-ink);
}

.field__hint {
  font-size: 16px;
  color: var(--optional-grey);
}

.field__input {
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  outline: none;
  padding: 0 0 14px;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 18px;
  color: var(--ink);
  transition: border-color 160ms ease;
}

@media (min-width: 900px) {
  .field__input {
    font-size: 19px;
  }
}

.field__input:focus {
  border-color: var(--petrol);
}

.field__input.has-error {
  border-color: var(--terracotta);
}

.field__error {
  font-size: 15px;
  color: var(--terracotta);
  margin-top: 8px;
  display: none;
}

.field.has-error .field__error {
  display: block;
}

.field-block {
  margin-bottom: 34px;
}

.field-block__label {
  font-family: "EB Garamond", serif;
  font-size: 17px;
  color: var(--body-ink);
  margin-bottom: 16px;
}

.checkbox-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 640px) {
  .checkbox-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px 40px;
  }
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 18px;
  color: var(--body-ink);
}

.checkbox-grid input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--petrol);
  flex: none;
  margin: 0;
}

.checkbox-grid__other {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--field-line);
  background: transparent;
  outline: none;
  padding: 0 0 6px;
  font-family: "EB Garamond", serif;
  font-size: 18px;
  color: var(--ink);
}

.field__textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--field-line);
  background: transparent;
  outline: none;
  padding: 16px;
  font-family: "EB Garamond", serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  resize: vertical;
}

@media (min-width: 900px) {
  .field__textarea {
    padding: 20px;
    font-size: 19px;
  }
}

.form-note {
  font-size: 18px;
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 720px;
  margin: 40px 0 24px;
}

@media (min-width: 900px) {
  .form-note {
    font-size: 20px;
    margin: 48px 0 26px;
  }
}

.form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-confirmation {
  text-align: center;
  padding: 40px 0;
}

.form-confirmation[hidden] {
  display: none;
}

.form-confirmation h3 {
  font-size: 26px;
  margin: 0 0 14px;
}

.form-confirmation p {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted-ink);
  max-width: 560px;
  margin: 0 auto;
}

.form-error-banner {
  border: 1px solid var(--terracotta);
  color: var(--terracotta);
  padding: 16px 20px;
  font-size: 17px;
  margin-bottom: 28px;
}

.form-error-banner[hidden] {
  display: none;
}

/* ---- FAQ accordion ---- */
.faq {
  color: var(--paper);
}

.faq__item {
  border-top: 1px solid var(--petrol-hairline);
  padding: 20px 0;
}

.faq__item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__question {
  font-family: "Baskervville", Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  color: var(--paper);
}

.faq__marker {
  font-family: "EB Garamond", serif;
  font-size: 22px;
  color: var(--petrol-label);
  flex: none;
}

.faq__item[open] .faq__marker {
  transform: rotate(45deg);
  display: inline-block;
}

.faq__answer {
  font-size: 17px;
  line-height: 1.65;
  color: var(--petrol-muted);
  margin: 14px 0 0;
}

@media (min-width: 900px) {
  .faq__item {
    padding: 28px 0;
  }

  .faq__question {
    font-size: 26px;
  }

  .faq__answer {
    font-size: 19px;
    line-height: 1.7;
    max-width: 760px;
  }
}

/* ---- Page image backgrounds (mobile crop swaps to desktop crop at 900px) ---- */
.bg-home-hero {
  background-image: url("../assets/collections-header-mobile.jpg");
  background-image: image-set(url("../assets/collections-header-mobile.webp") 1x, url("../assets/collections-header-mobile.jpg") 1x);
}

.bg-collections-hero {
  background-image: url("../assets/collections-header-mobile.jpg");
  background-image: image-set(url("../assets/collections-header-mobile.webp") 1x, url("../assets/collections-header-mobile.jpg") 1x);
}

.bg-collections-saltwater {
  background-image: url("../assets/collections-header-mobile.jpg");
  background-image: image-set(url("../assets/collections-header-mobile.webp") 1x, url("../assets/collections-header-mobile.jpg") 1x);
}

.bg-editions-hero {
  background-image: url("../assets/editions-header-mobile.jpg");
  background-image: image-set(url("../assets/editions-header-mobile.webp") 1x, url("../assets/editions-header-mobile.jpg") 1x);
}

.bg-about-hero {
  background-image: url("../assets/about-hero-studio.jpg");
  background-image: image-set(url("../assets/about-hero-studio.webp") 1x, url("../assets/about-hero-studio.jpg") 1x);
}

.bg-contact-hero {
  background-image: url("../assets/contact-hero-colours.jpg");
  background-image: image-set(url("../assets/contact-hero-colours.webp") 1x, url("../assets/contact-hero-colours.jpg") 1x);
}

.bg-saltwater-card {
  background-image: url("../assets/saltwater-collection-card-mobile.jpg");
  background-image: image-set(url("../assets/saltwater-collection-card-mobile.webp") 1x, url("../assets/saltwater-collection-card-mobile.jpg") 1x);
}

.bg-work-01 {
  background-image: url("../assets/fish01-mtlxl6po-4xq9.jpg");
  background-image: image-set(url("../assets/fish01-mtlxl6po-4xq9.webp") 1x, url("../assets/fish01-mtlxl6po-4xq9.jpg") 1x);
}

.bg-work-02 {
  background-image: url("../assets/swimwear-bathroom-02.jpg");
  background-image: image-set(url("../assets/swimwear-bathroom-02.webp") 1x, url("../assets/swimwear-bathroom-02.jpg") 1x);
}

.bg-work-03 {
  background-image: url("../assets/oyster-lobby.jpg");
  background-image: image-set(url("../assets/oyster-lobby.webp") 1x, url("../assets/oyster-lobby.jpg") 1x);
}

.bg-about-sketch {
  background-image: url("../assets/wip-swimwear-sketch.jpg");
  background-image: image-set(url("../assets/wip-swimwear-sketch.webp") 1x, url("../assets/wip-swimwear-sketch.jpg") 1x);
  background-position: center bottom;
}

.bg-about-swimwear {
  background-image: url("../assets/swimwear-bathroom-02.jpg");
  background-image: image-set(url("../assets/swimwear-bathroom-02.webp") 1x, url("../assets/swimwear-bathroom-02.jpg") 1x);
}

@media (min-width: 900px) {
  .bg-home-hero {
    background-image: url("../assets/collections-header.jpg");
    background-image: image-set(url("../assets/collections-header.webp") 1x, url("../assets/collections-header.jpg") 1x);
  }

  .bg-collections-hero {
    background-image: url("../assets/collections-header.jpg");
    background-image: image-set(url("../assets/collections-header.webp") 1x, url("../assets/collections-header.jpg") 1x);
  }

  .bg-collections-saltwater {
    background-image: url("../assets/collections-header.jpg");
    background-image: image-set(url("../assets/collections-header.webp") 1x, url("../assets/collections-header.jpg") 1x);
  }

  .bg-editions-hero {
    background-image: url("../assets/editions-header.jpg");
    background-image: image-set(url("../assets/editions-header.webp") 1x, url("../assets/editions-header.jpg") 1x);
  }

  .bg-saltwater-card {
    background-image: url("../assets/saltwater-collection-card.jpg");
    background-image: image-set(url("../assets/saltwater-collection-card.webp") 1x, url("../assets/saltwater-collection-card.jpg") 1x);
  }

  .bg-about-sketch {
    background-position: 54% 48%;
    background-size: auto;
  }

  .bg-about-swimwear-band {
    background-position: center 12%;
  }
}

.edition-pink-fish-01 {
  background-image: url("../assets/pink-fish-01.jpg");
  background-image: image-set(url("../assets/pink-fish-01.webp") 1x, url("../assets/pink-fish-01.jpg") 1x);
}

.edition-pink-fish-02 {
  background-image: url("../assets/pink-fish-02.jpg");
  background-image: image-set(url("../assets/pink-fish-02.webp") 1x, url("../assets/pink-fish-02.jpg") 1x);
}

.edition-oysters-01 {
  background-image: url("../assets/oysters-01.jpg");
  background-image: image-set(url("../assets/oysters-01.webp") 1x, url("../assets/oysters-01.jpg") 1x);
}

.edition-oysters-02 {
  background-image: url("../assets/oysters-02.jpg");
  background-image: image-set(url("../assets/oysters-02.webp") 1x, url("../assets/oysters-02.jpg") 1x);
}

/* ---- Utility ---- */
.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;
}

.max-900 {
  max-width: 900px;
}