:root { --ink:#191711; --paper:#e6dcc5; --paper-dim:#c4b89e; --brass:#b99255; --faded:#6e6658; --red:#8e483d; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Courier New",Courier,monospace; background-image:linear-gradient(rgba(25,23,17,.025) 1px,transparent 1px); background-size:100% 5px; }
a { color:inherit; }
button,input,select { font:inherit; }
::selection { background:var(--brass); color:var(--ink); }
.library-nav { min-height:60px; padding:0 clamp(20px,5vw,74px); display:flex; align-items:center; gap:34px; background:var(--ink); color:var(--paper); border-bottom:1px solid rgba(230,220,197,.18); font-size:11px; letter-spacing:.09em; }
.library-nav a { text-decoration:none; }
.library-nav .wordmark { font-weight:bold; white-space:nowrap; }
.library-nav .location { color:var(--brass); flex:1; }
.library-nav>div { display:flex; gap:clamp(15px,3vw,36px); }
.library-nav>div a { color:var(--paper-dim); }
.library-nav>div a:hover,.library-nav>div a:focus-visible,.library-nav>div a.active { color:var(--brass); }
.library-hero { min-height:520px; display:grid; grid-template-columns:1.15fr .85fr; gap:8vw; align-items:end; padding:clamp(70px,9vw,110px) clamp(20px,8vw,120px) 64px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.library-hero::before { content:""; position:absolute; inset:0; background:url('../assets/resonara-map.png') center/cover; opacity:.06; filter:grayscale(1); }
.library-hero>* { position:relative; }
.eyebrow { margin:0 0 22px; color:var(--brass); font-size:11px; letter-spacing:.13em; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.045em; }
h1 { margin:0; font-size:clamp(72px,11vw,145px); line-height:.76; }
h2 { font-size:clamp(46px,6.4vw,82px); line-height:.92; margin-bottom:0; }
.hero-intro { padding-bottom:5px; }
.hero-intro>p { max-width:580px; font-size:15px; line-height:1.8; color:var(--paper-dim); }
blockquote { margin:42px 0 0; padding:22px 0 0; border-top:1px solid rgba(230,220,197,.25); }
blockquote span,blockquote p { display:block; font-family:Georgia,serif; font-size:22px; line-height:1.4; font-style:italic; }
blockquote cite { display:block; margin-top:12px; color:var(--brass); font-style:normal; font-size:10px; letter-spacing:.08em; }
.archive-button { display:inline-flex; align-items:center; justify-content:center; min-width:190px; padding:15px 18px; border:1px solid currentColor; text-decoration:none; font-size:11px; letter-spacing:.07em; white-space:nowrap; }
.archive-button:hover,.archive-button:focus-visible { background:var(--ink); color:var(--paper); }
.belltower,.methods,.annals,.listening-paths,.echoes,.bellmark-guide { padding:clamp(52px,6vw,82px) clamp(20px,7vw,100px); border-bottom:1px solid var(--ink); }
.belltower { color:var(--paper); background:var(--ink); }
.belltower-heading,.paths-heading,.echoes-heading { display:grid; grid-template-columns:1.35fr .65fr; gap:9vw; align-items:end; margin-bottom:38px; }
.belltower-heading>div:last-child>p { color:var(--paper-dim); font-size:13px; line-height:1.75; }
.paths-heading>p,.echoes-heading>p { color:#514c42; font-size:13px; line-height:1.75; }
.belltower-heading .archive-button { margin-top:20px; }
.belltower .archive-button:hover,.belltower .archive-button:focus-visible { color:var(--ink); background:var(--paper); }
.bell-layout { display:grid; grid-template-columns:minmax(230px,.72fr) minmax(420px,1.35fr) minmax(300px,.9fr); border-top:1px solid rgba(230,220,197,.28); border-left:1px solid rgba(230,220,197,.28); }
.bell-layout>* { min-width:0; border-right:1px solid rgba(230,220,197,.28); border-bottom:1px solid rgba(230,220,197,.28); }
.bell-reference { height:560px; overflow:auto; }
.bell-tabs { display:grid; grid-template-columns:1fr 1fr; position:sticky; top:0; z-index:2; background:var(--ink); }
.bell-tabs button { padding:15px 8px; color:#938a77; border:0; border-right:1px solid rgba(230,220,197,.25); border-bottom:1px solid rgba(230,220,197,.25); background:transparent; cursor:pointer; font-size:10px; letter-spacing:.06em; }
.bell-tabs button.active { color:var(--brass); background:rgba(185,146,85,.08); }
.bell-panel { display:none; padding:22px; }
.bell-panel.active { display:block; }
.bell-panel h3 { margin:8px 0 14px; color:var(--brass); font-size:10px; font-weight:400; letter-spacing:.09em; }
.bell-day-list,.bell-month-list,.bell-observance-list { margin:0 0 28px; padding:0; list-style:none; }
.bell-day-list li { padding:7px 0; display:grid; grid-template-columns:28px 1fr; border-bottom:1px solid rgba(230,220,197,.12); color:var(--paper-dim); font-size:11px; }
.bell-day-list span,.bell-month-list>li>span { color:#756d5e; }
.bell-month-list li { padding:8px 0; display:grid; grid-template-columns:28px 1fr auto; border-bottom:1px solid rgba(230,220,197,.12); font-size:11px; }
.bell-month-list b { font-weight:400; }
.bell-month-list em { color:#8d8473; font-size:10px; }
.bell-observance-list li { padding:14px 0; border-bottom:1px solid rgba(230,220,197,.14); }
.bell-observance-list li.current { border-left:2px solid var(--brass); padding-left:12px; }
.bell-observance-list span { display:block; color:#8d8473; font-size:10px; }
.bell-observance-list b { display:block; margin:5px 0; font:400 17px Georgia,serif; }
.bell-observance-list p { margin:0; color:var(--paper-dim); font-size:11px; line-height:1.5; }
.bell-reading { padding:clamp(32px,4vw,55px) 28px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:radial-gradient(circle at 50% 48%,rgba(185,146,85,.1),transparent 55%); }
.bell-kicker { margin:0 0 22px; color:var(--brass); font-size:10px; letter-spacing:.13em; }
.bell-date { margin:0 0 7px; font:400 clamp(28px,3vw,43px) Georgia,serif; }
.bell-year { color:#9e9581; font-size:11px; line-height:1.6; }
.bell-time { margin:25px 0 4px; padding:0; color:var(--paper); border:0; background:transparent; cursor:pointer; }
.bell-time>span { font:400 clamp(55px,7vw,104px)/.85 Georgia,serif; letter-spacing:-.04em; }
.bell-time small { margin-left:12px; color:var(--brass); font-size:12px; letter-spacing:.08em; }
.bell-time-name { min-height:18px; color:var(--brass); font-size:10px; letter-spacing:.16em; }
.bell-conditions { width:100%; margin-top:24px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(230,220,197,.22); border-left:1px solid rgba(230,220,197,.22); }
.bell-conditions div { padding:13px 9px; border-right:1px solid rgba(230,220,197,.22); border-bottom:1px solid rgba(230,220,197,.22); }
.bell-conditions span { display:block; margin-bottom:6px; color:#857d6c; font-size:10px; letter-spacing:.08em; }
.bell-conditions b { font-size:11px; font-weight:400; }
.bell-moons { padding:32px 25px; }
.moon-reading { padding:22px 0; display:grid; grid-template-columns:76px 1fr; gap:18px; align-items:center; border-top:1px solid rgba(230,220,197,.18); }
.moon-orb { width:70px; height:70px; position:relative; overflow:hidden; border-radius:50%; box-shadow:0 0 24px rgba(255,255,255,.1); }
.moon-orb.sonderr { background:radial-gradient(circle at 35% 30%,#f0ede4,#aaa69e 68%,#74716d); }
.moon-orb.ekko { background:radial-gradient(circle at 35% 30%,#d6a36b,#9a592d 68%,#62351f); }
.moon-shadow { position:absolute; inset:0; border-radius:50%; background:#191711; opacity:.94; }
.moon-reading>div:last-child>span { color:#8d8473; font-size:10px; letter-spacing:.08em; }
.moon-reading h3 { margin:7px 0 5px; font:400 19px Georgia,serif; }
.moon-reading p { margin:0; color:var(--paper-dim); font-size:10px; }
.moon-alignment { margin:18px 0 0; padding-top:18px; color:var(--brass); border-top:1px solid rgba(230,220,197,.18); font:italic 17px/1.5 Georgia,serif; }
.section-intro { display:grid; grid-template-columns:1fr 2fr; align-items:end; margin-bottom:36px; }
.method-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.method-grid a { min-height:180px; padding:20px; text-decoration:none; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); transition:background .15s,color .15s; }
.method-grid a:hover,.method-grid a:focus-visible { background:var(--ink); color:var(--paper); }
.method-grid>a>span { font-size:11px; color:var(--brass); }
.method-grid h3 { margin:34px 0 11px; font-family:Georgia,serif; font-weight:400; font-size:23px; }
.method-grid p { margin-bottom:0; color:#5b5549; font-size:12px; line-height:1.65; }
.method-grid a:hover p,.method-grid a:focus-visible p { color:var(--paper-dim); }
.annals { background:var(--ink); color:var(--paper); }
.annals-heading { display:grid; grid-template-columns:1.4fr .6fr; gap:10vw; align-items:end; margin-bottom:38px; }
.annals-heading>p { color:var(--paper-dim); font-size:12px; line-height:1.7; }
.catalogue-controls { display:grid; grid-template-columns:2fr repeat(3,1fr); border:1px solid rgba(230,220,197,.25); }
.catalogue-controls label { padding:12px 14px; border-right:1px solid rgba(230,220,197,.25); }
.catalogue-controls label:last-child { border-right:0; }
.catalogue-controls label>span { display:block; margin-bottom:8px; color:var(--brass); font-size:10px; letter-spacing:.1em; }
.catalogue-controls input,.catalogue-controls select { width:100%; border:0; padding:0; outline:0; background:transparent; color:var(--paper); font-size:12px; }
.catalogue-controls select option { color:var(--ink); }
.catalogue-controls input::placeholder { color:#847b69; }
.result-count { margin:18px 0; color:var(--brass); font-size:10px; letter-spacing:.08em; }
.record-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(230,220,197,.25); border-left:1px solid rgba(230,220,197,.25); }
.record-card { min-height:280px; padding:22px; border-right:1px solid rgba(230,220,197,.25); border-bottom:1px solid rgba(230,220,197,.25); display:flex; flex-direction:column; }
.record-card.clearance-IV { background:rgba(142,72,61,.08); }
.record-meta { display:flex; justify-content:space-between; gap:12px; color:#8e8572; font-size:10px; letter-spacing:.05em; }
.record-meta span:last-child { color:var(--brass); text-align:right; }
.record-type { margin:26px 0 11px; color:var(--brass); font-size:10px; letter-spacing:.07em; }
.record-card h3 { margin:0 0 17px; font-family:Georgia,serif; font-size:30px; font-weight:400; }
.record-card>p:last-of-type { color:var(--paper-dim); font-size:12px; line-height:1.65; }
.record-date { margin:-7px 0 16px; color:#918875!important; font-size:11px!important; letter-spacing:.04em; }
.chronicle-card { background:rgba(230,220,197,.025); }
.record-tags { margin:13px 0; display:flex; flex-wrap:wrap; gap:6px; }
.record-tags span { padding:5px 7px; color:#a49a86; border:1px solid rgba(230,220,197,.18); font-size:10px; }
.dialog-record-tags span { color:#655f53; border-color:rgba(25,23,17,.25); }
.record-card button { margin-top:auto; padding:14px 0 0; display:flex; justify-content:space-between; border:0; border-top:1px solid rgba(230,220,197,.2); color:var(--paper); background:transparent; cursor:pointer; font-size:10px; letter-spacing:.08em; }
.record-card button:hover,.record-card button:focus-visible { color:var(--brass); }
.empty-records { grid-column:1/-1; padding:55px; border-right:1px solid rgba(230,220,197,.25); border-bottom:1px solid rgba(230,220,197,.25); color:var(--brass); font-size:10px; }
.load-records { width:100%; padding:18px; color:var(--paper); border:1px solid rgba(230,220,197,.25); border-top:0; background:transparent; cursor:pointer; font-size:10px; letter-spacing:.08em; }
.load-records:hover,.load-records:focus-visible { color:var(--ink); background:var(--paper); }
.load-records[hidden] { display:none; }
.listening-paths { background:#d6cab0; }
.path-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.path-grid a { min-height:250px; padding:22px; display:flex; flex-direction:column; text-align:left; text-decoration:none; color:var(--ink); border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); background:transparent; cursor:pointer; }
.path-grid a:hover,.path-grid a:focus-visible { color:var(--paper); background:var(--ink); outline:0; }
.path-grid span { color:#76591f; font-size:10px; letter-spacing:.09em; }
.path-grid h3 { margin:38px 0 14px; font:400 29px/1.05 Georgia,serif; }
.path-grid p { color:#514c42; font-size:12px; line-height:1.7; }
.path-grid a:hover p,.path-grid a:focus-visible p { color:var(--paper-dim); }
.path-grid b { margin-top:auto; padding-top:16px; border-top:1px solid rgba(25,23,17,.25); font-size:10px; letter-spacing:.07em; font-weight:400; }
.path-grid a:hover b,.path-grid a:focus-visible b { border-color:rgba(230,220,197,.25); color:var(--brass); }
.echoes { background:var(--paper); }
.echo-controls { display:grid; grid-template-columns:2fr 1fr 1fr; border:1px solid var(--ink); }
.echo-controls label { padding:12px 14px; border-right:1px solid var(--ink); }
.echo-controls label:last-child { border-right:0; }
.echo-controls label>span { display:block; margin-bottom:8px; color:#76591f; font-size:10px; letter-spacing:.1em; }
.echo-controls input,.echo-controls select { width:100%; padding:0; color:var(--ink); border:0; outline:0; background:transparent; font-size:12px; }
.echo-controls input::placeholder { color:#766e5f; }
.echo-console { padding:clamp(24px,4vw,46px); border:1px solid var(--ink); border-top:0; }
.echo-console-meta { display:flex; justify-content:space-between; gap:22px; color:#76591f; font-size:10px; letter-spacing:.07em; }
.echo-console blockquote { height:clamp(240px,24vw,290px); margin:28px 0; padding:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; border:0; }
.echo-console blockquote p { margin:0; max-width:1050px; font:italic clamp(38px,5vw,65px)/1.2 Georgia,serif; }
.echo-console blockquote p.medium-echo { font-size:clamp(34px,4.3vw,55px); }
.echo-console blockquote p.long-echo { font-size:clamp(28px,3.8vw,47px); }
.echo-console blockquote cite { margin-top:24px; color:#76591f; font-size:11px; }
.echo-finding-aids { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.echo-finding-aids div { padding:13px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.echo-finding-aids span { display:block; margin-bottom:6px; color:#76591f; font-size:10px; letter-spacing:.08em; }
.echo-finding-aids b { font-size:11px; font-weight:400; }
.echo-current-tags { padding:16px 0; display:flex; flex-wrap:wrap; gap:7px; }
.echo-current-tags span { padding:6px 8px; color:#5b5549; border:1px solid rgba(25,23,17,.3); font-size:10px; }
.echo-navigation { margin-top:12px; display:grid; grid-template-columns:1fr auto 1fr; gap:10px; }
.echo-navigation button { min-height:50px; padding:14px 17px; color:var(--ink); border:1px solid var(--ink); background:#ded2b9; box-shadow:3px 3px 0 var(--ink); cursor:pointer; font-size:11px; font-weight:bold; letter-spacing:.07em; transition:background .12s,color .12s,transform .12s,box-shadow .12s; }
.echo-navigation button:last-child { text-align:right; }
.echo-navigation #randomEcho { color:var(--paper); background:#76591f; border-color:#76591f; box-shadow:3px 3px 0 #3e3015; }
.echo-navigation button:hover,.echo-navigation button:focus-visible { color:var(--paper); background:var(--ink); transform:translate(-1px,-1px); box-shadow:5px 5px 0 #76591f; }
.echo-navigation button:active { transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.bellmark-guide { padding:32px clamp(20px,7vw,100px) 30px; text-align:center; }
.bellmark-guide .eyebrow { margin-bottom:0; }
.bellmark-code { margin:20px auto 9px; font-size:clamp(15px,3.4vw,40px); letter-spacing:.02em; }
.bellmark-code span { color:#76591f; }
.bellmark-legend { max-width:870px; margin:auto; display:grid; grid-template-columns:.7fr 1.35fr .75fr .6fr .8fr .7fr; font-size:10px; letter-spacing:.07em; color:var(--faded); }
.bellmark-guide>p:last-child { margin:18px auto 0; max-width:620px; color:#514c42; font-size:12px; line-height:1.6; }
footer { min-height:82px; padding:22px clamp(20px,5vw,74px); display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:10px; letter-spacing:.08em; }
footer button { border:0; background:transparent; color:#76591f; cursor:pointer; font-size:10px; }
footer button:hover,footer button:focus-visible { color:var(--ink); text-decoration:underline; }
.record-dialog { width:min(820px,calc(100% - 30px)); max-height:calc(100vh - 30px); padding:0; border:1px solid var(--ink); background:var(--paper); color:var(--ink); box-shadow:0 28px 100px rgba(0,0,0,.55); }
.record-dialog::backdrop { background:rgba(10,9,7,.78); }
.dialog-close { position:sticky; top:0; float:right; z-index:2; width:48px; height:48px; border:0; border-left:1px solid var(--ink); border-bottom:1px solid var(--ink); background:var(--paper); cursor:pointer; font-size:26px; }
#dialogContent { padding:clamp(32px,7vw,78px); }
.dialog-stamp { display:flex; justify-content:space-between; padding:12px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); font-size:10px; letter-spacing:.08em; clear:both; }
.dialog-type { margin:45px 0 14px; color:#76591f; font-size:10px; letter-spacing:.08em; }
.record-dialog h2 { font-size:clamp(46px,8vw,77px); }
.dialog-subtitle { margin:18px 0 38px; max-width:620px; color:#514c42; line-height:1.6; }
.record-dialog dl { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 50px; border-top:1px solid var(--ink); border-left:1px solid var(--ink); }
.record-dialog dl div { padding:14px; border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.record-dialog dt { color:#76591f; font-size:10px; letter-spacing:.08em; }
.record-dialog dd { margin:7px 0 0; font-size:11px; }
.dialog-sections section { display:grid; grid-template-columns:170px 1fr; gap:24px; padding:24px 0; border-top:1px solid rgba(25,23,17,.3); }
.dialog-sections h3 { margin:0; font-family:Georgia,serif; font-size:20px; font-weight:400; }
.dialog-sections p { margin:0; color:#514c42; font-size:12px; line-height:1.75; }
.record-dialog blockquote { margin:42px 0; padding:30px 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--ink); }
.record-dialog .archive-button { margin-bottom:40px; }
.related { margin-top:50px; }
.related>h3 { color:#76591f; font-size:10px; letter-spacing:.08em; }
.related button { width:100%; padding:14px 0; display:grid; grid-template-columns:1fr 1.5fr; text-align:left; border:0; border-top:1px solid rgba(25,23,17,.3); background:transparent; cursor:pointer; font-size:10px; }
.related button strong { font-family:Georgia,serif; font-size:16px; font-weight:400; }
.related button:hover,.related button:focus-visible { color:#76591f; }
.noscript { color:var(--paper-dim); }
@media (max-width:1100px) and (min-width:781px) {
  .bell-layout { grid-template-columns:260px 1fr; }
  .bell-moons { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:0 34px; }
  .bell-moons>.bell-kicker,.bell-moons>.moon-alignment { grid-column:1/-1; }
}
@media (max-width:780px) {
  .library-nav .location { display:none; }
  .library-nav { gap:16px; }
  .library-nav>div { margin-left:auto; }
  .library-nav>div a:first-child { display:none; }
  .library-hero,.annals-heading,.section-intro,.belltower-heading,.paths-heading,.echoes-heading { grid-template-columns:1fr; gap:30px; }
  .library-hero { min-height:560px; align-items:end; }
  .bell-layout { grid-template-columns:1fr; }
  .bell-reference { height:520px; }
  .bell-reading,.bell-moons { min-height:400px; }
  .method-grid,.record-grid,.path-grid { grid-template-columns:1fr; }
  .catalogue-controls,.echo-controls { grid-template-columns:1fr 1fr; }
  .catalogue-controls label,.echo-controls label { border-bottom:1px solid; }
  .dialog-sections section { grid-template-columns:1fr; gap:10px; }
  footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width:520px) {
  .library-nav>div a:nth-child(2) { display:none; }
  .catalogue-controls,.echo-controls { grid-template-columns:1fr; }
  .record-dialog dl,.echo-finding-aids { grid-template-columns:1fr; }
  .bellmark-legend { display:none; }
  .bell-conditions { grid-template-columns:1fr 1fr; }
  .echo-navigation { grid-template-columns:1fr; }
  .echo-navigation button:last-child { text-align:left; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }