.editorial-main {
  --paper:#f1e7d3;
  --ink:#252a2b;
  --red:#c74b33;
  --muted-ink:#665f53;
  --rule:rgba(36,44,46,.22);
  min-height:calc(100svh - 147px);
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',Arial,sans-serif;
}
.editorial-main h1,.editorial-main h2 { font-family:'Space Grotesk',sans-serif; }
.editorial-main p { color:inherit; }
.red-dot { color:var(--red); }
.jp-translation { cursor:help; outline-offset:5px; }
.jp-translation::after {
  content:attr(data-translation);
  position:absolute;
  z-index:50;
  top:50%;
  right:calc(100% + 12px);
  transform:translateY(calc(-50% + 5px));
  writing-mode:horizontal-tb;
  white-space:nowrap;
  padding:8px 11px;
  border:1px solid rgba(36,44,46,.22);
  border-radius:5px;
  background:#f1e7d3;
  color:#252a2b;
  box-shadow:0 7px 18px rgba(9,24,30,.18);
  font:500 12px/1.35 'DM Sans',Arial,sans-serif;
  letter-spacing:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility .15s;
}
.jp-translation:hover::after,.jp-translation:focus::after { opacity:1; visibility:visible; transform:translateY(-50%); }
@media(prefers-reduced-motion:reduce) { .jp-translation::after { transition:none; } }

/* Projects: a printed blueprint beside the headline. */
html[data-page="projects"] body { background:#14242d; color:#f1e7d3; }
html[data-page="projects"] .topbar,
html[data-page="projects"] .mobile-menu {
  background:rgba(20,36,45,.96);
  color:#f1e7d3;
  border-color:rgba(241,231,211,.18);
}
html[data-page="projects"] .topbar nav a:hover,
html[data-page="projects"] .topbar nav a.active { color:#f3c76c; }
html[data-page="projects"] #menu-toggle { color:#f1e7d3; }
html[data-page="projects"] .site-footer {
  color:#d8cfbe;
  border-top-color:rgba(241,231,211,.18);
}
html[data-page="projects"] .site-footer a:hover { color:#f3c76c; }
.construction-page { background:#14242d; color:#f1e7d3; }
.construction-layout {
  display:grid;
  grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);
  align-items:center;
  gap:4vw;
  min-height:calc(100svh - 205px);
  padding:76px 7vw 56px;
  overflow:hidden;
}
.construction-copy { position:relative; z-index:2; }
.construction-copy h1 {
  margin:0 0 30px;
  font-size:clamp(68px,7.2vw,116px);
  font-weight:700;
  letter-spacing:-.085em;
  line-height:.95;
}
.construction-copy h1 em {
  display:inline-block;
  margin-top:11px;
  color:#f3c76c;
  font-size:.72em;
  font-style:normal;
  letter-spacing:-.078em;
}
.construction-summary {
  max-width:535px;
  color:#e9dfcc!important;
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.6;
}
.editorial-link {
  display:inline-flex;
  align-items:center;
  gap:25px;
  margin-top:40px;
  padding:13px 0;
  border-bottom:1px solid #f1e7d354;
  font-size:14px;
  font-weight:600;
}
.editorial-link span { font-size:20px; line-height:1; transition:transform .2s; }
.editorial-link:hover span { transform:translate(3px,-3px); }
.construction-art { position:relative; height:min(43vw,560px); min-height:390px; }
.construction-sun {
  position:absolute;
  width:78%;
  aspect-ratio:1;
  border-radius:50%;
  background:#c44934;
  top:1%; right:2%;
}
.construction-board {
  position:absolute;
  width:75%; height:68%;
  top:18%; left:4%;
  overflow:hidden;
  background:#1d3541;
  color:#e8dfc8;
  border:10px solid #eee5d2;
  box-shadow:18px 22px 1px #172b3540;
  transform:rotate(-7deg);
}
.board-grid {
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:linear-gradient(#e8dfc826 1px,transparent 1px),linear-gradient(90deg,#e8dfc826 1px,transparent 1px);
  background-size:27px 27px;
}
.board-line { position:absolute; border:2px solid #e8dfc8; opacity:.78; }
.board-line-a { left:20%; top:31%; width:49%; height:34%; border-right:0; border-bottom:0; border-radius:120px 0 0 0; }
.board-line-b { left:38%; top:35%; width:40%; height:32%; border-left:0; border-top:0; border-radius:0 0 100px 0; }
.board-node { position:absolute; z-index:1; width:23px; height:23px; border:3px solid #e8dfc8; border-radius:50%; background:#1d3541; }
.board-node-a { left:18%; top:60%; }
.board-node-b { left:50%; top:28%; background:#e8dfc8; }
.board-node-c { left:75%; top:62%; }
.construction-vertical { position:absolute; top:8%; right:-3%; writing-mode:vertical-rl; letter-spacing:.35em; color:#f1e7d3; font-size:12px; }

/* Blog: one entry, with room for more later. */
.blog-intro {
  position:relative;
  min-height:395px;
  display:flex;
  align-items:center;
  padding:70px 7vw 60px;
  overflow:hidden;
  background:#e8e1d1;
}
.blog-intro::after {
  content:'';
  position:absolute;
  width:min(42vw,480px);
  aspect-ratio:1;
  right:7vw;
  top:8%;
  border-radius:50%;
  background:#c44934;
}
.blog-intro>div { position:relative; z-index:1; }
.blog-intro h1 { margin:0; font-size:clamp(86px,10vw,150px); line-height:.88; letter-spacing:-.085em; }
.blog-vertical { position:absolute; z-index:2; right:3vw; top:22%; writing-mode:vertical-rl; letter-spacing:.35em; font-size:12px; }
.blog-index { padding:74px 7vw 100px; }
.blog-entry {
  display:grid;
  grid-template-columns:minmax(0,1fr) 64px;
  gap:35px;
  align-items:center;
  min-height:220px;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  transition:padding .25s,background .25s;
}
.blog-entry:hover { padding-inline:18px; background:#e8e1d1; }
.entry-copy { display:flex; flex-direction:column; align-items:flex-start; }
.entry-copy strong { font:700 clamp(40px,5vw,70px)/1 'Space Grotesk',sans-serif; letter-spacing:-.07em; }
.entry-arrow { display:grid; place-items:center; width:54px; height:54px; border:1px solid var(--rule); font-size:30px; transition:background .25s,color .25s; }
.blog-entry:hover .entry-arrow { background:var(--ink); color:var(--paper); }

/* The first note keeps the same ink, sun, and generous margins. */
.hello-article { padding:36px 7vw 100px; }
.article-return { display:inline-flex; gap:12px; align-items:center; padding:12px 0; font-size:13px; color:var(--muted-ink); }
.article-return:hover { color:var(--red); }
.hello-header {
  position:relative;
  display:flex;
  align-items:center;
  min-height:440px;
  margin-top:22px;
  padding:65px 7%;
  overflow:hidden;
  background:#14242d;
  color:#f1e7d3;
}
.hello-title { position:relative; z-index:2; }
.hello-header h1 { margin:0; font-size:clamp(82px,11.2vw,170px); font-weight:700; letter-spacing:-.095em; line-height:.82; }
.hello-header h1 em { color:#f3c76c; font-style:normal; }
.hello-art { position:absolute; inset:0; }
.hello-sun { position:absolute; right:8%; top:8%; width:min(35vw,460px); aspect-ratio:1; border-radius:50%; background:#c44934; }
.hello-glyph { position:absolute; right:14%; top:2%; font:700 clamp(320px,40vw,610px)/1 'Space Grotesk',sans-serif; color:#f1e7d3; transform:rotate(9deg); }
.hello-vertical { position:absolute; right:3%; top:15%; writing-mode:vertical-rl; font-size:12px; letter-spacing:.25em; }
.hello-story { max-width:850px; margin:0 auto; padding:85px 0 65px; }
.hello-story p { margin:0 0 28px; font-size:clamp(19px,2vw,26px); line-height:1.68; letter-spacing:-.015em; }
.hello-story p:first-child::first-letter { float:left; margin:7px 10px -10px 0; color:var(--red); font:700 77px/.8 'Space Grotesk',sans-serif; }

@media(max-width:900px) {
  .construction-layout { grid-template-columns:1fr; gap:30px; padding-top:80px; }
  .construction-copy h1 { font-size:clamp(68px,10vw,100px); }
  .construction-art { width:min(100%,600px); height:440px; min-height:0; justify-self:center; }
  .construction-vertical { right:0; }
  .blog-intro::after { width:53vw; right:-5vw; }
}
@media(max-width:540px) {
  .editorial-main { min-height:calc(100svh - 135px); }
  .construction-layout { padding:74px 24px 30px; }
  .construction-copy h1 { font-size:clamp(59px,13.5vw,76px); margin-bottom:25px; }
  .construction-copy h1 em { font-size:.72em; }
  .construction-summary { font-size:16px; }
  .editorial-link { margin-top:24px; font-size:13px; gap:12px; }
  .construction-art { height:335px; }
  .construction-board { border-width:7px; width:80%; height:67%; left:2%; top:19%; }
  .board-node { width:17px; height:17px; border-width:2px; }
  .construction-vertical { font-size:10px; }
  .blog-intro { min-height:330px; padding:65px 24px 55px; }
  .blog-intro::after { width:70vw; right:-28vw; top:12%; }
  .blog-intro h1 { font-size:85px; }
  .blog-vertical { display:none; }
  .blog-index { padding:45px 24px 70px; }
  .blog-entry { grid-template-columns:minmax(0,1fr) 30px; gap:10px; min-height:185px; }
  .blog-entry:hover { padding-inline:6px; }
  .entry-copy strong { font-size:clamp(34px,9vw,48px); }
  .entry-arrow { width:30px; height:30px; font-size:19px; }
  .hello-article { padding:23px 24px 70px; }
  .hello-header { min-height:370px; margin-top:18px; padding:55px 25px; }
  .hello-header h1 { font-size:clamp(68px,17vw,100px); }
  .hello-sun { width:82vw; right:-36vw; top:15%; }
  .hello-glyph { right:-16%; top:20%; font-size:350px; opacity:.55; }
  .hello-vertical { right:8px; font-size:9px; }
  .hello-story { padding:52px 0 35px; }
  .hello-story p { font-size:17px; line-height:1.7; }
  .hello-story p:first-child::first-letter { font-size:61px; margin-top:6px; }
}