/* The Warded Index — governing tokens live in DESIGN_SYSTEM.md */
:root {
--world-950: #07100f;
--world-900: #0d1716;
--board-800: #16221f;
--rail-700: #24332f;
--rail-600: #34463f;
--paper-100: #ece2ca;
--paper-200: #d7c8a8;
--paper-300: #bbaa85;
--paper-ink: #17221f;
--text-primary: #f0e8d7;
--text-muted: #b9af98;
--copper-500: #b77b46;
--copper-300: #d4a66e;
--verdigris-500: #638f82;
--verdigris-300: #9bc6b8;
--signal: #c66150;
--focus: #a8ead7;
--font-display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
--font-body: "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
--font-data: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
--s1: .25rem;
--s2: .5rem;
--s3: .75rem;
--s4: 1rem;
--s5: 1.5rem;
--s6: 2rem;
--s7: 3rem;
--s8: 4rem;
--s9: 6rem;
--cut: 14px;
--content-max: 92rem;
--copy-max: 68ch;
--touch-min: 44px;
--e1: inset 0 1px rgb(255 255 255 / .07), inset 0 -1px rgb(0 0 0 / .5);
--e2: 0 2px 0 #040807, 0 7px 14px rgb(0 0 0 / .22);
--e3: 0 2px 0 rgb(255 255 255 / .1), 0 16px 34px rgb(0 0 0 / .38);
--e4: 0 24px 56px rgb(0 0 0 / .52);
--press: 90ms;
--respond: 150ms;
--select: 260ms;
--change: 340ms;
--opening: 620ms;
--ease-place: cubic-bezier(.22, .78, .2, 1);
--ease-return: cubic-bezier(.36, 0, .2, 1);
color-scheme: dark;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
scroll-behavior: smooth;
scroll-padding-top: 6rem;
background: var(--world-950);
}
body {
min-width: 320px;
min-height: 100vh;
margin: 0;
overflow-x: hidden;
color: var(--text-primary);
background:
linear-gradient(90deg, transparent 0 49.9%, rgb(255 255 255 / .018) 50%, transparent 50.1%),
linear-gradient(var(--world-900), var(--world-950));
font-family: var(--font-body);
font-size: clamp(1rem, .97rem + .2vw, 1.125rem);
line-height: 1.65;
text-rendering: optimizeLegibility;
}
body.entry-active {
overflow: hidden;
}
button,
a,
input,
textarea,
select {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button {
color: inherit;
}
a {
color: var(--verdigris-300);
text-underline-offset: .18em;
text-decoration-thickness: 1px;
}
a:hover {
color: var(--text-primary);
}
:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}
::selection {
color: var(--world-950);
background: var(--copper-300);
}
img,
svg {
display: block;
max-width: 100%;
}
svg {
fill: none;
stroke: currentColor;
stroke-linecap: square;
stroke-linejoin: miter;
stroke-width: 1.5;
}
h1,
h2,
h3,
p {
margin-block-start: 0;
}
h1,
h2,
h3 {
font-family: var(--font-display);
font-weight: 600;
text-wrap: balance;
}
code,
kbd {
font-family: var(--font-data);
}
kbd {
padding: .12rem .34rem;
border: 1px solid currentColor;
box-shadow: 0 2px 0 rgb(0 0 0 / .4);
font-size: .72rem;
}
[hidden] {
display: none !important;
}
.sr-only,
.external-note {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: fixed;
z-index: 2000;
top: var(--s4);
left: var(--s4);
padding: var(--s3) var(--s4);
color: var(--world-950);
background: var(--focus);
font-weight: 700;
transform: translateY(-180%);
transition: transform var(--respond) var(--ease-place);
}
.skip-link:focus {
transform: translateY(0);
}
.world-engraving,
.world-vignette {
position: fixed;
z-index: 0;
inset: 0;
pointer-events: none;
}
.world-engraving {
left: 25%;
background: var(--verdigris-500);
opacity: .105;
-webkit-mask: url("../assets/graphics/ward-map.svg") center / min(92vw, 84rem) auto no-repeat;
mask: url("../assets/graphics/ward-map.svg") center / min(92vw, 84rem) auto no-repeat;
}
.world-vignette {
background:
radial-gradient(circle at 74% 35%, transparent 0 10%, rgb(7 16 15 / .28) 48%, var(--world-950) 100%),
linear-gradient(90deg, var(--world-950) 0, transparent 22% 78%, var(--world-950) 100%);
}
.archive-shell {
position: relative;
z-index: 1;
}
.eyebrow,
.plate-label,
.record-meta,
.section-index,
.record-index__number,
.record-index__heading,
.record-leaf__rail,
.fact-grid dt {
font-family: var(--font-data);
font-size: .72rem;
font-weight: 700;
letter-spacing: .12em;
line-height: 1.35;
text-transform: uppercase;
}
.eyebrow {
margin-bottom: var(--s4);
color: var(--copper-300);
}
/* Opening cover */
.entry-cover {
position: fixed;
z-index: 1000;
inset: 0;
display: grid;
min-height: 100vh;
min-height: 100svh;
place-items: center;
padding: clamp(1rem, 4vw, 3rem);
overflow: auto;
color: var(--text-primary);
background: var(--world-950);
isolation: isolate;
}
.entry-cover__field {
position: absolute;
z-index: -2;
inset: -5%;
background:
linear-gradient(90deg, transparent 49.9%, rgb(212 166 110 / .13) 50%, transparent 50.1%),
linear-gradient(transparent 49.9%, rgb(212 166 110 / .09) 50%, transparent 50.1%),
radial-gradient(circle, transparent 0 17%, rgb(183 123 70 / .1) 17.2% 17.35%, transparent 17.5% 28%, rgb(99 143 130 / .09) 28.1% 28.3%, transparent 28.5%),
var(--world-950);
transform: scale(1);
transition: opacity var(--change), transform var(--opening) var(--ease-place);
}
.entry-case {
position: relative;
width: min(100%, 48rem);
min-height: min(43rem, calc(100svh - 2rem));
display: grid;
align-content: center;
justify-items: center;
padding: clamp(3rem, 8vw, 6rem) clamp(1.4rem, 7vw, 5rem);
border: 1px solid var(--rail-600);
box-shadow: var(--e4), var(--e1);
text-align: center;
background:
linear-gradient(135deg, rgb(255 255 255 / .035), transparent 38%),
var(--board-800);
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
transform: translateY(0) scale(1);
transition: opacity var(--change), transform var(--opening) var(--ease-place);
}
.entry-case::before,
.entry-case::after {
content: "";
position: absolute;
pointer-events: none;
}
.entry-case::before {
inset: .65rem;
border: 1px solid rgb(183 123 70 / .4);
clip-path: inherit;
}
.entry-case::after {
inset: 1.15rem;
border: 1px dashed rgb(185 175 152 / .16);
}
.entry-sigil {
width: clamp(6.5rem, 20vw, 10rem);
aspect-ratio: 1;
margin-bottom: var(--s5);
background: var(--copper-300);
-webkit-mask: url("../assets/graphics/archive-sigil.svg") center / contain no-repeat;
mask: url("../assets/graphics/archive-sigil.svg") center / contain no-repeat;
transform: rotate(0);
transition: transform var(--opening) var(--ease-place), opacity var(--change);
}
.entry-sigil img {
opacity: 0;
}
.entry-case h1 {
margin-bottom: var(--s2);
font-size: clamp(3.3rem, 11vw, 7.6rem);
line-height: .88;
letter-spacing: -.045em;
}
.entry-role {
margin-bottom: var(--s5);
color: var(--text-muted);
font-family: var(--font-data);
font-size: clamp(.75rem, 1.7vw, .95rem);
letter-spacing: .16em;
text-transform: uppercase;
}
.entry-rule {
position: relative;
width: min(17rem, 70%);
height: 1rem;
margin-bottom: var(--s4);
}
.entry-rule::before,
.entry-rule::after {
content: "";
position: absolute;
top: 50%;
width: calc(50% - .8rem);
height: 1px;
background: var(--copper-500);
}
.entry-rule::before { left: 0; }
.entry-rule::after { right: 0; }
.entry-rule span {
position: absolute;
top: 50%;
left: 50%;
width: .75rem;
height: .75rem;
border: 1px solid var(--copper-300);
transform: translate(-50%, -50%) rotate(45deg);
}
.entry-intro {
max-width: 36ch;
margin-bottom: var(--s6);
color: var(--text-muted);
text-wrap: balance;
}
.entry-actions,
.profile-actions,
.inspection-links {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s5);
flex-wrap: wrap;
}
.entry-hint {
position: absolute;
bottom: clamp(1.5rem, 4vw, 2.5rem);
margin: 0;
color: var(--text-muted);
font-family: var(--font-data);
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.entry-clamp {
position: absolute;
z-index: 2;
width: clamp(2.8rem, 8vw, 5rem);
height: clamp(1.25rem, 3vw, 2rem);
border: 1px solid var(--copper-500);
background: var(--rail-700);
box-shadow: var(--e2);
transition: transform var(--change) var(--ease-place), opacity var(--select);
}
.entry-clamp--tl { top: 1.2rem; left: 1.2rem; transform: rotate(-45deg); }
.entry-clamp--tr { top: 1.2rem; right: 1.2rem; transform: rotate(45deg); }
.entry-clamp--bl { bottom: 1.2rem; left: 1.2rem; transform: rotate(45deg); }
.entry-clamp--br { right: 1.2rem; bottom: 1.2rem; transform: rotate(-45deg); }
.entry-cover.is-opening .entry-case {
opacity: 0;
transform: translateY(-1rem) scale(.985);
}
.entry-cover.is-opening .entry-cover__field {
opacity: 0;
transform: scale(1.08);
}
.entry-cover.is-opening .entry-sigil {
opacity: 0;
transform: rotate(8deg) scale(.9);
}
.entry-cover.is-opening .entry-clamp--tl { transform: translate(-4rem, -4rem) rotate(-45deg); }
.entry-cover.is-opening .entry-clamp--tr { transform: translate(4rem, -4rem) rotate(45deg); }
.entry-cover.is-opening .entry-clamp--bl { transform: translate(-4rem, 4rem) rotate(45deg); }
.entry-cover.is-opening .entry-clamp--br { transform: translate(4rem, 4rem) rotate(-45deg); }
/* Shared controls */
.action,
.text-action,
.icon-control,
.close-control,
.record-index__button {
min-height: var(--touch-min);
}
.action {
position: relative;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
min-width: 12rem;
padding: .78rem 1rem .78rem 1.15rem;
border: 1px solid transparent;
color: var(--text-primary);
background: var(--rail-700);
box-shadow: var(--e2);
font-family: var(--font-data);
font-size: .76rem;
font-weight: 700;
letter-spacing: .07em;
line-height: 1.3;
text-align: left;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
transition: color var(--respond), background var(--respond), border-color var(--respond), transform var(--respond) var(--ease-place), box-shadow var(--respond);
}
.action::before {
content: "";
position: absolute;
inset: -1px auto -1px -1px;
width: .28rem;
background: var(--copper-300);
}
.action--primary {
border-color: var(--verdigris-500);
background: #24433c;
}
.action--ink {
width: 100%;
color: var(--paper-100);
background: var(--paper-ink);
}
.action:hover,
.action:focus-visible {
color: var(--text-primary);
border-color: var(--copper-300);
box-shadow: var(--e3);
transform: translateY(-3px);
}
.action:active {
box-shadow: var(--e1);
transform: translateY(1px);
transition-duration: var(--press);
}
.text-action {
display: inline-flex;
align-items: center;
color: var(--verdigris-300);
font-family: var(--font-data);
font-size: .76rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.text-action:hover {
color: var(--text-primary);
}
/* Persistent shell */
.archive-header {
position: sticky;
z-index: 100;
top: 0;
display: grid;
grid-template-columns: minmax(11rem, .72fr) minmax(34rem, 2fr) auto;
align-items: stretch;
min-height: 4.5rem;
border-bottom: 1px solid var(--rail-600);
box-shadow: 0 10px 22px rgb(0 0 0 / .24);
background: var(--world-900);
}
.nameplate {
display: flex;
align-items: center;
gap: var(--s3);
min-width: 0;
padding: var(--s3) var(--s5);
border-right: 1px solid var(--rail-600);
color: var(--text-primary);
text-decoration: none;
}
.nameplate:hover {
color: var(--text-primary);
background: rgb(255 255 255 / .025);
}
.nameplate__sigil {
position: relative;
display: grid;
width: 2.15rem;
height: 2.15rem;
flex: 0 0 auto;
place-items: center;
border: 1px solid var(--copper-500);
color: var(--copper-300);
font-family: var(--font-display);
font-size: .72rem;
transform: rotate(45deg);
}
.nameplate__sigil i {
font-style: normal;
transform: rotate(-45deg);
}
.nameplate strong,
.nameplate small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.nameplate strong {
font-family: var(--font-display);
font-size: 1.1rem;
line-height: 1.15;
}
.nameplate small {
color: var(--text-muted);
font-family: var(--font-data);
font-size: .62rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.chapter-nav {
display: grid;
grid-template-columns: repeat(5, minmax(6.4rem, 1fr));
}
.chapter-nav a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: var(--s3);
min-width: 0;
padding: var(--s2) var(--s3);
border-right: 1px solid rgb(52 70 63 / .6);
color: var(--text-muted);
text-decoration: none;
transition: color var(--respond), background var(--respond);
}
.chapter-nav a::after {
content: "";
position: absolute;
right: 18%;
bottom: 0;
left: 18%;
height: 2px;
background: var(--copper-300);
transform: scaleX(0);
transition: transform var(--select) var(--ease-place);
}
.chapter-nav a:hover,
.chapter-nav a:focus-visible,
.chapter-nav a[aria-current="location"] {
color: var(--text-primary);
background: rgb(99 143 130 / .08);
}
.chapter-nav a[aria-current="location"]::after {
transform: scaleX(1);
}
.chapter-nav svg {
width: 1.15rem;
flex: 0 0 auto;
}
.chapter-nav span,
.chapter-nav small {
display: block;
min-width: 0;
}
.chapter-nav span {
font-size: .76rem;
font-weight: 650;
line-height: 1.2;
}
.chapter-nav small {
margin-top: .12rem;
color: var(--text-muted);
font-family: var(--font-data);
font-size: .54rem;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
}
.header-controls {
display: flex;
align-items: stretch;
}
.icon-control {
display: grid;
min-width: 4.5rem;
place-items: center;
align-content: center;
gap: .15rem;
padding: .35rem .55rem;
border: 0;
border-left: 1px solid var(--rail-600);
color: var(--text-muted);
background: transparent;
cursor: pointer;
}
.icon-control:hover,
.icon-control:focus-visible,
.icon-control[aria-pressed="true"] {
color: var(--text-primary);
background: rgb(183 123 70 / .1);
}
.icon-control svg {
width: 1.15rem;
}
.control-label {
font-family: var(--font-data);
font-size: .52rem;
letter-spacing: .06em;
text-transform: uppercase;
}
main {
position: relative;
}
.route-section {
position: relative;
width: min(100%, var(--content-max));
margin-inline: auto;
padding: clamp(5rem, 9vw, 9rem) clamp(1.25rem, 5vw, 5rem);
scroll-margin-top: 0;
}
.profile-section {
display: grid;
min-height: calc(100vh - 4.5rem);
min-height: calc(100svh - 4.5rem);
align-content: center;
}
.section-index {
position: absolute;
top: 2rem;
right: clamp(1.25rem, 5vw, 5rem);
left: clamp(1.25rem, 5vw, 5rem);
display: flex;
justify-content: space-between;
padding-bottom: var(--s2);
border-bottom: 1px solid var(--rail-600);
color: var(--text-muted);
}
.profile-layout {
display: grid;
grid-template-columns: minmax(0, 1.38fr) minmax(18rem, .72fr);
align-items: center;
gap: clamp(2rem, 8vw, 8rem);
}
.profile-copy {
max-width: 55rem;
}
.profile-copy h1 {
max-width: 15ch;
margin-bottom: var(--s6);
font-size: clamp(3rem, 7vw, 6.8rem);
line-height: .9;
letter-spacing: -.045em;
}
.profile-lede {
max-width: 55ch;
margin-bottom: var(--s4);
color: var(--text-primary);
font-size: clamp(1.12rem, 1rem + .7vw, 1.5rem);
line-height: 1.5;
}
.profile-note {
max-width: 62ch;
margin-bottom: var(--s6);
color: var(--text-muted);
}
.profile-actions {
justify-content: flex-start;
}
.identity-plate {
position: relative;
min-width: 0;
padding: var(--s4);
color: var(--paper-ink);
background: var(--paper-100);
box-shadow: var(--e3);
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
transform: rotate(1.1deg);
}
.identity-plate::before {
content: "";
position: absolute;
inset: .6rem;
border: 1px solid var(--paper-300);
pointer-events: none;
}
.identity-plate__topline {
position: relative;
display: flex;
justify-content: space-between;
padding: var(--s2) var(--s3) var(--s4);
border-bottom: 1px solid var(--paper-300);
font-family: var(--font-data);
font-size: .64rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.status-mark i {
display: inline-block;
width: .5rem;
height: .5rem;
margin-right: .3rem;
background: var(--verdigris-500);
transform: rotate(45deg);
}
.identity-monogram {
position: relative;
display: grid;
width: min(13rem, 70%);
aspect-ratio: 1;
margin: var(--s6) auto;
place-items: center;
border: 1px solid var(--copper-500);
background:
linear-gradient(90deg, transparent 49.7%, var(--paper-300) 49.8% 50.2%, transparent 50.3%),
linear-gradient(transparent 49.7%, var(--paper-300) 49.8% 50.2%, transparent 50.3%);
transform: rotate(45deg);
}
.identity-monogram::before,
.identity-monogram::after {
content: "";
position: absolute;
inset: 12%;
border: 1px solid var(--paper-300);
}
.identity-monogram::after {
inset: 28%;
border-color: var(--copper-500);
}
.identity-monogram span {
position: absolute;
z-index: 1;
font-family: var(--font-display);
font-size: clamp(2.5rem, 6vw, 5rem);
line-height: 1;
transform: rotate(-45deg);
}
.identity-monogram span:first-child { translate: -1rem -.5rem; }
.identity-monogram span:last-child { translate: 1rem .5rem; }
.identity-plate__content {
position: relative;
padding: var(--s3);
}
.plate-label {
margin-bottom: var(--s3);
color: #53615c;
}
.focus-list {
margin: 0;
padding: 0;
list-style: none;
}
.focus-list li {
display: flex;
gap: var(--s3);
padding: var(--s2) 0;
border-top: 1px solid rgb(23 34 31 / .15);
font-family: var(--font-display);
font-size: 1.05rem;
}
.focus-list span {
color: #69766f;
font-family: var(--font-data);
font-size: .65rem;
}
.section-cue {
position: absolute;
right: clamp(1.25rem, 5vw, 5rem);
bottom: 1.6rem;
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 0 var(--s3);
color: var(--text-primary);
text-decoration: none;
}
.section-cue span {
color: var(--text-muted);
font-family: var(--font-data);
font-size: .58rem;
letter-spacing: .1em;
text-transform: uppercase;
}
.section-cue strong {
font-family: var(--font-display);
font-size: 1.1rem;
}
.section-cue i {
grid-row: 1 / 3;
grid-column: 2;
color: var(--copper-300);
font-style: normal;
font-size: 1.4rem;
}
/* Research workbench */
.research-section {
min-height: 100svh;
border-top: 1px solid var(--rail-700);
}
.research-section::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 calc(50% - 50vw);
background:
linear-gradient(90deg, transparent 49.9%, rgb(255 255 255 / .02) 50%, transparent 50.1%),
rgb(13 23 22 / .64);
}
.section-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--s7);
margin-bottom: clamp(2.5rem, 6vw, 5rem);
}
.section-heading h2,
.placeholder-section h2 {
margin-bottom: 0;
font-size: clamp(2.15rem, 4vw, 4rem);
line-height: 1;
letter-spacing: -.025em;
}
.section-heading > p {
max-width: 36ch;
margin-bottom: 0;
color: var(--text-muted);
}
.research-workbench {
display: grid;
grid-template-columns: minmax(13rem, 17rem) minmax(19rem, 27rem);
align-items: start;
justify-content: center;
gap: clamp(1.2rem, 3vw, 2.5rem);
padding: clamp(1rem, 2.5vw, 2rem);
border: 1px solid var(--rail-600);
box-shadow: var(--e1);
background:
linear-gradient(135deg, rgb(255 255 255 / .025), transparent 34%),
var(--board-800);
transition: grid-template-columns var(--change) var(--ease-place);
}
.research-workbench.has-inspection {
grid-template-columns: minmax(12rem, 15rem) minmax(18rem, 23rem) minmax(20rem, 1fr);
}
.record-index {
min-width: 0;
padding: var(--s4);
border: 1px solid var(--rail-600);
background: var(--world-900);
box-shadow: var(--e2);
}
.record-index__heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--s3);
margin-bottom: var(--s4);
padding-bottom: var(--s3);
border-bottom: 1px solid var(--rail-600);
color: var(--text-muted);
}
.record-index__heading p {
margin: 0;
}
.record-index ol {
margin: 0;
padding: 0;
list-style: none;
}
.record-index__button {
position: relative;
display: grid;
width: 100%;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--s3);
padding: .9rem .7rem;
border: 1px solid transparent;
color: var(--text-muted);
background: transparent;
text-align: left;
cursor: pointer;
}
.record-index__button:hover,
.record-index__button:focus-visible,
.record-index__button.is-selected {
border-color: var(--rail-600);
color: var(--text-primary);
background: rgb(99 143 130 / .09);
}
.record-index__button.is-selected::before {
content: "";
position: absolute;
top: .5rem;
bottom: .5rem;
left: -.72rem;
width: .24rem;
background: var(--copper-300);
}
.record-index__number {
color: var(--copper-300);
font-size: .58rem;
}
.record-index__label,
.record-index__label strong,
.record-index__label small {
display: block;
min-width: 0;
}
.record-index__label strong {
overflow-wrap: anywhere;
font-family: var(--font-display);
font-size: .95rem;
line-height: 1.15;
}
.record-index__label small {
margin-top: .2rem;
color: var(--text-muted);
font-size: .62rem;
line-height: 1.4;
}
.record-index__marker {
color: var(--copper-300);
font-size: .5rem;
transform: rotate(0) scale(.7);
transition: transform var(--select) var(--ease-place);
}
.record-index__button.is-selected .record-index__marker {
transform: rotate(45deg) scale(1);
}
.record-index__note {
margin: var(--s5) 0 0;
padding-top: var(--s3);
border-top: 1px solid var(--rail-600);
color: var(--text-muted);
font-size: .72rem;
line-height: 1.5;
}
.record-leaf {
position: relative;
min-width: 0;
padding: var(--s3);
color: var(--paper-ink);
background: var(--paper-100);
box-shadow: var(--e3);
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
transform: translateY(0) rotate(-.45deg);
transform-style: preserve-3d;
transition: transform var(--select) var(--ease-place), box-shadow var(--respond);
}
.record-leaf.is-direct-active {
will-change: transform;
}
.record-leaf__rail {
display: flex;
justify-content: space-between;
gap: var(--s2);
padding: var(--s2) .2rem var(--s3);
border-bottom: 1px solid var(--paper-300);
color: #5e685e;
font-size: .56rem;
}
.record-art {
position: relative;
display: grid;
min-height: clamp(13rem, 23vw, 19rem);
margin: var(--s3) 0;
place-items: center;
overflow: hidden;
border: 1px solid var(--paper-300);
background:
linear-gradient(90deg, transparent 49.8%, rgb(23 34 31 / .11) 50%, transparent 50.2%),
linear-gradient(transparent 49.8%, rgb(23 34 31 / .1) 50%, transparent 50.2%),
#e5d9bd;
}
.record-art::after {
content: "";
position: absolute;
inset: .65rem;
border: 1px dashed rgb(23 34 31 / .2);
pointer-events: none;
}
.record-art img {
width: 92%;
height: 92%;
object-fit: contain;
}
.record-art__coordinate {
position: absolute;
right: .45rem;
bottom: .3rem;
color: #5f685e;
font-family: var(--font-data);
font-size: .52rem;
letter-spacing: .1em;
}
.record-leaf__body {
padding: var(--s2) var(--s2) var(--s3);
}
.record-meta {
display: flex;
justify-content: space-between;
gap: var(--s3);
margin-bottom: var(--s3);
color: #5f685e;
font-size: .58rem;
}
.record-leaf h3 {
margin-bottom: var(--s3);
overflow-wrap: anywhere;
font-size: clamp(1.6rem, 3vw, 2.25rem);
line-height: 1.02;
}
.record-leaf p {
margin-bottom: var(--s4);
font-size: .9rem;
line-height: 1.55;
}
.record-stamps {
display: flex;
gap: var(--s2);
flex-wrap: wrap;
margin-bottom: var(--s5);
}
.record-stamps span {
padding: .25rem .4rem;
border: 1px solid #69766f;
color: #43534d;
font-family: var(--font-data);
font-size: .55rem;
font-weight: 700;
letter-spacing: .04em;
}
.inspection-pane {
position: relative;
min-width: 0;
align-self: stretch;
padding: clamp(1.4rem, 3vw, 2.5rem);
border: 1px solid var(--rail-600);
color: var(--text-primary);
background: var(--world-900);
box-shadow: var(--e2);
animation: place-inspection var(--change) var(--ease-place) both;
}
.inspection-pane__edge {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: flex;
width: .35rem;
flex-direction: column;
}
.inspection-pane__edge span:nth-child(1) { flex: 1; background: var(--copper-500); }
.inspection-pane__edge span:nth-child(2) { height: 16%; background: var(--verdigris-500); }
.inspection-pane__edge span:nth-child(3) { height: 8%; background: var(--signal); }
.inspection-pane__header {
display: flex;
align-items: start;
justify-content: space-between;
gap: var(--s4);
margin-bottom: var(--s5);
padding-bottom: var(--s4);
border-bottom: 1px solid var(--rail-600);
}
.inspection-pane h3 {
max-width: 16ch;
margin-bottom: 0;
font-size: clamp(1.7rem, 3vw, 2.6rem);
line-height: 1.02;
}
.close-control {
display: grid;
flex: 0 0 auto;
min-width: 3.5rem;
place-items: center;
padding: .25rem .5rem;
border: 1px solid var(--rail-600);
color: var(--text-muted);
background: transparent;
cursor: pointer;
}
.close-control:hover,
.close-control:focus-visible {
color: var(--text-primary);
border-color: var(--copper-300);
}
.close-control span:first-child {
font-size: 1.4rem;
line-height: 1;
}
.close-control span:last-child {
font-family: var(--font-data);
font-size: .5rem;
letter-spacing: .08em;
text-transform: uppercase;
}
.inspection-lede {
max-width: 58ch;
margin-bottom: var(--s5);
color: var(--text-muted);
}
.inspection-caveat {
margin: calc(var(--s5) * -1) 0 var(--s5);
padding-left: var(--s3);
border-left: 2px solid var(--signal);
color: var(--text-muted);
font-size: .76rem;
line-height: 1.55;
}
.fact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
margin: 0 0 var(--s6);
background: var(--rail-600);
}
.fact-grid div {
min-width: 0;
padding: var(--s4);
background: var(--board-800);
}
.fact-grid dt {
margin-bottom: var(--s2);
color: var(--copper-300);
font-size: .6rem;
}
.fact-grid dd {
margin: 0;
overflow-wrap: anywhere;
color: var(--text-primary);
font-size: .84rem;
line-height: 1.5;
}
.inspection-links {
justify-content: flex-start;
}
@keyframes place-inspection {
from { opacity: 0; transform: translateX(1.1rem); }
to { opacity: 1; transform: translateX(0); }
}
.talks-section,
.writing-section,
.contact-section {
min-height: 100svh;
border-top: 1px solid var(--rail-700);
}
.talks-section::before,
.writing-section::before,
.contact-section::before {
content: "";
position: absolute;
z-index: -1;
inset: 0 calc(50% - 50vw);
pointer-events: none;
}
.talks-section::before {
background: linear-gradient(180deg, rgb(36 51 47 / .42), transparent 45%);
}
.talk-workbench {
background:
linear-gradient(135deg, rgb(183 123 70 / .035), transparent 40%),
var(--board-800);
}
/* Writing folios */
.writing-section::before {
background:
linear-gradient(90deg, rgb(7 16 15 / .15), rgb(36 51 47 / .38) 50%, rgb(7 16 15 / .15)),
rgb(13 23 22 / .55);
}
.folio-shelf {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr);
gap: clamp(1rem, 2.5vw, 2rem);
margin-bottom: var(--s7);
}
.article-folio {
position: relative;
display: grid;
min-width: 0;
grid-template-columns: minmax(8rem, .38fr) minmax(0, 1fr);
color: var(--paper-ink);
background: var(--paper-100);
box-shadow: var(--e2);
clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
transition: transform var(--respond) var(--ease-place), box-shadow var(--respond);
}
.article-folio::before {
content: "";
position: absolute;
z-index: 2;
top: .7rem;
bottom: .7rem;
left: 0;
width: .25rem;
background: var(--copper-500);
}
.article-folio--feature {
grid-row: span 2;
grid-template-columns: minmax(0, 1fr);
transform: rotate(-.25deg);
}
.article-folio:nth-child(2) {
transform: rotate(.22deg);
}
.article-folio:nth-child(3) {
transform: rotate(-.18deg);
}
.article-folio:hover,
.article-folio:focus-within {
z-index: 3;
box-shadow: var(--e3);
transform: translateY(-4px) rotate(0);
}
.article-folio__art {
display: grid;
min-width: 0;
min-height: 11rem;
place-items: center;
overflow: hidden;
border-right: 1px solid var(--paper-300);
background:
linear-gradient(90deg, transparent 49.8%, rgb(23 34 31 / .08) 50%, transparent 50.2%),
#e2d5b7;
}
.article-folio--feature .article-folio__art {
min-height: 18rem;
border-right: 0;
border-bottom: 1px solid var(--paper-300);
}
.article-folio__art img {
width: 90%;
height: 90%;
object-fit: contain;
}
.article-folio__body {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
padding: clamp(1.1rem, 2.4vw, 2rem);
}
.folio-code {
margin-bottom: var(--s3);
color: #596861;
font-family: var(--font-data);
font-size: .62rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.article-folio h3 {
margin-bottom: var(--s3);
overflow-wrap: anywhere;
font-size: clamp(1.35rem, 2.3vw, 2.15rem);
line-height: 1.08;
}
.article-folio p:not(.folio-code) {
margin-bottom: var(--s4);
color: #3d4b46;
font-size: .86rem;
line-height: 1.55;
}
.article-folio a {
min-height: var(--touch-min);
display: inline-flex;
align-items: center;
gap: var(--s2);
margin-top: auto;
color: var(--paper-ink);
font-family: var(--font-data);
font-size: .68rem;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.article-folio a:hover,
.article-folio a:focus-visible {
color: #24584d;
}
.article-folio--schedule {
grid-column: 1 / -1;
grid-template-columns: minmax(8rem, .26fr) minmax(0, 1fr);
color: var(--text-primary);
background: var(--rail-700);
clip-path: none;
}
.article-folio--schedule::before {
background: var(--signal);
}
.article-folio--schedule .article-folio__body {
color: var(--text-primary);
}
.article-folio--schedule h3,
.article-folio--schedule a {
color: var(--text-primary);
}
.article-folio--schedule p:not(.folio-code) {
color: var(--text-muted);
}
.article-folio--schedule .folio-code {
color: var(--copper-300);
}
.schedule-mark {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s3);
border-right: 1px solid var(--rail-600);
background: var(--world-900);
}
.schedule-mark span {
font-family: var(--font-display);
font-size: clamp(3.2rem, 7vw, 5.5rem);
line-height: 1;
}
.schedule-mark small {
color: var(--copper-300);
font-family: var(--font-data);
font-size: .65rem;
line-height: 1.25;
}
.archive-gate {
margin-left: auto;
}
/* Contact dispatch */
.contact-section {
display: grid;
align-content: center;
overflow: hidden;
}
.contact-section::before {
background:
linear-gradient(90deg, transparent 49.9%, rgb(183 123 70 / .08) 50%, transparent 50.1%),
radial-gradient(circle at 78% 50%, rgb(99 143 130 / .12), transparent 38%);
}
.contact-layout {
display: grid;
grid-template-columns: minmax(0, .78fr) minmax(30rem, 1.22fr);
align-items: center;
gap: clamp(3rem, 9vw, 9rem);
}
.contact-copy h2 {
max-width: 10ch;
margin-bottom: var(--s5);
font-size: clamp(3rem, 6vw, 6rem);
line-height: .92;
letter-spacing: -.035em;
}
.contact-copy > p:not(.eyebrow) {
max-width: 42ch;
color: var(--text-muted);
}
.contact-copy .contact-note {
margin-top: var(--s6);
padding-top: var(--s4);
border-top: 1px solid var(--rail-600);
font-family: var(--font-data);
font-size: .7rem;
line-height: 1.55;
}
.signal-gates {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
border: 1px solid var(--rail-600);
background: var(--rail-600);
box-shadow: var(--e3);
}
.signal-gates a {
position: relative;
display: grid;
min-width: 0;
min-height: 10.5rem;
align-content: end;
padding: var(--s5);
color: var(--text-primary);
background: var(--board-800);
text-decoration: none;
transition: color var(--respond), background var(--respond), transform var(--respond) var(--ease-place);
}
.signal-gates a::before {
content: "";
position: absolute;
top: var(--s4);
bottom: var(--s4);
left: 0;
width: .24rem;
background: var(--copper-500);
transform: scaleY(.25);
transform-origin: bottom;
transition: transform var(--select) var(--ease-place);
}
.signal-gates a:hover,
.signal-gates a:focus-visible {
color: var(--text-primary);
background: #1d302b;
transform: translateY(-3px);
}
.signal-gates a:hover::before,
.signal-gates a:focus-visible::before {
transform: scaleY(1);
}
.signal-gates__index {
position: absolute;
top: var(--s4);
left: var(--s5);
color: var(--copper-300);
font-family: var(--font-data);
font-size: .58rem;
letter-spacing: .1em;
}
.signal-gates strong,
.signal-gates small {
display: block;
min-width: 0;
}
.signal-gates strong {
margin-bottom: .2rem;
font-family: var(--font-display);
font-size: clamp(1.45rem, 2.5vw, 2rem);
line-height: 1;
}
.signal-gates small {
color: var(--text-muted);
font-size: .72rem;
}
.signal-gates i {
position: absolute;
top: var(--s4);
right: var(--s4);
color: var(--copper-300);
font-style: normal;
}
.contact-seal {
position: absolute;
z-index: -1;
right: -9rem;
bottom: -12rem;
display: grid;
width: 30rem;
aspect-ratio: 1;
place-items: center;
border: 1px solid rgb(183 123 70 / .12);
color: rgb(183 123 70 / .08);
transform: rotate(45deg);
}
.contact-seal::before,
.contact-seal::after {
content: "";
position: absolute;
inset: 14%;
border: 1px solid currentColor;
}
.contact-seal::after {
inset: 29%;
}
.contact-seal span {
font-family: var(--font-display);
font-size: 8rem;
transform: rotate(-45deg);
}
.site-footer {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s5);
padding: var(--s5) clamp(1.25rem, 5vw, 5rem);
border-top: 1px solid var(--rail-600);
color: var(--text-muted);
background: var(--world-950);
font-size: .78rem;
}
.site-footer p {
margin: 0;
}
.site-footer nav {
display: flex;
gap: var(--s4);
flex-wrap: wrap;
}
.mobile-dock {
display: none;
}
.reveal-item {
opacity: 1;
transform: none;
}
.js .reveal-item.is-pending {
opacity: 0;
transform: translateY(1rem);
}
.js .reveal-item.is-revealed {
opacity: 1;
transform: none;
transition: opacity var(--change), transform var(--change) var(--ease-place);
}
/* Tablet */
@media (max-width: 68rem) {
.archive-header {
grid-template-columns: minmax(10rem, .8fr) 2fr auto;
}
.chapter-nav a {
gap: var(--s2);
padding-inline: var(--s2);
}
.chapter-nav svg {
display: none;
}
.profile-layout {
gap: var(--s7);
}
.research-workbench.has-inspection {
grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
}
.research-workbench.has-inspection .record-index {
grid-column: 1 / -1;
}
.research-workbench.has-inspection .record-index ol {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 54rem) {
html {
scroll-padding-top: 8rem;
}
.archive-header {
grid-template-columns: 1fr auto;
}
.nameplate {
border-right: 0;
}
.chapter-nav {
grid-row: 2;
grid-column: 1 / -1;
border-top: 1px solid var(--rail-600);
}
.chapter-nav a {
min-height: 3.25rem;
}
.header-controls {
grid-column: 2;
}
.route-section {
scroll-margin-top: 0;
}
.profile-section {
min-height: auto;
padding-top: 7rem;
padding-bottom: 7rem;
}
.profile-layout {
grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
align-items: start;
}
.profile-copy h1 {
font-size: clamp(2.8rem, 8vw, 5rem);
}
.section-cue {
display: none;
}
.section-heading {
align-items: start;
flex-direction: column;
gap: var(--s4);
}
.research-workbench,
.research-workbench.has-inspection {
grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
}
.record-index,
.research-workbench.has-inspection .record-index {
grid-column: 1 / -1;
}
.folio-shelf {
grid-template-columns: minmax(0, 1fr);
}
.article-folio--feature {
grid-row: auto;
grid-template-columns: minmax(13rem, .44fr) minmax(0, 1fr);
}
.article-folio--feature .article-folio__art {
min-height: 14rem;
border-right: 1px solid var(--paper-300);
border-bottom: 0;
}
.article-folio--schedule {
grid-column: auto;
}
.contact-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--s7);
}
.contact-copy h2 {
max-width: 13ch;
}
}
/* Mobile */
@media (max-width: 43rem) {
html {
scroll-padding-top: 4.25rem;
}
body {
padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}
.entry-cover {
align-items: start;
padding: var(--s4);
}
.entry-case {
min-height: calc(100svh - 2rem);
padding: 4.2rem 1.35rem 5.2rem;
}
.entry-case .eyebrow {
font-size: .62rem;
}
.entry-sigil {
width: 6.5rem;
margin-bottom: var(--s4);
}
.entry-intro {
font-size: .9rem;
}
.entry-actions {
gap: var(--s4);
flex-direction: column;
}
.entry-hint {
display: none;
}
.archive-header {
min-height: 3.75rem;
grid-template-columns: 1fr auto;
}
.nameplate {
min-width: 0;
padding: .55rem var(--s4);
}
.nameplate__sigil {
width: 1.8rem;
height: 1.8rem;
}
.nameplate strong {
font-size: .95rem;
}
.chapter-nav {
display: none;
}
.header-controls {
grid-row: 1;
}
.icon-control {
min-width: 3.25rem;
padding-inline: .35rem;
}
.control-label {
font-size: .44rem;
}
.route-section {
padding: 5rem var(--s4);
scroll-margin-top: 0;
}
.profile-section {
padding-top: 6.2rem;
padding-bottom: 5.2rem;
}
.section-index {
top: 1.4rem;
right: var(--s4);
left: var(--s4);
font-size: .58rem;
}
.profile-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--s7);
}
.profile-copy h1 {
max-width: 12ch;
margin-bottom: var(--s5);
font-size: clamp(2.75rem, 13vw, 4.5rem);
}
.profile-lede {
font-size: 1.08rem;
}
.profile-actions {
align-items: flex-start;
flex-direction: column;
gap: var(--s4);
}
.identity-plate {
width: min(100%, 21rem);
margin-inline: auto;
transform: rotate(.35deg);
}
.identity-monogram {
width: 10rem;
}
.section-heading {
margin-bottom: var(--s6);
}
.section-heading h2,
.placeholder-section h2 {
overflow-wrap: anywhere;
font-size: clamp(2.2rem, 12vw, 3.4rem);
}
.research-workbench,
.research-workbench.has-inspection {
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: var(--s3);
}
.record-index,
.research-workbench.has-inspection .record-index,
.record-leaf,
.inspection-pane {
grid-column: 1;
}
.record-index {
padding: var(--s3);
}
.record-index__button {
min-height: 3.5rem;
grid-template-columns: minmax(0, 1fr) auto;
gap: .2rem var(--s3);
}
.record-index__number {
grid-column: 1 / -1;
}
.record-index__label {
grid-row: 2;
grid-column: 1;
}
.record-index__label strong {
overflow-wrap: normal;
word-break: normal;
}
.record-index__marker {
grid-row: 2;
grid-column: 2;
}
.record-index__note {
display: none;
}
.record-leaf {
width: min(100%, 20rem);
justify-self: center;
}
.record-art {
min-height: 13.5rem;
}
.inspection-pane {
padding: 1.4rem 1.15rem 1.5rem 1.4rem;
}
.inspection-pane__header {
align-items: start;
}
.inspection-pane h3 {
overflow-wrap: anywhere;
font-size: 1.7rem;
}
.fact-grid {
grid-template-columns: minmax(0, 1fr);
}
.inspection-links {
align-items: flex-start;
flex-direction: column;
gap: var(--s4);
}
.folio-shelf {
gap: var(--s4);
}
.article-folio,
.article-folio--feature,
.article-folio--schedule {
grid-template-columns: minmax(0, 1fr);
transform: none;
}
.article-folio__art,
.article-folio--feature .article-folio__art {
min-height: 11.5rem;
border-right: 0;
border-bottom: 1px solid var(--paper-300);
}
.article-folio__body {
padding: var(--s5);
}
.schedule-mark {
min-height: 8rem;
border-right: 0;
border-bottom: 1px solid var(--rail-600);
}
.archive-gate {
width: 100%;
margin-left: 0;
}
.contact-section {
min-height: auto;
padding-top: 6rem;
padding-bottom: 6rem;
}
.contact-copy h2 {
font-size: clamp(2.8rem, 14vw, 4.4rem);
}
.signal-gates {
grid-template-columns: minmax(0, 1fr);
}
.signal-gates a {
min-height: 8.5rem;
}
.contact-seal {
right: -12rem;
bottom: -10rem;
width: 23rem;
}
.site-footer {
align-items: flex-start;
padding: var(--s6) var(--s4);
flex-direction: column;
}
.site-footer nav {
display: none;
}
.mobile-dock {
position: fixed;
z-index: 120;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
padding-bottom: env(safe-area-inset-bottom);
border-top: 1px solid var(--rail-600);
box-shadow: 0 -10px 22px rgb(0 0 0 / .28);
background: var(--world-900);
}
.mobile-dock a {
position: relative;
display: grid;
min-width: 0;
min-height: 4.4rem;
place-items: center;
align-content: center;
gap: .22rem;
border-right: 1px solid rgb(52 70 63 / .55);
color: var(--text-muted);
font-family: var(--font-data);
font-size: .52rem;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
}
.mobile-dock a:last-child {
border-right: 0;
}
.mobile-dock a::before {
content: "";
position: absolute;
top: 0;
right: 23%;
left: 23%;
height: 2px;
background: var(--copper-300);
transform: scaleX(0);
}
.mobile-dock a[aria-current="location"] {
color: var(--text-primary);
background: rgb(99 143 130 / .08);
}
.mobile-dock a[aria-current="location"]::before {
transform: scaleX(1);
}
.mobile-dock svg {
width: 1.1rem;
height: 1.1rem;
}
}
@media (max-width: 23rem) {
.nameplate small,
.control-label {
display: none;
}
.icon-control {
min-width: 2.8rem;
}
.mobile-dock a {
font-size: .46rem;
}
}
@media (hover: hover) and (pointer: fine) {
.record-leaf:hover {
box-shadow: 0 2px 0 rgb(255 255 255 / .12), 0 22px 42px rgb(0 0 0 / .45);
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.record-leaf,
.identity-plate,
.entry-sigil,
.article-folio {
transform: none !important;
}
}
html[data-motion="reduce"] {
scroll-behavior: auto;
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
html[data-motion="reduce"] .record-leaf,
html[data-motion="reduce"] .identity-plate,
html[data-motion="reduce"] .entry-sigil,
html[data-motion="reduce"] .article-folio {
transform: none !important;
}
@media (forced-colors: active) {
.entry-case,
.identity-plate,
.record-leaf,
.article-folio {
clip-path: none;
border: 2px solid CanvasText;
}
.world-engraving,
.world-vignette,
.entry-cover__field,
.record-art::after {
display: none;
}
.action,
.record-index__button,
.icon-control,
.close-control,
.mobile-dock a {
border: 1px solid ButtonText;
}
.action::before,
.chapter-nav a::after,
.mobile-dock a::before {
background: Highlight;
}
}