/* Annabel Scanlen — rebuilt from the Squarespace layout (measured Oct 2026).
   Grid, spacing and type scales mirror the original site; typeface is the
   brand font, Neue Haas Grotesk Display 55 Roman. */

@font-face {
  font-family: "Neue Haas Grotesk Display";
  src: url("/fonts/NeueHaasGroteskDisplay-55Roman.woff2") format("woff2"),
       url("/fonts/NeueHaasGroteskDisplay-55Roman.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --site-gutter: 6vw;
  --site-max-width: 1400px;
  --vh-base: min(100vh, 900px);     /* mobile type and spacing scale off this */
  --ink: #000;
  --paper: #fff;
  --font: "Neue Haas Grotesk Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* header */
  --logo-h: 94px;
  --header-pad: 2.8vw;
  --header-h: calc(var(--logo-h) + var(--header-pad) * 2);
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }
@media (min-width: 1000px) { html { font-size: 17px; } }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; }
a { color: inherit; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); padding: 8px 12px; z-index: 100;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Type (Squarespace scale: desktop by vw, mobile by vh) ---------- */

.t-h2 {
  margin: 0 0 2rem;
  font-weight: 400;
  font-size: min(calc(0.84vw + 1rem), 1.7rem);
  line-height: 1.215;
  letter-spacing: 0.02em;
}
.t-h3 {
  margin: 0;
  font-weight: 400;
  font-size: min(calc(0.6vw + 1rem), 1.5rem);
  line-height: 1.225;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
}
.t-small {
  margin: 1rem 0;
  font-size: min(calc(1rem - 0.12vw), 0.9rem);
  line-height: 1.225;       /* matches the headline (.t-h3) */
  letter-spacing: 0.02em;   /* matches the headline (.t-h3) */
}
.t-small:first-child { margin-top: 0; }
.t-small:last-child { margin-bottom: 0; }
.t-justify { text-align: justify; }

.t-small a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (max-width: 767px) {
  .t-h2 { font-size: calc(0.7 * 0.012 * var(--vh-base) + 1rem); }
  .t-h3 { font-size: calc(0.5 * 0.012 * var(--vh-base) + 1rem); }
  .t-small { font-size: calc(-0.1 * 0.012 * var(--vh-base) + 1rem); }
}

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

.site-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: var(--header-pad) var(--site-gutter);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo { display: block; flex: none; }
.logo img { height: var(--logo-h); width: auto; }

.nav { display: flex; gap: 1.5vw; }
.nav a {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.05rem;
  text-decoration: none;
  padding-bottom: 0.1em;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 0.1em);
  background-size: 0 1px;
  transition: background-size 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav a:hover,
.nav a:focus-visible,
.nav a[aria-current="page"] { background-size: 100% 1px; }

.burger { display: none; }
.mobile-menu { display: none; }

@media (max-width: 767px) {
  :root {
    --logo-h: 37px;
    --header-pad: 4.3vw;
  }
  .nav { display: none; }

  .burger {
    display: block;
    position: relative;
    width: 47px; height: 37px;
    margin-left: 3px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--ink);
  }
  .burger span {
    position: absolute;
    left: 6px;
    width: 35px; height: 1px;
    background: currentColor;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
  }
  .burger span:nth-child(1) { top: 12.5px; }
  .burger span:nth-child(2) { top: 18px; opacity: 0; }
  .burger span:nth-child(3) { top: 23.5px; }
  .menu-open .burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg) scaleX(0.83); }
  .menu-open .burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg) scaleX(0.83); }

  .mobile-menu {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9;
    padding-top: var(--header-h);
    background: var(--paper);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22.5px;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .menu-open { overflow: hidden; }
  .mobile-menu a {
    font-size: 31.875px;
    line-height: 1;
    letter-spacing: 0.03em;
    text-decoration: none;
  }
}

/* ---------- Page sections ---------- */

main { padding-top: var(--header-h); }

.section-about { padding: 6.6vw 0; }
.section-contact { padding: 3.3vw var(--site-gutter); }

@media (max-width: 767px) {
  .section-about { padding: calc(0.066 * var(--vh-base)) 0; }
  .section-contact { padding: calc(0.033 * var(--vh-base) + 17px) var(--site-gutter) calc(0.033 * var(--vh-base)); }
}

/* ---------- About: fluid grid (Squarespace Fluid Engine equivalent) ---------- */

.fe {
  --gap: 11px;
  --grid-gutter: calc(var(--site-gutter) - var(--gap));
  --cell-max-width: calc((var(--site-max-width) - (var(--gap) * 7)) / 8);
  display: grid;
  position: relative;
  grid-template-rows: repeat(35, minmax(24px, auto));
  grid-template-columns:
    minmax(var(--grid-gutter), 1fr)
    repeat(8, minmax(0, var(--cell-max-width)))
    minmax(var(--grid-gutter), 1fr);
  gap: var(--gap);
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 768px) {
  .fe {
    --cell-max-width: calc((var(--site-max-width) - (var(--gap) * 23)) / 24);
    --container-width: min(var(--site-max-width), calc(100vw - var(--site-gutter) * 2));
    grid-template-rows: repeat(40, minmax(calc(var(--container-width) * 0.0215), auto));
    grid-template-columns:
      minmax(var(--grid-gutter), 1fr)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(var(--grid-gutter), 1fr);
  }
}

.blk { position: relative; grid-area: var(--m); z-index: var(--mz); min-width: 0; }
@media (min-width: 768px) {
  .blk { grid-area: var(--d); z-index: var(--dz); }
}

.blk-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: var(--op, 50% 50%);
}
@media (max-width: 767px) {
  .blk-img img { object-position: var(--op-m, var(--op, 50% 50%)); }
}
.al-l { --op: 0% 50%; }
.al-c { --op: 50% 50%; }
.al-r { --op: 100% 50%; }

/* Block placements: --m / --mz = mobile, --d / --dz = desktop (grid-area, z-index) */
.b-intro    { --m: 1/2/5/10;   --mz: 1;  --d: 1/2/4/11;    --dz: 1;  }
.b-arch     { --m: 8/4/11/10;  --mz: 2;  --d: 11/15/13/24; --dz: 2;  }
.b-practice { --m: 18/4/22/10; --mz: 3;  --d: 13/15/17/24; --dz: 3;  }
.b-linework { --m: 3/5/6/9;    --mz: 7;  --d: 25/6/29/10;  --dz: 10; }
.b-ring1    { --m: 5/2/7/4;    --mz: 13; --d: 1/17/5/19;   --dz: 8;  }
.b-tea      { --m: 4/6/7/10;   --mz: 8;  --d: 3/18/9/25;   --dz: 7;  }
.b-interior { --m: 11/2/17/6;  --mz: 6;  --d: 10/5/19/10;  --dz: 4;  }
.b-stroke   { --m: 15/1/18/4;  --mz: 5;  --d: 27/2/31/6;   --dz: 13; }
.b-ring2    { --m: 12/8/14/10; --mz: 4;  --d: 7/3/11/5;    --dz: 5;  }
.b-art11    { --m: 21/3/26/7;  --mz: 12; --d: 15/21/20/26; --dz: 9;  }
.b-portrait { --m: 26/4/33/10; --mz: 9;  --d: 17/19/26/24; --dz: 11; }
.b-wheel    { --m: 22/2/27/6;  --mz: 11; --d: 26/8/35/13;  --dz: 14; }
.b-art12    { --m: 29/5/34/8;  --mz: 10; --d: 14/3/20/7;   --dz: 12; }
.b-spiral   { --m: 25/8/28/11; --mz: 8;  --d: 32/10/36/14; --dz: 6;  --op-m: 100% 100%; }

/* ---------- Contact ---------- */

.contact-text {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 767px) {
  .contact-text { width: 100%; }
}