/* Björkkulla Snickeri – site styles (design D: dark opening, magazine pages) */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Dark opening */
  --night: #14110e;
  --cream: #efe7da;
  --cream-muted: rgba(239, 231, 218, 0.78);
  --brass: #c9a46b;
  /* Paper pages */
  --paper: #f2ebdf;
  --paper-2: #e9dfcf;
  --ink: #2b2219;
  --muted: #645748;
  --rule: rgba(43, 34, 25, 0.22);
  --oxblood: #7d2e22;
  --sage: #5a6652;

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --text: "Source Serif 4", Georgia, serif;
  --ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --wrap: min(1200px, 100% - 2 * var(--gutter));
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-underline-offset: 0.22em;
}

::selection {
  background: var(--brass);
  color: var(--night);
}

:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 4px;
}

.wrap {
  width: var(--wrap);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 0.95;
}

/* Cormorant's descenders (g, p) and ascenders (d, l, å) need about 1.1 between
   lines, or wrapped headings collide. The hero h1 stays tight: its lines don't
   collide and the logo lockup is tuned to it. */
h2,
h3 {
  line-height: 1.1;
}

em {
  font-style: italic;
}

.kicker {
  margin: 0;
  color: var(--oxblood);
  font-family: var(--ui);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  border: 1px solid currentColor;
  padding: 0 1.4rem;
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
}

/* ---------- Opening: photo behind, logo lined up with the S ---------- */

.top {
  position: absolute;
  inset: 0 0 auto;
  z-index: 5;
  color: var(--cream);
}

.top .wrap {
  display: flex;
  min-height: 110px;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
}

.top nav {
  display: flex;
  gap: 28px;
  font-family: var(--ui);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top nav a {
  opacity: 0.9;
  text-decoration: none;
}

.top nav a:hover {
  color: var(--brass);
  opacity: 1;
}

.hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  align-items: end;
  background: var(--night);
  color: var(--cream);
}

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

.hero::after {
  position: absolute;
  inset: 0;
  /* Darker where the text sits (left and bottom); the photo stays vivid on the right */
  background:
    linear-gradient(90deg, rgba(20, 17, 14, 0.8) 0%, rgba(20, 17, 14, 0.62) 45%, rgba(20, 17, 14, 0) 80%),
    linear-gradient(180deg, rgba(20, 17, 14, 0.55) 0%, rgba(20, 17, 14, 0.3) 30%, rgba(20, 17, 14, 0.4) 60%, rgba(20, 17, 14, 0.88) 100%);
  content: "";
}

.hero .wrap {
  position: relative;
  z-index: 1;
  padding-bottom: clamp(56px, 9vh, 110px);
  text-shadow: 0 2px 24px rgba(20, 17, 14, 0.55);
}

.hero .label {
  margin: 0 0 18px;
  color: #eed6a8;
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* The logo is locked up with the S of the headline. Both are sized in the
   headline's em, so the pairing stays the same at every window size. */
.title {
  position: relative;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 9.5rem);
}

.title-logo {
  position: absolute;
  top: -0.06em;
  left: -0.047em;
  z-index: 1;
  width: 0.68em;
  aspect-ratio: 1;
}

.title-logo > img {
  width: 100%;
}

/* The saw blade turns slowly inside the frame. The window is the frame's
   inside, so the blade is cut off at its bottom edge as in the original.
   Percentages are Logga.png pixels (1028px), see work/build-images.mjs. */
.title-logo-klinga {
  position: absolute;
  top: 2.237%; /* 23 */
  left: 2.335%; /* 24 */
  width: 95.33%; /* 980 wide */
  height: 95.23%; /* 979 high */
  overflow: hidden;
}

.title-logo-klinga img {
  position: absolute;
  top: 66.09%; /* blade canvas from y 670 */
  left: 15.92%; /* and x 180 */
  width: 67.45%; /* 661 */
  animation: klinga 24s linear infinite;
}

/* Both ends given: with only "to", Safari re-derives the start whenever the
   element is restyled (e.g. a hover on the phone link) and the turn stops. */
@keyframes klinga {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.hero h1 {
  max-width: 11ch;
  padding-top: 0.27em;
  font-size: 1em;
}

.hero .lead {
  max-width: 440px;
  margin: 28px 0 34px;
  color: var(--cream-muted);
  font-family: var(--ui);
  font-size: 1.02rem;
}

.hero .btn {
  border-color: var(--brass);
  text-shadow: none;
  color: var(--cream);
}

.hero .btn--solid {
  background: var(--brass);
  color: var(--night);
}

.hero .btn:hover {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--night);
}

.scroll-hint {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(56px, 9vh, 110px);
  z-index: 1;
  color: var(--cream-muted);
  font-family: var(--ui);
  font-size: 0.66rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}

/* ---------- Paper pages ---------- */

.strapline {
  border-bottom: 4px double var(--ink);
  font-family: var(--ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.strapline .wrap {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.strapline a {
  text-decoration: none;
}

.ledare {
  padding-block: clamp(56px, 8vw, 110px);
}

.ledare-grid {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

.standfirst {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.5;
}

.standfirst::first-letter {
  float: left;
  margin: 8px 12px 0 0;
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 5.2em;
  font-weight: 500;
  line-height: 0.75;
}

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

.contents li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px dotted var(--rule);
  padding: 12px 0;
}

.contents a {
  font-family: var(--display);
  font-size: 1.35rem;
  text-decoration: none;
}

.contents a:hover {
  color: var(--oxblood);
}

.contents span {
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 1.2rem;
  font-style: italic;
}

.section {
  padding-block: clamp(72px, 9vw, 130px);
}

.section--flush {
  padding-top: 0;
}

.section-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: clamp(36px, 5vw, 64px);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 18px;
}

.section-title h2 {
  font-size: clamp(2.6rem, 5.8vw, 5.2rem);
  font-weight: 400;
}

/* Project spreads, image side alternating */

.spread {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.spread + .spread {
  margin-top: clamp(64px, 9vw, 120px);
}

.spread:nth-of-type(even) {
  grid-template-columns: 5fr 7fr;
}

.spread:nth-of-type(even) .spread-media {
  order: 2;
}

.spread-media {
  position: relative;
  margin: 0;
}

.spread-media > picture img {
  width: 100%;
}

.spread-media .inset {
  position: absolute;
  bottom: -9%;
  left: max(-7%, 16px - var(--gutter));
  width: 38%;
  border: 8px solid var(--paper);
  box-shadow: 0 18px 40px rgba(43, 34, 25, 0.22);
}

.spread:nth-of-type(even) .spread-media .inset {
  right: max(-7%, 16px - var(--gutter));
  left: auto;
}

/* A second, smaller print laid next to the first */
.spread-media .inset--2 {
  bottom: -4%;
  left: calc(max(-7%, 16px - var(--gutter)) + 41%);
  width: 30%;
}

.spread:nth-of-type(even) .spread-media .inset--2 {
  right: calc(max(-7%, 16px - var(--gutter)) + 41%);
  left: auto;
}

.spread .nr {
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 1.3rem;
  font-style: italic;
}

.spread h3 {
  margin: 10px 0 14px;
  font-size: clamp(2.4rem, 4.4vw, 3.8rem);
  font-weight: 400;
}

.spread p {
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
  font-style: italic;
}

.spread .kicker {
  margin-top: 18px;
  font-style: normal;
}

.more-link {
  display: inline-flex;
  margin-top: clamp(48px, 7vw, 88px);
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  color: var(--oxblood);
  font-family: var(--ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.more-link:hover {
  color: var(--ink);
}

/* Process: paper sheets scroll over a pinned photo (sticky also works on iOS) */

.story {
  position: relative;
  background: var(--night);
}

.story-media {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-media::after {
  position: absolute;
  inset: 0;
  background: rgba(20, 17, 14, 0.5);
  content: "";
}

.story-steps {
  position: relative;
  margin: -100svh 0 0;
  padding: 0 0 20svh;
  list-style: none;
}

.story-step {
  display: grid;
  min-height: 54svh;
  place-items: center;
  padding: 0 var(--gutter);
}

.story-step:first-child {
  min-height: 70svh;
}

/* On wider screens the sheets alternate sides, so the photo shows between them */
@media (min-width: 821px) {
  .story-step {
    padding-inline: max(var(--gutter), (100% - 1200px) / 2);
  }

  .story-step:nth-child(even) {
    justify-items: start;
  }

  .story-step:nth-child(odd):not(:first-child) {
    justify-items: end;
  }
}

.sheet {
  width: min(520px, 100%);
  padding: clamp(32px, 5vw, 52px);
  background: var(--paper);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
}

.sheet .n {
  color: var(--oxblood);
  font-family: var(--display);
  font-size: 3.2rem;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
}

.sheet h3 {
  margin: 14px 0 10px;
  font-size: clamp(2.2rem, 4.4vw, 3.2rem);
  font-weight: 400;
}

.sheet p {
  margin: 0;
  color: var(--muted);
}

.sheet .val {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(43, 34, 25, 0.18);
}

.sheet .val li {
  padding: 9px 0;
  border-bottom: 1px solid rgba(43, 34, 25, 0.18);
}

.sheet .val li::before {
  content: "— ";
  color: var(--oxblood);
}

.sheet--title {
  background: transparent;
  box-shadow: none;
  color: var(--cream);
  text-align: center;
}

.sheet--title .kicker {
  color: var(--brass);
}

.sheet--title h2 {
  margin-top: 14px;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  font-weight: 400;
}

/* Services in newspaper columns */

/* Equal columns (so the photos match in height); the rules sit in the gaps */
.columns {
  --col-gap: clamp(32px, 4.8vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.columns li {
  position: relative;
}

.columns li + li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--col-gap) / -2);
  border-left: 1px solid var(--rule);
  content: "";
}

.columns img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.columns h3 {
  margin: 18px 0 8px;
  font-size: 2.1rem;
  font-weight: 400;
}

.columns p {
  margin: 0;
  color: var(--muted);
}

/* Quote band with photo */

.quote {
  display: grid;
  grid-template-columns: 5fr 7fr;
  background: var(--sage);
  color: var(--paper);
}

.quote picture img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.quote-text {
  display: grid;
  place-content: center;
  padding: clamp(56px, 8vw, 120px) var(--gutter);
  text-align: center;
}

.quote blockquote {
  max-width: 14ch;
  margin: 0 auto;
  font-family: var(--display);
  font-size: clamp(2.6rem, 5.6vw, 5.6rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
}

.quote blockquote::before {
  display: block;
  margin-bottom: 10px;
  color: #e8c7a9;
  font-size: 1.6em;
  line-height: 0.6;
  content: "\201D";
}

.quote cite {
  display: block;
  margin-top: 28px;
  font-family: var(--ui);
  font-size: 0.72rem;
  font-style: normal;
  letter-spacing: 0.2em;
  opacity: 0.88;
  text-transform: uppercase;
}

/* Back page */

.back {
  text-align: center;
}

.back .frame {
  border-block: 4px double var(--ink);
  padding: clamp(40px, 6vw, 80px) var(--gutter);
}

.back h2 {
  margin-top: 14px;
  font-size: clamp(2.8rem, 7vw, 6.4rem);
  font-weight: 400;
}

.back h2 em {
  color: var(--oxblood);
}

.back p {
  margin: 20px 0 0;
  color: var(--muted);
  font-style: italic;
}

.phone {
  display: block;
  margin-top: 34px;
  font-family: var(--display);
  font-size: clamp(2.6rem, 7.4vw, 6rem);
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
}

.phone:hover {
  color: var(--oxblood);
}

/* The number's first 0 is the saw blade, turning slowly. Sized and placed
   from Cormorant's own 0: 0.41em high and wide, sitting on the baseline,
   0.477em advance. The blade is a touch larger since its teeth leave gaps. */
.phone-noll {
  display: inline-block;
  width: 0.46em;
  margin: 0 0.0085em;
  vertical-align: -0.037em;
  color: var(--ink); /* fixed, so the link's hover colour doesn't restyle it */
  animation: klinga 24s linear infinite;
}

.mail {
  display: inline-block;
  margin-top: 12px;
  font-size: 1.1rem;
  overflow-wrap: anywhere;
}

.back .btns {
  justify-content: center;
  margin-top: 34px;
}

.back .btn {
  color: var(--ink);
}

.back .btn--solid {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.back .btn:hover {
  border-color: var(--oxblood);
  background: var(--oxblood);
  color: var(--paper);
}

.site-footer {
  padding: 26px 0 40px;
  color: var(--muted);
  font-family: var(--ui);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--oxblood);
}

/* Floating call button, phones only, shown once the opening is scrolled past */

.call {
  display: none;
}

@media (max-width: 820px) {
  .call {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border-radius: 50%;
    background: var(--brass);
    color: var(--night);
    box-shadow: 0 8px 24px rgba(20, 17, 14, 0.3);
    transition: opacity 250ms ease, transform 250ms ease;
  }

  .call svg {
    width: 24px;
    height: 24px;
  }

  .js .call.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
  }
}

/* Reveal on scroll (only when JavaScript runs; skipped for reduced motion) */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal:nth-child(2) {
  transition-delay: 0.1s;
}

.reveal:nth-child(3) {
  transition-delay: 0.2s;
}

/* 404 */

.not-found {
  display: grid;
  min-height: 70svh;
  align-content: center;
  padding-block: 80px;
}

.not-found h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 400;
}

.not-found p {
  max-width: 480px;
  margin: 20px 0 30px;
  color: var(--muted);
  font-style: italic;
}

.not-found .btn--solid {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

/* Responsive */

@media (max-width: 820px) {
  .top nav,
  .scroll-hint,
  .strapline .wrap span:nth-child(2) {
    display: none;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(20, 17, 14, 0.5) 0%, rgba(20, 17, 14, 0.5) 30%, rgba(20, 17, 14, 0.66) 55%, rgba(20, 17, 14, 0.92) 100%);
  }

  .ledare-grid,
  .spread,
  .spread:nth-of-type(even),
  .quote {
    grid-template-columns: 1fr;
  }

  .spread:nth-of-type(even) .spread-media {
    order: 0;
  }

  .spread-media:has(.inset) {
    margin-bottom: 40px;
  }

  .spread-media .inset,
  .spread:nth-of-type(even) .spread-media .inset {
    right: auto;
    bottom: -40px;
    left: 12px;
    width: 34%;
    border-width: 6px;
  }

  .spread-media .inset--2,
  .spread:nth-of-type(even) .spread-media .inset--2 {
    bottom: -24px;
    left: calc(12px + 34% + 10px);
    width: 28%;
  }

  .columns {
    grid-template-columns: 1fr;
    row-gap: 48px;
  }

  .columns li + li::before {
    display: none;
  }

  .quote picture img {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .title-logo-klinga img,
  .phone-noll {
    animation: none;
  }
}