/* ---------- shared base: tokens, paper, top bar, collage logo, page masthead ----------
 * Used by every inner page (about, art, contact, case studies).
 * The homepage still carries its own copy of these rules inside index.html until it is split into files. */
:root{
  --paper:#F3E8DA; --paper-card:#FBF6EE; --ink:#3E2723; --ink-soft:#75605A;
  --rule:rgba(62,39,35,.55); --hair:rgba(62,39,35,.2); --raspberry:#B4265B;
  --lime-tape:rgba(229,231,152,.8); --sage:#A9B57E; --mustard:#E2B04A; --dusty-blue:#93A9B8; --newsprint:#ECE6D8;
  --serif:"Playfair Display", Georgia, serif; --type:"Special Elite","Courier New",monospace;
  --sans:"Instrument Sans", system-ui, sans-serif; --hand:"Caveat", cursive;
  --ease:cubic-bezier(.7,0,.2,1);
}
*{box-sizing:border-box;margin:0}
html,body{overflow-x:clip}
html{scroll-behavior:smooth}
body{
  color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .24 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px;border-radius:2px}
.folio{font-family:var(--type);font-size:12.5px;letter-spacing:.07em}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:22px 0 14px}
.links{display:flex;gap:28px;font-size:15px;font-weight:500}
.links a{text-decoration:none;border-bottom:1px solid transparent;padding:2px 0}
.links a:hover,.links a[aria-current="page"]{border-bottom-color:var(--ink)}

/* collage name: see shared/logo.css */

/* page masthead: the homepage nameplate, smaller */
.page-mast .rule-double{border-top:3px solid var(--ink);border-bottom:1px solid var(--ink);height:7px}
.page-mast .rule{height:1px;background:var(--ink)}
.page-mast .dateline{display:flex;justify-content:space-between;gap:16px;padding:9px 0}
.page-mast .dateline span{white-space:nowrap}
.page-mast .name{font-family:var(--serif);font-weight:400;font-size:clamp(48px,7.5vw,92px);line-height:.95;letter-spacing:-.025em;
  text-align:center;padding:12px 0 14px}
.page-mast .name a{text-decoration:none}
.page-mast .bottom{border-top:1px solid var(--ink);border-bottom:3px double var(--ink);height:6px}

/* section label used at the top of inner pages: THE PROFILE, ARTS & CULTURE, CLASSIFIEDS */
.section-label{display:flex;align-items:center;gap:14px;font-family:var(--type);font-size:13px;letter-spacing:.14em;color:var(--raspberry)}
.section-label::after{content:"";flex:1;height:1px;background:var(--rule)}

/* print-in: a picture rolls off the press, top to bottom, when it scrolls into view */
.anim .print-in{clip-path:inset(0 0 100% 0)}
.anim .print-in.printed{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease)}

@media (max-width:900px){
  .wrap{padding:0 20px}
  .page-mast .dateline span:nth-child(2){display:none}
}
@media (max-width:560px){ .topbar{flex-wrap:wrap;row-gap:12px} .topbar .links{width:100%;justify-content:space-between;gap:0} }
@media (max-width:420px){
  .links{gap:14px;font-size:14px} .topbar{gap:12px}
}
@media (max-width:350px){
  .links{gap:10px;font-size:13px} .page-mast .dateline{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}