:root {


    --ink: #f8fafc;


    --accent: #000000;


    --background: #000000;


    --width: 1220px;


    --surface: rgba(15,23,42,.76);


    --radius: 10px;


}


* {

 box-sizing: border-box;

 }


html {

 scroll-behavior: smooth;

 }


body {

 margin: 0;

 color: var(--ink);

 background: var(--background);

 font-family: "Segoe UI";

 line-height: 1.85;

 }


a {

 color: inherit;

 text-underline-offset: 4px;

 }


a:hover {

 text-decoration-thickness: 2px;

 }


a:focus-visible, summary:focus-visible {

 outline: 3px solid var(--ink);

 outline-offset: 5px;

 }


main, .masthead, .navigation, .jump-links, footer {

 width: min(var(--width), calc(100% - 48px));

 margin: auto;

 }


.masthead {

 padding: 28px 0 16px;

 border-bottom: 2px solid var(--ink);

 }


.brand {

 font-size: 1.65rem;

 font-weight: 700;

 text-decoration: none;

 }


.masthead p {

 margin: 4px 0;

 }


.navigation {

 display: flex;

 flex-wrap: wrap;

 gap: 22px;

 padding: 18px 0;

 }


.navigation a {

 text-decoration: none;

 }


.jump-links {

 display: flex;

 gap: 16px;

 flex-wrap: wrap;

 padding: 14px 0;

 border-bottom: 1px solid var(--accent);

 }


.jump-links a {

 font-size: .9rem;

 }


h1 {

 font-size: clamp(2rem, 3.5vw, 3.5rem);

 line-height: 1.3;

 margin: 0 0 24px;

 }


h2 {

 font-size: 1.65rem;

 line-height: 1.45;

 margin: 0;

 }


h3 {

 font-size: 1.2rem;

 line-height: 1.55;

 margin: 0 0 12px;

 }


p {

 margin: 0 0 18px;

 }


.hero {

 display: grid;

 grid-template-columns: 1.25fr 1fr;

 gap: 36px;

 padding: 48px 0;

 align-items: start;

 }


.hero-copy {

 min-width: 0;

 }


.hero-text {

 font-size: 1.06rem;

 }


figure {

 margin: 0;

 min-width: 0;

 }


img {

 display: block;

 width: 100%;

 height: auto;

 aspect-ratio: 3/2;

 object-fit: cover;

 border-radius: var(--radius);

 }


.hero figure img {

 min-height: 300px;

 }


.content-section {

 margin: 34px 0;

 scroll-margin-top: 20px;

 }


.section-heading {

 padding-bottom: 16px;

 margin-bottom: 20px;

 border-bottom: 1px solid var(--accent);

 }


.news-layout {

 display: grid;

 grid-template-columns: repeat(2, minmax(0, 1fr));

 gap: 24px;

 }


.news-card {

 min-width: 0;

 border: 1px solid var(--accent);

 border-radius: var(--radius);

 background: var(--surface);

 overflow: hidden;

 }


.article-copy {

 padding: 24px;

 }


.article-meta {

 display: flex;

 flex-wrap: wrap;

 gap: 18px;

 font-size: .84rem;

 margin-bottom: 16px;

 opacity: .8;

 }


.article-date {

 padding: 12px 24px;

 background: var(--accent);

 }


.news-text {

 margin-bottom: 0;

 }


.feature-list {

 display: grid;

 gap: 20px;

 }


.feature-card {

 background: var(--surface);

 padding: 26px;

 border: 1px solid var(--accent);

 border-radius: var(--radius);

 }


.feature-card p:last-child {

 margin-bottom: 0;

 }


.faq-layout {

 display: grid;

 grid-template-columns: repeat(2, minmax(0,1fr));

 gap: 18px;

 }


.faq-card {

 padding: 22px;

 border: 1px solid var(--accent);

 background: var(--surface);

 border-radius: var(--radius);

 }


summary {

 cursor: pointer;

 font-weight: 600;

 line-height: 1.5;

 }


.faq-answer {

 margin-top: 16px;

 }


.table-wrap {

 overflow-x: auto;

 }


table {

 width: 100%;

 border-collapse: collapse;

 background: var(--surface);

 }


th, td {

 padding: 14px 16px;

 text-align: left;

 border-bottom: 1px solid var(--accent);

 }


th {

 background: var(--accent);

 }


.composition {

 display: grid;

 gap: 30px;

 }


.composition-column {

 min-width: 0;

 }


.version-grid {

 display: grid;

 grid-template-columns: repeat(2,minmax(0,1fr));

 gap: 20px;

 }


.version-card {

 padding: 24px;

 border: 1px solid var(--accent);

 background: var(--surface);

 }


.reader-comments {

 display: grid;

 grid-template-columns: repeat(3,minmax(0,1fr));

 gap: 26px;

 }


.reader-comment {

 padding: 28px;

 background: var(--surface);

 border: 1px solid var(--accent);

 border-radius: var(--radius);

 }


.reader-heading {

 display: flex;

 align-items: center;

 gap: 14px;

 margin-bottom: 20px;

 }


.reader-initial {

 display: grid;

 place-items: center;

 width: 58px;

 height: 58px;

 flex: 0 0 58px;

 border: 2px solid var(--accent);

 border-radius: 50%;

 font-size: 1.3rem;

 }


.reader-heading h3 {

 margin: 0;

 font-size: 1.1rem;

 }


.reader-comment p {

 margin: 0;

 }


.composition-column .reader-comments {

 grid-template-columns: 1fr;

 }


.scenario-note {

 font-size: .86rem;

 margin-bottom: 20px;

 }


.breadcrumbs {

 padding: 22px 0 0;

 }


.online-note {

 padding: 24px;

 background: var(--accent);

 }


footer {

 padding: 36px 0;

 border-top: 2px solid var(--ink);

 margin-top: 50px;

 }


.hero{

grid-template-columns:3fr 2fr}

.news-layout{

grid-template-columns:repeat(3,minmax(0,1fr))}

.article-date{

border-left:6px solid var(--ink)}

.feature-list{

grid-template-columns:1fr 1fr}


.article-date, th, .online-note {


    background: color-mix(in srgb, var(--accent) 14%, var(--surface));


}


@media (max-width: 900px) {


    .composition {

 grid-template-columns: 1fr !important;

 }


    .composition-column:nth-child(2) {

 padding-top: 0;

 }


    .news-layout {

 grid-template-columns: repeat(2,minmax(0,1fr));

 }


}


@media (max-width: 640px) {


    main,.masthead,.navigation,.jump-links,footer {

 width: calc(100% - 28px);

 }


    .hero,.news-layout,.faq-layout,.feature-list,.version-grid,.reader-comments {

 display: grid;

 grid-template-columns: 1fr !important;

 }


    .hero {

 padding: 30px 0;

 gap: 20px;

 }


    .hero-copy {

 order: 0;

 }


    .hero figure {

 order: 1;

 }


    .hero figure img {

 min-height: 0;

 }


    .news-card:first-child {

 display: block;

 }


    .news-card {

 grid-column: auto !important;

 margin-left: 0 !important;

 transform: none !important;

 }


    .article-row {

 display: block;

 }


    .article-copy {

 padding: 20px !important;

 }


    .content-section {

 margin: 28px 0 !important;

 }


    .navigation {

 gap: 12px;

 font-size: .92rem;

 }


    .section-heading h2 {

 font-size: 1.4rem;

 }


}


@media (prefers-reduced-motion: reduce) {


    html {

 scroll-behavior: auto;

 }


}



:root {

        --ink: #f8fafc;

        --accent: #71717a;

        --background: #71717a;

        --surface: rgba(15,23,42,.76);

        --width: 1236px;

        --radius: 22px;

        --card-space: 26px;

    }

    .hero figure {
 align-self: start;
 }

    .hero figure img {
 min-height: 0;
 }

    .hero-copy h1 {
 overflow-wrap: anywhere;
 }

    .feature-card,.article-copy {
 padding: var(--card-space);
 }

    .news-card,.feature-card,.faq-card {
 color: var(--ink);
 background: var(--surface);
 }

    .news-card:not(:has(img)) .article-row {
 display: block;
 }

    .section-heading {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 gap: 15px;
 }

    .section-heading a {
 margin-left: auto;
 font-size: .85rem;
 }

    .topic-kicker {
 font-size: .86rem;
 letter-spacing: .035em;
 margin-bottom: 10px;
 }

    .feature-columns {
 display: grid;
 gap: 22px;
 grid-template-columns: 1fr 1fr;
 }

    .story-flow {
 display: grid;
 gap: 25px;
 }

    .story-flow > * {
 min-width: 0;
 }

    .story-rail {
 display: grid;
 grid-template-columns: minmax(0,2fr) minmax(0,1fr);
 gap: 30px;
 align-items: start;
 }

    .story-trio {
 display: grid;
 grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);
 gap: 24px;
 align-items: start;
 }

    .story-rail .news-layout,.story-trio .news-layout {
 grid-template-columns: 1fr;
 }

    .story-rail .faq-layout,.story-trio .faq-layout,.story-trio .reader-comments {
 grid-template-columns: 1fr;
 }

    .story-rail .reader-comments {
 grid-template-columns: 1fr;
 }

    .story-block {
 border-top: 1px solid var(--accent);
 }

    .story-block:nth-child(even) {
 background: color-mix(in srgb,var(--accent) 6%,var(--background));
 padding: 8px 22px;
 }

    .feature-photo {
 margin-bottom: 18px;
 }

    .reader-comment blockquote {
 margin: 0;
 }

    .page-context {
 padding: 25px;
 background: var(--surface);
 border-inline-start: 4px solid var(--accent);
 }

    .version-note {
 font-size: .88rem;
 }

    .result-row small {
 display: block;
 opacity: .78;
 }

    table th {
 color: var(--ink);
 background: color-mix(in srgb,var(--accent) 12%,var(--surface));
 }

    .flow-4 .news-layout {
 display: block;
 }

    .flow-4 .news-card {
 margin-bottom: 24px;
 }

    .flow-5 .feature-columns {
 grid-template-columns: 2fr 1fr;
 }

    .design-4 .content-section {
 scroll-margin-top: 24px;
 }

    @media (max-width: 1000px) {

        .story-trio {
 grid-template-columns: 1fr;
 }

        .story-rail {
 grid-template-columns: minmax(0,3fr) minmax(0,2fr);
 }

        .news-card:first-child {
 grid-column: auto;
 }

    }

    @media (max-width: 760px) {

        .story-rail,.story-trio,.feature-columns {
 display: grid;
 grid-template-columns: 1fr !important;
 }

        .news-layout,.reader-comments,.version-grid,.faq-layout {
 grid-template-columns: 1fr !important;
 }

        .article-row {
 display: block !important;
 }

        .hero,.composition {
 grid-template-columns: 1fr !important;
 }

        .news-card:first-child {
 display: block;
 grid-row: auto;
 grid-column: auto;
 }

        .content-section {
 padding: 0;
 }

        .story-block:nth-child(even) {
 padding: 8px 12px;
 }

    }