@charset "utf-8";
/* ============================================================================
   symbolonpress.com — site.css  (revision of 4 Sept 2026, rev 2 after the
   owner's feedback on the first mockup: no coloured bands, no boxes, one
   accent colour, everything on one quiet ground)

   Palette: chalk paper ground, warm ink, one navy accent (the ground colour of
   three of the four covers). Rules are hairlines; covers sit directly on the
   page with a thin edge and a soft shadow, as books on a table.
   Type: Cormorant Garamond (Google Fonts) for the wordmark and titles,
   Palatino for running text (the face the site has always used).
   Layout: one centred column (max 1080 px). Home / Books: a stacked catalogue,
   one title per row (cover left, text right). Book pages: text column left,
   aside (cover, specifications, purchase) right. Everything collapses to one
   column below 720 px; the five-item nav wraps and needs no menu button.

   Sections: 1 tokens · 2 base · 3 chrome (masthead, nav, footer) · 4 home and
   catalogue · 5 book pages · 6 content pages · 7 galleries and the excerpt ·
   8 media queries (a build step also emits these as container queries for the
   mockup toolbar; the site only needs the media queries).
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&display=swap");

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  --paper: #F7F5F0;          /* page ground */
  --paper-2: #ECE9E2;        /* cover backing */
  --ink: #262421;
  --ink-2: #5E5A52;          /* captions only */
  --rule: #D8D3C8;
  --accent: #2B3A6A;         /* navy: wordmark, headings, links */
  --accent-2: #1A2445;       /* link hover */
  --ochre: #8C6A2C;          /* small labels, tagline */
  --shadow: 0 1px 2px rgba(38, 36, 33, .10), 0 10px 22px -12px rgba(38, 36, 33, .45);
  --display: "Cormorant Garamond", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --body: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", Georgia, serif;
  --measure: 64ch;
  --gutter: clamp(20px, 5vw, 64px);
  --cover-w: 176px;
  --aside-w: 300px;
}

/* ---------- 2. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink); border-top: 4px solid var(--accent);
  font-family: var(--body); font-size: 18px; line-height: 1.6;
}
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.15; margin: 0; text-wrap: balance; color: var(--accent); }
h1 { font-size: 40px; }
h2 { font-size: 27px; }
h3 { font-size: 22px; }
p { margin: 0; }
p + p, p + ul, ul + p, figure + p, p + figure, blockquote + blockquote { margin-top: .9rem; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }
em { font-style: italic; }
figure { margin: 1.4rem 0; }
figcaption, .caption { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: .5rem; }
.center { text-align: center; }
.label { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.page { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- 3. Chrome ---------------------------------------------------- */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem 2.5rem; flex-wrap: wrap;
  padding: 1.6rem 0 1.1rem; border-bottom: 1px solid var(--rule);
}
.brand { display: flex; align-items: center; gap: .95rem; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 72px; height: auto; flex: none; }
.brand .name { font-family: var(--display); font-size: 42px; font-weight: 600; letter-spacing: .01em; line-height: 1; color: var(--accent); }
.brand .tag { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ochre); margin-top: .5rem; }
nav.main ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem 1.7rem; }
nav.main a {
  display: block; color: var(--ink); text-decoration: none; font-size: 17px; padding: .25rem 0 .35rem;
  border-bottom: 2px solid transparent;
}
nav.main a:hover { color: var(--accent-2); border-bottom-color: var(--rule); }
nav.main a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

footer.foot {
  margin-top: 3.5rem; padding: 1.8rem 0 3rem; border-top: 1px solid var(--rule);
  font-size: 17px; color: var(--ink); line-height: 1.55;
}
footer.foot .def-head { max-width: none; }
footer.foot .def-head b { font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--accent); }
footer.foot .def { max-width: 62ch; margin: .5rem 0 0; padding-left: 1.2rem; border-left: 2px solid var(--rule); font-style: italic; }
footer.foot .def footer { font-style: normal; margin-top: .3rem; font-size: 16px; }
footer.foot .small { margin-top: 1.4rem; font-size: 15px; }
footer.foot .small a { margin-left: 1.3rem; }

/* ---------- 4. Home and catalogue ----------------------------------------- */
.lede {
  font-family: var(--display); font-weight: 500; font-size: clamp(27px, 3.1vw, 36px); line-height: 1.28;
  max-width: 30ch; margin: 2.8rem 0 2.4rem; text-wrap: balance;
}
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 2rem 4.5rem; align-items: center; padding: 2.4rem 0 1rem; }
.hero .lede { margin: 0 0 1.4rem; }
.hero .painting { margin: 0; }
.hero .painting img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.hero .painting figcaption { font-size: 14px; margin-top: .6rem; }
.collection { display: inline-block; margin-top: 1.8rem; text-decoration: none; }
.collection .go { font-family: var(--display); font-size: 24px; font-weight: 600; color: var(--accent); border-bottom: 2px solid var(--accent); padding-bottom: 1px; }
.collection:hover .go { color: var(--accent-2); }
.intro { max-width: var(--measure); margin-bottom: 1rem; }
.tiles { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem 2.6rem; }
.tile .cover { display: block; line-height: 0; }
.tile .cover img { border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--paper-2); transition: transform .2s; }
.tile .cover:hover img { transform: translateY(-2px); }
.tile h2 { font-size: 23px; margin-top: 1rem; }
.tile h2 a { color: var(--ink); text-decoration: none; }
.tile h2 a:hover { color: var(--accent); }
.tile .by { font-size: 15px; color: var(--ink-2); margin-top: .3rem; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem 4rem; align-items: start; padding: 1.4rem 0 .4rem; }
.feature .text { max-width: var(--measure); }
.feature h2 { font-size: 31px; }
.feature h2 a { color: var(--ink); text-decoration: none; }
.feature h2 a:hover { color: var(--accent); }
.feature h2.second { margin-top: 2rem; font-size: 25px; }
.feature .sub { font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.25; color: var(--ink); margin-top: .2rem; }
.feature .by { margin-top: .5rem; }
.feature .by .contrib { color: var(--ink-2); }
.feature .blurb { margin-top: .9rem; font-size: 17px; }
.feature .blurb p + p { margin-top: .7rem; }
.feature .links { margin-top: .8rem; font-size: 16px; }
.feature .cover { display: block; line-height: 0; }
.feature .cover img { border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--paper-2); }
.feature .cover.plain img { border: 0; box-shadow: none; background: transparent; }
.linklist { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 16px; }
.linklist li + li { margin-top: .25rem; }
.section-label { display: flex; align-items: baseline; gap: 1.2rem; margin: 2.6rem 0 0; }
.section-label .label { flex: none; }
.pagehead { padding: 2.4rem 0 .6rem; }
.pagehead p { max-width: var(--measure); margin-top: .6rem; }

.catalogue { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.entry {
  display: grid; grid-template-columns: var(--cover-w) minmax(0, 1fr); gap: 2.4rem; align-items: start;
  padding: 2.3rem 0; border-bottom: 1px solid var(--rule);
}
.entry .cover { display: block; line-height: 0; }
.entry .cover img, .cover-img { border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--paper-2); }
.entry .cover.plain img { border: 0; box-shadow: none; background: transparent; }
.entry h2 { font-size: 31px; }
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--accent); }
.entry .sub { font-family: var(--display); font-style: italic; font-size: 21px; line-height: 1.25; color: var(--ink); margin-top: .2rem; }
.entry.compact { grid-template-columns: 150px minmax(0, 1fr); padding: 1.8rem 0; }
.entry.compact .links { margin-top: .7rem; }
.entry .by { margin-top: .55rem; font-size: 17px; }
.entry .by .contrib { color: var(--ink-2); }
.entry .kicker { margin-bottom: .5rem; }
.entry .blurb { max-width: 62ch; font-size: 17px; line-height: 1.6; margin-top: .9rem; }
.entry .blurb p + p { margin-top: .7rem; }
.entry .specs { font-size: 14.5px; color: var(--ink-2); margin-top: 1rem; font-variant-numeric: tabular-nums; }
.entry .specs span + span::before { content: "\00b7"; margin: 0 .55em; color: var(--rule); }
.entry .links { display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: .85rem; font-size: 16px; }
.entry .links .buy { flex-basis: 100%; color: var(--ink-2); }
.entry .links .buy a { margin-left: .35em; }
.entry .links .buy a + a::before { content: "\00b7"; margin-right: .5em; color: var(--rule); }

/* ---------- 5. Book pages ------------------------------------------------- */
.bookhead { padding: 2.4rem 0 1.6rem; max-width: 60ch; }
.bookhead h1 { font-size: clamp(34px, 4vw, 44px); }
.bookhead .sub { font-family: var(--display); font-style: italic; font-size: 24px; line-height: 1.25; color: var(--ink); margin-top: .3rem; }
.bookhead .by { margin-top: .8rem; font-size: 18px; }
.bookhead .by .contrib { color: var(--ink-2); }
.book { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: 2rem 4rem; align-items: start; }
.book .text { max-width: var(--measure); }
.book .text h2 { margin-top: 1.8rem; }
.book .text h2:first-child { margin-top: 0; }
.book .text p.center img, .book .text p > img:only-child { display: block; margin: 0 auto; }
.book .text p:has(> img:only-child) { margin-top: 1.6rem; }
.book .text p:has(> img:only-child) + p { font-size: 15px; color: var(--ink-2); line-height: 1.5; margin-top: .5rem; }
.book .text p:has(> img:only-child) + p + p { margin-top: 1.6rem; }
.book aside { font-size: 16px; }
.book aside .cover { display: block; line-height: 0; margin-bottom: .6rem; }
.book aside .cover img { border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--paper-2); }
.book aside .enlarge { font-size: 15px; }
.book aside .specs { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 15px; }
.book aside .specs dl { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: .5rem 0 0; }
.book aside .specs dt { color: var(--ink-2); }
.book aside .specs dd { margin: 0; font-variant-numeric: tabular-nums; }
.book aside .note { margin-top: .8rem; font-size: 15px; color: var(--ink-2); }
.book aside .buy { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.book aside .shops { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem 1rem; }
.book aside .shops a { font-weight: 600; }
.book aside .extras { margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rule); list-style: none; }
.book aside .extras li + li { margin-top: .3rem; }
.book aside .more { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
.book aside .more p { font-size: 15px; color: var(--ink-2); }
.book aside .more p:has(> img:only-child) { margin-top: 1.2rem; }
.book aside .more img { display: block; margin: 0 auto; }
.book aside .more p + p { margin-top: .5rem; }
.also { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid var(--rule); }
.also ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.also li { display: grid; grid-template-columns: 64px 1fr; gap: 1rem; align-items: start; font-size: 15px; }
.also li img { border: 1px solid var(--rule); box-shadow: var(--shadow); }
.also li a { color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 20px; font-weight: 600; line-height: 1.15; display: block; }
.also li a:hover { color: var(--accent); }
.also li span { color: var(--ink-2); }

/* ---------- 6. Content pages (about, contact, purchase, foreword...) ------- */
.content { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-w); gap: 2rem 4rem; align-items: start; padding-top: .8rem; }
.content.single { grid-template-columns: minmax(0, 1fr); }
.content .text { max-width: var(--measure); }
.content .text h2 { margin-top: 1.8rem; font-size: 25px; }
.content .text h2:first-child { margin-top: 0; }
.content .text h2 + p, .content .text h2 + ul { margin-top: .6rem; }
.content .text p.center img, .content .text p > img:only-child { display: block; margin: 0 auto; }
.content .text p:has(> img:only-child) { margin-top: 1.6rem; }
.content aside { font-size: 16px; color: var(--ink-2); }
.content aside p + p { margin-top: .6rem; }
.content aside h2 { font-size: 21px; color: var(--ink); margin-top: 1.2rem; }
.content aside img { display: block; }
.content aside .cover { display: block; line-height: 0; margin-bottom: .8rem; }
.content aside .cover img { border: 1px solid var(--rule); box-shadow: var(--shadow); background: var(--paper-2); }
.content aside ul { list-style: none; margin: .8rem 0 0; padding: 0; }
.content aside li + li { margin-top: .3rem; }
.content aside .strong { color: var(--ink); font-weight: 600; }
.foreword-head { color: var(--ink-2); font-size: 16px; margin-bottom: 1.6rem; }
.foreword-head p { margin: 0; }
.foreword-head .who { color: var(--ink); font-size: 18px; }
blockquote { margin: 0; padding: 0 0 0 1.2rem; border-left: 2px solid var(--rule); }
blockquote + blockquote { margin-top: 1.6rem; }
blockquote footer { margin-top: .5rem; font-style: italic; color: var(--ink-2); font-size: 16px; }
.toc { list-style: none; padding: 0; margin: .6rem 0 0; }
.toc li { display: grid; grid-template-columns: 7.5em 1fr; gap: .6rem; padding: .2rem 0; border-bottom: 1px dotted var(--rule); }
.toc li .lbl { color: var(--ink-2); font-size: 15px; padding-top: .15em; }
.toc li.plain { grid-template-columns: 1fr; }
.contact-email { font-size: 22px; font-family: var(--display); font-weight: 600; margin: .6rem 0 !important; }
#submissions { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.buylist { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.buylist li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .4rem 1.4rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.buylist li > a { grid-row: 1 / 3; }
.buylist img { border: 1px solid var(--rule); box-shadow: var(--shadow); }
.buylist .t { font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.15; }
.buylist .t a { color: var(--ink); text-decoration: none; }
.buylist .t a:hover { color: var(--accent); }
.buylist .m { font-size: 15px; color: var(--ink-2); }
.buylist .b { grid-column: 2; font-size: 15px; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; margin: 0; }
.buylist .b a { font-weight: 600; white-space: nowrap; }

/* ---------- 7. Galleries and the excerpt ---------------------------------- */
.plates { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.4rem; }
.plates li { line-height: 0; }
.plates img { width: 100%; border: 1px solid var(--rule); background: #fff; }
.excerpt .text { max-width: 66ch; }
.excerpt .chapters { list-style: none; margin: 1.2rem 0 2rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: 16px; }
.excerpt h2 { margin-top: 2.6rem; }
.excerpt .argument { font-style: italic; color: var(--ink-2); margin: .5rem 0 1rem; }
.excerpt .unfinished { margin-top: 1.4rem; font-size: 15px; color: var(--ink-2); font-style: italic; }
.notfound { padding: 3rem 0; max-width: var(--measure); }

/* ---------- 8. Media queries ---------------------------------------------- */
@media (max-width: 900px) {
  .book, .content { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; }
  .book aside, .content aside { max-width: 480px; }
  .book aside .cover img, .content aside .cover img { max-width: 220px; }
  .also ul { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 1.8rem; }
  .hero .painting { max-width: 300px; }
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .cover { display: none; }
}
@media (max-width: 720px) {
  body { font-size: 17px; }
  .masthead { align-items: flex-start; padding-top: 1.2rem; }
  .brand img { width: 56px; }
  .brand .name { font-size: 32px; }
  .entry.compact { grid-template-columns: 1fr; }
  nav.main ul { gap: .1rem 1.3rem; }
  nav.main a { font-size: 16px; }
  .lede { margin: 2rem 0 1.8rem; }
  .entry { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.8rem 0; }
  .entry .cover img { max-width: 150px; }
  .entry h2 { font-size: 27px; }
  .entry .sub { font-size: 19px; }
  .bookhead h1 { font-size: 32px; }
  .bookhead .sub { font-size: 21px; }
  .book aside, .content aside { order: -1; }
  .buylist li { grid-template-columns: 60px minmax(0, 1fr); }
  .plates { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .toc li { grid-template-columns: 6em 1fr; }
}