/* studioyow.ca — one stylesheet, generated. Warm off-white ground, near-black
   text, no colour in the chrome: the collages supply all of it. Phone first. */
:root{
  color-scheme:light;
  --ground:#F7F3EA;
  --ground-deep:#F0EADE;
  --ink:#1A1815;
  --ink-soft:#4A443A;
  --ink-faint:#7C7466;
  --rule:#D9D0BE;
  --rule-fine:#E4DCCC;
  --measure:34rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:"Libre Baskerville",Georgia,"Times New Roman",serif;
  font-size:1rem;line-height:1.75;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ink)}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 1.5rem}
main .wrap, main.wrap{padding-bottom:1rem}

/* Masthead. The name sits hard left and the navigation right, on one row, and
   the header keeps its own wide container on every page — so the wordmark lines
   up with the left edge of the content instead of floating in a narrow column
   while the page beneath it starts somewhere else. */
header{padding:1.6rem 0 0;border-bottom:1px solid var(--rule-fine);margin-bottom:.2rem}
header .wrap{max-width:74rem;display:flex;align-items:baseline;
  justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-bottom:.9rem}
.name{font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);font-weight:700}
.navgroup{display:flex;align-items:center;gap:1.5rem;margin-left:auto}
nav{margin:0;border:0;padding:0}
nav a{font-size:.825rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;margin-right:1.4rem;
  display:inline-block;padding:.2rem 0}
nav a:last-child{margin-right:0}
nav a[aria-current]{color:var(--ink);border-bottom:1px solid var(--ink)}
nav a:hover,nav a:focus-visible{color:var(--ink)}
footer .wrap{max-width:74rem}

@media (max-width:34rem){
  header .wrap{gap:.9rem}
  .navgroup{margin-left:0;width:100%;justify-content:space-between}
  nav a{margin-right:1rem;font-size:.78rem}
}

main{padding-top:2.5rem}
h1{font-size:clamp(1.6rem,5.5vw,2.1rem);line-height:1.25;font-weight:400;
  font-style:italic;margin:0 0 .6rem}
.kicker{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 .5rem}
.section-h{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:700;margin:3.5rem 0 .5rem}
.standfirst{margin:0 0 2rem;font-size:.9rem;color:var(--ink-faint)}

/* home — the show, before any scrolling */
.hero{padding:1rem 0 2rem;border-bottom:1px solid var(--rule-fine)}
.hero-title{font-size:clamp(1.7rem,6vw,2.4rem);font-style:italic;font-weight:400;
  line-height:1.2;margin:0 0 1.1rem}
.hero-where{margin:0 0 .5rem;font-size:1rem;line-height:1.6}
.hero-when{margin:0 0 1.2rem;font-size:1rem;color:var(--ink-soft)}
.hero-more{margin:0;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase}

/* the plate — pale antique paper needs an edge or it dissolves into the ground */
.plate{margin:0;background:var(--ground-deep);
  padding:clamp(1rem,5vw,2.25rem);display:flex;justify-content:center}
/* width:100% governs the phone, max-width governs the desktop. Raising the cap
   moves the desktop only: a phone's container is ~350px, well under the cap, so
   the cap never binds there. Crossover is the cap in px (35rem = 560px). */
.tile-static{cursor:default;margin:0}
/* A fixed well keeps the rows aligned; the pictures are every shape, and a
   ragged grid reads as a mistake rather than as variety. */
.tile-static .well{display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;background:#efece6;overflow:hidden}
.tile-static .well img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.tile-static .cap{display:block;padding-top:.6rem}
.gallist{list-style:none;padding:0;margin:2rem 0 0;max-width:42rem}
.gallist li{border-top:1px solid var(--line);padding:.85rem 0;display:flex;
  align-items:baseline;gap:1rem}
.gallist li:last-child{border-bottom:1px solid var(--line)}
.gallist a{text-decoration:none;font-size:1.05rem}
.gallist a:hover{text-decoration:underline}
.gallist .n{margin-left:auto;font-size:.78rem;color:var(--soft);white-space:nowrap}
.kicker a{color:inherit}
.plate img{display:block;width:100%;max-width:35rem;height:auto;
  border:1px solid var(--rule)}

/* museum caption — title, medium, dimensions. No year, ever. */
.caption{margin:2rem 0 0}
.tombstone{margin:0;font-size:.9rem;line-height:1.85;color:var(--ink-soft)}
.tombstone span{display:block}

.acquire{margin:1.75rem 0 0;padding:1.4rem 0 1.5rem;
  border-top:1px solid var(--rule-fine);border-bottom:1px solid var(--rule-fine)}
.price{font-size:1.25rem;margin:0}
.price .cur{font-size:.72em;color:var(--ink-faint);letter-spacing:.08em;margin-left:.35em}
.sold-price{color:var(--ink-faint);font-size:1rem;letter-spacing:.1em;text-transform:uppercase}
.enquire{margin:.8rem 0 0;font-size:.82rem;color:var(--ink-faint);line-height:1.7}
.cart{flex:0 0 auto}
.cart-actions{margin-top:1.2rem}
.cart-slot{border:1px dashed var(--rule);padding:1.1rem 1.2rem;margin-top:1.1rem;
  font-size:.82rem;line-height:1.6;color:var(--ink-faint)}
.cart-slot strong{display:block;color:var(--ink-soft);font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.5rem}
.cart-slot code{font-family:ui-monospace,Menlo,monospace;font-size:.9em}

.story{margin:2.25rem 0 0}
.story p{margin:0 0 1.15rem}
.statement{font-size:1.3rem;font-style:italic;margin:0 0 1.5rem;color:var(--ink-soft)}
.aside{margin:2rem 0 0;padding-left:1.1rem;border-left:2px solid var(--rule);
  font-size:.92rem;color:var(--ink-soft);font-style:italic}
.aside p{margin:0}
.deets{margin:1.5rem 0 0;padding:1.2rem 1.3rem;background:var(--ground-deep);
  border-left:2px solid var(--rule);font-size:.95rem;line-height:1.7}
.deets p{margin:0 0 .8rem}
.deets p:last-child{margin:0}
.email{font-size:1.05rem}

/* an honest hole, marked as one */
/* The wide page. Header, main and footer all share one container, so the
   masthead lines up with the title beneath it — the thing that looked wrong
   when only the content went full width. Centred with real margins rather
   than edge to edge: at 2000px this leaves roughly 400px either side, which
   is the proportion Coyle's shop uses. */
.wrap{padding-left:clamp(1.25rem,5vw,3rem);padding-right:clamp(1.25rem,5vw,3rem)}
body.wide .wrap{max-width:74rem}
body.wide .story,
body.wide .hero-where,
body.wide .hero-when,
body.wide .alsosee p{max-width:42rem}
body.wide .hero-title{font-size:clamp(1.9rem,5vw,3.2rem)}
body.wide .grid{grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));
  gap:3rem 2rem}

.alsosee{margin:3.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--rule-fine)}
.alsosee p{font-size:.9rem;color:var(--ink-soft);margin:0 0 .8rem}
.pending{margin:2.5rem 0 0;padding:1rem 1.2rem;border:1px dashed var(--rule);
  font-size:.8rem;line-height:1.7;color:var(--ink-faint)}
.pending p{margin:0}

/* grids */
.grid{display:grid;gap:2.5rem 1.75rem;
  grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
.tile{text-decoration:none;color:inherit;display:block}
.well{display:flex;align-items:center;justify-content:center;
  background:var(--ground-deep);border:1px solid var(--rule);width:100%;overflow:hidden}
.well img{width:100%;height:100%;object-fit:contain;display:block}
.cap{display:block;margin-top:.7rem;font-size:.8rem;line-height:1.6}
.cap .t{display:block;font-style:italic;font-size:.95rem}
.cap .d{display:block;color:var(--ink-faint);font-size:.75rem}
.cap .p{display:block;margin-top:.15rem}
.cap .cur{font-size:.7em;color:var(--ink-faint);letter-spacing:.06em;margin-left:.3em}
/* sold work stays visible and labelled — never greyed out */
.cap .sold{display:block;margin-top:.15rem;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.is-sold .well{border-style:dashed}

.fineprint{margin:2.75rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule-fine);
  font-size:.8rem;line-height:1.7;color:var(--ink-faint)}
.fineprint p{margin:0 0 .9rem}
.fineprint p:last-child{margin-bottom:0}

.prevnext{display:flex;justify-content:space-between;gap:1.5rem;margin:2.5rem 0 0;
  font-size:.78rem;line-height:1.6}
.prevnext .pn{color:var(--ink-faint);text-decoration:none;max-width:48%}
.prevnext .pn-next{text-align:right;margin-left:auto}
.prevnext .pn:hover{color:var(--ink)}
.backlink{margin:1.6rem 0 0;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}

footer{margin-top:3.5rem;padding:1.6rem 0 3rem;border-top:1px solid var(--rule-fine);
  font-size:.78rem;line-height:1.75;color:var(--ink-faint)}
footer a{color:var(--ink-faint)}
.show-line{color:var(--ink-soft);margin:0 0 .6rem}
.show-line em{font-style:italic}

@media (min-width:48rem){
  :root{--measure:38rem}
  main{padding-top:3.5rem}
  header{padding-top:2.5rem}
  main.wrap{max-width:60rem}
  .grid{grid-template-columns:repeat(auto-fill,minmax(13rem,1fr))}
}
@media (min-width:48rem){
  /* the two index pages get a wider measure than the reading pages */
  body:has(.grid) main.wrap{max-width:60rem}
}