/*
  Sonset, thesonset.com (new site). Hand written, no framework, no JavaScript.
  Look: white page, Montserrat, navy type and buttons, gold word mark and rules.
  Gold is for rules and the word mark only. Purple is for button hover and keyboard focus only.
  Pale yellow is ONE band: the four steps on the home page.
*/

:root {
  --navy: #2B2D42;
  --white: #FFFFFF;
  --gold: #EFC061;
  --pale: #FAF3DD;
  --purple: #683D91;
  --hair: #E6E6EE;
  --muted: #5A5C73;

  --max: 1080px;
  --gutter: 20px;
  --section: 56px;
  --header: 72px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section: 88px;
    --header: 96px;
  }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--white);
  color: var(--navy);
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
}

main {
  flex: 1 0 auto;
}

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

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

h1,
h2,
h3 {
  color: var(--navy);
}

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

/* No single word last lines in body text */
p,
.row-text,
.step p,
.faq-item p {
  text-wrap: pretty;
}

h1 {
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h2 {
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h3 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
}

address {
  font-style: normal;
}

a {
  color: inherit;
}

/* Keyboard focus: purple outline, never removed */
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}

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

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
}

.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ---------- Links and buttons ---------- */

/* Secondary action and inline links: navy text, 2px gold underline, offset 4px */
.text-link,
.prose a:not(.button),
.cta-text a,
.step p a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-skip-ink: none;
}

.text-link:hover,
.prose a:not(.button):hover,
.cta-text a:hover,
.step p a:hover {
  text-decoration-thickness: 3px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 16px 28px;
  border: 0;
  border-radius: 2px;
  background: var(--navy);
  color: var(--white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  box-shadow: none;
}

.button:hover,
.button:focus {
  background: var(--purple);
  color: var(--white);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  background: var(--white);
  border-bottom: 1px solid var(--hair);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header);
}

.brand {
  display: block;
  line-height: 0;
}

.brand img {
  width: 120px;
  height: auto;
}

@media (min-width: 768px) {
  .brand img {
    width: 150px;
  }
}

.nav {
  display: none;
}

.nav a {
  display: inline-block;
  padding: 8px 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Phone and tablet: a menu with no JavaScript */
.menu summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--hair);
  border-radius: 2px;
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

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

.menu[open] summary {
  border-color: var(--navy);
}

.menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px var(--gutter) 16px;
  background: var(--white);
  border-bottom: 1px solid var(--hair);
}

.menu-panel a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.menu-panel a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 1000px) {
  .nav {
    display: flex;
    gap: 26px;
  }

  .menu {
    display: none;
  }
}

/* ---------- Sections ---------- */

.section {
  padding: var(--section) 0;
  border-top: 1px solid var(--hair);
}

.section--band {
  background: var(--pale);
}

.section--small {
  padding: 40px 0;
}

.section--cta {
  padding: 48px 0;
}

@media (min-width: 768px) {
  .section--small {
    padding: 56px 0;
  }

  .section--cta {
    padding: 64px 0;
  }
}

.page-head {
  padding: 40px 0 var(--section);
}

@media (min-width: 768px) {
  .page-head {
    padding: 72px 0 var(--section);
  }
}

.page-head h1 {
  max-width: 820px;
}

.eyebrow {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  max-width: 640px;
  margin-top: 24px;
  font-size: 18px;
  line-height: 1.55;
}

@media (min-width: 768px) {
  .lede {
    font-size: 20px;
  }
}

/* Words on one side, heading on the other */
.split {
  display: grid;
  gap: 20px;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: baseline;
  }
}

.facts .split + .split {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--hair);
}

.prose p {
  max-width: 640px;
}

.prose > * + * {
  margin-top: 16px;
}

.prose .actions {
  margin-top: 32px;
}

/* ---------- Hero extras: details line, email beside the button ---------- */

.hero-details {
  max-width: 640px;
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.6;
}

.actions--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.action-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.action-line .text-link {
  overflow-wrap: anywhere;
}

/* ---------- Closing band: one sentence and the button ---------- */

.cta-band {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.cta-text {
  max-width: 640px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .cta-band {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .cta-band .button {
    white-space: nowrap;
  }
}

/* ---------- Home hero (Split) ---------- */

.hero {
  padding: 20px 0 var(--section);
}

.hero-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-media {
  order: -1;
}

.hero-media img {
  width: 100%;
  max-width: 512px; /* 4:5 at the 640px height cap, so the crop stays the same on tablets */
  aspect-ratio: 4 / 5;
  max-height: 640px;
  object-fit: cover;
  object-position: 50% 2%; /* the suit portrait: keep the top of the head in frame */
  border-radius: 0;
}

.hero .actions {
  margin-top: 28px;
}

.hero .lede {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .hero .lede {
    margin-top: 24px;
  }
}

@media (min-width: 900px) {
  .hero {
    padding: 56px 0 var(--section);
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }

  .hero-media {
    order: 0;
  }

  .hero .actions {
    margin-top: 36px;
  }

  /* The heading shares the row with the photo, so it runs smaller than a full width H1 */
  .hero h1 {
    font-size: clamp(34px, 3.8vw, 48px);
  }
}

/* ---------- Rows (what Sonset makes) ---------- */

.rows {
  margin-top: 40px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}

.row {
  display: grid;
  gap: 8px;
  padding: 28px 0;
  border-bottom: 1px solid var(--hair);
}

.row .text-link {
  justify-self: start;
  margin-top: 4px;
}

.row-text {
  font-size: 18px;
}

/* Tablet: title and text side by side, the link under the text.
   From 1000px: a third column that fits the longest link ("How a campaign day goes"). */
@media (min-width: 768px) {
  .row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr);
    gap: 8px 32px;
    align-items: baseline;
  }

  .row .text-link {
    grid-column: 2;
  }
}

@media (min-width: 1000px) {
  .row {
    grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) 248px; /* same width on every row, so the text lines up */
    gap: 32px;
  }

  .row .text-link {
    grid-column: auto;
    justify-self: end;
    margin-top: 0;
    white-space: nowrap;
  }
}

/* Rows with no link: only two columns, with a wider title for long names */
@media (min-width: 768px) {
  .rows--plain .row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

@media (min-width: 1000px) {
  .rows--plain .row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  }
}

.rows-note {
  max-width: 720px;
  margin-top: 28px;
  font-size: 16px;
}

.section-intro {
  max-width: 640px;
  margin-top: 16px;
}

.section-intro + .rows {
  margin-top: 32px;
}

/* ---------- Steps: the repeated device ---------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px 32px;
  margin-top: 48px;
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.step-mark {
  margin-bottom: 12px;
}

.rule {
  display: block;
  width: 48px;
  height: 4px;
  background: var(--gold);
}

.step-num {
  display: block;
  margin-top: 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.step p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.6;
}

/* Five steps: the same device as a list, one step per row */
.steps--list {
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--hair);
}

.steps--list .step {
  padding: 28px 0;
  border-bottom: 1px solid var(--hair);
}

@media (min-width: 768px) {
  .steps--list {
    grid-template-columns: 1fr;
  }

  .steps--list .step {
    display: grid;
    grid-template-columns: 96px minmax(0, 3fr) minmax(0, 6fr);
    gap: 32px;
    align-items: baseline;
  }

  .steps--list .step-mark {
    margin-bottom: 0;
  }

  .steps--list .step p {
    margin-top: 0;
  }
}

.steps-after {
  margin-top: 40px;
}

/* ---------- Questions ---------- */

.faq-item + .faq-item {
  margin-top: 32px;
}

.faq-item p {
  max-width: 640px;
  margin-top: 6px;
}

/* ---------- Small line (founder) ---------- */

.founder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 28px;
  font-size: 16px;
}

/* ---------- Photo beside a block ---------- */

.photo-split {
  display: grid;
  gap: 40px;
}

.photo-split img {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

@media (min-width: 900px) {
  .photo-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
  }

  .photo-split img {
    justify-self: end;
  }
}

/* ---------- Contact and About ---------- */

.contact-email {
  display: inline-block;
  font-size: clamp(22px, 5.6vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.contact-email:hover {
  text-decoration-thickness: 4px;
}

.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.link-row a {
  display: inline-block;
  padding: 8px 0;
}

.place {
  margin-top: 20px;
  color: var(--muted);
  font-size: 16px;
}

.address-block {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--hair);
}

.address-block strong {
  font-weight: 700;
}

.about {
  max-width: 680px;
  margin-top: 32px;
}

.about p + p {
  margin-top: 20px;
}

.contact-line {
  margin-top: 36px;
}

/* ---------- Footer ---------- */

.site-footer {
  flex-shrink: 0;
  padding: 40px 0;
  background: var(--white);
  border-top: 1px solid var(--hair);
  font-size: 14px;
  line-height: 1.6;
}

.footer-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-name {
  font-weight: 700;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-block;
  padding: 10px 0;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (min-width: 768px) {
  .footer-grid {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-links a {
    padding: 0;
  }
}

/* ---------- Stub pages (old gallery URLs) ---------- */

.stub {
  padding: var(--section) 0;
}

.stub h1 {
  font-size: clamp(26px, 3.2vw, 36px);
}

/* =====================================================================
   Match the original Sonset design (the site Simon designed, now at nissipululu.com), 2026-10-19:
   airy header with 70px above and below, small uppercase letterspaced silver nav, a 940px page,
   lighter type, no coloured band, centred quiet footer. Content and structure are unchanged.
   ===================================================================== */
:root {
  --max: 940px;
  --section: 64px;
  --hair: #EDEDED;
  --muted: #8A8A8A;
}

body {
  color: #333;
  font-size: 16px;
  line-height: 1.7;
}

h1,
h2,
h3 {
  color: #333;
}

h1 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}

h2 {
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: 0;
}

h3 {
  font-weight: 600;
  font-size: 16px;
}

.lede {
  font-size: 17px;
}

.eyebrow {
  color: #9A9A9A;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
}

/* Header and nav, as in the original: 70px above and below, uppercase, Montserrat 12px, letter spacing 1px, silver */
.site-header {
  border-bottom: 0;
  padding: 40px 0;
}

.site-header .container {
  height: auto;
}

@media (min-width: 768px) {
  .site-header {
    padding: 70px 0;
  }
}

.nav a {
  padding: 7px 11px;
  color: silver;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: #333;
  text-decoration: none;
}

@media (min-width: 1000px) {
  .nav {
    gap: 0;
  }
}

.menu summary {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #E2E2E2;
  color: #666;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu-panel a {
  color: silver;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.menu-panel a[aria-current="page"] {
  color: #333;
  text-decoration: none;
}

/* No coloured band, no hard section lines: air instead */
.section {
  border-top: 0;
}

.section--band {
  background: var(--white);
}

/* Buttons and small labels use the same quiet uppercase as the nav */
.button {
  min-height: 48px;
  padding: 14px 28px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.row > :first-child,
.step h3 {
  letter-spacing: 0;
}

/* Footer: centred and quiet, like the original */
.site-footer {
  padding: 48px 0;
  border-top: 0;
  text-align: center;
  color: #666;
}

.footer-grid {
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-links {
  justify-content: center;
  gap: 0 8px;
}

.footer-links a {
  padding: 6px 10px;
  color: silver;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}

.footer-links a:hover {
  color: #333;
}

@media (min-width: 768px) {
  .footer-grid {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer-links a {
    padding: 6px 10px;
  }
}

/* fit six nav links beside the word mark on a 940px page */
@media (min-width: 768px) {
  .brand img {
    width: 130px;
  }
}

.nav a {
  padding: 7px 9px;
  letter-spacing: 0.8px;
}

.hero h1 {
  font-size: clamp(26px, 3vw, 32px);
  line-height: 1.22;
}

/* the content area is a full 940px, like the original (the container holds 24px of padding each side) */
:root {
  --max: 988px;
}