/* The four map studios, presented as one continuous part of the paper atlas. */
.studio-family{padding-top:64px;padding-bottom:28px;scroll-margin-top:28px}
.studio-family .studio-family__heading{align-items:flex-end;margin-bottom:28px}
.studio-family .studio-family__heading .eyebrow{color:var(--map-accent,#b53612)}
.studio-family .studio-family__heading h2{max-width:680px;font-size:clamp(30px,3vw,43px);line-height:1.15}
.studio-family__heading>p{max-width:310px}
.studio-family__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:25px}
.studio-family__item{display:flex;min-width:0;flex-direction:column;border-top:1px solid var(--map-border,#b5b6a7);padding-top:13px;color:var(--ink,#2d302c);text-decoration:none}
.studio-family__image{position:relative;aspect-ratio:1;overflow:hidden;background:#e6dfcc}
.studio-family__image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.studio-family__image--paper{display:grid;place-items:center;background:#e8e2ce}
.studio-family__image--paper img{width:auto;height:82%;box-shadow:3px 5px 11px #443c2b24;object-fit:contain;transform:rotate(-5deg)}
.studio-family__image--depth img{object-position:49% 49%}
.studio-family__image--nature{background:#e3e8d9}
.studio-family__image--nature img{width:89%;height:89%;margin:5.5%;mix-blend-mode:multiply}
.studio-family__image--relief img{object-position:center}
.studio-family__number{position:absolute;top:10px;left:10px;background:var(--paper,#f3eedf);border:1px solid #a9a5928a;padding:4px 6px;color:var(--map-accent,#b53612);font:10px/1.1 var(--sans,Arial,sans-serif);letter-spacing:.05em}
.studio-family__name{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:17px}
.studio-family .studio-family__name h3{font:500 clamp(19px,1.65vw,24px)/1.15 var(--serif,Arial,sans-serif);letter-spacing:-.025em;color:var(--map-accent,#b53612)}
.studio-family__name>span{color:var(--map-accent,#b53612);font-size:21px;transition:transform .2s ease}
.studio-family__item>p{font-size:12px;line-height:1.7;color:var(--muted,#59605a);margin:11px 0 16px}
.studio-family__format{font-size:9px;line-height:1.5;letter-spacing:.055em;text-transform:uppercase;margin-top:auto;color:var(--map-accent,#b53612)}
.studio-family__item:hover .studio-family__image img{transform:scale(1.035)}
.studio-family__item:hover .studio-family__image--paper img{transform:rotate(-2deg) scale(1.035)}
.studio-family__item:hover .studio-family__name>span{transform:translate(2px,-2px)}
.studio-family__item:focus-visible{outline:2px solid var(--map-accent,#b53612);outline-offset:6px}
.studio-family__note{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--map-line,#d4d5c3);padding:24px 0;margin-top:25px;color:var(--muted,#59605a);font-size:10px;line-height:1.65}
.studio-family__note>span{font-size:9px;text-align:right}
.hero-note a{display:inline-block;margin-left:6px;color:var(--map-accent,#b53612);text-underline-offset:3px}
.faq a[href="/print-studio"]{color:var(--map-accent,#b53612);text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){
  .studio-family__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 25px}
  .studio-family .studio-family__name h3{font-size:25px}
  .studio-family__item>p{font-size:13px;max-width:310px}
}
@media(max-width:600px){
  .studio-family{padding-top:42px;padding-bottom:4px}
  .studio-family .studio-family__heading h2{font-size:34px;max-width:360px}
  .studio-family .studio-family__heading>p{max-width:330px;font-size:12px}
  .studio-family__grid{gap:26px 17px}
  .studio-family__item{padding-top:10px}
  .studio-family .studio-family__name h3{font-size:19px;line-height:1.2}
  .studio-family__name{margin-top:13px;gap:6px}
  .studio-family__name>span{font-size:17px}
  .studio-family__item>p{font-size:11px;line-height:1.65;margin:9px 0 12px}
  .studio-family__format{font-size:8px;letter-spacing:.035em}
  .studio-family__number{font-size:9px;top:7px;left:7px;padding:3px 5px}
  .studio-family__note{display:block;margin-top:24px;padding:20px 0;font-size:10px}
  .studio-family__note>span{display:block;margin-top:7px;text-align:left}
  .hero-note a{margin-left:4px}
}
@media(prefers-reduced-motion:reduce){
  .studio-family__image img,.studio-family__name>span{transition:none}
}