/* DESIGNING OBEDIENCE — EDITORIAL IDENTITY
   Display: Barlow Condensed (light/medium), contrasted with Instrument Serif accents.
   Reading: Source Serif 4 / Georgia for extended interpretive writing.
   Interface and evidence IDs: system-ui / ui-monospace.
   Colours are adopted from Lemon Xueli Tang's Disobedience in Style artwork. */
:root {
    --acid: #fff500;
    --red: #ff0028;
    --ink: #090909;
    --paper: #faf7ef;
    --rule: #161616;
    --aqua: #2df2dd;
    --sans: Arial,Helvetica,sans-serif;
    --display: 'Barlow Condensed','Arial Narrow','Roboto Condensed',sans-serif;
    --reading: 'Source Serif 4',Georgia,'Times New Roman',serif;
    --mono: 'IBM Plex Mono','Courier New',monospace;
    --accent: 'Instrument Serif',Georgia,serif;
}

html {
    scroll-padding-top: 110px;
}

body {
    background: var(--paper)!important;
    color: var(--ink)!important;
    font: 16px/1.65 var(--reading)!important;
}

body::before {
    content: '';
    display: block;
    height: 9px;
    background: var(--red);
}

a {
    color: #bd0020;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

a:hover {
    color: var(--ink);
}

main {
    max-width: 1390px;
    padding: 38px clamp(17px,4vw,64px) 105px;
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    letter-spacing: -.025em;
}

h1,
h2 {
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.05;
}

h1 {
    text-transform: uppercase;
    font-size: clamp(46px,7.2vw,118px);
    letter-spacing: .002em;
    margin: 18px 0 30px;
}

h2 {
    text-transform: uppercase;
    font-size: clamp(34px,4.2vw,65px);
    letter-spacing: .005em;
    margin-bottom: 24px;
}

h3 {
    font-family: var(--sans);
    font-weight: 600;
}

h1 i,
h2 i,
.brand i {
    font-style: normal;
}

p,
li {
    max-width: 94ch;
}

p {
    line-height: 1.75;
}

.lead {
    font: clamp(19px,2vw,26px)/1.52 var(--reading);
    max-width: 960px;
}

.eyebrow,
.sectiontag,
.smallcaps,
.breadcrumbs,
.privatemark,
.metadata,
.subtle,
.refs,
.pairmeta,
.counts,
footer,
.controls,
.badge,
.stat span,
.sourcebar {
    font-family: var(--mono)!important;
}

.eyebrow,
.sectiontag,
.smallcaps {
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    color: #a00016;
    font-weight: 800;
}

.sitehead {
    position: relative!important;
    top: auto!important;
    background: var(--ink)!important;
    color: var(--acid)!important;
    border: 0!important;
    border-bottom: 5px solid var(--acid)!important;
    box-shadow: none!important;
}

.headinner {
    max-width: 100%!important;
    padding: 0 clamp(16px,3vw,46px)!important;
    display: block!important;
    text-align: left!important;
}

.brand {
    display: block!important;
    color: var(--acid)!important;
    font: 500 clamp(27px,3.7vw,55px)/1 var(--display)!important;
    text-transform: uppercase;
    text-decoration: none!important;
    letter-spacing: .04em!important;
    padding: 22px 0 20px;
    text-shadow: none;
}

.sitenav {
    display: flex!important;
    flex-wrap: nowrap!important;
    gap: 0!important;
    overflow-x: auto;
    scrollbar-width: thin;
    border-top: 1px solid #6f6900!important;
    padding: 0!important;
}

.sitenav a {
    flex: 0 0 auto!important;
    color: #f6e8c8!important;
    text-decoration: none!important;
    font: 700 11px/1.25 var(--mono)!important;
    text-transform: uppercase;
    letter-spacing: .01em;
    border-right: 1px solid #4e4a29!important;
    padding: 15px 14px!important;
    border-radius: 0!important;
}

.sitenav a:hover,
.sitenav a[aria-current='page'] {
    background: var(--acid)!important;
    color: var(--ink)!important;
}

.pageintro {
    background: var(--red)!important;
    color: var(--ink)!important;
    padding: clamp(26px,5vw,75px)!important;
    border: 0!important;
    margin: 0 0 34px!important;
    position: relative;
}

.pageintro .eyebrow,
.pageintro .breadcrumbs,
.pageintro .breadcrumbs a {
    color: var(--ink)!important;
}

.pageintro .eyebrow:before {
    content: 'RESEARCH / ';
    font-weight: 900;
}

.panel {
    background: transparent!important;
    border: 0!important;
    border-top: 3px solid var(--ink)!important;
    border-radius: 0!important;
    box-shadow: none!important;
    margin: 46px 0!important;
    padding: 32px 0 18px!important;
}

.notice {
    background: var(--acid)!important;
    border: 0!important;
    border-left: 9px solid var(--ink)!important;
    border-radius: 0!important;
    color: var(--ink)!important;
    padding: 20px 25px!important;
    font: 14px/1.6 var(--mono);
}

.stats {
    gap: 0!important;
    margin: 35px 0 32px!important;
    border: 3px solid var(--ink)!important;
}

.stat {
    background: var(--acid)!important;
    border: 0!important;
    border-right: 2px solid var(--ink)!important;
    border-radius: 0!important;
    padding: 19px!important;
}

.stat:last-child {
    border: 0!important;
}

.stat strong {
    font: 500 clamp(36px,4vw,70px)/1 var(--display)!important;
    color: var(--ink)!important;
}

.stat span {
    color: var(--ink)!important;
    font-size: 11px!important;
}

.featuregrid {
    gap: 0!important;
    border-top: 3px solid var(--ink)!important;
}

.feature {
    border: 0!important;
    border-bottom: 2px solid var(--ink)!important;
    border-radius: 0!important;
    background: transparent!important;
    padding: 26px 17px!important;
    transition: background .12s,color .12s;
    box-shadow: none!important;
}

.feature:hover {
    background: var(--acid)!important;
    color: var(--ink)!important;
    transform: none!important;
}

.feature strong {
    font: 500 clamp(27px,2.6vw,43px)/1.05 var(--display)!important;
    text-transform: uppercase;
    letter-spacing: .025em;
    color: var(--ink)!important;
}

.feature span:last-child {
    font: 15px/1.55 var(--reading);
}

.feature .smallcaps {
    color: #970012!important;
}

.hero-home {
    background: var(--red)!important;
    color: var(--ink)!important;
    padding: clamp(20px,4vw,60px)!important;
    border: 0!important;
    border-radius: 0!important;
}

.hero-home h1 {
    font-size: clamp(33px,4.7vw,77px);
    color: var(--acid)!important;
    text-shadow: 1px 2px 0 var(--ink);
    max-width: 1100px;
}

.hero-home .eyebrow {
    color: var(--ink)!important;
}

.hero-home .lead {
    font-weight: 700;
}

.cover-identity {
    background: var(--ink);
    padding: 16px 24px;
    margin: -10px -10px 30px;
    line-height: 0;
}

.cover-identity img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 235px;
    object-fit: contain;
}

.privatemark {
    display: inline-block!important;
    background: var(--acid)!important;
    color: var(--ink)!important;
    padding: 8px 12px!important;
    border: 2px solid var(--ink)!important;
    border-radius: 0!important;
    font-size: 11px!important;
    font-weight: 800!important;
}

.groupgrid,
.findinggrid {
    gap: 0!important;
}

.groupcard {
    border: 1.5px solid var(--ink)!important;
    background: #fffdf7!important;
    border-radius: 0!important;
    padding: 23px!important;
}

.groupcard:nth-child(2n) {
    background: #fff7d1!important;
}

.reading {
    border-bottom: 2px solid var(--ink)!important;
    padding: 24px 0 32px!important;
}

.reading h3 {
    font-size: clamp(23px,2.4vw,35px)!important;
    line-height: 1.2;
}

.findinggrid h4 {
    font-family: var(--mono);
    color: #a80015!important;
}

.readingroutes,
.analysisnote {
    border: 0!important;
    border-left: 6px solid var(--red)!important;
    background: #f1eadd!important;
    border-radius: 0!important;
}

.tablewrap {
    border-top: 3px solid var(--ink);
}

table {
    font-family: var(--sans);
    font-size: 14px!important;
}

td,
th {
    border-color: #a9a59c!important;
}

th {
    background: var(--acid)!important;
    color: var(--ink)!important;
    font: 600 12px/1.35 var(--mono)!important;
}

tbody tr:nth-child(even) {
    background: #efece3!important;
}

.wide-table td {
    line-height: 1.6;
}

.controls {
    background: var(--acid)!important;
    border: 3px solid var(--ink)!important;
    border-radius: 0!important;
    box-shadow: 7px 7px 0 var(--ink)!important;
    backdrop-filter: none!important;
    padding: 20px!important;
}

.controlrow label {
    font-family: var(--mono)!important;
    font-size: 12px!important;
    text-transform: uppercase;
}

input,
select,
button {
    border: 2px solid var(--ink)!important;
    border-radius: 0!important;
    font-family: var(--mono)!important;
    color: var(--ink)!important;
    background: white!important;
}

button:hover {
    background: var(--red)!important;
    color: white!important;
}

.themebuttons button.active {
    background: var(--ink)!important;
    color: var(--acid)!important;
}

.extract {
    border: 1.5px solid var(--ink)!important;
    border-radius: 0!important;
    background: white!important;
}

.extract>summary {
    border-left: 8px solid var(--red);
    padding: 21px 25px!important;
}

.extract>summary:hover {
    background: #fff9d0;
}

.extract>summary h3 {
    font: 600 20px/1.3 var(--sans)!important;
}

.extractbody {
    padding-top: 18px!important;
}

.metadata {
    border-top: 2px solid var(--ink);
    font-size: 12px;
}

.badge {
    background: var(--acid)!important;
    color: var(--ink)!important;
    border: 1px solid var(--ink);
    border-radius: 0!important;
}

.pair {
    border-left: 5px solid var(--ink)!important;
    background: #f6f4ee!important;
}

.pair.interviewer {
    background: #fff5cd!important;
    border-color: var(--red)!important;
}

.original {
    font-family: 'Noto Sans CJK SC','Microsoft YaHei',sans-serif!important;
}

.translation {
    font-family: var(--reading)!important;
}

.source,
.source>summary {
    border-radius: 0!important;
}

.source>summary {
    background: var(--acid)!important;
    font-family: var(--mono)!important;
}

.nextprev {
    border-top: 3px solid var(--ink)!important;
    padding-top: 22px!important;
}

.nextprev a {
    font: 600 14px/1.5 var(--mono)!important;
}

.sitefooter {
    background: var(--ink)!important;
    color: var(--acid)!important;
    padding: 28px clamp(16px,4vw,60px)!important;
    border: 0!important;
    text-transform: uppercase;
    font-size: 12px!important;
}

footer {
    border-top: 0!important;
}

::selection {
    background: var(--red);
    color: white;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--red)!important;
    outline-offset: 3px;
}

@media (min-width:800px){
    .hero-home {
        min-height: 550px;
    }

    .hero-home>p:not(.eyebrow) {
        max-width: 950px;
    }

    .featuregrid {
        grid-template-columns: repeat(2,minmax(0,1fr))!important;
    }

    .feature:nth-child(odd) {
        border-right: 2px solid var(--ink)!important;
    }
}

@media (max-width:700px){
    main {
        padding: 20px 14px 60px;
    }

    .sitehead .brand {
        font-size: 30px!important;
    }

    .sitenav a {
        padding: 12px 10px!important;
    }

    .hero-home {
        padding: 22px!important;
        font-size: 11px;
    }

    .hero-home h1 {
        font-size: 36px;
    }

    .cover-identity {
        margin: 0 0 18px;
        padding: 8px;
    }

    .stats {
        grid-template-columns: 1fr 1fr!important;
    }

    .stat:nth-child(2) {
        border-right: 0!important;
    }

    .stat:nth-child(-n+2) {
        border-bottom: 2px solid var(--ink)!important;
    }

    .pageintro {
        padding: 28px 19px!important;
    }

    .panel {
        margin: 32px 0!important;
        padding: 24px 0!important;
    }

    .groupgrid,
    .findinggrid {
        grid-template-columns: 1fr!important;
    }

    .featuregrid {
        grid-template-columns: 1fr!important;
    }

    .controls {
        box-shadow: 4px 4px 0 var(--ink)!important;
    }

    .extract>summary {
        padding: 17px!important;
    }
}

@media print{
    body {
        background: white!important;
        color: black!important;
    }

    body::before,
    .sitehead,
    .sitefooter,
    .cover-identity {
        display: none!important;
    }

    .panel {
        border-top: 1px solid black!important;
    }

    .hero-home,
    .pageintro {
        background: white!important;
        color: black!important;
    }

    .hero-home h1 {
        color: black!important;
        text-shadow: none!important;
    }

    .stat {
        background: white!important;
    }

    .notice {
        background: white!important;
        border: 1px solid black!important;
    }

    .controls {
        display: none!important;
    }
}

/* TYPE REFINEMENT 02 — intentional rather than uniformly heavy. */
.hero-home h1,
.pageintro h1 {
    font-weight: 400!important;
    letter-spacing: .015em!important;
    line-height: 1.01!important;
}

.hero-home h1 {
    font-size: clamp(52px,6.4vw,104px)!important;
    max-width: 1100px;
}

.pageintro h1 {
    font-size: clamp(58px,8.1vw,132px)!important;
}

h2 {
    font-weight: 400!important;
    letter-spacing: .012em!important;
}

.brand {
    font-weight: 500!important;
    letter-spacing: .06em!important;
}

.reading h3 {
    font-family: var(--accent)!important;
    font-size: clamp(28px,3vw,43px)!important;
    font-weight: 400!important;
    letter-spacing: -.012em!important;
}

.groupcard h3 {
    font-family: var(--accent)!important;
    font-size: clamp(25px,2.6vw,37px)!important;
    font-weight: 400!important;
}

.feature strong {
    font-weight: 400!important;
    letter-spacing: .03em!important;
}

.stat strong {
    font-weight: 400!important;
}

.eyebrow,
.sectiontag,
.smallcaps {
    font-weight: 500!important;
    letter-spacing: .12em!important;
}

.controls,
.badge,
.metadata,
.nextprev {
    font-weight: 400!important;
}

.tablewrap th {
    font-weight: 500!important;
}

.hero-home .lead {
    font-weight: 400!important;
}

@media (max-width:700px){
    .hero-home h1 {
        font-size: clamp(43px,10vw,67px)!important;
    }

    .pageintro h1 {
        font-size: clamp(44px,11vw,72px)!important;
    }
}

/* TYPE SYSTEM 03 — INPUT MONO THROUGHOUT
   Uses locally installed Input Mono if available. This package does not distribute fonts.
   True italic and bold preserved for content that explicitly uses those styles. */
:root {
    --input: "Input Mono", "InputMono", "Input Mono Narrow", "IBM Plex Mono", "Liberation Mono", "Courier New", monospace;
    --sans: var(--input);
    --display: var(--input);
    --reading: var(--input);
    --mono: var(--input);
    --accent: var(--input);
}

html,
body,
body *,
button,
input,
select,
textarea,
summary,
table,
td,
th,
blockquote,
code,
pre {
    font-family: var(--input)!important;
}

body {
    font-size: 14px!important;
    line-height: 1.7!important;
    font-weight: 400!important;
}

h1,
h2,
h3,
h4,
.brand,
.feature strong,
.stat strong,
.reading h3,
.groupcard h3 {
    font-family: var(--input)!important;
    font-stretch: normal!important;
    text-transform: none;
}

h1,
.hero-home h1,
.pageintro h1 {
    font-weight: 400!important;
    letter-spacing: -.075em!important;
    line-height: 1.08!important;
    overflow-wrap: anywhere;
}

h1 {
    font-size: clamp(38px,6vw,90px)!important;
}

.hero-home h1 {
    font-size: clamp(34px,5.2vw,78px)!important;
}

.pageintro h1 {
    font-size: clamp(39px,6.5vw,95px)!important;
}

h2 {
    font-size: clamp(25px,3.2vw,46px)!important;
    font-weight: 500!important;
    letter-spacing: -.065em!important;
    line-height: 1.15!important;
}

h3,
.reading h3,
.groupcard h3 {
    font-size: clamp(19px,2vw,27px)!important;
    font-weight: 500!important;
    letter-spacing: -.055em!important;
    line-height: 1.28!important;
}

h4 {
    font-weight: 700!important;
}

p,
li {
    letter-spacing: -.025em;
    line-height: 1.72!important;
}

.lead {
    font-size: clamp(16px,1.65vw,22px)!important;
    line-height: 1.62!important;
    font-weight: 400!important;
    letter-spacing: -.035em;
}

.brand {
    font-size: clamp(18px,2.8vw,36px)!important;
    font-weight: 500!important;
    letter-spacing: -.065em!important;
    line-height: 1.2!important;
    text-transform: none!important;
}

.feature strong {
    font-size: clamp(21px,2.3vw,31px)!important;
    font-weight: 500!important;
    letter-spacing: -.06em!important;
    text-transform: none!important;
}

.stat strong {
    font-size: clamp(30px,3.5vw,55px)!important;
    font-weight: 500!important;
}

.eyebrow,
.sectiontag,
.smallcaps {
    font-size: 11px!important;
    font-weight: 500!important;
    letter-spacing: .045em!important;
}

.metadata,
.refs,
.badge,
.pairmeta,
.sitenav a,
.privatemark,
th {
    letter-spacing: -.018em!important;
}

.extract>summary h3 {
    font-size: 19px!important;
    font-weight: 500!important;
    letter-spacing: -.045em!important;
}

.original {
    font-family: var(--input),"Noto Sans CJK SC","Microsoft YaHei",sans-serif!important;
    font-size: 15px!important;
}

.translation {
    font-family: var(--input)!important;
    font-size: 13px!important;
}

/* Keep genuine semantic emphasis visible instead of globally forcing normal weight. */
strong,
b {
    font-weight: 700!important;
}

em,
i {
    font-style: italic!important;
}

strong em,
em strong,
b i,
i b {
    font-weight: 700!important;
    font-style: italic!important;
    font-size: -9px;
}

/* Hard outlines and high-contrast ink retained from the book identity. */
.hero-home h1 {
    color: var(--acid)!important;
    text-shadow: 2px 3px 0 var(--ink)!important;
}

.privatemark,
.controls,
input,
button,
select {
    border-color: var(--ink)!important;
}

@media (max-width:700px){
    h1,
    .pageintro h1 {
        font-size: clamp(34px,9vw,60px)!important;
    }

    .hero-home h1 {
        font-size: clamp(31px,8vw,55px)!important;
    }

    .brand {
        font-size: 22px!important;
    }

    .feature strong {
        font-size: 22px!important;
    }
}

@media print{
    .hero-home h1 {
        text-shadow: none!important;
    }
}