/* ==========================================================
   Portland Bookkeepers, one-page site
   Mobile-first. All spacing sits on Material Design's 8dp grid
   (4dp half-step for fine type adjustments).
   Tokens live in :root so a design system can replace them later.
   ========================================================== */

/* ---------- Fonts (self-hosted, OFL licensed) ---------- */
@font-face {
  font-family: "Bodoni Moda";
  src: url("fonts/bodoni-moda-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "La Belle Aurore";
  src: url("fonts/la-belle-aurore-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;                 /* never show a stand-in script */
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color (from the brief and the design file) */
  --color-coral: #EF7063;
  --color-sand: #CABFAE;
  --color-black: #000;
  --color-white: #fff;
  --color-ink: #000;
  --color-field: #F2F2F2;
  --color-button: #2B2B2B;
  --color-stroke: #C74747;             /* maroon frame stroke */
  --color-error: #7A1712;              /* passes AA on sand */
  --color-green: #2F6B4F;              /* submit hover; echoes the café tables */
  --color-maroon: 74 14 32;            /* rgb triplet for the photo gradient */
  --color-pen: #2B2B2B;                /* handwriting on the polaroid back */
  --shadow-coral: 120 32 26;           /* shadow tinted to the coral row */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Spacing: Material 8dp grid */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Type: two families, three sizes */
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "La Belle Aurore", cursive;
  --text-headline: 1rem;               /* 16 / 24 */
  --leading-headline: 1.5;
  --text-body: 1rem;                   /* 16 / 32: cookbook spacing */
  --leading-body: 2;
  --text-offering: 0.875rem;           /* 14 / 28 on phones (two narrow columns) */
  --leading-offering: 2;
  --text-small: 0.75rem;               /* 12 / 16 */
  --measure: 34em;                     /* line length under ~80 characters */

  /* Layout */
  --gutter: 0px;                       /* white margin around the site */
  --pad-x: var(--space-8);             /* section side padding */
  --pad-y: var(--space-16);            /* section top/bottom padding */
  --heading-gap: var(--space-8);       /* headline to paragraph */
  --col-gap: var(--space-6);           /* gap between text columns */
  --row-gap: var(--space-16);          /* gap between stacked text rows */
  --control-h: 56px;                   /* 7 x 8dp */
  --control-pad-x: var(--space-6);     /* text inset inside fields */
  --field-gap: var(--space-6);         /* between form fields */
  --button-gap: var(--space-8);        /* between last field and button */
  --frame-inset: var(--space-8);
  --frame-width: 3px;
  --frame-offset: var(--space-2);      /* stroke sits just left of center */
}

@media (min-width: 768px) {
  :root {
    --text-headline: 1.125rem;         /* 18 / 28 */
    --leading-headline: 1.5556;
    --text-offering: 1rem;             /* 16 / 32 */
    --gutter: var(--space-10);
    --pad-x: var(--space-16);
    --pad-y: var(--space-16);
    --heading-gap: var(--space-10);
    --col-gap: var(--space-12);
    --row-gap: var(--space-16);
  }
}

@media (min-width: 1024px) {
  :root {
    --pad-x: var(--space-24);
    --pad-y: var(--space-24);
    --col-gap: var(--space-16);
    --control-h: var(--space-16);
    --control-pad-x: var(--space-8);
    --field-gap: var(--space-8);
    --button-gap: var(--space-10);
    --frame-inset: var(--space-12);
    --frame-offset: var(--space-4);
  }
}

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

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

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

p { max-width: var(--measure); }

.headline {
  font-family: var(--font-display);
  font-size: var(--text-headline);
  font-weight: 700;
  line-height: var(--leading-headline);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.headline + p { margin-top: var(--heading-gap); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Page frame ---------- */
.site {
  position: relative;
  margin: var(--gutter) var(--gutter) 0;
}

/* Maroon stroke: frames the left column from inside the photo down to
   just below "Inquire", with its right edge on the page's center line.
   Bottom offset = inquire padding + form height below the label row. */
.frame { display: none; }

@media (min-width: 768px) {
  .frame {
    display: block;
    position: absolute;
    z-index: 10;                       /* above every section, image and reveal */
    transform: translateZ(0);          /* own compositing layer (Safari) */
    top: var(--frame-inset);
    left: var(--frame-inset);
    /* right edge sits a step left of the center line, inside the photo,
       so it reads as a deliberate offset rather than a seam */
    right: calc(50% + var(--frame-offset) - var(--frame-width) / 2);
    /* set by script: ends 32px below the "Services" heading */
    bottom: var(--frame-bottom, 0px);
    border: var(--frame-width) solid var(--color-stroke);
    pointer-events: none;
  }
}

/* ---------- 1. Hero: photo + about ---------- */
/* Phone: about text floats over the photo */
.hero {
  display: grid;
  min-height: min(100svh, 720px);
  color: var(--color-white);
}

.hero__photo,
.hero__about { grid-area: 1 / 1; }

.hero__photo {
  position: relative;
  overflow: hidden;
}

.hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Maroon to transparent; partially transparent even where it's maroon */
.hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgb(var(--color-maroon) / 0.94) 0%,
    rgb(var(--color-maroon) / 0.72) 50%,
    rgb(var(--color-maroon) / 0.15) 100%
  );
}

.hero__about {
  position: relative;
  z-index: 1;
  align-self: end;
  padding: var(--pad-y) var(--pad-x);
}

@media (min-width: 768px) {
  /* Tablet / desktop: photo left, about in a black box right */
  .hero {
    grid-template-columns: 1fr 1fr;
    /* design's top-row proportion; grows if the text needs room */
    min-height: calc((100vw - 2 * var(--gutter)) * 604 / 1356);
  }

  /* Widen the photo and anchor it left so the white brick strip on its
     right edge falls outside the frame; the photo ends in the first window
     instead of a light vertical edge beside the maroon outline. */
  .hero__photo img {
    right: auto;
    width: 110%;
    max-width: none;
    object-position: left center;
  }

  .hero__photo::after {
    background: linear-gradient(
      to bottom right,
      rgb(var(--color-maroon) / 0.12) 0%,
      rgb(var(--color-maroon) / 0.5) 45%,
      rgb(var(--color-maroon) / 0.88) 100%
    );
  }

  .hero__about {
    grid-area: 1 / 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--color-black);
  }
}

/* ---------- 2. Logo + polaroid ---------- */
.feature {
  display: grid;
  gap: var(--pad-y);
  padding: var(--pad-y) var(--pad-x);
  background: var(--color-coral);
}

.feature__logo {
  display: grid;
  place-items: center;
}

.feature__logo img { width: min(60%, 200px); }

/* Polaroid: two-sided card. Hover (desktop) or tap/Enter (anywhere)
   lifts it, tilts it slightly and turns it over to the handwritten back. */
.polaroid {
  container-type: inline-size;         /* handwriting scales with the card */
  perspective: 1600px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.polaroid__card {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 0.9s var(--ease-out);
}

.polaroid__face {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-white);
  box-shadow: 0 1px 2px rgb(var(--shadow-coral) / 0.18);
  /* visibility swaps when the card is edge-on (about 0.2s into the turn),
     so the back is pure white even where backface hiding is unreliable */
  transition: box-shadow 0.9s var(--ease-out), visibility 0s linear 0.2s;
}

.polaroid__front {
  padding: var(--space-4) var(--space-4) var(--space-16);
}

.polaroid__image {
  display: grid;
  place-items: center;
  aspect-ratio: 7 / 5;
  padding: var(--space-6);
  background: var(--color-black);
  color: rgb(255 255 255 / 0.7);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: center;
}

/* The front sets the card's size; the back fills it exactly */
.polaroid__back {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  padding: 8cqi 10cqi;
  overflow: hidden;
  visibility: hidden;
  transform: rotateY(180deg) translateZ(1px);
}

.polaroid__card { position: relative; }

.polaroid__back p {
  max-width: 22ch;
  margin: 0 auto;
  font-family: var(--font-hand);
  font-size: clamp(0.875rem, 6.2cqi, 1.75rem);
  line-height: 1.6;
  color: var(--color-pen);
  transform: rotate(-2deg);           /* written by hand, not typeset */
}

/* Turned over */
.polaroid.is-flipped .polaroid__front { visibility: hidden; }
.polaroid.is-flipped .polaroid__back { visibility: visible; }
.polaroid.is-flipped .polaroid__card {
  transform: translateY(calc(-1 * var(--space-2))) rotateZ(-1.5deg) rotateY(180deg);
}

@media (hover: hover) and (pointer: fine) {
  .polaroid:hover .polaroid__front { visibility: hidden; }
  .polaroid:hover .polaroid__back { visibility: visible; }
  .polaroid:hover .polaroid__card {
    transform: translateY(calc(-1 * var(--space-2))) rotateZ(-1.5deg) rotateY(180deg);
  }
}

.polaroid:hover .polaroid__face,
.polaroid.is-flipped .polaroid__face {
  box-shadow:
    0 2px 4px rgb(var(--shadow-coral) / 0.12),
    0 24px 48px rgb(var(--shadow-coral) / 0.28);
}

.polaroid:focus-visible { outline: 2px solid var(--color-ink); outline-offset: var(--space-2); }

/* Reduced motion: no turning, the back simply fades in */
@media (prefers-reduced-motion: reduce) {
  .polaroid__card { transition: none; transform: none !important; }
  .polaroid__back { transform: none; opacity: 0; transition: opacity 0.3s ease, visibility 0s linear 0.15s; }
  .polaroid__front { transition: opacity 0.3s ease, visibility 0s linear 0.15s; }
  .polaroid.is-flipped .polaroid__back { opacity: 1; }
  .polaroid.is-flipped .polaroid__front { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
  .polaroid:hover .polaroid__back { opacity: 1; }
  .polaroid:hover .polaroid__front { opacity: 0; }
}

@media (min-width: 768px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--pad-x);
    align-items: center;
  }
  .feature__logo img { width: min(50%, 240px); }
}

/* ---------- 3. Offerings ---------- */
.offerings {
  display: grid;
  row-gap: var(--row-gap);
  padding: 0 var(--pad-x) var(--pad-y);
  background: var(--color-coral);
}

/* Each pair sits side by side, even on phones */
.offering {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--col-gap);
}

/* Subgrid keeps paragraphs aligned even when a headline wraps */
.offering { grid-template-rows: auto auto; }

.offering__item {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: var(--heading-gap);
  align-content: start;
}

.offering__item .headline + p { margin-top: 0; }

.offering__item p {
  font-size: var(--text-offering);
  line-height: var(--leading-offering);
}

@media (min-width: 1024px) {
  .feature { column-gap: calc(var(--pad-x) * 2); }
}

@media (min-width: 1024px) {
  /* Four even columns: the pairs dissolve into one grid */
  .offerings {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: var(--col-gap);
  }
  .offering { display: contents; }
}

/* ---------- 4. Services list ---------- */
.services {
  display: grid;
  row-gap: var(--space-12);
  padding: var(--pad-y) var(--pad-x);
  background: var(--color-black);
  color: var(--color-white);
}

.services__list {
  display: grid;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;                  /* offerings are centered on the page */
}

.services__label { text-align: center; }

.services__list li {
  font-family: var(--font-body);
  font-size: 0.875rem;                 /* 14 / 20 */
  font-weight: 600;
  line-height: 1.43;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* Hover: the same green as the Submit button, behind white text.
   Padding is offset by negative margin so the layout doesn't shift. */
.services__list li {
  padding: var(--space-2) var(--space-3);
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3));
  transition: background-color 0.25s var(--ease-out);
}
.services__list li:hover { background: var(--color-green); }

@media (min-width: 768px) {
  /* "Services" sits right-aligned in the left half, inside the outline */
  .services {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--col-gap);
    row-gap: var(--space-16);
  }
  .services__label { text-align: right; }

  /* Natural-width items with equal gaps; every row centered */
  .services__list {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: var(--space-12);
    row-gap: var(--space-6);
  }
  .services__list li { white-space: nowrap; }
}

@media (min-width: 1024px) {
  .services { row-gap: var(--space-20); }

  /* Balanced 3 + 2: an invisible full-width break after the third item */
  .services__list::after {
    content: "";
    flex-basis: 100%;
    order: 1;
  }
  .services__list li:nth-child(n+4) { order: 2; }
}

@media (min-width: 1440px) {
  /* All five on one centered line, evenly spaced edge to edge */
  .services__list {
    justify-content: space-between;
    gap: var(--space-6);
  }
  .services__list::after { content: none; }
  .services__list li:nth-child(n+4) { order: 0; }
}

/* ---------- 5. Inquire ---------- */
.inquire {
  display: grid;
  gap: var(--space-6);
  padding: var(--pad-y) var(--pad-x);
  background: var(--color-sand);
}

.inquire__body {
  display: grid;
  width: 100%;
}

/* Form and thank-you share one cell so the row keeps its height */
.inquire__form,
.inquire__thanks { grid-area: 1 / 1; }

.inquire__form {
  display: grid;
  gap: var(--field-gap);
  align-content: start;
}

.inquire__thanks {
  visibility: hidden;
  font-family: var(--font-body);
  font-size: 1.125rem;                 /* 18 / 32 */
  line-height: 1.7778;
  outline: none;
}

.inquire__signature { margin-top: var(--space-4); }

.is-sent .inquire__form { visibility: hidden; }
.is-sent .inquire__thanks { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  .is-sent .inquire__thanks { animation: rise 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
}

.field {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

/* Focus: the field brightens and an ink line draws across its base */
.field::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--control-h) - 2px);
  height: 2px;
  background: var(--color-ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--ease-out);
  pointer-events: none;
}
.field:focus-within::after { transform: scaleX(1); }

.inquire input {
  width: 100%;
  min-width: 0;                        /* let fields share a row evenly */
  height: var(--control-h);
  padding: 0 var(--control-pad-x);
  border: 0;
  border-radius: 0;
  background: var(--color-field);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.5;
  transition: background-color 0.3s var(--ease-out);
}

.inquire input::placeholder {
  color: #4A4A4A;
  opacity: 1;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.inquire input:focus { background: var(--color-white); }
.inquire input:focus::placeholder { opacity: 0.45; transform: translateX(4px); }

/* the drawn line plus the white field is the focus indicator */
.inquire input:focus-visible { outline: none; }

.field__error {
  display: none;
  color: var(--color-error);
  font-size: 0.875rem;
  line-height: 1.5;
}

.was-submitted input:invalid {
  box-shadow: inset 0 0 0 2px var(--color-error);
}
.was-submitted input:invalid + .field__error { display: block; }

.inquire button {
  justify-self: start;
  height: var(--control-h);
  margin-top: calc(var(--button-gap) - var(--field-gap));
  padding: 0 var(--space-16);
  border: 0;
  border-radius: 0;
  background: var(--color-button);
  color: var(--color-white);
  font: 600 1.125rem/1 var(--font-body);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

.inquire button:hover { background: var(--color-green); }
.inquire button:active { transform: translateY(1px); }
.inquire button:focus-visible { outline-color: var(--color-button); }

.inquire__status { font-size: 0.875rem; line-height: 1.5; }
.inquire__status:empty { display: none; }

@media (min-width: 768px) {
  /* Fields and button on one line */
  .inquire__form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    column-gap: var(--space-4);
    align-items: start;
  }
  .inquire button {
    margin-top: 0;
    padding: 0 var(--space-12);
  }
  .inquire__status { grid-column: 1 / -1; }

  /* Thank-you reads as one line, centered on the field row */
  .inquire__thanks {
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-4);
    align-items: baseline;
    padding-top: calc((var(--control-h) - 2rem) / 2);
  }
  .inquire__signature { margin-top: 0; }
}

@media (min-width: 1024px) {
  /* Label, fields and button all on one line */
  .inquire {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-16);
    align-items: start;
  }
  .inquire__label { line-height: var(--control-h); }
  .inquire { padding-block: var(--space-16); }   /* a single line needs less height */
}

/* ---------- Credit line ---------- */
.credit {
  padding: var(--space-6) var(--pad-x);
  font-size: var(--text-small);
  line-height: 1.5;
  text-align: center;
}

.credit p { max-width: none; }

.credit a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset 0.2s var(--ease-out);
}
.credit a:hover { text-underline-offset: 5px; }

/* ---------- Motion ----------
   Sections ease in as they scroll into view. script adds .js-reveal to
   <html> only when motion is allowed, so without JS or with reduced
   motion everything is simply visible. Items that enter the view
   together are staggered by the script via --reveal-delay. */
:root {
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --reveal-distance: var(--space-6);
}

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity 0.9s var(--ease-reveal) var(--reveal-delay, 0s),
    transform 1.1s var(--ease-reveal) var(--reveal-delay, 0s);
}

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* Hero photo: fades in while settling from a slight zoom */
.js-reveal [data-reveal="image"] { transform: none; transition-duration: 1.4s; }
.js-reveal [data-reveal="image"] img {
  transform: scale(1.06);
  transition: transform 2.2s var(--ease-reveal);
}
.js-reveal [data-reveal="image"].is-revealed img { transform: none; }

/* Polaroid: drops into place with a small turn, like it was set down */
.js-reveal [data-reveal="settle"] {
  transform: translateY(var(--space-8)) rotate(3deg);
  transition-duration: 1s, 1.4s;
}

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

@media (prefers-reduced-motion: reduce) {
  .field::after,
  .inquire input,
  .inquire input::placeholder,
  .credit a { transition: none; }
}