/* Polished Studio: shared styles for the inner pages (art.html, book.html).
   Tokens, buttons, header and footer are copied from index.html so every page
   reads as one site. The homepage keeps its own inline copy. */
:root{
  --sc-canvas:#FBF5F3; --sc-surface:#FFFFFF; --sc-ink:#3A1F2B; --sc-ink-soft:#7B6470;
  --sc-accent:#B9405F; --sc-accent-ink:#FFFFFF;
  --sc-font-display:"Fraunces",Georgia,serif; --sc-font-text:"Manrope",system-ui,sans-serif;
  --sc-shadow-color:340 30% 40%;
  --shade:#E6B7BC;
  --blush:#F3E4E1;
}
.sc-display{font-weight:300;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.sc-display em{font-style:italic;color:var(--sc-accent)}
.sc-body{color:var(--sc-ink-soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font-weight:600;font-size:.94rem;padding:.85rem 1.4rem;border-radius:999px;border:0;background:var(--sc-ink);color:#fff;text-decoration:none;cursor:pointer;transition:transform .14s var(--sc-ease-out),background-color .14s var(--sc-ease-out)}
.btn:hover{background:#55303F}
.btn:active{transform:scale(.97)}
.btn--quiet{background:transparent;color:var(--sc-ink);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--sc-ink) 30%,transparent)}
.btn--quiet:hover{background:color-mix(in oklab,var(--sc-ink) 6%,transparent)}

.bar{position:fixed;inset:0 0 auto;z-index:var(--sc-z-chrome);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;padding:1.1rem var(--sc-gutter);transition:background-color .3s var(--sc-ease-out),box-shadow .3s var(--sc-ease-out)}
.bar.solid{background:color-mix(in oklab,var(--sc-canvas) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--sc-hairline)}
.mark{font-family:var(--sc-font-display);font-size:1.55rem;text-decoration:none;white-space:nowrap;line-height:1;font-weight:400}
.mark i{color:var(--sc-accent)}
.nav{display:flex;gap:2.2rem}
.nav a{text-decoration:none;font-size:.9rem;font-weight:500;opacity:.8}
.nav a:hover,.nav a[aria-current]{opacity:1}
.nav a[aria-current]{text-decoration:underline;text-underline-offset:.4em;text-decoration-color:var(--sc-accent)}
.bar__right{display:flex;justify-content:flex-end}

.page-head{padding-top:clamp(7.5rem,12vw,10rem)}
.page-head h1{font-size:clamp(2.7rem,1.5rem + 4.2vw,5.4rem);line-height:1}
.page-head .lede{margin-top:1.2rem;font-size:var(--sc-t-lg);line-height:1.45;color:var(--sc-ink-soft);max-width:36ch}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 1rem;padding:1.2rem var(--sc-gutter) 1.4rem;font-size:.8rem;color:var(--sc-ink-soft);border-top:1px solid var(--sc-hairline)}
.tag{position:fixed;left:14px;bottom:14px;z-index:70;font-size:.75rem;font-weight:600;padding:.45rem .75rem;border-radius:999px;background:var(--sc-ink);color:#fff;text-decoration:none;box-shadow:var(--sc-e2);transition:opacity .3s var(--sc-ease-out)}

/* a visually hidden but focusable input, drawn by its label */
.vh{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:980px){.nav{display:none}.bar{grid-template-columns:1fr auto}}
@media (max-width:760px){
  .bar .btn{padding:.6rem 1rem;font-size:.86rem}
  .tag{display:none}
}

/* the logo (brand/logo.svg) in the header */
.mark img{display:block;height:23px;width:auto}
@media (max-width:760px){.mark img{height:17px}}