/* The art section, built on the photography template so the two rooms of the
   site match: the same pill, the same big centred name, the same pull quote,
   the same about block, band and footer, the same reveal.

   One deliberate difference: the tiles show each work whole. A collage
   cannot be cropped to fit a cell, so the image sits inside a uniform cell
   rather than filling it.

   Playfair Display stays registered below but is not the display face; the
   --display token is LT Remark, as on the photography pages. An unused
   @font-face costs no request, so switching back is one token.

   Self-contained, like the photography stylesheet: it does not load the
   Webflow CSS, so nothing here can be moved by a change elsewhere. That does
   mean the shared furniture is spelled out in both files. */

:root{
  --paper:#ffffff;
  --ink:#0E0054;             /* 18.31:1 on white */
  --muted:#3a406a;           /* 9.9:1 on white */
  --line:#e6e6ee;
  --pink:#ff0091;
  --pink-ink:#c2006e;        /* 4.6:1 on white, for pink used as text */
  --hot:#FD0793;             /* the headline pink she drew; 3.73:1, large text only */
  --display:"LT Remark","Playfair Display",Georgia,serif;
  --sans:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(18px,4vw,56px);
  --col:1200px;
}

@font-face{
  font-family:"LT Remark";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/lt-remark-regular.woff2) format("woff2");
}
@font-face{
  font-family:"LT Remark";
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url(../fonts/lt-remark-italic.woff2) format("woff2");
}
@font-face{
  font-family:"LT Remark";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url(../fonts/lt-remark-bold.woff2) format("woff2");
}
@font-face{
  font-family:"Playfair Display";
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url(../fonts/playfair-display-normal.woff2) format("woff2");
}
@font-face{
  font-family:"Playfair Display";
  font-style:italic;
  font-weight:400 900;
  font-display:swap;
  src:url(../fonts/playfair-display-italic.woff2) format("woff2");
}
@font-face{
  font-family:"Albert Sans";
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(../fonts/albert-sans-latin.woff2) format("woff2");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:20}
.skip:focus{left:0}

.shell{max-width:1560px;margin:0 auto;padding:0 var(--gut)}

/* ---------- top bar ---------- */
.bar{padding:26px 0 0}
.back{
  display:inline-block;
  font-size:14px;font-weight:500;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;
  padding:11px 22px;
  transition:border-color .2s ease,color .2s ease;
}
.back:hover{border-color:var(--pink);color:var(--pink-ink)}
.back:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------- the headline ----------
   She drew it at 240px in a 1728 frame with the text 1716 wide, so it runs
   full bleed rather than inside the 1200 column. 13.45vw lands at 232px
   there rather than 240: at 240 the line is wider than the frame once there
   is any gutter at all, and sizing it off the viewport keeps it filling the
   width at every size instead of only at hers. The pink is hers — 3.73:1 on
   white, which clears AA for large text and would fail for anything
   smaller. */
.hero{padding:0 16px;margin:clamp(40px,5.6vw,96px) 0 0}
.hero-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,13.45vw,240px);line-height:1.2;letter-spacing:.03em;
  color:var(--hot);text-align:center;margin:0;
}

/* ---------- the introduction, and the two ways to reach her ---------- */
.lede{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.15rem,1.74vw,30px);line-height:1.2;
  color:var(--ink);text-align:center;
  max-width:664px;margin:clamp(52px,7.6vw,132px) auto 0;
}
.hello{
  display:flex;justify-content:center;gap:clamp(18px,2vw,34px);
  margin:clamp(20px,1.4vw,24px) 0 0;
}
.hello a{
  font-size:18px;line-height:22px;font-weight:700;
  color:var(--ink);text-underline-offset:4px;
}
.hello a:hover{color:var(--pink-ink)}
.hello a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------- the works, two across ----------
   472px tiles with a 72px gutter, as drawn, and each tile is pre-cropped to
   her framing rather than cropped here — five of the eight are offset clips
   on the artboard, not plain fits. */
.works{
  list-style:none;padding:0;
  margin:clamp(52px,5.5vw,95px) auto 0;
  max-width:1016px;
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(20px,4.2vw,72px);row-gap:clamp(34px,2.7vw,46px);
}
.works li{margin:0}
.works a{display:block;color:var(--ink);text-decoration:none}
.works img{
  width:100%;aspect-ratio:472 / 649;object-fit:cover;
  background:#f2f2f6;transition:opacity .3s ease;
}
.works .label{display:block;text-align:center;margin:16px 0 0}
.works .t{
  display:block;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.05rem,1.16vw,20px);line-height:1.2;
}
.works .m{
  display:block;margin-top:2px;
  font-weight:300;font-size:clamp(.9rem,.93vw,16px);line-height:1.25;color:var(--ink);
}
.works a:hover img{opacity:.85}
.works a:hover .t{color:var(--pink-ink)}
.works a:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:620px){
  .works{grid-template-columns:1fr}
}

/* ---------- about ---------- */
.about{max-width:var(--col);margin:clamp(70px,10vw,150px) auto 0;border-top:1px solid var(--ink);padding-top:30px}
.about .label{
  display:block;font-size:18px;font-weight:700;letter-spacing:normal;
  text-transform:uppercase;color:var(--ink);margin:0 0 30px;
}
.about h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.4rem,5.5vw,80px);line-height:1.2;letter-spacing:.02em;
  margin:0 0 22px;
}
.about .role{
  font-family:var(--display);font-size:clamp(1.15rem,1.8vw,25px);line-height:1.4;
  letter-spacing:.02em;margin:0;max-width:42ch;
}
.about-cols{display:grid;gap:clamp(30px,4vw,56px);margin:clamp(40px,5vw,72px) 0 0}
.about-cols h3{
  font-size:18px;font-weight:700;text-transform:uppercase;letter-spacing:normal;
  margin:0 0 6px;color:var(--ink);
}
.about-cols .facts p{font-size:16px;line-height:1.75;margin:0 0 14px;color:var(--ink)}
.about-cols .facts p:last-child{margin-bottom:0}
.about-cols .facts a{color:var(--pink-ink)}
.about-cols .practice p{
  font-family:var(--display);font-size:clamp(1.1rem,1.75vw,26px);line-height:1.23;
  letter-spacing:.02em;margin:0 0 20px;text-wrap:pretty;color:var(--ink);
}
.about-cols .practice p:last-child{margin-bottom:0}
@media (min-width:900px){
  .about-cols{grid-template-columns:471px minmax(0,713px);gap:11px}
}

/* ---------- selected details ----------
   The artboard fills this block with a screenshot of page 9 of her PDF, so
   the arrangement here is built from the detail photographs that exist
   rather than traced off the picture. Widths alternate, as they do there. */
.details{max-width:var(--col);margin:clamp(70px,7vw,120px) auto 0}
.details h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.8rem,3.2vw,46px);line-height:1.2;letter-spacing:.02em;
  margin:0 0 clamp(28px,3vw,50px);
}
.details ul{
  list-style:none;padding:0;margin:0;
  display:grid;gap:clamp(18px,2.4vw,34px);
}
.details li{margin:0;position:relative}
.details img{width:100%;background:#f2f2f6}
.details figcaption{
  margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted);
}
.details figure{margin:0}
@media (min-width:820px){
  .details ul{grid-template-columns:repeat(6,1fr);align-items:start}
  .details li:nth-child(1){grid-column:1 / span 3}
  .details li:nth-child(2){grid-column:4 / span 3;top:clamp(24px,3vw,54px)}
  .details li:nth-child(3){grid-column:2 / span 2}
  .details li:nth-child(4){grid-column:4 / span 3;top:clamp(24px,3vw,54px)}
}

/* ============================================================
   A single work
   ============================================================ */
.work{
  max-width:var(--col);margin:clamp(34px,4vw,64px) auto 0;
  display:grid;gap:clamp(30px,4vw,70px);
}
.work-title{margin:0}
.work-title h1{
  font-family:var(--display);font-weight:400;
  font-size:clamp(2.2rem,4.4vw,76px);line-height:1.08;letter-spacing:.01em;
  margin:0;
}
.work-title .eyebrow{
  display:block;margin:0 0 clamp(14px,1.4vw,22px);
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.work-figure{margin:0}
.work-figure img{width:100%}
.work-meta dl{margin:0;display:grid;gap:18px}
.work-meta dt{
  font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  margin:0 0 4px;
}
.work-meta dd{margin:0;font-size:16px;line-height:1.5;max-width:40ch}
.work-enquire{margin:clamp(30px,3vw,46px) 0 0;font-size:15px;color:var(--muted)}
.work-enquire a{color:var(--pink-ink);text-underline-offset:3px}

@media (min-width:900px){
  .work{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    /* title and facts sit together at the top; the middle row takes up the
       slack so the other-works row lands at the foot of the image */
    grid-template-rows:auto auto 1fr;
    column-gap:clamp(40px,5vw,96px);row-gap:clamp(26px,3vw,44px);
    align-items:start;
  }
  .work-title{grid-column:1;grid-row:1}
  .work-meta {grid-column:1;grid-row:2}
  /* the sheets are tall, so the words stay with you down the image */
  .work-figure{grid-column:2;grid-row:1 / span 3;position:sticky;top:40px}
  .work-onward{grid-column:1;grid-row:3;align-self:end;width:100%}
}

/* ---------- the other works ---------- */
.work-onward{
  margin:clamp(40px,4vw,64px) 0 0;
  border-top:2px solid var(--line);padding-top:22px;
  display:flex;gap:28px;flex-wrap:wrap;
}
.work-onward a{color:var(--ink);text-decoration:none;display:block}
.work-onward .lbl{display:block;font-size:16px;line-height:20px;color:var(--muted)}
.work-onward .to{
  display:block;margin-top:5px;
  font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.4vw,22px);line-height:1.25;
}
.work-onward a:hover .to{color:var(--pink-ink)}
.work-onward a:focus-visible{outline:2px solid var(--pink);outline-offset:4px}

/* ---------- the pill ---------- */
.homeward{max-width:var(--col);margin:clamp(52px,4.6vw,80px) auto 0;text-align:center}
.homeward a{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:250px;min-height:66px;padding:0 28px;
  border:1px solid var(--ink);border-radius:999px;
  font-size:16px;line-height:20px;color:var(--ink);text-decoration:none;
  transition:background-color .2s ease,color .2s ease;
}
.homeward a:hover{background:var(--ink);color:#fff}
.homeward a:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* ---------- the closing band ---------- */
.thanks{
  margin-top:clamp(70px,10vw,150px);
  background:var(--ink);
  color:#fff;text-align:center;padding:clamp(44px,7vw,84px) 0;
}
.thanks h2{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(1.5rem,3vw,40px);line-height:1.2;margin:0 0 18px;
}
.thanks p{font-size:clamp(1rem,1.3vw,18px);line-height:1.5;margin:0 auto;max-width:56ch}
.thanks a{color:#fff;font-weight:700;text-underline-offset:3px}
.thanks a:hover{text-decoration-thickness:2px}

/* ---------- site footer ---------- */
.sitefoot{border-top:0;padding:clamp(34px,5vw,54px) 0 44px}
.sitefoot-row{display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px}
.sitefoot .mark{font-weight:700;font-size:18px;color:var(--ink);text-decoration:none}
.sitefoot nav{display:flex;flex-wrap:wrap;gap:22px}
.sitefoot nav a{font-size:15px;font-weight:500;color:var(--ink);text-decoration:none}
.sitefoot nav a:hover{color:var(--pink-ink)}
.sitefoot .social{margin-left:auto;display:flex;gap:10px}
.sitefoot .social a{
  width:38px;height:38px;border-radius:50%;background:#b8bcc9;
  display:grid;place-items:center;color:#fff;font-size:11px;font-weight:700;
  text-decoration:none;letter-spacing:.02em;
}
.sitefoot .social a:hover{background:var(--pink)}
.sitefoot .colophon{margin:clamp(26px,4vw,44px) 0 0;padding-top:22px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}

/* ---------- the movement ----------
   Gated on .js, set by the snippet in each page's head: only script adds
   .is-in, so without the gate a visitor with JavaScript off would get a
   page of invisible content. Slower and further than the photography
   pages, because she asked for a gentle slide. */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{
    opacity:0;transform:translateY(44px);
    transition:opacity 1.2s cubic-bezier(.16,.84,.44,1),
               transform 1.4s cubic-bezier(.16,.84,.44,1);
  }
  .js [data-rise].is-in{opacity:1;transform:none}
}