.design-switch{padding:.65rem 0;font-size:.9rem}
.design-switch .wrap{display:flex;flex-wrap:wrap;gap:.5rem 1.15rem}
.design-switch [aria-current]{font-weight:750}
.hero{row-gap:2rem}
.hero .art-strip{grid-column:1/-1;box-shadow:none;background:none}
.art-strip img{aspect-ratio:5/1;object-fit:cover;object-position:center 51%}
.art-strip figcaption{margin-top:.5rem}
.hero .theme{font-size:clamp(1.35rem,3vw,2rem);font-weight:700;letter-spacing:-.04em;color:var(--accent)}
@media(max-width:760px){.art-strip img{aspect-ratio:3/1}.hero figure{box-shadow:7px 7px 0 var(--line)}}

:root{--paper:#fff4e8;--ink:#371b32;--muted:#62394d;--accent:#9a2454;--line:#dca7a1}
header{background:#ffd7b3}
.hero figure{background:#eea1aa;box-shadow:14px 14px 0 #efae45}
.hero h1 em{color:#9a2454}
.hero .prose{border-top:4px solid #e5983d}
.collection h1 em,.story-layout h1{color:var(--accent)}
.gallery figure img{background:#f5d8c9}
footer{background:#f7c8cb}
.design-switch{background:#9a2454;color:white}
.design-switch a{color:white}

/* Keep each picture and its accompanying text together as the layout changes. */
.gallery{grid-template-columns:1fr;gap:0;margin-top:2.25rem}
.gallery figure{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:clamp(1.25rem,5vw,5rem);border-top:1px solid var(--line);padding-block:clamp(1.5rem,4vw,3rem)}
.gallery figcaption{margin:0}
.story-layout{row-gap:1.5rem}
.story-layout h1{grid-column:1/-1}
.story-layout .prose p:first-child{margin-top:0}
header nav a,.design-switch a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:760px){
  .hero,.story-layout{gap:1.25rem}
  .home-intro{display:contents}
  .hero h1{order:0}
  .hero .theme{order:1;margin-top:0}
  .hero .theme+p{order:2;margin-top:0}
  .hero .artist-portrait{order:3;width:min(100%,30rem);box-shadow:none}
  .hero .artist-bio{order:4;margin-top:.75rem}
  .hero .art-strip{order:5}
  .story-layout figure{grid-row:2}
  .story-layout article{grid-row:3}
  .gallery figure{grid-template-columns:1fr;gap:.9rem}
  .gallery figure img,.hero .artist-portrait img{aspect-ratio:auto}
  .gallery p{margin-top:.4rem}
  input,textarea,button{font-size:16px;min-height:44px}
}

.story-editorial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,7vw,7rem);row-gap:1.75rem}
.story-editorial .story-heading,.story-editorial article{grid-column:2}
.story-editorial .story-heading{grid-row:1;border-bottom:2px solid var(--line);padding-bottom:1.35rem}
.story-editorial article{grid-row:2;font-family:"Helvetica Neue",Arial,sans-serif}
.story-editorial > figure{grid-area:1 / 1 / span 2;max-width:none}
.story-editorial .story-heading p{margin:0 0 .75rem;font:italic 1.15rem Georgia,serif;color:var(--accent)}
.story-editorial h1{font-size:clamp(3.75rem,9vw,7.5rem);line-height:.94}
.story-editorial figcaption{font-size:.85rem}
@media(max-width:760px){
 .story-editorial{grid-template-columns:minmax(0,1fr);row-gap:1.25rem}
 .story-editorial .story-heading,.story-editorial article,.story-editorial > figure{grid-column:1}
 .story-editorial .story-heading{grid-row:1}
 .story-editorial > figure{grid-row:2;max-width:32rem}
 .story-editorial article{grid-row:3}
}

/* Give headings a lighter, rounder appearance across the Colour & Pattern draft. */
h1,h2,h3{
  font-family:"Avenir Next",Avenir,"Trebuchet MS",system-ui,sans-serif;
  font-weight:500;
  letter-spacing:-.04em;
}
h1 em{font-weight:500}
.gallery h3{font-weight:600}

@font-face{
  font-family:"Alegreya Sans";
  src:url("fonts/alegreyasans-300.woff2") format("woff2");
  font-weight:300;
  font-display:swap;
}
@font-face{
  font-family:Merriweather;
  src:url("fonts/merriweather-400.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
body,.story-editorial article,input,textarea,button{
  font-family:Merriweather,Georgia,serif;
  font-size:17px;
  line-height:1.8;
}
h1,h2,h3,.story-editorial .story-heading p{
  font-family:"Alegreya Sans","Helvetica Neue",sans-serif;
  font-weight:300;
  letter-spacing:normal;
  line-height:1.2;
}
h1,.story-editorial h1{font-size:40px}
.hero h1{font-size:75px;line-height:1.1}
h1 em{font-weight:inherit}
h2,.hero .prose h2{font-size:35px}
h3,.gallery h3{font-size:30px;font-weight:300}
.mentor{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.5rem}
.story-editorial .mentor figure{margin-top:1.25rem}
.mentor blockquote{margin:0;padding-left:1.25rem;border-left:3px solid var(--accent)}
@media(max-width:760px){.hero h1{font-size:60px}}
@media(max-width:480px){
  body,.story-editorial article{font-size:15px}
  h1,.story-editorial h1{font-size:28px}
  .hero h1{font-size:40px}
  h2,.hero .prose h2{font-size:28px}
  h3,.gallery h3{font-size:25px}
  input,textarea,button{font-size:16px}
}

footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem 1rem}
.contact fieldset{display:grid;gap:1rem;min-width:0;margin:0;padding:0;border:0}
.privacy-page{padding-block:clamp(2.5rem,7vw,6rem)}
.privacy-page h2{margin-top:1.75rem}
.privacy-page p{max-width:66ch}

.skip-link{position:absolute;z-index:2;top:.5rem;left:.5rem;transform:translateY(-150%);padding:.65rem 1rem;background:var(--paper);color:var(--ink)}
.skip-link:focus{transform:none}
footer nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline}
footer .wrap{align-items:center}

.hero .featured-artwork{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(1rem,5vw,4rem);
  padding-top:2rem;
  border-top:1px solid var(--line);
  background:none;
  box-shadow:none;
}
.hero .featured-artwork img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.featured-artwork figcaption{margin:0;font:inherit}
.featured-artwork figcaption a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:760px){
  .hero .featured-artwork{order:5;grid-template-columns:minmax(0,1fr);gap:.75rem}
}

.signature-label{display:inline-flex;align-items:center;gap:.2rem}
.signature-label .freya-signature{width:46px;height:46px;flex:none;transform:rotate(-9deg)}
.story-editorial figcaption .freya-signature{transform:rotate(8deg)}
footer .freya-signature{transform:rotate(11deg)}