/* Keep the studio and shop on the original paper, sage and rust palette. */
.studio-home {
  --muted: #636b5d;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  background: radial-gradient(ellipse at 85% 0%, #e8ebdf 0, transparent 44%), var(--paper);
}
.studio-home h1, .studio-home h2, .studio-home h3 { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; }
.studio-home header, .studio-home main, .studio-home footer { max-width: 1320px; }
.skip-link { position: fixed; top: -80px; left: 24px; z-index: 10; padding: 12px 20px; background: var(--ink); color: white; }
.skip-link:focus { top: 12px; }
.studio-home header { padding-top: 26px; padding-bottom: 26px; }
.studio-home .nav-shop { padding-left: 26px; border-left: 1px solid var(--line); }
.studio-home .label { color: #59664c; }
.studio-hero { padding: 28px 0 0; }
.hero-topline, .hero-footnote { display: flex; justify-content: space-between; gap: 20px; }
.hero-topline .label { font-size: 10px; }
.hero-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: 35px; align-items: center; min-height: 585px; }
.hero-copy { padding: 25px 0 45px; }
.studio-home h1 { font-size: clamp(60px, 6.6vw, 88px); line-height: 1.03; margin: 25px 0; letter-spacing: -.055em; }
.hero-copy > p { max-width: 435px; font-size: 17px; color: var(--muted); }
.hero-actions { display: flex; align-items: center; gap: 25px; margin-top: 27px; }
.hero-actions .button { margin-top: 0; }
.hero-footnote { border-top: 1px solid var(--line); padding: 18px 0; font-size: 11px; color: var(--muted); }
.studio-board { position: relative; height: 500px; }
.board-grid { position: absolute; inset: 28px 8px 15px 25px; background: linear-gradient(90deg, #adb59925 1px, transparent 1px), linear-gradient(#adb59925 1px, transparent 1px), #e5e9dc; background-size: 27px 27px; transform: rotate(3deg); border: 1px solid #d0d6c4; }
.board-note { position: absolute; left: 0; top: 5px; width: 235px; padding: 23px 25px; background: #fffdf4; transform: rotate(-7deg); box-shadow: 0 8px 24px #26321e0d; }
.board-note p { font: 22px/1.25 "Iowan Old Style", Georgia, serif; margin: 18px 0; }
.note-signature { color: var(--rust); font: italic 15px Georgia, serif; }
.board-phone { position: absolute; left: 22px; top: 200px; width: 129px; transform: rotate(-9deg); text-decoration: none; }
.board-phone img { display: block; width: 100%; height: auto; border: 5px solid #30372d; border-radius: 22px; box-shadow: 0 16px 30px #26321e24; }
.board-phone span { position: absolute; bottom: -19px; left: 60px; width: 145px; padding: 6px 10px; background: #fffdf4; font-size: 10px; transform: rotate(9deg); }
.board-plaid { position: absolute; right: 0; top: 132px; width: 66%; max-width: 305px; transform: rotate(7deg); box-shadow: 0 16px 35px #26321e22; }
.board-plaid img { display: block; width: 100%; height: auto; }
.board-stamp { position: absolute; right: 3px; bottom: 3px; width: 117px; height: 117px; border-radius: 50%; border: 1px solid var(--rust); display: grid; place-content: center; text-align: center; color: var(--rust); font: italic 18px/1.2 Georgia, serif; transform: rotate(13deg); background: #f5f2e9e6; }
.selected-work { padding: 77px 0 80px; border-top: 1px solid var(--line); }
.studio-home h2 { font-size: clamp(34px, 3.5vw, 46px); letter-spacing: -.035em; }
.studio-home .section-head { align-items: center; margin-bottom: 28px; }
.studio-home .section-head > p { max-width: 330px; }
.work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 38px 30px; }
.work-card { display: block; text-decoration: none; }
.work-card-wide { grid-column: 1 / -1; }
.work-art { position: relative; min-height: 350px; overflow: hidden; }
.litho-art { min-height: 435px; background: radial-gradient(ellipse at 20% 80%, #e5dbc4, transparent 65%), #eae4d8; }
.art-wordmark { position: absolute; left: 7%; top: 20%; color: #403c32; font: 100px/1 "Iowan Old Style", Georgia, serif; letter-spacing: -.055em; }
.litho-screen { position: absolute; width: 170px; height: auto; border-radius: 25px; border: 5px solid #403c32; box-shadow: 0 15px 40px #403c3226; }
.litho-screen.first { right: 28%; top: 44px; transform: rotate(-8deg); }
.litho-screen.second { right: 9%; top: 82px; transform: rotate(9deg); }
.art-caption { position: absolute; bottom: 24px; left: 28px; font-size: 11px; color: #525b49; }
.work-caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0 0; }
.work-caption .label { font-size: 9px; }
.work-caption h3 { font-size: 30px; margin: 7px 0; }
.work-caption p { font-size: 14px; color: var(--muted); margin: 0; }
.round-arrow { flex-shrink: 0; width: 38px; height: 38px; display: grid; place-content: center; border: 1px solid #bbc3af; border-radius: 50%; transition: background .2s, transform .2s; }
.work-card:hover .round-arrow { background: #e4e8dc; transform: translate(2px, -2px); }
.content-art { background: linear-gradient(115deg, #dbe2cd, #e8ebdf); padding: 28px; }
.mini-label { font: 18px Georgia, serif; }
.flow-diagram { width: 76%; max-width: 295px; margin: 20px auto 35px; }
.flow-node { border: 1px solid #a4af96; border-radius: 3px; background: #f8f9f2; padding: 11px 15px; font-size: 12px; box-shadow: 4px 4px 0 #74856516; }
.flow-node span { display: block; font-size: 8px; color: var(--muted); padding-left: 14px; }
.node-dot { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--sage); }
.flow-line { height: 18px; border-left: 1px solid #849475; margin-left: 50%; }
.flow-output { border-color: var(--sage); background: #637255; color: #fff; }
.flow-output .node-dot { background: #dce5cc; }
.flow-output span { color: #e0e6d7; }
.plaid-art { background: #e5dfd1; padding: 28px 65px 60px; }
.plaid-art > img { display: block; width: 100%; max-width: 270px; height: auto; margin: auto; transform: rotate(-6deg); box-shadow: 10px 15px 25px #403c3220; }
.studio-services { display: grid; grid-template-columns: 1fr 1.08fr; gap: 80px; padding: 75px 0; border-top: 1px solid var(--line); }
.services-intro p { max-width: 370px; color: var(--muted); font-size: 15px; }
.services-intro .text-link { display: inline-block; margin-top: 18px; }
.service-list article { display: flex; gap: 25px; border-top: 1px solid var(--line); padding: 25px 0; }
.service-number { color: var(--rust); font: 17px Georgia, serif; padding-top: 5px; }
.service-list h3 { font-size: 25px; margin: 0 0 10px; }
.service-list p { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.service-tags { font-size: 10px; color: #58644f; }
.studio-about { padding: 58px; background: linear-gradient(115deg, #e0e6d7, #e9ecdf); display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.studio-about h2 em { font-weight: normal; color: var(--sage); }
.studio-about p { font-size: 15px; color: #52604a; }
.studio-shop-note { display: flex; justify-content: space-between; align-items: center; gap: 50px; padding: 65px 0; border-bottom: 1px solid var(--line); }
.studio-shop-note h2 { font-size: 30px; margin: 12px 0; }
.studio-shop-note p { max-width: 570px; font-size: 14px; color: var(--muted); }
.studio-shop-note .button { flex-shrink: 0; margin: 0; }
.studio-contact { padding: 70px 0 60px; }
.studio-contact h2 { font-size: clamp(45px, 5.5vw, 72px); margin: 20px 0 32px; }
.studio-contact h2 em { font-weight: normal; color: var(--sage); }
.contact-bottom { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.contact-bottom p { max-width: 320px; font-size: 14px; color: var(--muted); }
.contact-bottom a { font-size: clamp(15px, 2.1vw, 26px); text-underline-offset: 7px; overflow-wrap: anywhere; }
.studio-home footer { padding-bottom: 35px; }
/* Motion enhances the initial composition without hiding content or requiring JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy { animation: settle .65s ease-out both; }
  .studio-board { animation: settle .85s .08s ease-out both; }
  @keyframes settle { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }
@media (max-width: 1000px) {
  .hero-layout { gap: 20px; min-height: 525px; }
  .studio-board { height: 440px; }
  .board-note { width: 215px; }
  .board-phone { width: 108px; }
  .board-plaid { top: 158px; }
  .board-stamp { width: 90px; height: 90px; font-size: 15px; }
  .studio-services { gap: 45px; }
}
@media (max-width: 760px) {
  .studio-home header { align-items: start; gap: 18px; flex-direction: column; padding: 18px 22px; }
  .studio-home nav { width: 100%; justify-content: space-between; gap: 15px; }
  .studio-home .nav-shop { padding-left: 18px; }
  .hero-topline .label:last-child { display: none; }
  .hero-layout { grid-template-columns: 1fr; gap: 0; }
  .studio-home h1 { font-size: clamp(51px, 11vw, 74px); }
  .hero-copy { padding: 10px 0 30px; }
  .hero-copy > p { font-size: 16px; }
  .hero-actions { flex-wrap: wrap; gap: 20px; }
  .studio-board { height: 440px; max-width: 510px; width: 100%; margin: 5px auto 30px; }
  .board-note { width: 215px; }
  .board-plaid { top: 120px; max-width: 275px; width: 62%; }
  .board-phone { top: 190px; left: 18px; width: 108px; }
  .hero-footnote span:last-child { display: none; }
  .selected-work { padding: 48px 0; }
  .studio-home .section-head { display: block; }
  .work-grid { grid-template-columns: 1fr; gap: 35px; }
  .work-card-wide { grid-column: auto; }
  .litho-art { min-height: 345px; }
  .art-wordmark { font-size: 58px; left: 7%; top: 8%; }
  .litho-screen { width: 124px; border-width: 4px; border-radius: 19px; }
  .litho-screen.first { right: 40%; top: 85px; }
  .litho-screen.second { right: 10%; top: 65px; }
  .litho-art .art-caption { bottom: 12px; left: 16px; font-size: 10px; }
  .work-art { min-height: 330px; }
  .work-caption h3 { font-size: 27px; }
  .plaid-art { padding-left: 45px; padding-right: 45px; }
  .studio-services { grid-template-columns: 1fr; gap: 35px; padding: 50px 0; }
  .studio-about { grid-template-columns: 1fr; gap: 10px; padding: 30px; }
  .studio-shop-note { align-items: start; flex-direction: column; gap: 15px; padding: 45px 0; }
  .studio-contact { padding: 50px 0; }
  .contact-bottom { align-items: start; flex-direction: column; gap: 14px; }
}