/* ACTUALLY STUDIOS. — Landing page */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-300-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #F7F4ED;
  --text: #292722;
  --accent: #C74735;
  --surface: #EAE7DF;
  --card: #FFFFFF;
  --rule: rgba(41, 39, 34, 0.18);

  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 3rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #26282B;
    --text: #F7F4ED;
    --surface: #303337;
    --card: #383B40;
    --rule: rgba(247, 244, 237, 0.22);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #26282B;
  --text: #F7F4ED;
  --surface: #303337;
  --card: #383B40;
  --rule: rgba(247, 244, 237, 0.22);
  color-scheme: dark;
}

/* High contrast (footer switch) */
:root[data-contrast="high"] {
  --bg: #FFFFFF;
  --text: #000000;
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --rule: #000000;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) {
    --bg: #000000;
    --text: #FFFFFF;
    --surface: #000000;
    --card: #000000;
    --rule: #FFFFFF;
    color-scheme: dark;
  }
}

:root[data-contrast="high"][data-theme="dark"] {
  --bg: #000000;
  --text: #FFFFFF;
  --surface: #000000;
  --card: #000000;
  --rule: #FFFFFF;
  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.7;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.005em;
  margin: 0;
}

h1 { font-size: clamp(3.25rem, 11vw, 8rem); }
h2 { font-size: clamp(2rem, 5.5vw, 3.5rem); }
h3 { font-size: 1.5rem; }

p { margin: 0 0 1em; max-width: 60ch; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }

.dot { color: var(--accent); }

.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: var(--gutter); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 200;
  background: var(--text); color: var(--bg); padding: 0.75rem 1rem;
}
.skip:focus { top: 0.75rem; }

/* Splash (intro) */
.splash { display: none; }

html.splash-on .splash {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  animation: splash-out 0.6s ease 2.8s forwards;
}

.splash-logo { width: min(46vw, 15rem); height: auto; overflow: visible; }

.splash-a { fill: currentColor; opacity: 0; animation: a-in 0.7s ease 0.2s forwards; }

.splash-dot {
  fill: var(--accent);
  opacity: 0;
  animation: dot-drop 1.5s linear 1s forwards;
}

@keyframes a-in { to { opacity: 1; } }

/*
  Free fall with elastic bounces on the baseline of the A (units = SVG user units).
  Drop height 260, fall time 0.6 s (d = g·t²/2), restitution e = 0.5:
  hop height = 260·e² = 65, hop time = 0.6 s; second hop = 260·e⁴ = 16.25, 0.3 s.
  Fall = ease-in quad, rise = ease-out quad.
*/
@keyframes dot-drop {
  0%   { opacity: 0; transform: translateY(-260px);   animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  5%   { opacity: 1; }
  40%  { opacity: 1; transform: translateY(0);        animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
  60%  { transform: translateY(-65px);                animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  80%  { transform: translateY(0);                    animation-timing-function: cubic-bezier(0.333, 0.667, 0.667, 1); }
  90%  { transform: translateY(-16.25px);             animation-timing-function: cubic-bezier(0.333, 0, 0.667, 0.333); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes splash-out { to { opacity: 0; visibility: hidden; } }

/* Header */
.site-header { padding-block: 1.25rem; }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  font-size: 1.75rem;
  line-height: 1;
  text-decoration: none;
  letter-spacing: 0.01em;
  padding-block: 0.6rem;
}

.site-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; }

.site-nav a {
  display: inline-block;
  padding-block: 0.7rem;
  font-size: 1.0625rem;
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Hero */
.hero { padding-block: clamp(4rem, 13vw, 10rem) clamp(4rem, 11vw, 8rem); }
.hero h1 { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.lead { font-family: var(--serif); font-weight: 300; font-size: clamp(1.625rem, 3.75vw, 2.25rem); line-height: 1.2; margin-bottom: 0.75rem; }
.hero p:not(.lead) { margin-bottom: 2rem; }

.btn {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.8rem 1.6rem;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  border-radius: 2px;
}
.btn:hover { box-shadow: inset 0 -3px 0 var(--accent); }
.btn:focus-visible { outline-color: var(--text); outline-offset: 4px; }

/* Collections */
.collections { background: var(--surface); padding-block: clamp(3rem, 9vw, 6rem); }

.panels { display: grid; gap: 1.25rem; }

.panel {
  background: var(--card);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.panel h2 { margin-bottom: 1.25rem; }
.panel p { margin-bottom: 1.75rem; }
.panel .link { margin-top: auto; padding-block: 0.6rem; }

/* About, Contact */
.section { padding-block: clamp(3.5rem, 10vw, 7rem); }
.section h2 { margin-bottom: 1.5rem; }
.section + .section { padding-top: 0; }

/* Footer (same tone as the Collections band) */
.site-footer { background: var(--surface); padding-block: 3rem 3.5rem; font-size: 1rem; font-weight: 400; }

.foot-grid { display: grid; gap: 2rem; }

.site-footer p { margin: 0 0 0.25rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a { display: inline-block; padding-block: 0.35rem; }

.label {
  font-size: 0.8125rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 0.6rem !important;
}

.tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }

.tools button {
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 400;
  min-height: 2.75rem;
  min-width: 3.5rem;
  padding: 0 1rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  border-radius: 2px;
  cursor: pointer;
}
.tools button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.tools button[hidden] { display: none; }

.theme { display: inline-flex; border: 1px solid var(--text); border-radius: 2px; }
.tools .theme button { border: 0; border-radius: 0; }
.tools .theme button + button { border-left: 1px solid var(--text); }

/* Text pages */
.page { padding-block: clamp(2.5rem, 8vw, 5rem) clamp(3.5rem, 10vw, 7rem); }
.page h1 { font-size: clamp(2.5rem, 8vw, 4.5rem); margin-bottom: 2rem; }
.page h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 2.25rem 0 0.75rem; }
.page h3 { font-family: var(--sans); font-weight: 400; font-size: 1.0625rem; letter-spacing: 0; margin: 1.5rem 0 0.5rem; }
.page ul { max-width: 60ch; margin: 0 0 1em; padding-left: 1.25rem; }
.page li { margin-bottom: 0.35rem; }

/* High contrast extras */
:root[data-contrast="high"] body { font-weight: 400; }
:root[data-contrast="high"] a { text-decoration: underline; }
:root[data-contrast="high"] .panel { border: 2px solid var(--text); }
:root[data-contrast="high"] .site-footer { border-top: 2px solid var(--text); }

@media (min-width: 48rem) {
  .panels { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
}