/* Meşcere Postası — black & white broadsheet */
@font-face { font-family: "Playfair"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(fonts/playfair-display-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair"; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(fonts/playfair-display-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Playfair"; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(fonts/playfair-display-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Playfair"; font-style: italic; font-display: swap; font-weight: 400 900;
  src: url(fonts/playfair-display-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Old Standard"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/old-standard-tt-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Old Standard"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/old-standard-tt-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Old Standard"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/old-standard-tt-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Old Standard"; font-style: italic; font-weight: 400; font-display: swap;
  src: url(fonts/old-standard-tt-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Old Standard"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/old-standard-tt-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Old Standard"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/old-standard-tt-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --paper: #ffffff; --ink: #000000;
  --head: "Playfair", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Old Standard", "Georgia", "Times New Roman", serif;
  --gut: clamp(14px, 3vw, 32px);
  --rule: 1px solid var(--ink);
  color-scheme: light;
}
:root[data-theme="dark"] { --paper: #000000; --ink: #ffffff; color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #000000; --ink: #ffffff; color-scheme: dark; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.5 var(--body); font-kerning: normal; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.sheet { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }
.sc { font-variant: small-caps; letter-spacing: .06em; text-transform: lowercase; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- masthead ---------- */
.mast { padding-top: 18px; }
.ears { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; font-size: 13.5px;
        border-bottom: var(--rule); padding-bottom: 8px; }
.ears span:last-child { text-align: right; }
.ears .orn { width: 64px; height: 16px; }
.title { margin: 6px 0 22px; text-align: center; font: 900 clamp(46px, 9.4vw, 124px)/1 var(--head); letter-spacing: -.01em;
         font-feature-settings: "lnum"; }
.motto { margin: 0 0 10px; text-align: center; font: italic 400 clamp(14px, 1.5vw, 17px)/1.3 var(--head); }
.dateline { border-top: 3px double var(--ink); border-bottom: 3px double var(--ink); padding: 6px 0;
            display: flex; justify-content: space-between; align-items: center; gap: 8px 20px; flex-wrap: wrap; font-size: 14px; }
.dateline nav { display: flex; gap: 18px; flex-wrap: wrap; }
.dateline nav a { text-decoration: none; }
.dateline nav a:hover { text-decoration: underline; }
.tools { display: flex; gap: 6px; }
.tools a, .tools button { display: inline-grid; place-items: center; min-height: 22px; border: var(--rule); background: none; color: var(--ink); font: 700 12px var(--body); letter-spacing: .06em;
  padding: 2px 8px; cursor: pointer; text-decoration: none; line-height: 1.5; }
.tools a:hover, .tools button:hover { background: var(--ink); color: var(--paper); }

/* ---------- front page ---------- */
.front { display: grid; grid-template-columns: 3fr 6fr 3fr; margin-top: 14px; border-bottom: 3px double var(--ink); padding-bottom: 18px; }
.front > * { padding: 0 18px; min-width: 0; }
.front > :first-child { padding-left: 0; }
.front > :last-child { padding-right: 0; }
.front > * + * { border-left: var(--rule); }

.kicker { margin: 0 0 4px; font-size: 13.5px; text-align: center; border-bottom: var(--rule); padding-bottom: 4px; }
.h-col { margin: 6px 0 8px; font: 800 24px/1.1 var(--head); text-align: center; }
.byline { margin: 0 0 10px; text-align: center; font-size: 14px; font-style: italic; }
.byline b { font-style: normal; }
.copy { text-align: left; font-size: 16.5px; line-height: 1.5; }
.copy p { margin: 0 0 .7em; }
.drop::first-letter { float: left; font: 900 3.4em/.8 var(--head); padding: .06em .08em 0 0; }
/* aged print: faded grey photo + white damage texture + darkened edges */
.oldprint { position: relative; margin: 4px 0; overflow: hidden; isolation: isolate; background: #fff; }
.portrait { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
            filter: grayscale(1) contrast(.92) brightness(.98) blur(.3px); }
.oldprint::before, .oldprint::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.oldprint::before { box-shadow: inset 0 0 46px 10px rgba(0, 0, 0, .6); background: radial-gradient(ellipse at 50% 42%, transparent 50%, rgba(0, 0, 0, .35) 100%); z-index: 1; }
.oldprint::after { background: url(oldphoto.svg) center / 100% 100% no-repeat; mix-blend-mode: screen; z-index: 2; }
.portrait-cap { font-size: 13px; font-style: italic; text-align: center; margin: 0 0 12px; }
.fields { font-size: 15px; font-style: italic; border-top: var(--rule); padding-top: 8px; margin: 10px 0 0; }
.fields b { font-style: normal; }
.ids { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: var(--rule); font-size: 15px; }
.ids li { display: flex; gap: 6px; }
.ids li::after { content: ""; }

.lead-kicker { margin: 0; text-align: center; font-size: 14px; }
.headline { margin: 2px 0 6px; text-align: center; font: 900 clamp(32px, 4.3vw, 54px)/1.02 var(--head); letter-spacing: -.01em; }
.deck { margin: 0 auto 12px; max-width: 46ch; text-align: center; font: italic 500 clamp(17px, 1.6vw, 20px)/1.35 var(--head); }
.deck-rule { width: 120px; margin: 0 auto 12px; border: 0; border-top: var(--rule); }
.stand { margin: 0; border: var(--rule); padding: 10px 10px 0; position: relative; }
.stand svg { display: block; width: 100%; height: clamp(170px, 24vw, 300px); overflow: visible; touch-action: pan-y; }
.stand .tree { fill: var(--ink); }
.stand .crown { stroke: var(--ink); stroke-width: .9; }
.stand .tree.on .crown { fill: var(--ink) !important; }
.stand .ground { stroke: var(--ink); stroke-width: 2; }
.stand .tip { position: absolute; transform: translate(-50%, -100%); margin-top: -8px; pointer-events: none; background: var(--paper);
  border: 2px solid var(--ink); padding: 3px 8px; font: 700 13px/1.3 var(--body); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.stand figcaption { border-top: var(--rule); margin: 0 -10px; padding: 6px 10px; font-size: 14px; font-style: italic;
                    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stand figcaption b { font-style: normal; }
.resample { border: 0; background: none; padding: 0; font: italic 14px var(--body); color: var(--ink); text-decoration: underline; cursor: pointer; }
.cols2 { columns: 2; column-gap: 24px; column-rule: var(--rule); margin-top: 12px; }
.cols2 p:first-child { margin-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  .stand .tree { animation: grow .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); transform-box: fill-box; transform-origin: bottom; }
}
@keyframes grow { from { transform: scaleY(0); } }

.breaking { border: 3px double var(--ink); padding: 8px 12px 10px; }
.breaking h2 { margin: 0; text-align: center; font: 900 26px/1.1 var(--head); }
.breaking .sub { margin: 2px 0 8px; text-align: center; font-size: 13.5px; font-style: italic; border-bottom: var(--rule); padding-bottom: 6px; }
.breaking ol { list-style: none; margin: 0; padding: 0; }
.breaking li { padding: 7px 0; border-bottom: 1px dotted var(--ink); }
.breaking li:last-child { border-bottom: 0; }
.breaking .crs { display: block; font-size: 13px; }
.breaking a { font-weight: 700; font-size: 16px; line-height: 1.25; text-decoration: none; }
.breaking a:hover { text-decoration: underline; }
.breaking .when { display: block; font-size: 13.5px; font-style: italic; }
.breaking .empty { font-style: italic; text-align: center; margin: 4px 0; }
.ad { margin-top: 16px; border: 2px solid var(--ink); outline: 1px solid var(--ink); outline-offset: 3px; padding: 12px; text-align: center; }
.ad h3 { margin: 0 0 4px; font: 800 20px/1.15 var(--head); }
.ad p { margin: 0; font-size: 15px; }
.ad .big { font: italic 700 17px/1.3 var(--head); margin: 6px 0; overflow-wrap: anywhere; }

/* ---------- section pages ---------- */
.page { padding-top: 34px; }
.page-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-bottom: 4px; }
.page-head::before, .page-head::after { content: ""; border-top: 3px double var(--ink); }
.page-head h2 { margin: 0; font: 900 clamp(28px, 3.6vw, 42px)/1 var(--head); text-align: center; }
.page-sub { margin: 0 0 18px; text-align: center; font-style: italic; font-size: 15px; }
.empty-page { text-align: center; font-style: italic; }

.notes { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; border-top: var(--rule); }
.notes > * { padding-top: 12px; }
.index-col { padding-right: 18px; border-right: var(--rule); }
.index-col h3 { margin: 0 0 6px; font: 800 18px var(--head); text-align: center; }
.courses { list-style: none; margin: 0; padding: 0; }
.courses button { width: 100%; display: flex; align-items: baseline; gap: 4px; padding: 6px 0; border: 0; background: none;
  font: 400 16px/1.3 var(--body); color: var(--ink); cursor: pointer; text-align: left; }
.courses button .dots { flex: 1; border-bottom: 1px dotted var(--ink); transform: translateY(-4px); min-width: 12px; }
.courses button:hover .nm { text-decoration: underline; }
.courses button[aria-selected="true"] { font-weight: 700; }
.courses button[aria-selected="true"] .nm::before { content: "☞ "; font-weight: 400; }
.panel { padding-left: 22px; }
.panel h3 { margin: 0; font: 900 28px/1.1 var(--head); }
.panel .share { margin: 2px 0 12px; font-size: 14px; font-style: italic; border-bottom: var(--rule); padding-bottom: 8px; }
.panel .share button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
.files { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: 28px; column-rule: var(--rule); }
.files li { break-inside: avoid; padding: 0 0 12px; margin-bottom: 12px; border-bottom: 1px dotted var(--ink); }
.ftitle { margin: 0; font: 700 19px/1.2 var(--head); }
.ftitle a { text-decoration: none; }
.ftitle a:hover { text-decoration: underline; }
.fnew { display: inline-block; margin-left: 6px; padding: 0 5px; background: var(--ink); color: var(--paper); font: 700 11px/1.6 var(--body);
        letter-spacing: .08em; vertical-align: 3px; }
.fdesc { margin: 3px 0 0; font-size: 15.5px; }
.fmeta { margin: 4px 0 0; font-size: 14px; font-style: italic; display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline; }
.fmeta a { font-style: normal; font-weight: 700; }

.pfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; border-top: var(--rule); border-bottom: var(--rule); padding: 8px 0; margin-bottom: 16px; }
.pfilter input { flex: 1 1 240px; border: 0; border-bottom: 1px dotted var(--ink); background: none; color: var(--ink);
                 font: italic 16px var(--body); padding: 4px 2px; border-radius: 0; }
.pfilter input:focus { outline: none; border-bottom: 2px solid var(--ink); }
.pfilter input::placeholder { color: var(--ink); opacity: .7; }
.chip { border: 0; background: none; color: var(--ink); font: 400 15.5px var(--body); padding: 2px 4px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip:hover { text-decoration: underline; }
.plist-wrap { columns: 3 320px; column-gap: 28px; column-rule: var(--rule); }
.yhead { break-after: avoid; margin: 0 0 8px; text-align: center; font: 900 24px/1 var(--head); display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.yhead::before, .yhead::after { content: ""; border-top: var(--rule); }
.yhead:not(:first-child) { margin-top: 10px; }
.pub { break-inside: avoid; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px dotted var(--ink); }
.ptype { margin: 0; font-size: 12.5px; letter-spacing: .06em; font-variant: small-caps; text-transform: lowercase; }
.ptitle { margin: 1px 0 4px; font: 700 17.5px/1.25 var(--head); }
.authors { margin: 0; font-size: 15px; }
.authors strong { font-weight: 700; }
.venue { margin: 0; font-size: 15px; font-style: italic; }
.plinks { margin: 5px 0 0; padding: 0; list-style: none; font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.plinks a { font-weight: 700; }
.noresult { text-align: center; font-style: italic; }

.contact-ad { max-width: 640px; margin: 0 auto; border: 3px double var(--ink); padding: 18px 22px; text-align: center; }
.contact-ad .orn { width: 90px; height: 18px; display: block; margin: 0 auto 6px; }
.contact-ad h3 { margin: 0; font: 900 clamp(22px, 3vw, 30px)/1.15 var(--head); }
.contact-ad .mail { display: inline-block; margin: 8px 0 6px; font: italic 700 clamp(18px, 2.6vw, 26px)/1.2 var(--head); overflow-wrap: anywhere; }
.contact-ad p { margin: 4px 0; }
.contact-ad .ids { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 16px; border-top: var(--rule); margin-top: 12px; }

.foot { margin-top: 40px; border-top: 3px double var(--ink); padding: 10px 0 30px; display: flex; justify-content: space-between; gap: 10px 20px;
        flex-wrap: wrap; font-size: 13.5px; font-style: italic; }

/* ---------- small screens ---------- */
@media (max-width: 980px) {
  .front { grid-template-columns: 1fr 1fr; }
  .front .lead { grid-column: 1 / -1; order: -1; padding: 0 0 16px; border-left: 0; border-bottom: var(--rule); margin-bottom: 14px; }
  .front .about { padding-left: 0; border-left: 0; }
  .plist-wrap { columns: 2 280px; }
}
@media (max-width: 680px) {
  .ears { grid-template-columns: 1fr; text-align: center; }
  .ears span:last-child, .ears .orn { display: none; }
  .dateline { justify-content: center; text-align: center; }
  .front { grid-template-columns: 1fr; }
  .front > * { padding: 0 !important; border-left: 0 !important; }
  .front .about { border-bottom: var(--rule); padding-bottom: 14px !important; margin-bottom: 14px; order: 2; }
  .front .side { order: 1; border-bottom: var(--rule); padding-bottom: 14px !important; margin-bottom: 14px !important; }
  .cols2 { columns: 1; }
  .notes { grid-template-columns: 1fr; }
  .index-col { padding-right: 0; border-right: 0; border-bottom: var(--rule); padding-bottom: 8px; }
  .panel { padding-left: 0; }
  .plist-wrap { columns: 1; }
}
@media print {
  .tools, .resample, .pfilter, .share button { display: none !important; }
  .js .panel[hidden] { display: block !important; }
  .stand .tree { animation: none; }
}
