.article-body .speech-wrap.cocoon-block-balloon,
.article-body .wp-block-cocoon-blocks-balloon-ex-box-1.speech-wrap {
display: grid;
grid-template-columns: 78px minmax(0, 1fr);
gap: 16px;
align-items: start;
margin: 34px 0;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
.article-body .speech-wrap.sbp-r {
grid-template-columns: minmax(0, 1fr) 78px;
}
.article-body .speech-wrap.sbp-r .speech-person {
order: 2;
}
.article-body .speech-wrap.sbp-r .speech-balloon {
order: 1;
}
.article-body .speech-person {
min-width: 0;
text-align: center;
}
.article-body .speech-icon {
display: grid;
place-items: center;
overflow: hidden;
width: 76px;
height: 76px;
margin: 0 auto;
border: 1px solid rgba(17, 20, 24, .08);
border-radius: 50%;
background: #fff;
}
.article-body .speech-icon img,
.article-body .speech-icon-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.article-body .speech-name {
display: inline-block;
margin-top: 8px;
border-bottom: 2px solid var(--teal);
padding: 3px 0;
background: transparent;
color: var(--teal);
font-size: 11px;
font-weight: 900;
line-height: 1.3;
}
.article-body .speech-balloon {
position: relative;
min-width: 0;
border: 1px solid rgba(11, 105, 105, .16);
padding: 18px 22px;
background: #fbf9f4;
}
.article-body .speech-balloon::before {
content: "";
position: absolute;
top: 26px;
left: -9px;
width: 16px;
height: 16px;
border-left: 1px solid rgba(11, 105, 105, .16);
border-bottom: 1px solid rgba(11, 105, 105, .16);
background: rgba(255, 255, 255, .98);
transform: rotate(45deg);
}
.article-body .speech-wrap.sbp-r .speech-balloon::before {
right: -9px;
left: auto;
border: 0;
border-top: 1px solid rgba(11, 105, 105, .16);
border-right: 1px solid rgba(11, 105, 105, .16);
}
.article-body .speech-balloon p {
margin: 0;
color: #24302c;
font-size: 16px;
line-height: 1.76;
font-weight: 760;
}
.article-body .speech-balloon p + p {
margin-top: .8em;
}
.article-body .wp-block-table {
overflow-x: auto;
margin: 34px 0;
border: 1px solid rgba(17, 20, 24, .1);
background: #fbf9f4;
}
.article-body .wp-block-table table,
.article-body > table,
.article-body table:not(.calendar):not(.wp-calendar-table) {
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
margin: 0;
overflow: hidden;
background: rgba(255, 255, 255, .9);
font-size: 15px;
line-height: 1.7;
}
.article-body .wp-block-table th,
.article-body .wp-block-table td,
.article-body > table th,
.article-body > table td,
.article-body table:not(.calendar):not(.wp-calendar-table) th,
.article-body table:not(.calendar):not(.wp-calendar-table) td {
border: 0;
border-right: 1px solid rgba(17, 20, 24, .08);
border-bottom: 1px solid rgba(17, 20, 24, .08);
padding: 14px 16px;
text-align: left;
vertical-align: top;
}
.article-body .wp-block-table th,
.article-body > table th,
.article-body table:not(.calendar):not(.wp-calendar-table) th {
background: var(--night);
color: #fff;
font-size: 13px;
letter-spacing: 0;
font-weight: 900;
}
.article-body .wp-block-table tr:nth-child(even) td,
.article-body > table tr:nth-child(even) td,
.article-body table:not(.calendar):not(.wp-calendar-table) tr:nth-child(even) td {
background: rgba(11, 105, 105, .035);
}
.article-body .wp-block-table td:first-child,
.article-body > table td:first-child,
.article-body table:not(.calendar):not(.wp-calendar-table) td:first-child {
color: #17211f;
font-weight: 850;
}
.article-body .wp-block-table tr:last-child td,
.article-body > table tr:last-child td,
.article-body table:not(.calendar):not(.wp-calendar-table) tr:last-child td {
border-bottom: 0;
}
.article-body .wp-block-table th:last-child,
.article-body .wp-block-table td:last-child,
.article-body > table th:last-child,
.article-body > table td:last-child,
.article-body table:not(.calendar):not(.wp-calendar-table) th:last-child,
.article-body table:not(.calendar):not(.wp-calendar-table) td:last-child {
border-right: 0;
}
.article-body .information-box,
.article-body .memo-box,
.article-body .alert-box {
position: relative;
}
.article-body .information-box::before,
.article-body .memo-box::before,
.article-body .alert-box::before {
display: inline-flex;
align-items: center;
min-height: 22px;
margin: 0 0 10px;
border-bottom: 2px solid currentColor;
padding: 3px 0;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
.article-body .information-box::before {
content: "POINT";
background: transparent;
color: #7b4c00;
}
.article-body .memo-box::before {
content: "MEMO";
background: transparent;
color: var(--teal);
}
.article-body .alert-box::before {
content: "CHECK";
background: transparent;
color: #8b3e1a;
}
.article-body #toc_container:not(:has(a)),
body #toc_container:not(:has(a)) {
display: none !important;
}
.article-body #toc_container {
width: 100% !important;
margin: 32px 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 18px 0;
background: transparent;
}
.article-body #toc_container .toc_title {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
color: #17211f;
font-size: 13px;
font-weight: 900;
letter-spacing: 0;
}
.article-body #toc_container .toc_title::before {
content: "INDEX";
border-bottom: 2px solid var(--teal);
padding: 3px 0;
background: transparent;
color: var(--teal);
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0;
}
.article-body #toc_container ul,
.article-body #toc_container ol {
display: grid;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.article-body #toc_container li {
border: 0;
padding: 0;
background: transparent;
font-size: 14px;
line-height: 1.55;
}
.article-body #toc_container li::before {
display: none;
}
.article-body #toc_container li::before {
display: none;
}
.article-body #toc_container li:empty {
display: none;
}
.article-body #toc_container li:not(:has(a)),
body #toc_container li:not(:has(a)) {
display: none !important;
}
.article-body #toc_container a {
display: block;
padding: 7px 9px;
color: #25302c;
font-weight: 800;
text-decoration: none;
}
.article-body #toc_container a:hover {
background: rgba(11, 105, 105, .08);
color: var(--teal);
}
.article-body .wp-block-quote {
position: relative;
margin: 32px 0;
border-top: 2px solid var(--gold);
border-bottom: 1px solid var(--line);
padding: 20px 22px;
background: #fbf9f4;
}
.article-body .wp-block-quote::before {
content: "PICK";
display: inline-flex;
align-items: center;
margin: 0 0 10px;
border-bottom: 2px solid var(--gold);
padding: 3px 0;
background: transparent;
color: #7b4c00;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
.article-body .wp-block-quote:has(> p:only-child > a)::before {
content: "RELATED";
border-bottom-color: var(--teal);
background: transparent;
color: var(--teal);
}
.article-body .wp-block-quote p {
margin: 0;
color: #24302c;
font-size: 15px;
line-height: 1.78;
font-weight: 720;
}
.article-body .wp-block-quote p + p {
margin-top: 9px;
}
.article-body .wp-block-quote strong {
color: #17211f;
font-weight: 900;
}
.article-body .wp-block-quote a {
color: var(--teal);
font-weight: 900;
text-decoration: underline;
text-decoration-color: rgba(11, 105, 105, .28);
text-underline-offset: 4px;
}
.article-body .wp-block-cocoon-blocks-blogcard,
.article-body .blogcard-type {
display: grid;
gap: 4px;
margin: 30px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 16px 0;
background: transparent;
}
.article-body .wp-block-cocoon-blocks-blogcard::before,
.article-body .blogcard-type::before {
content: "あわせて読みたい";
color: var(--teal);
font-size: 11px;
font-weight: 900;
}
.article-body .wp-block-cocoon-blocks-blogcard a,
.article-body .blogcard-type a {
color: #17211f;
font-size: 15px;
font-weight: 900;
line-height: 1.6;
overflow-wrap: anywhere;
text-decoration: underline;
text-decoration-color: rgba(11, 105, 105, .28);
text-underline-offset: 4px;
}
.article-body .brainde-ogp-card-list {
display: grid;
gap: 14px;
margin: 30px 0;
}
.article-body a.brainde-ogp-card {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 16px;
align-items: stretch;
border: 1px solid var(--line);
border-radius: 4px;
overflow: hidden;
background: #fff;
text-decoration: none !important;
transition: border-color .15s ease, box-shadow .15s ease;
}
.article-body a.brainde-ogp-card:hover {
border-color: var(--teal);
box-shadow: 0 4px 14px rgba(7, 19, 29, .08);
}
.article-body .brainde-ogp-card__thumb {
overflow: hidden;
background: #f3f1ea;
}
.article-body .brainde-ogp-card__thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 1 / 1;
}
.article-body .brainde-ogp-card__body {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-width: 0;
padding: 14px 16px 14px 0;
}
.article-body .brainde-ogp-card__title {
color: #17211f;
font-size: 15px;
font-weight: 900;
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-body .brainde-ogp-card__desc {
color: #55605c;
font-size: 12.5px;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-body .brainde-ogp-card__domain {
color: #8a938f;
font-size: 11px;
}
@media (max-width: 480px) {
.article-body a.brainde-ogp-card {
grid-template-columns: 84px minmax(0, 1fr);
}
.article-body .brainde-ogp-card__body {
padding: 10px 12px 10px 0;
}
.article-body .brainde-ogp-card__title {
font-size: 13.5px;
}
.article-body .brainde-ogp-card__desc {
display: none;
}
}
.article-body .wp-block-code,
.article-body pre.wp-block-code {
overflow: hidden;
margin: 32px 0;
border: 1px solid rgba(7, 19, 29, .14);
background: var(--night);
}
.article-body .wp-block-code code {
display: block;
overflow-x: auto;
padding: 18px 20px;
color: #f7f4ec;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 14px;
line-height: 1.75;
white-space: pre;
}
.article-body .yyi-rinker-contents,
.article-body .yyi-rinker-box,
.article-body .rinker-box,
.article-body .amazonjs_item {
margin: 34px 0;
border: 1px solid rgba(17, 20, 24, .1) !important;
border-radius: 0 !important;
padding: 18px !important;
background: #fbf9f4 !important;
box-shadow: none !important;
}
.article-body .yyi-rinker-title a,
.article-body .yyi-rinker-title,
.article-body .amazonjs_item h4,
.article-body .amazonjs_item h4 a {
color: #17211f !important;
font-weight: 900 !important;
line-height: 1.55 !important;
}
.article-body .yyi-rinker-links a,
.article-body .amazonjs_item a.amazonjs_link {
border-radius: 0 !important;
font-weight: 900 !important;
text-decoration: none !important;
}
@media (max-width: 640px) {
.article-body .speech-wrap.cocoon-block-balloon,
.article-body .wp-block-cocoon-blocks-balloon-ex-box-1.speech-wrap,
.article-body .speech-wrap.sbp-r {
grid-template-columns: 54px minmax(0, 1fr);
gap: 12px;
}
.article-body .speech-wrap.sbp-r .speech-person {
order: 0;
}
.article-body .speech-wrap.sbp-r .speech-balloon {
order: 0;
}
.article-body .speech-icon {
width: 54px;
height: 54px;
}
.article-body .speech-name {
padding: 2px 6px;
font-size: 10px;
}
.article-body .speech-balloon {
padding: 15px 16px;
}
.article-body .speech-balloon::before,
.article-body .speech-wrap.sbp-r .speech-balloon::before {
left: -8px;
right: auto;
top: 20px;
border: 0;
border-left: 1px solid rgba(11, 105, 105, .16);
border-bottom: 1px solid rgba(11, 105, 105, .16);
}
.article-body .wp-block-table table,
.article-body > table,
.article-body table:not(.calendar):not(.wp-calendar-table) {
min-width: 560px;
font-size: 14px;
}
.article-body #toc_container,
.article-body .wp-block-quote,
.article-body .wp-block-cocoon-blocks-blogcard,
.article-body .blogcard-type,
.article-body .yyi-rinker-contents,
.article-body .yyi-rinker-box,
.article-body .rinker-box,
.article-body .amazonjs_item {
margin: 26px 0;
padding: 15px 16px !important;
}
.article-body .wp-block-code code {
padding: 15px 16px;
font-size: 13px;
}
}
:root {
--ink: #14181a;
--muted: #68705f;
--paper: #f4f1ea;
--paper-strong: #fbf9f4;
--paper-flat: #fbf9f4;
--line: rgba(20, 24, 22, .14);
--night: #07131d;
--night-soft: #132738;
--blue: #0c6d9b;
--gold: #c8912a;
--green: #496f5c;
--wood: #7b4b17;
--teal: #0b6969;
--radius: 2px;
--max: 1180px;
--shadow: none;
--shadow-soft: none;
--card-shadow: 0 1px 2px rgba(20, 24, 22, .05), 0 4px 10px rgba(20, 24, 22, .04);
--card-shadow-hover: 0 4px 8px rgba(20, 24, 22, .06), 0 10px 22px rgba(20, 24, 22, .08);
--font-display: "Fraunces", "Shippori Mincho B1", serif;
--font-serif-jp: "Shippori Mincho B1", "Fraunces", serif;
--font-body: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.75;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
h1, h2, h3,
.brand-name,
.section-heading h2,
.category-hero h1,
.article-header h1,
.about-hero-copy h1,
.about-mission h2,
.series-hero h1,
.archive-hero h1 {
font-family: var(--font-serif-jp);
font-weight: 700;
}
time, .article-meta, .article-meta-top,
.tag-cloud a, .archive-filters a,
.brainde-article-toc__item a::before,
.brainde-next-reads__grid time {
font-family: var(--font-mono);
}
.site-hero {
position: relative;
min-height: 92vh;
display: flex;
flex-direction: column;
background: var(--night);
color: #fff;
overflow: hidden;
}
.site-hero::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(244, 241, 234, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(244, 241, 234, .05) 1px, transparent 1px);
background-size: 64px 64px;
mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .9) 30%, transparent 88%);
pointer-events: none;
}
.site-hero::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 1px;
background: rgba(244, 241, 234, .18);
pointer-events: none;
}
.hero-figure {
position: absolute;
right: max(0px, calc((100vw - var(--max)) / 2 - 20px));
bottom: 0;
width: min(34vw, 460px);
opacity: .85;
pointer-events: none;
animation: brainde-fade-in 1.1s .3s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-figure img {
display: block;
width: 100%;
height: auto;
-webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78) 22%, rgba(0, 0, 0, .78) 58%, transparent 97%);
mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78) 22%, rgba(0, 0, 0, .78) 58%, transparent 97%);
}
@keyframes brainde-fade-in {
from {
opacity: 0;
}
to {
opacity: .85;
}
}
@media (max-width: 1180px) {
.hero-figure {
width: min(30vw, 380px);
opacity: .55;
}
}
@media (max-width: 860px) {
.hero-figure {
display: none;
}
}
.global-nav {
position: relative;
z-index: 2;
width: min(var(--max), calc(100% - 56px));
margin: 0 auto;
padding: 26px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.brand {
display: inline-flex;
align-items: center;
gap: 12px;
font-weight: 700;
letter-spacing: 0;
}
.brand-mark {
display: grid;
place-items: center;
width: 34px;
height: 34px;
font-size: 12px;
line-height: 1;
}
.brand-mark-image {
overflow: hidden;
background: transparent;
}
.brand-mark-image img {
width: 100%;
height: 100%;
object-fit: contain;
}
.brand-name {
font-family: var(--font-display);
font-size: 24px;
letter-spacing: .01em;
line-height: 1;
}
.brand .custom-logo {
width: auto;
max-width: 190px;
max-height: 44px;
object-fit: contain;
}
.nav-links {
display: flex;
align-items: center;
gap: 18px;
font-size: 11px;
font-weight: 800;
}
.nav-group {
display: inline-flex;
align-items: center;
gap: 14px;
}
.nav-group-label {
color: rgba(255, 255, 255, .54);
font-size: 10px;
font-weight: 900;
letter-spacing: .08em;
}
.nav-divider {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, .28);
}
.global-nav-compact .nav-group-label {
color: rgba(18, 22, 25, .42);
}
.global-nav-compact .nav-divider {
background: rgba(18, 22, 25, .16);
}
.nav-links a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 36px;
opacity: .92;
}
.nav-links a:hover {
color: var(--gold);
}
.nav-toggle {
display: none;
}
.nav-toggle:focus-visible,
.nav-links a:focus-visible,
.breadcrumb a:focus-visible,
.site-footer a:focus-visible,
.archive-filters a:focus-visible,
.brainde-article-toc__item a:focus-visible {
outline: 3px solid rgba(235, 169, 51, .72);
outline-offset: 3px;
}
.hero-content {
position: relative;
z-index: 1;
width: min(var(--max), calc(100% - 56px));
margin: 0 auto;
padding: 64px 0 120px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.eyebrow,
.section-heading p,
.section-kicker {
margin: 0 0 12px;
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
}
.hero-content .eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
color: rgba(244, 241, 234, .64);
animation: brainde-rise .7s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-content .eyebrow::before {
content: "";
width: 34px;
height: 1px;
background: var(--gold);
}
.hero-content h1 {
margin: 24px 0 0;
max-width: 15ch;
font-family: var(--font-display);
font-size: clamp(48px, 6.2vw, 104px);
line-height: 1.16;
letter-spacing: -.01em;
font-weight: 600;
animation: brainde-rise .8s .08s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-copy {
margin: 40px 0 0;
font-size: clamp(15px, 1.2vw, 17px);
line-height: 1.9;
font-weight: 400;
color: rgba(244, 241, 234, .6);
max-width: 30em;
animation: brainde-rise .8s .16s cubic-bezier(.16, 1, .3, 1) both;
}
.hero-actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 56px;
animation: brainde-rise .8s .24s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes brainde-rise {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-content .eyebrow,
.hero-content h1,
.hero-copy,
.hero-actions,
.hero-figure,
.category-tab-panel {
animation: none;
}
}
.button {
min-width: 184px;
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0;
border: 1px solid rgba(255, 255, 255, .62);
padding: 13px 24px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .12em;
transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.button:hover {
transform: translateY(-1px);
}
.button:hover {
border-color: var(--gold);
}
.button-primary {
border-color: var(--gold);
background: var(--gold);
color: #16120a;
}
.button-primary:hover {
background: transparent;
color: var(--gold);
}
.button-ghost {
color: #fff;
background: transparent;
}
.scroll-cue {
position: absolute;
left: max(28px, calc((100vw - var(--max)) / 2));
bottom: 38px;
display: grid;
gap: 8px;
color: #fff;
font-size: 11px;
font-weight: 800;
}
.scroll-line {
width: 1px;
height: 42px;
background: #fff;
position: relative;
margin-left: 18px;
}
.scroll-line::after {
content: "";
position: absolute;
left: -5px;
bottom: 0;
width: 10px;
height: 10px;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
transform: rotate(45deg);
}
.section {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 104px 0;
}
.section-heading {
text-align: left;
margin-bottom: 56px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.section-heading span {
display: block;
margin: 14px 0 0;
max-width: 560px;
color: var(--muted);
font-size: 15px;
line-height: 1.8;
}
.section-heading p {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--muted);
font-family: var(--font-mono);
}
.section-heading p::before {
content: "";
width: 28px;
height: 1px;
background: var(--gold);
}
.section-heading h2,
.about-copy h2,
.series-copy h2 {
margin: 0;
font-family: var(--font-display);
font-size: clamp(30px, 3.6vw, 48px);
line-height: 1.24;
letter-spacing: -.005em;
font-weight: 600;
}
.section-pickup {
width: 100%;
max-width: none;
padding: 100px max(20px, calc((100vw - var(--max)) / 2)) 104px;
background: var(--paper);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.pickup-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 260px;
gap: 34px;
align-items: center;
}
.post-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.post-card {
min-width: 0;
background: var(--paper-flat);
border: 1px solid var(--line);
overflow: hidden;
transition: border-color .3s ease, transform .3s ease;
}
.post-card:hover {
border-color: var(--ink);
transform: translateY(-2px);
}
.post-card:hover .post-image img {
transform: scale(1.04);
}
.post-image img {
transition: transform .5s cubic-bezier(.16, 1, .3, 1);
}
.section-pickup .post-card {
display: grid;
grid-template-columns: minmax(150px, 42%) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
min-height: 172px;
}
.post-image {
display: block;
position: relative;
aspect-ratio: 1.55;
overflow: hidden;
}
.section-pickup .post-image {
grid-row: 1 / 3;
height: 100%;
aspect-ratio: auto;
}
.brainde-safe-image {
position: relative;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
background: #111b1d;
isolation: isolate;
}
.brainde-safe-image::before {
content: "";
position: absolute;
inset: -18px;
z-index: 0;
background: var(--thumb-image) center / cover no-repeat;
filter: blur(18px) saturate(.9);
opacity: .58;
transform: scale(1.08);
}
.brainde-safe-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background:
radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .04), transparent 48%),
linear-gradient(180deg, rgba(7, 19, 29, .04), rgba(7, 19, 29, .16));
pointer-events: none;
}
.brainde-safe-image img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.about-image img,
.pickup-feature-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.post-label {
position: absolute;
left: 10px;
top: 10px;
background: rgba(20, 24, 26, .82);
backdrop-filter: blur(4px);
color: #fff;
padding: 5px 9px;
font-family: var(--font-mono);
font-size: 10px;
line-height: 1;
font-weight: 500;
letter-spacing: .06em;
}
.post-card h3 {
min-height: 0;
margin: 16px 16px 8px;
font-size: 15.5px;
font-weight: 700;
line-height: 1.6;
letter-spacing: -.005em;
}
.post-card h3 a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.section-pickup .post-card h3 {
align-self: end;
margin: 18px 16px 8px;
font-size: 16px;
line-height: 1.5;
}
.post-card time {
display: block;
margin: 0 16px 16px;
color: var(--muted);
font-size: 12px;
}
.section-pickup .post-card time {
align-self: start;
}
.pickup-feature-card {
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
border: 1px solid var(--line);
background: var(--night);
color: #fff;
isolation: isolate;
transition: border-color .2s ease;
}
.pickup-feature-card:hover {
border-color: var(--gold);
}
.pickup-feature-card img {
position: absolute;
inset: 0;
z-index: -2;
}
.pickup-feature-card::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(7, 19, 29, .08), rgba(7, 19, 29, .82)),
linear-gradient(90deg, rgba(7, 19, 29, .72), rgba(7, 19, 29, .12));
}
.pickup-feature-card span,
.pickup-feature-card strong,
.pickup-feature-card small {
display: block;
margin-inline: 20px;
}
.pickup-feature-card span {
width: fit-content;
margin-bottom: 10px;
padding: 4px 8px;
border-bottom: 2px solid var(--gold);
background: transparent;
color: var(--gold);
font-family: var(--font-mono);
font-size: 10px;
line-height: 1;
font-weight: 500;
}
.pickup-feature-card strong {
font-size: 19px;
line-height: 1.5;
}
.pickup-feature-card small {
margin-top: 12px;
margin-bottom: 20px;
color: rgba(255, 255, 255, .76);
font-size: 12px;
font-weight: 900;
}
.about-panel {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 72px;
align-items: center;
max-width: none;
}
.about-image {
aspect-ratio: 1.08;
overflow: hidden;
border: 1px solid var(--line);
}
.about-copy {
max-width: 520px;
padding-left: 2px;
}
.about-copy p {
margin: 22px 0 0;
color: var(--muted);
font-size: 16.5px;
line-height: 1.9;
}
.text-button {
display: inline-flex;
margin-top: 22px;
padding: 10px 18px;
border: 1px solid var(--ink);
font-size: 13px;
font-weight: 700;
background: transparent;
transition: background .2s ease, color .2s ease;
}
.text-button:hover {
background: var(--ink);
color: var(--paper);
}
.post-grid-latest {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.section-latest .text-button,
.section-category-tabs .text-button {
margin-top: 40px;
}
.category-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: 8px 6px;
margin-bottom: 44px;
}
.category-tab-input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.category-tab-label {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 0 18px;
border: 1px solid var(--line);
color: var(--muted);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .03em;
cursor: pointer;
transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.category-tab-label:hover {
border-color: var(--ink);
color: var(--ink);
}
.category-tabs:has(#tab-apple-mac:checked) label[for="tab-apple-mac"],
.category-tabs:has(#tab-desk-gear:checked) label[for="tab-desk-gear"],
.category-tabs:has(#tab-home-tech:checked) label[for="tab-home-tech"],
.category-tabs:has(#tab-field-gear:checked) label[for="tab-field-gear"],
.category-tabs:has(#tab-ai-workflow:checked) label[for="tab-ai-workflow"] {
border-color: var(--ink);
background: var(--ink);
color: #fff;
}
#tab-apple-mac:focus-visible ~ .category-tabs-nav label[for="tab-apple-mac"],
#tab-desk-gear:focus-visible ~ .category-tabs-nav label[for="tab-desk-gear"],
#tab-home-tech:focus-visible ~ .category-tabs-nav label[for="tab-home-tech"],
#tab-field-gear:focus-visible ~ .category-tabs-nav label[for="tab-field-gear"],
#tab-ai-workflow:focus-visible ~ .category-tabs-nav label[for="tab-ai-workflow"] {
outline: 3px solid rgba(235, 169, 51, .72);
outline-offset: 2px;
}
.category-tab-panel {
display: none;
}
#tab-apple-mac:checked ~ .category-tab-panel[data-panel="apple-mac"],
#tab-desk-gear:checked ~ .category-tab-panel[data-panel="desk-gear"],
#tab-home-tech:checked ~ .category-tab-panel[data-panel="home-tech"],
#tab-field-gear:checked ~ .category-tab-panel[data-panel="field-gear"],
#tab-ai-workflow:checked ~ .category-tab-panel[data-panel="ai-workflow"] {
display: block;
animation: brainde-rise .5s cubic-bezier(.16, 1, .3, 1) both;
}
.post-grid-tab {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.category-tab-empty {
grid-column: 1 / -1;
color: var(--muted);
font-size: 14px;
}
.ranked-list {
display: flex;
flex-direction: column;
}
.ranked-row {
display: grid;
grid-template-columns: 64px 130px minmax(0, 1fr);
align-items: center;
gap: 28px;
padding: 26px 0;
border-bottom: 1px solid var(--line);
}
.ranked-row:first-child {
border-top: 1px solid var(--line);
}
.ranked-row-number {
font-family: var(--font-display);
font-size: 34px;
line-height: 1;
font-weight: 600;
color: rgba(20, 24, 26, .16);
}
.ranked-row-image {
display: block;
aspect-ratio: 1.4;
overflow: hidden;
border: 1px solid var(--line);
}
.ranked-row-label {
display: block;
margin-bottom: 8px;
color: var(--muted);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: .04em;
}
.ranked-row-body h3 {
margin: 0;
font-size: 18px;
line-height: 1.5;
font-weight: 700;
}
.ranked-row-body h3 a {
display: inline;
}
.ranked-row:hover .ranked-row-number {
color: var(--gold);
transition: color .25s ease;
}
.category-chip-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.category-chip {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
min-height: 108px;
padding: 22px 26px;
background: var(--paper-flat);
transition: background .2s ease;
}
.category-chip:hover {
background: var(--ink);
}
.category-chip:hover .category-chip-label,
.category-chip:hover .category-chip-small {
color: #fff;
}
.category-chip-label {
font-family: var(--font-display);
font-size: 19px;
font-weight: 600;
letter-spacing: -.005em;
transition: color .2s ease;
}
.category-chip-small {
color: var(--muted);
font-size: 12.5px;
transition: color .2s ease;
}
.series-section {
display: grid;
grid-template-columns: 390px minmax(0, 1fr);
gap: 52px;
align-items: start;
border-top: 1px solid var(--line);
}
.series-copy p {
color: #313b38;
}
.series-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.series-list a {
min-height: 132px;
padding: 22px;
background: var(--paper-flat);
border: 1px solid var(--line);
transition: border-color .2s ease;
}
.series-list a:hover {
border-color: var(--teal);
}
.series-list span {
display: block;
color: var(--teal);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
}
.series-list strong {
display: block;
margin-top: 12px;
font-size: 20px;
line-height: 1.35;
}
.site-footer {
width: 100%;
padding: 96px max(20px, calc((100vw - var(--max)) / 2)) 48px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
color: #fff;
background: var(--night);
border-top: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand {
color: #fff;
}
.site-footer p {
margin-top: 18px;
max-width: 360px;
color: rgba(244, 241, 234, .5);
font-size: 14px;
line-height: 1.8;
}
.site-footer nav {
display: grid;
grid-template-columns: repeat(2, minmax(120px, auto));
gap: 4px 40px;
font-size: 12.5px;
font-weight: 700;
letter-spacing: .01em;
}
.site-footer a {
display: inline-flex;
align-items: center;
min-height: 34px;
color: rgba(244, 241, 234, .68);
transition: color .2s ease;
}
.site-footer a:hover {
color: var(--gold);
}
.page-category {
min-height: 100vh;
}
.compact-header {
position: sticky;
top: 0;
z-index: 10;
background: var(--paper);
border-bottom: 1px solid var(--line);
}
.global-nav-compact {
color: var(--ink);
border-bottom: 0;
}
.global-nav-compact .nav-links a:hover,
.global-nav-compact .nav-links .is-current {
color: var(--teal);
}
.category-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 62px 0 92px;
}
.category-hero {
min-height: 350px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 30px;
align-items: end;
margin-bottom: 46px;
padding: 42px;
color: #fff;
overflow: hidden;
border: 1px solid var(--line);
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
var(--category-hero-image, url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/field_gear_category.png)) center / cover no-repeat;
}
.category-hero-apple {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/apple_mac_category.png) center / cover no-repeat;
}
.category-hero-desk {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/desk_gear_category.png) center / cover no-repeat;
}
.category-hero-home {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/home_teck.png) center / cover no-repeat;
}
.category-hero-ai {
background:
linear-gradient(90deg, rgba(7, 19, 29, .86), rgba(7, 19, 29, .44) 56%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .05), rgba(7, 19, 29, .58)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/ai_workflow_category.png) center / cover no-repeat;
}
.category-hero h1 {
margin: 0;
font-size: clamp(54px, 8vw, 98px);
line-height: .95;
}
.category-hero p {
max-width: 760px;
margin: 22px 0 0;
font-size: 17px;
line-height: 1.9;
color: rgba(255, 255, 255, .9);
font-weight: 700;
}
.category-hero-meta {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.category-hero-meta span {
display: inline-flex;
min-height: 34px;
align-items: center;
border: 1px solid rgba(255, 255, 255, .5);
padding: 7px 13px;
background: transparent;
color: #fff;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
}
.category-hero-meta span:last-child {
border-color: var(--gold);
color: var(--gold);
}
.category-starter {
display: grid;
grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
gap: 22px;
align-items: center;
margin: 0 0 42px;
padding: 22px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: transparent;
}
.category-starter__head p {
margin: 0 0 8px;
color: var(--teal);
font-size: 12px;
font-weight: 900;
letter-spacing: .06em;
}
.category-starter__head h2 {
margin: 0;
font-size: 28px;
line-height: 1.22;
}
.category-starter__head span {
display: block;
margin-top: 10px;
color: #4f5b55;
font-size: 14px;
font-weight: 700;
line-height: 1.72;
}
.category-starter__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.category-starter-card {
display: grid;
gap: 10px;
min-width: 0;
min-height: 44px;
padding: 10px;
border: 1px solid var(--line);
background: var(--paper-flat);
color: var(--ink);
text-decoration: none;
transition: border-color .2s ease;
}
.category-starter-card:hover {
border-color: var(--teal);
}
.category-starter-card .brainde-safe-image {
aspect-ratio: 1.45;
}
.category-starter-card strong {
display: block;
font-size: 13px;
line-height: 1.55;
}
.category-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 42px;
align-items: start;
}
.category-main {
min-width: 0;
}
.featured-category-card {
position: relative;
display: grid;
min-height: 430px;
overflow: hidden;
color: #fff;
border: 1px solid var(--line);
}
.featured-category-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.featured-category-card::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, transparent, rgba(7, 19, 29, .82)),
linear-gradient(90deg, rgba(7, 19, 29, .42), transparent 72%);
}
.featured-category-card > div {
position: relative;
z-index: 1;
align-self: end;
max-width: 760px;
padding: 32px;
}
.featured-category-card .post-label {
position: static;
display: inline-flex;
margin-bottom: 14px;
background: transparent;
border-bottom: 2px solid var(--gold);
color: var(--gold);
}
.featured-category-card h2 {
margin: 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.22;
}
.featured-category-card p {
margin: 16px 0 0;
color: rgba(255, 255, 255, .86);
font-weight: 700;
}
.featured-category-card time {
display: block;
margin-top: 16px;
font-size: 13px;
color: rgba(255, 255, 255, .72);
}
.article-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-top: 28px;
}
.category-article-card {
min-width: 0;
}
.category-card-image {
display: block;
aspect-ratio: 1.5;
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
transition: box-shadow .2s ease;
}
.category-article-card:hover .category-card-image {
box-shadow: var(--card-shadow-hover);
}
.category-article-card:hover .category-card-image img {
transform: scale(1.04);
}
.category-article-card img {
width: 100%;
height: 100%;
transition: transform .3s ease;
}
.category-article-card p {
margin: 16px 0 8px;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.category-article-card h3 {
margin: 0;
font-size: 24px;
line-height: 1.45;
}
.category-article-card span {
display: block;
margin-top: 10px;
color: #434a43;
font-size: 14px;
}
.category-article-card time {
display: block;
margin-top: 16px;
color: var(--muted);
font-size: 12px;
font-weight: 700;
}
.category-sidebar {
display: grid;
gap: 22px;
}
.sidebar-card {
padding: 24px;
background: var(--paper-flat);
border: 1px solid var(--line);
}
.trending-list {
list-style: none;
display: grid;
gap: 18px;
margin: 0;
padding: 0;
}
.trending-list a {
display: grid;
grid-template-columns: 54px 1fr;
gap: 12px;
align-items: start;
font-weight: 800;
line-height: 1.55;
}
.trending-list span {
color: rgba(123, 75, 23, .28);
font-size: 34px;
line-height: 1;
font-weight: 900;
}
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tag-cloud a {
display: inline-flex;
border: 1px solid var(--line);
padding: 8px 12px;
background: transparent;
color: #064f4f;
font-size: 12px;
font-weight: 700;
transition: border-color .2s ease;
}
.tag-cloud a:hover {
border-color: var(--teal);
}
.sidebar-dark {
background: var(--night);
color: #fff;
}
.sidebar-dark h3 {
margin: 0;
font-size: 24px;
line-height: 1.35;
}
.sidebar-dark p:last-child {
margin: 14px 0 0;
color: rgba(255, 255, 255, .76);
}
.article-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 42px 0 96px;
}
.article-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 304px;
gap: 46px;
align-items: start;
}
.article-main {
min-width: 0;
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
margin-bottom: 26px;
color: var(--muted);
font-size: 12px;
font-weight: 900;
}
.breadcrumb a {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 2px 0;
}
.breadcrumb a:hover {
color: var(--teal);
text-decoration: underline;
text-decoration-color: rgba(11, 105, 105, .4);
text-underline-offset: 3px;
}
.article-header {
max-width: 780px;
}
.article-label {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
padding: 0 0 6px;
border-bottom: 2px solid var(--teal);
background: transparent;
color: var(--teal);
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: .03em;
}
.article-header h1 {
margin: 0;
font-size: clamp(34px, 4.8vw, 58px);
line-height: 1.18;
letter-spacing: 0;
}
.brainde-title-small .article-header h1 {
font-size: clamp(30px, 4.2vw, 52px);
}
.article-header > p {
max-width: 700px;
margin: 16px 0 0;
color: #37413e;
font-size: 17px;
line-height: 1.78;
font-weight: 700;
}
.article-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 24px;
padding-top: 18px;
border-top: 1px solid rgba(17, 20, 24, .1);
color: var(--muted);
font-size: 13px;
font-weight: 800;
}
.article-meta-top {
gap: 10px 14px;
margin: 0 0 16px;
border-top: 0;
padding-top: 0;
font-size: 12px;
}
.article-eyecatch {
margin: 28px 0 0;
overflow: hidden;
border: 1px solid var(--line);
aspect-ratio: 1.82;
background: #111b1d;
}
.article-eyecatch img {
width: 100%;
height: 100%;
}
.brainde-eyecatch-photo .article-eyecatch .brainde-safe-image img,
.article-eyecatch--photo .brainde-safe-image img {
object-fit: cover;
}
.brainde-eyecatch-text-image .article-eyecatch .brainde-safe-image img,
.article-eyecatch--text-image .brainde-safe-image img,
.article-eyecatch--contain .brainde-safe-image img {
object-fit: contain;
}
.share-row {
display: flex;
gap: 10px;
margin: 22px 0 0;
}
.share-row a {
display: inline-flex;
min-width: 42px;
height: 42px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255, 255, 255, .78);
border: 1px solid rgba(17, 20, 24, .08);
color: var(--ink);
font-size: 12px;
font-weight: 900;
}
.article-summary-box,
.toc-box,
.note-card,
.gear-card {
margin-top: 34px;
border-top: 2px solid var(--teal);
border-bottom: 1px solid var(--line);
}
.article-summary-box {
padding: 28px;
background: var(--paper-flat);
}
.article-summary-box h2 {
margin: 0;
font-size: 28px;
line-height: 1.35;
}
.article-summary-box ul {
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.article-summary-box li {
position: relative;
padding-left: 22px;
color: #313b38;
font-weight: 700;
}
.article-summary-box li::before {
content: "";
position: absolute;
left: 0;
top: .78em;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
.toc-box {
display: grid;
gap: 12px;
padding: 24px;
background: var(--paper-flat);
}
.toc-box h2 {
margin: 0 0 4px;
font-size: 22px;
}
.toc-box a {
padding: 12px 14px;
border-bottom: 1px solid var(--line);
background: transparent;
color: #303935;
font-weight: 700;
}
.article-body {
margin-top: 40px;
display: block;
max-width: 696px;
letter-spacing: 0;
}
.article-body section {
scroll-margin-top: 120px;
}
.article-body h2 {
margin: 2.2em 0 .72em;
border-bottom: 1px solid rgba(17, 20, 24, .1);
padding-bottom: .48em;
font-size: clamp(26px, 3vw, 34px);
line-height: 1.42;
letter-spacing: 0;
}
.article-body h3 {
margin: 1.65em 0 .58em;
font-size: clamp(20px, 2.2vw, 24px);
line-height: 1.45;
letter-spacing: 0;
}
.article-body p {
margin: 0 0 1.18em;
color: #2f3835;
font-size: 17px;
line-height: 1.88;
letter-spacing: 0;
}
.brainde-density-relaxed .article-body p {
line-height: 1.98;
}
.brainde-article-toc {
margin: 28px 0 34px;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
padding: 0;
overflow: hidden;
background: transparent;
}
.brainde-article-toc__details {
padding: 0;
}
.brainde-article-toc__summary {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
min-height: 56px;
padding: 0 4px;
color: #17211f;
cursor: pointer;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.4;
font-weight: 500;
letter-spacing: .04em;
list-style: none;
}
.brainde-article-toc__summary::-webkit-details-marker {
display: none;
}
.brainde-article-toc__summary span {
padding: 4px 0;
background: transparent;
color: var(--teal);
font-size: 10px;
line-height: 1.2;
letter-spacing: 0;
}
.brainde-article-toc__summary em {
color: var(--muted);
font-size: 11px;
font-style: normal;
}
.brainde-article-toc__summary::after {
content: "開く";
padding: 5px 0;
background: transparent;
color: #41504b;
font-size: 11px;
font-weight: 500;
}
.brainde-article-toc__details[open] .brainde-article-toc__summary::after {
content: "閉じる";
}
.article-body .brainde-article-toc__list {
display: grid;
gap: 0;
margin: 0;
padding: 4px 4px 12px;
list-style: none;
counter-reset: brainde-toc;
}
.article-body .brainde-article-toc__item {
position: relative;
margin: 0;
border: 0;
border-bottom: 1px solid var(--line);
padding: 0;
background: transparent;
counter-increment: brainde-toc;
}
.article-body .brainde-article-toc__item:last-child {
border-bottom: 0;
}
.article-body .brainde-article-toc__item::before {
display: none;
}
.brainde-article-toc__item a {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 10px;
align-items: start;
min-height: 44px;
padding: 10px 4px;
color: #25302c;
font-size: 14px;
line-height: 1.55;
font-weight: 700;
font-family: var(--font-serif-jp);
text-decoration: none;
}
.brainde-article-toc__item a::before {
content: counter(brainde-toc, decimal-leading-zero);
color: var(--teal);
font-size: 12px;
font-weight: 500;
}
.brainde-article-toc__item--h3 a {
padding-left: 26px;
color: #4e5b56;
font-size: 13px;
font-weight: 500;
}
.brainde-article-toc__item a:hover {
background: var(--paper-flat);
color: var(--teal);
}
.note-card {
padding: 24px;
background:
linear-gradient(135deg, rgba(7, 19, 29, .92), rgba(19, 39, 56, .9)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
color: #fff;
}
.note-card strong {
display: block;
margin-bottom: 10px;
color: var(--gold);
}
.note-card p {
margin: 0;
color: rgba(255, 255, 255, .86);
}
.article-body .is-style-brainde-lead,
.article-body .brainde-lead {
margin: 0 0 28px;
color: #18211f;
font-size: 19px;
line-height: 1.82;
font-weight: 800;
}
.article-body .is-style-brainde-note,
.article-body .brainde-box,
.article-body .brainde-quick-summary,
.article-body .brainde-decision-box,
.article-body .brainde-point-box,
.article-body .brainde-experience-box,
.article-body .brainde-step-card,
.article-body .brainde-verdict-card,
.article-body .information-box,
.article-body .memo-box,
.article-body .alert-box {
margin: 30px 0;
border-top: 2px solid var(--teal);
border-bottom: 1px solid var(--line);
border-left: 0;
padding: 20px 22px;
background: var(--paper-flat);
}
.article-body ul,
.article-body ol {
margin: 1.05em 0 1.55em;
padding-left: 1.4em;
list-style: none;
}
.article-body li {
position: relative;
margin: .45em 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #25302c;
font-size: 16px;
line-height: 1.78;
font-weight: 650;
}
.article-body ul li::before {
content: "";
position: absolute;
left: -1.1em;
top: .72em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--teal);
}
.article-body ol {
list-style: none;
counter-reset: brainde-ol;
}
.article-body ol li {
counter-increment: brainde-ol;
}
.article-body ol li::before {
content: counter(brainde-ol) ".";
position: absolute;
left: -1.4em;
color: var(--teal);
font-family: var(--font-mono);
font-weight: 500;
}
.article-body .brainde-card-list {
display: grid;
gap: 9px;
margin: 1.2em 0 1.6em;
padding: 0;
list-style: none;
}
.article-body .brainde-card-list li {
padding: 10px 12px 10px 20px;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
font-weight: 700;
}
.article-body .brainde-card-list li::before {
content: "";
position: absolute;
left: 0;
top: 1.02em;
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--teal);
}
.article-body .brainde-speech {
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
gap: 14px;
align-items: start;
margin: 30px 0;
}
.article-body .brainde-speech-avatar {
display: grid;
place-items: center;
overflow: hidden;
width: 54px;
height: 54px;
border: 1px solid var(--line);
border-radius: 50%;
background: #fff;
}
.article-body .brainde-speech-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-body .brainde-speech-name {
display: block;
margin-top: 6px;
color: var(--muted);
font-size: 11px;
font-weight: 900;
text-align: center;
}
.article-body .brainde-speech-body {
position: relative;
border: 1px solid var(--line);
padding: 16px 18px;
background: var(--paper-flat);
}
.article-body .brainde-speech-body::before {
content: "";
position: absolute;
left: -9px;
top: 26px;
width: 16px;
height: 16px;
border-left: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: var(--paper-flat);
transform: rotate(45deg);
}
.article-body .brainde-speech-body p {
margin: 0;
color: #24302c;
font-weight: 700;
line-height: 1.78;
}
.article-body .brainde-decision-box {
border-top-color: var(--gold);
background: var(--paper-flat);
}
.article-body .brainde-quick-summary {
position: relative;
border-top-color: var(--teal);
padding: 22px 24px;
background: var(--paper-flat);
color: #18211f;
}
.article-body .brainde-quick-summary h3,
.article-body .brainde-quick-summary p,
.article-body .brainde-quick-summary li {
color: #25302c;
}
.article-body .brainde-quick-summary h3 {
margin-bottom: 10px;
font-size: 20px;
}
.article-body .brainde-quick-summary li {
border-color: transparent;
background: transparent;
}
.article-body .brainde-quick-summary ul li::before {
background: var(--gold);
}
.article-body .brainde-point-box,
.article-body .memo-box {
border-top-color: var(--teal);
}
.article-body .alert-box {
border-top-color: #b05b30;
background: #fff7ef;
}
.article-body .brainde-experience-box {
border-top-color: var(--green);
background: var(--paper-flat);
}
.article-body .brainde-step-card {
border-top-color: var(--blue);
background: var(--paper-flat);
}
.article-body .brainde-verdict-card {
border-top: 2px solid var(--gold);
border-bottom: 1px solid var(--line);
padding: 18px 22px;
background: var(--paper-flat);
}
.article-body .brainde-verdict-card p {
margin: 0;
color: #18211f;
font-size: 17px;
line-height: 1.68;
font-weight: 850;
}
.article-body .brainde-marker {
background: linear-gradient(transparent 58%, rgba(235, 169, 51, .34) 0);
font-weight: 850;
}
.article-body .brainde-related-link {
display: grid;
gap: 4px;
margin: 30px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 16px 0;
background: transparent;
}
.article-body .brainde-related-link small {
color: var(--teal);
font-size: 11px;
font-weight: 900;
}
.article-body .brainde-related-link a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #17211f;
font-size: 16px;
font-weight: 900;
text-decoration: underline;
text-decoration-color: rgba(11, 105, 105, .28);
text-underline-offset: 4px;
}
.article-body .is-style-brainde-gear,
.article-body .brainde-gear-card,
.after-content-widgets .widget {
margin: 30px 0;
border-top: 2px solid var(--gold);
border-bottom: 1px solid var(--line);
padding: 22px 24px;
background: var(--paper-flat);
}
.article-body .brainde-affiliate-card {
display: grid;
grid-template-columns: minmax(96px, 150px) minmax(0, 1fr);
gap: 18px;
align-items: center;
margin: 34px 0;
border: 1px solid var(--line);
padding: 18px;
background: var(--paper-flat);
}
.article-body .brainde-affiliate-card img {
width: 100%;
aspect-ratio: 1;
object-fit: contain;
background: #f4f1ea;
}
.article-body .brainde-affiliate-card h3 {
margin: 0 0 8px;
font-size: 20px;
line-height: 1.45;
}
.article-body .brainde-affiliate-card p {
margin: 0 0 12px;
font-size: 14px;
line-height: 1.75;
}
.article-body .brainde-affiliate-card a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
border-radius: 0;
padding: 8px 14px;
background: var(--gold);
color: #18130a;
font-size: 13px;
font-weight: 700;
}
.article-body .brainde-compare-table {
width: 100%;
overflow-x: auto;
margin: 34px 0;
border: 1px solid var(--line);
background: var(--paper-flat);
}
.article-body .brainde-compare-table table {
width: 100%;
min-width: 620px;
border-collapse: collapse;
}
.article-body .brainde-compare-table th,
.article-body .brainde-compare-table td {
border-bottom: 1px solid rgba(17, 20, 24, .08);
padding: 14px 16px;
text-align: left;
vertical-align: top;
}
.article-body .brainde-compare-table th {
background: rgba(7, 19, 29, .92);
color: #fff;
font-size: 13px;
}
.article-body .brainde-compare-table tr:last-child td {
border-bottom: 0;
}
.brainde-next-reads {
max-width: 760px;
margin: 54px 0 0;
border-top: 1px solid rgba(17, 20, 24, .1);
padding-top: 28px;
}
.brainde-next-reads__head {
margin-bottom: 18px;
}
.brainde-next-reads__head p {
margin: 0 0 6px;
color: var(--teal);
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
}
.brainde-next-reads__head h2 {
margin: 0;
font-size: 24px;
line-height: 1.35;
}
.brainde-series-nav {
display: grid;
gap: 12px;
margin-bottom: 18px;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 16px 0;
background: transparent;
}
.brainde-series-nav strong {
color: #17211f;
font-size: 15px;
}
.brainde-series-nav div {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.brainde-series-nav a {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 14px;
border: 1px solid var(--line);
background: transparent;
color: var(--teal);
font-size: 13px;
font-weight: 700;
}
.brainde-next-reads__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.brainde-next-card {
display: grid;
gap: 9px;
border: 1px solid var(--line);
padding: 10px;
background: var(--paper-flat);
color: #17211f;
box-shadow: var(--card-shadow);
transition: border-color .2s ease, box-shadow .2s ease;
}
.brainde-next-card:hover {
border-color: var(--teal);
box-shadow: var(--card-shadow-hover);
}
.brainde-next-card .brainde-safe-image {
aspect-ratio: 1.55;
}
.brainde-next-card span {
color: var(--teal);
font-size: 10px;
font-weight: 900;
}
.brainde-next-card strong {
font-size: 13px;
line-height: 1.55;
}
.article-body .is-style-brainde-note > :first-child,
.article-body .is-style-brainde-gear > :first-child,
.article-body .brainde-box > :first-child,
.article-body .brainde-quick-summary > :first-child,
.article-body .brainde-decision-box > :first-child,
.article-body .brainde-point-box > :first-child,
.article-body .brainde-experience-box > :first-child,
.article-body .brainde-gear-card > :first-child,
.article-body .brainde-step-card > :first-child,
.article-body .brainde-verdict-card > :first-child,
.article-body .information-box > :first-child,
.article-body .memo-box > :first-child,
.article-body .alert-box > :first-child {
margin-top: 0;
}
.article-body .is-style-brainde-note > :last-child,
.article-body .is-style-brainde-gear > :last-child,
.article-body .brainde-box > :last-child,
.article-body .brainde-quick-summary > :last-child,
.article-body .brainde-decision-box > :last-child,
.article-body .brainde-point-box > :last-child,
.article-body .brainde-experience-box > :last-child,
.article-body .brainde-gear-card > :last-child,
.article-body .brainde-step-card > :last-child,
.article-body .brainde-verdict-card > :last-child,
.article-body .information-box > :last-child,
.article-body .memo-box > :last-child,
.article-body .alert-box > :last-child {
margin-bottom: 0;
}
.article-body .wp-block-image.alignwide,
.article-body .alignwide {
width: min(100%, 980px);
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
.article-body .alignfull {
width: 100vw;
max-width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.wp-caption,
.gallery-caption {
color: var(--muted);
font-size: 13px;
line-height: 1.6;
}
.bypostauthor {
border-left: 3px solid var(--gold);
}
.page-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 32px 0;
font-weight: 900;
}
.page-links a,
.page-links span {
display: inline-flex;
min-width: 36px;
min-height: 36px;
align-items: center;
justify-content: center;
border: 1px solid var(--line);
padding: 4px 10px;
background: #fffdf7;
}
.widget-title {
margin: 0 0 12px;
font-size: 18px;
line-height: 1.35;
}
.sidebar-card .widget-title + * {
margin-top: 0;
}
.footer-widgets {
display: grid;
gap: 16px;
min-width: min(100%, 280px);
}
.footer-widgets .widget {
color: rgba(255, 255, 255, .8);
}
.comments-area {
margin-top: 46px;
border-top: 1px solid var(--line);
padding-top: 34px;
}
.comments-title {
margin: 0 0 22px;
font-size: 24px;
line-height: 1.35;
}
.comment-list {
display: grid;
gap: 18px;
margin: 0 0 30px;
padding: 0;
list-style: none;
}
.comment-body {
border: 1px solid var(--line);
padding: 18px;
background: rgba(255, 253, 247, .9);
}
.comment-respond {
margin-top: 28px;
border: 1px solid var(--line);
padding: 22px;
background: rgba(255, 253, 247, .92);
}
.comment-form input:not([type="submit"]):not([type="checkbox"]),
.comment-form textarea {
width: 100%;
border: 1px solid var(--line);
border-radius: 0;
padding: 11px 12px;
font: inherit;
}
.comment-form input[type="checkbox"] {
flex: 0 0 36px;
appearance: none;
width: 36px;
height: 36px;
border: 2px solid rgba(11, 105, 105, .32);
border-radius: 0;
margin-right: 8px;
background: #fff;
box-shadow: inset 0 0 0 8px #fff;
}
.comment-form input[type="checkbox"]:checked {
background: var(--teal);
border-color: var(--teal);
}
.comment-form-cookies-consent {
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.7;
}
.comment-form input[type="submit"] {
min-height: 44px;
border: 0;
border-radius: 0;
padding: 12px 18px;
background: var(--teal);
color: #fff;
font-weight: 700;
}
.check-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.check-list div {
padding: 18px 0 0;
background: transparent;
border-top: 1px solid var(--line);
}
.check-list span {
display: block;
color: rgba(123, 75, 23, .34);
font-size: 34px;
line-height: 1;
font-weight: 900;
}
.check-list p {
margin: 10px 0 0;
font-weight: 900;
line-height: 1.5;
}
.gear-card {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
padding: 28px;
background: var(--paper-flat);
}
.gear-card h2 {
margin: 0;
font-size: 28px;
}
.gear-card p:last-child {
margin-bottom: 0;
}
.gear-card a {
display: inline-flex;
min-width: 150px;
min-height: 48px;
align-items: center;
justify-content: center;
border-radius: 0;
background: var(--gold);
color: #16120a;
font-weight: 700;
}
.related-posts {
margin-top: 70px;
}
.related-grid {
grid-template-columns: 1fr 1fr;
}
.article-sidebar {
position: sticky;
top: 102px;
display: grid;
gap: 22px;
}
.author-card {
overflow: hidden;
background: var(--paper-flat);
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
}
.author-card img {
width: 100%;
aspect-ratio: 1.4;
object-fit: cover;
}
.author-card h2,
.author-card p {
margin-left: 22px;
margin-right: 22px;
}
.author-card h2 {
margin-top: 20px;
margin-bottom: 8px;
font-size: 22px;
}
.author-card p {
margin-top: 0;
margin-bottom: 24px;
color: var(--muted);
font-size: 14px;
line-height: 1.7;
}
.about-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.about-hero {
display: grid;
gap: 34px;
}
.about-hero-image {
overflow: hidden;
border: 1px solid var(--line);
}
.about-hero-image img {
width: 100%;
aspect-ratio: 2.05;
object-fit: cover;
}
.about-hero-copy {
max-width: 940px;
}
.about-hero-copy h1 {
margin: 0;
font-size: clamp(40px, 6vw, 72px);
line-height: 1.18;
}
.about-hero-copy p {
margin: 22px 0 0;
color: #303936;
font-size: 18px;
line-height: 1.95;
font-weight: 700;
}
.about-mission {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: 52px;
margin-top: 72px;
padding: 34px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
background: transparent;
}
.about-mission h2 {
margin: 0;
font-size: clamp(30px, 4.4vw, 52px);
line-height: 1.22;
}
.about-mission > p {
margin: 0;
color: #303936;
font-size: 17px;
line-height: 2;
font-weight: 700;
}
.about-values-section,
.about-profile,
.about-themes,
.about-value-grid,
.profile-card-large,
.theme-strip {
margin-top: 72px;
}
.about-value-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.about-value-grid article {
min-height: 230px;
padding: 24px 0 0;
background: transparent;
border-top: 2px solid var(--teal);
}
.about-value-grid span {
color: rgba(123, 75, 23, .28);
font-size: 42px;
line-height: 1;
font-weight: 900;
}
.about-value-grid h2,
.about-value-grid h3 {
margin: 18px 0 10px;
font-size: 23px;
line-height: 1.35;
}
.about-value-grid p {
margin: 0;
color: var(--muted);
font-size: 14px;
line-height: 1.75;
font-weight: 700;
}
.profile-card-large {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 34px;
align-items: center;
padding: 28px;
border: 1px solid var(--line);
background:
linear-gradient(135deg, rgba(7, 19, 29, .9), rgba(19, 39, 56, .88)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
color: #fff;
}
.profile-card-large img {
width: 100%;
aspect-ratio: 1.35;
object-fit: cover;
}
.profile-card-large h2 {
margin: 0;
font-size: clamp(34px, 5vw, 58px);
line-height: 1.1;
}
.profile-card-large p {
margin: 18px 0 0;
color: rgba(255, 255, 255, .82);
font-size: 17px;
line-height: 1.9;
font-weight: 700;
}
.profile-card-large ul {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.profile-card-large li {
border: 1px solid rgba(255, 255, 255, .16);
padding: 10px 12px;
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .88);
font-size: 13px;
font-weight: 700;
}
.profile-card-large .text-button {
color: #fff;
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .08);
}
.theme-strip {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 12px;
}
.theme-strip a {
min-height: 92px;
display: grid;
align-content: center;
gap: 8px;
justify-content: center;
text-align: center;
padding: 14px;
background: var(--paper-flat);
border: 1px solid var(--line);
color: var(--ink);
font-size: 14px;
font-weight: 700;
transition: border-color .2s ease;
}
.theme-strip a:hover {
border-color: var(--teal);
}
.theme-strip span {
color: var(--teal);
font-size: 11px;
letter-spacing: .06em;
}
.theme-strip strong {
font-size: 14px;
line-height: 1.5;
}
.series-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.series-hero {
min-height: 440px;
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 42px;
align-items: end;
padding: 42px;
color: #fff;
border: 1px solid var(--line);
background:
linear-gradient(90deg, rgba(7, 19, 29, .88), rgba(7, 19, 29, .42) 62%, rgba(7, 19, 29, .16)),
linear-gradient(180deg, rgba(7, 19, 29, .06), rgba(7, 19, 29, .62)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/hero.png) center / cover no-repeat;
}
.series-hero h1 {
max-width: 820px;
margin: 0;
font-size: clamp(42px, 6vw, 76px);
line-height: 1.13;
}
.series-hero p {
max-width: 760px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .88);
font-size: 17px;
line-height: 1.95;
font-weight: 700;
}
.series-hero-note {
padding: 24px;
background: rgba(255, 255, 255, .92);
color: var(--ink);
border: 1px solid var(--line);
}
.series-hero-note span,
.series-card-large span {
display: block;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.series-hero-note strong {
display: block;
margin-top: 14px;
font-size: 24px;
line-height: 1.45;
}
.series-feature {
display: grid;
grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
gap: 34px;
align-items: center;
margin-top: 54px;
padding: 28px 0;
border-top: 1px solid var(--line);
background: transparent;
}
.series-feature img {
width: 100%;
aspect-ratio: 1.45;
object-fit: cover;
}
.series-feature h2 {
margin: 0;
font-size: clamp(32px, 4.8vw, 58px);
line-height: 1.18;
}
.series-feature p {
margin: 18px 0 0;
color: #303936;
font-size: 17px;
line-height: 1.95;
font-weight: 700;
}
.series-shelf {
display: grid;
gap: 24px;
margin-top: 54px;
}
.series-card-large {
scroll-margin-top: 120px;
display: grid;
grid-template-columns: 340px minmax(0, 1fr);
gap: 28px;
align-items: stretch;
padding: 22px;
background: var(--paper-flat);
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
}
.series-card-large img {
width: 100%;
height: 100%;
min-height: 250px;
object-fit: cover;
}
.series-card-large > div {
padding: 8px 8px 8px 0;
}
.series-card-large h2 {
margin: 10px 0 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.22;
}
.series-card-large p {
margin: 16px 0 0;
color: #303936;
font-size: 16px;
line-height: 1.85;
font-weight: 700;
}
.series-card-large ol {
display: grid;
gap: 8px;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
.series-card-large li {
position: relative;
padding-left: 24px;
color: #3b463f;
font-size: 14px;
font-weight: 900;
}
.series-card-large li::before {
content: "";
position: absolute;
left: 0;
top: .72em;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--gold);
}
.archive-page {
width: min(var(--max), calc(100% - 40px));
margin: 0 auto;
padding: 52px 0 96px;
}
.archive-hero {
min-height: 390px;
display: grid;
grid-template-columns: minmax(0, 1fr) 390px;
gap: 42px;
align-items: end;
padding: 42px;
color: #fff;
border: 1px solid var(--line);
background:
linear-gradient(90deg, rgba(7, 19, 29, .9), rgba(7, 19, 29, .56) 58%, rgba(7, 19, 29, .22)),
linear-gradient(180deg, rgba(7, 19, 29, .08), rgba(7, 19, 29, .62)),
url(//brain-node.com/wp-content/themes/braine-node-theme/assets/images/desk_gear_category.png) center / cover no-repeat;
}
.archive-hero h1 {
max-width: 820px;
margin: 0;
font-size: clamp(42px, 6vw, 76px);
line-height: 1.13;
}
.archive-hero p {
max-width: 720px;
margin: 22px 0 0;
color: rgba(255, 255, 255, .88);
font-size: 17px;
line-height: 1.95;
font-weight: 700;
}
.search-panel {
display: grid;
gap: 12px;
padding: 22px;
background: var(--paper-flat);
border: 1px solid var(--line);
color: var(--ink);
}
.search-panel label {
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.search-panel div {
display: grid;
grid-template-columns: minmax(0, 1fr) 82px;
gap: 10px;
}
.search-panel input,
.search-panel button {
min-height: 48px;
border-radius: 0;
font: inherit;
font-weight: 700;
}
.search-panel input {
min-width: 0;
border: 1px solid rgba(17, 20, 24, .14);
padding: 0 14px;
background: rgba(255, 255, 255, .92);
color: var(--ink);
}
.search-panel button {
border: 0;
background: var(--gold);
color: #16120a;
cursor: pointer;
}
.archive-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 28px 0 36px;
}
.archive-filters a {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 8px 14px;
background: transparent;
border: 1px solid var(--line);
color: #303936;
font-size: 12px;
font-weight: 700;
}
.archive-filters .is-active {
background: var(--night);
color: #fff;
}
.archive-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 42px;
align-items: start;
}
.archive-main {
min-width: 0;
}
.archive-featured {
display: grid;
grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
gap: 26px;
align-items: center;
padding: 24px;
background: var(--paper-flat);
border: 1px solid var(--line);
}
.archive-featured img {
width: 100%;
aspect-ratio: 1.42;
object-fit: cover;
}
.archive-featured span,
.archive-row p {
display: block;
margin: 0 0 10px;
color: var(--teal);
font-size: 12px;
font-weight: 900;
}
.archive-featured h2 {
margin: 0;
font-size: clamp(30px, 4vw, 48px);
line-height: 1.25;
}
.archive-featured p {
margin: 16px 0 0;
color: #303936;
font-size: 16px;
line-height: 1.85;
font-weight: 700;
}
.archive-featured time,
.archive-row time {
display: block;
margin-top: 16px;
color: var(--muted);
font-size: 12px;
font-weight: 800;
}
.archive-list {
display: grid;
gap: 18px;
margin-top: 26px;
}
.archive-row {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 20px;
align-items: center;
padding: 16px;
background: var(--paper-flat);
border: 1px solid var(--line);
box-shadow: var(--card-shadow);
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.archive-row:hover {
border-color: var(--teal);
box-shadow: var(--card-shadow-hover);
transform: translateY(-2px);
}
.archive-row img {
width: 100%;
height: 100%;
}
.archive-row-image {
display: block;
aspect-ratio: 1.45;
overflow: hidden;
}
.archive-row h2 a,
.archive-featured h2 a,
.sidebar-card a {
display: inline-flex;
align-items: center;
min-height: 36px;
}
.archive-row h2 {
margin: 0;
font-size: 24px;
line-height: 1.4;
}
.archive-row span {
display: block;
margin-top: 10px;
color: #47514b;
font-size: 14px;
line-height: 1.7;
font-weight: 700;
}
.archive-sidebar {
position: sticky;
top: 102px;
display: grid;
gap: 22px;
}
.purpose-list {
display: grid;
gap: 14px;
}
.purpose-list a {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 12px;
align-items: center;
padding: 12px;
border-radius: 10px;
background: rgba(244, 241, 234, .72);
}
.purpose-list span {
color: rgba(123, 75, 23, .28);
font-size: 28px;
line-height: 1;
font-weight: 900;
}
.purpose-list strong {
font-size: 14px;
line-height: 1.45;
}
@media (max-width: 860px) {
.site-hero {
min-height: 660px;
}
.global-nav {
width: min(var(--max), calc(100% - 32px));
}
.nav-links {
display: none;
}
.nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 72px;
min-height: 44px;
border: 1px solid rgba(255, 255, 255, .45);
background: rgba(4, 8, 14, .2);
color: #fff;
border-radius: 0;
padding: 10px 14px;
font-weight: 700;
}
.global-nav.is-open .nav-links {
position: absolute;
top: calc(100% - 10px);
right: 0;
left: 0;
z-index: 20;
display: grid;
gap: 6px;
border: 1px solid rgba(255, 255, 255, .18);
padding: 14px;
background: var(--night);
}
.global-nav-compact.is-open .nav-links {
border-color: var(--line);
background: var(--paper);
}
.global-nav.is-open .nav-links a {
display: flex;
min-height: 46px;
padding: 0 12px;
background: rgba(255, 255, 255, .08);
font-size: 13px;
}
.global-nav-compact.is-open .nav-links a {
background: rgba(17, 20, 24, .05);
}
.nav-group {
display: grid;
gap: 6px;
}
.nav-group-label,
.nav-divider {
display: none;
}
.brand-name {
font-size: 22px;
}
.hero-content {
width: min(var(--max), calc(100% - 32px));
padding: 48px 0 96px;
}
.pickup-layout,
.series-section,
.about-panel {
grid-template-columns: 1fr;
}
.about-image {
aspect-ratio: 1.55;
}
.post-grid,
.series-list {
grid-template-columns: 1fr 1fr;
}
.post-grid-latest,
.post-grid-tab {
grid-template-columns: 1fr 1fr;
}
.section-pickup .post-card {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.section-pickup .post-image {
grid-row: auto;
aspect-ratio: 1.55;
}
.pickup-feature-card {
min-height: 280px;
}
.ranked-row {
grid-template-columns: 44px 96px minmax(0, 1fr);
gap: 16px;
padding: 20px 0;
}
.ranked-row-number {
font-size: 26px;
}
.ranked-row-body h3 {
font-size: 16px;
}
.category-hero,
.category-starter,
.category-layout,
.article-layout,
.about-mission,
.profile-card-large,
.series-hero,
.series-feature,
.series-card-large,
.archive-hero,
.archive-layout,
.archive-featured {
grid-template-columns: 1fr;
}
.category-hero-meta {
justify-content: flex-start;
}
.category-starter {
margin-top: -20px;
}
.category-sidebar {
grid-template-columns: 1fr 1fr;
}
.sidebar-dark {
grid-column: 1 / -1;
}
.article-sidebar {
position: static;
grid-template-columns: 1fr 1fr;
}
.archive-sidebar {
position: static;
grid-template-columns: 1fr 1fr;
}
.about-value-grid {
grid-template-columns: 1fr 1fr;
}
.theme-strip {
grid-template-columns: 1fr 1fr;
}
.author-card {
grid-column: 1 / -1;
}
}
@media (max-width: 620px) {
.site-hero {
min-height: min(640px, 92svh);
background-position: 60% center;
}
.hero-content h1 {
font-size: 48px;
}
.hero-copy br {
display: none;
}
.hero-copy {
max-width: 340px;
line-height: 1.85;
}
.button {
width: 100%;
}
.section {
width: min(var(--max), calc(100% - 28px));
padding: 54px 0;
}
.section-pickup {
padding: 48px 14px;
}
.post-grid,
.series-list,
.post-grid-latest,
.post-grid-tab {
grid-template-columns: 1fr;
}
.ranked-row {
grid-template-columns: 36px 84px minmax(0, 1fr);
}
.category-tab-label {
padding: 0 14px;
font-size: 11px;
}
.article-body .brainde-speech {
grid-template-columns: 1fr;
}
.article-body .brainde-speech-avatar {
width: 58px;
height: 58px;
}
.article-body .brainde-speech-name {
text-align: left;
}
.article-body .brainde-speech-body::before {
left: 22px;
top: -8px;
border: 0;
border-left: 1px solid rgba(11, 105, 105, .14);
border-top: 1px solid rgba(11, 105, 105, .14);
}
.site-footer {
display: grid;
gap: 26px;
padding-top: 42px;
padding-bottom: 42px;
}
.site-footer nav {
grid-template-columns: 1fr 1fr;
min-width: 0;
gap: 4px 20px;
}
.site-footer a {
min-height: 44px;
padding: 0 10px;
background: rgba(255, 255, 255, .06);
}
.category-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.article-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.breadcrumb {
margin-bottom: 20px;
font-size: 11px;
}
.breadcrumb a {
min-height: 36px;
}
.article-body {
margin-top: 34px;
max-width: 100%;
}
.article-header h1 {
font-size: 35px;
line-height: 1.22;
}
.brainde-title-small .article-header h1 {
font-size: 32px;
}
.article-header > p {
margin-top: 14px;
font-size: 16.5px;
line-height: 1.78;
}
.article-eyecatch {
margin-top: 22px;
aspect-ratio: 1.55;
}
.article-body h2 {
margin-top: 2em;
font-size: 25px;
line-height: 1.46;
}
.article-body h3 {
font-size: 20px;
line-height: 1.5;
}
.article-body p {
font-size: 16.5px;
line-height: 1.86;
}
.brainde-article-toc {
margin: 28px 0 34px;
}
.brainde-article-toc__summary {
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 52px;
padding: 0 14px;
}
.brainde-article-toc__summary em {
display: none;
}
.brainde-article-toc__item a {
grid-template-columns: 28px minmax(0, 1fr);
padding: 10px;
font-size: 13.5px;
}
.article-body .is-style-brainde-note,
.article-body .brainde-box,
.article-body .brainde-quick-summary,
.article-body .brainde-decision-box,
.article-body .brainde-point-box,
.article-body .brainde-experience-box,
.article-body .brainde-step-card,
.article-body .brainde-verdict-card,
.article-body .information-box,
.article-body .memo-box,
.article-body .alert-box,
.article-body .is-style-brainde-gear,
.article-body .brainde-gear-card,
.after-content-widgets .widget {
margin: 24px 0;
padding: 18px;
}
.article-body li {
font-size: 15.5px;
line-height: 1.72;
}
.article-body .brainde-card-list li {
padding: 10px 10px 10px 34px;
}
.article-body .brainde-compare-table {
margin-right: -14px;
margin-left: -14px;
border-radius: 0;
border-right: 0;
border-left: 0;
}
.article-body .brainde-compare-table table {
min-width: 560px;
}
.article-body .brainde-affiliate-card a {
min-height: 44px;
width: 100%;
}
.brainde-next-reads {
margin-top: 42px;
padding-top: 24px;
}
.brainde-next-reads__grid {
grid-template-columns: 1fr;
}
.brainde-next-card {
grid-template-columns: 1fr;
}
.about-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.series-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.archive-page {
width: min(var(--max), calc(100% - 28px));
padding-top: 32px;
}
.category-hero {
min-height: 440px;
padding: 26px;
}
.category-hero h1 {
font-size: 48px;
}
.category-starter {
gap: 16px;
margin: 0 0 30px;
padding: 16px 0;
}
.category-starter__grid {
grid-template-columns: 1fr;
}
.category-starter-card {
grid-template-columns: 104px minmax(0, 1fr);
align-items: center;
}
.category-starter-card .brainde-safe-image {
aspect-ratio: 1.25;
}
.article-grid,
.category-sidebar,
.article-sidebar,
.archive-sidebar,
.archive-row,
.check-list,
.gear-card,
.related-grid,
.about-value-grid,
.theme-strip {
grid-template-columns: 1fr;
}
.about-hero-image img {
aspect-ratio: 1.25;
}
.profile-card-large,
.series-hero,
.archive-hero,
.archive-featured {
padding: 24px;
}
.about-mission,
.series-feature {
padding: 24px 0;
}
.series-card-large {
padding: 18px;
}
.search-panel div {
grid-template-columns: 1fr;
}
.archive-row {
padding: 14px;
}
.archive-row-image {
aspect-ratio: 1.55;
}
.archive-row h2 {
font-size: 21px;
line-height: 1.45;
}
.archive-row h2 a,
.archive-featured h2 a,
.sidebar-card a {
min-height: 44px;
}
.archive-filters {
flex-wrap: nowrap;
overflow-x: auto;
margin-right: -14px;
margin-left: -14px;
padding: 0 14px 6px;
scroll-snap-type: x proximity;
}
.archive-filters a {
flex: 0 0 auto;
scroll-snap-align: start;
}
.article-body .brainde-affiliate-card {
grid-template-columns: 1fr;
}
.featured-category-card {
min-height: 460px;
}
.featured-category-card > div {
padding: 24px;
}
}