/*
Theme Name: Chiron
Theme URI: https://chiron.run-digital.com/
Author: Chiron Studio / Run-digital
Author URI: https://run-digital.com/
Description: 編集者がひとり、Webを編む個人スタジオ — Chiron WordPress theme. Stage / Marquee pattern.
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chiron
*/
/* ═══════════════════════════════════════════
CSS VARIABLES — image URLs & palette
═══════════════════════════════════════════ */
:root {
--img-mountain: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/mountain.jpg');
--img-cloud: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/cloud.jpg');
--img-night-sky: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/night-sky.jpg');
--img-sun: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/sun.jpg');
--img-tree: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/tree.jpg');
--img-desk: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/desk.jpg');
--img-analysis: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/analysis.jpg');
--img-phone: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/phone.jpg');
--img-ocean: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/ocean.jpg');
--img-whispering-woman: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/whispering-woman.jpg');
--img-buildings: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/buildings.jpg');
--img-sun2: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/sun2.jpg');
--img-bird: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/bird.jpg');
--img-flower: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/flower.jpg');
--img-lady: url('https://chiron.run-digital.com/wp-content/uploads/2026/05/lady.jpg');
--ink: #1a1a1a;
--paper: #ffffff;
--paper-warm: #fafaf6;
--cream: #f0e8d4;
--sand: #e8dcc8;
--terracotta: #c95538;
--accent: #b5703a;
/* Max width for content sections (Works / Services / Column) */
--content-max: 1280px;
}
/* ═══════════════════════════════════════════
RESET & BASE
═══════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
background: var(--paper); color: var(--ink);
font-feature-settings: "palt"; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
/* ═══════════════════════════════════════════
KEYFRAMES
═══════════════════════════════════════════ */
@keyframes spin-slow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(181,112,58,0.45), 0 0 24px rgba(181,112,58,0.25); }
50% { box-shadow: 0 0 0 16px rgba(181,112,58,0), 0 0 36px rgba(181,112,58,0.4); }
}
@keyframes twinkle {
0%, 100% { opacity: 0.35; transform: scale(0.7) rotate(0deg); }
50% { opacity: 1; transform: scale(1.15) rotate(180deg); }
}
@keyframes drift-1 {
0%, 100% { transform: translate(0,0) rotate(-5deg); }
50% { transform: translate(6px,-8px) rotate(-3deg); }
}
@keyframes drift-2 {
0%, 100% { transform: translate(0,0) rotate(8deg); }
50% { transform: translate(-5px,6px) rotate(11deg); }
}
@keyframes drift-3 {
0%, 100% { transform: translate(0,0) rotate(-3deg); }
50% { transform: translate(8px,4px) rotate(0deg); }
}
@keyframes drift-4 {
0%, 100% { transform: translate(0,0) rotate(5deg); }
50% { transform: translate(-6px,-5px) rotate(7deg); }
}
@keyframes scroll-x {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes bounce-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(8px); }
}
@keyframes wobble {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@keyframes float-y {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes bulb-blink {
0%, 100% { opacity: 1; box-shadow: 0 0 12px var(--accent), 0 0 24px rgba(181,112,58,0.6); }
50% { opacity: 0.35; box-shadow: 0 0 4px var(--accent); }
}
@keyframes scroll-x-rev {
from { transform: translateX(-50%); }
to { transform: translateX(0); }
}
@keyframes ken-burns {
0%, 100% { transform: scale(1) translate(0,0); }
50% { transform: scale(1.08) translate(-1%, -0.6%); }
}
@keyframes rise {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* ═══════════════════════════════════════════
SPARKLES
═══════════════════════════════════════════ */
.sparkle {
position: absolute;
pointer-events: none;
width: 18px; height: 18px;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain; background-repeat: no-repeat;
animation: twinkle 2.4s ease-in-out infinite;
z-index: 4;
}
.sparkle.sm { width: 12px; height: 12px; }
.sparkle.lg { width: 28px; height: 28px; }
.sparkle.white { background-image: url("data:image/svg+xml;utf8,"); }
.sparkle.d1 { animation-delay: 0s; }
.sparkle.d2 { animation-delay: 0.4s; }
.sparkle.d3 { animation-delay: 0.8s; }
.sparkle.d4 { animation-delay: 1.2s; }
.sparkle.d5 { animation-delay: 1.6s; }
/* ═══════════════════════════════════════════
REVEAL ANIMATIONS
═══════════════════════════════════════════ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
.reveal-r { opacity: 0; transform: translateX(40px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
.reveal-l { opacity: 0; transform: translateX(-40px); transition: opacity 0.9s ease-out, transform 0.9s ease-out; }
.reveal-s { opacity: 0; transform: scale(0.94); transition: opacity 1.1s ease-out, transform 1.1s ease-out; }
.reveal.in-view, .reveal-r.in-view, .reveal-l.in-view { opacity: 1; transform: translate(0,0); }
.reveal-s.in-view { opacity: 1; transform: scale(1); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.36s; }
/* ═══════════════════════════════════════════
SHARED UTILS
═══════════════════════════════════════════ */
.see-all-cta {
display: inline-flex; align-items: center; gap: 12px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.24em;
text-transform: uppercase; font-weight: 600;
color: var(--ink);
padding-bottom: 4px;
border-bottom: 1.5px solid var(--accent);
transition: gap 0.3s, color 0.2s;
}
.see-all-cta:hover { gap: 18px; color: var(--accent); }
.sec-head {
max-width: var(--content-max);
margin: 0 auto 36px;
padding: 100px 56px 0;
display: flex; justify-content: space-between; align-items: flex-end;
position: relative;
}
.sec-head .num {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
color: var(--accent);
text-transform: uppercase; font-weight: 600;
margin-bottom: 8px;
}
.sec-head .scr {
font-family: 'Italianno', cursive;
font-size: clamp(56px, 6vw, 88px);
font-weight: 400; line-height: 0.95;
}
.sec-head .meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.22em;
color: rgba(26,26,26,0.6);
text-transform: uppercase; font-weight: 500;
text-align: right; line-height: 1.8;
}
.sec-rule {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 56px;
height: 0.5px;
background-color: var(--ink);
background-clip: content-box;
}
.foot {
padding: 36px 56px;
display: flex; justify-content: space-between; align-items: center;
background: var(--paper);
border-top: 0.5px solid var(--ink);
}
.foot .b { font-family: 'Italianno', cursive; font-size: 44px; }
.foot small {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.22em;
color: rgba(26,26,26,0.55);
text-transform: uppercase; font-weight: 500;
}
.foot nav { display: flex; gap: 28px; }
.foot nav a {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.22em;
text-transform: uppercase; font-weight: 500;
color: rgba(26,26,26,0.75);
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s, color 0.2s;
}
.foot nav a:hover { color: var(--accent); border-color: var(--accent); }
/* ═══════════════════════════════════════════
SITE HEADER — common to all pages
Home page: transparent overlay on hero (white text, no bg)
Other pages: solid cream bar (dark text, subtle border)
═══════════════════════════════════════════ */
.site-header {
background: var(--paper-warm);
border-bottom: 0.5px solid rgba(26,26,26,0.1);
position: relative;
z-index: 50;
}
.site-header-inner {
padding: 28px 56px;
display: flex; justify-content: space-between; align-items: center;
color: var(--ink);
}
.site-header-inner .b {
font-family: 'Italianno', cursive;
font-size: 38px; line-height: 0.9;
font-weight: 400; letter-spacing: 0;
color: inherit;
transition: color 0.25s;
}
.site-header-inner .b:hover { color: var(--accent); }
.site-nav {
display: flex; gap: 28px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 500;
}
.site-nav a {
color: inherit; opacity: 0.78;
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s, opacity 0.2s;
}
.site-nav a:hover {
color: var(--accent);
border-color: var(--accent);
opacity: 1;
}
.site-nav a.is-active {
color: var(--accent);
border-color: var(--accent);
opacity: 1;
}
/* Home page: header overlays the hero (transparent, white text) */
body.home .site-header {
position: absolute;
top: 0; left: 0; right: 0;
background: transparent;
border-bottom: none;
}
body.home .site-header-inner { color: #fff; }
body.home .site-nav a { color: rgba(255,255,255,0.85); }
body.home .site-nav a:hover { color: var(--accent); border-color: var(--accent); }
/* ═══════════════════════════════════════════
HERO — Cinema mountain
═══════════════════════════════════════════ */
.hero {
position: relative;
height: 100vh; min-height: 720px;
overflow: hidden;
}
.hero-bg {
position: absolute; inset: 0;
background-image: var(--img-mountain);
background-size: cover; background-position: center;
transition: transform 12s ease-out;
}
.hero.in-view .hero-bg { transform: scale(1.08); }
.hero-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%);
}
.hero-content {
position: relative; z-index: 3;
height: 100%; padding: 120px 56px 56px;
display: flex; flex-direction: column; justify-content: space-between;
color: #fff;
}
.hero-top {
display: flex; justify-content: space-between; align-items: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 500;
}
.hero-top .b {
font-family: 'Italianno', cursive;
font-size: 38px; line-height: 0.9;
letter-spacing: 0; text-transform: none;
}
.hero-top nav { display: flex; gap: 28px; }
.hero-top nav a {
color: rgba(255,255,255,0.85);
padding-bottom: 3px;
border-bottom: 1px solid transparent;
transition: color 0.2s, border-color 0.2s;
}
.hero-top nav a:hover { color: var(--accent); border-color: var(--accent); }
.hero-mid { display: flex; flex-direction: column; }
.hero-pn {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
margin-bottom: 18px;
display: flex; align-items: center; gap: 14px;
}
.hero-pn::before { content: ''; width: 56px; height: 1px; background: var(--accent); }
.hero-h {
font-family: 'Italianno', cursive;
font-size: clamp(180px, 22vw, 360px);
font-weight: 400; line-height: 0.85;
letter-spacing: -0.01em;
margin-bottom: 16px;
text-shadow: 0 4px 32px rgba(0,0,0,0.3);
}
.hero-sub {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(20px, 2.4vw, 32px);
font-weight: 700; line-height: 1.35;
letter-spacing: -0.02em;
max-width: 760px;
}
.hero-sub em {
font-family: 'Italianno', cursive;
font-style: normal; font-size: 1.35em;
font-weight: 400; color: var(--accent);
}
.hero-bot { display: flex; justify-content: space-between; align-items: flex-end; }
.hero-booking {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 16px;
background: rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 0.5px solid rgba(255,255,255,0.3);
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.24em;
text-transform: uppercase; font-weight: 600;
}
.hero-booking::before {
content: ''; width: 8px; height: 8px;
background: var(--accent); border-radius: 50%;
animation: pulse 2.4s ease-in-out infinite;
}
.hero-cta {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px; letter-spacing: 0.28em;
text-transform: uppercase; font-weight: 600;
padding-bottom: 6px;
border-bottom: 1.5px solid var(--accent);
display: inline-flex; align-items: center; gap: 8px;
}
.hero-cta::after { content: '↓'; animation: bounce-y 2.4s ease-in-out infinite; }
/* ═══════════════════════════════════════════
WORKS — Asymmetric Gallery Wall
═══════════════════════════════════════════ */
.works-b {
padding: 60px 0 80px;
background: var(--paper);
position: relative;
border-bottom: 0.5px solid rgba(26,26,26,0.15);
overflow: hidden;
}
.works-b-bg {
position: absolute;
top: 40px; left: 30px;
font-family: 'Italianno', cursive;
font-size: clamp(180px, 22vw, 380px);
color: rgba(181,112,58,0.05);
line-height: 0.85;
pointer-events: none; user-select: none;
z-index: 0;
}
.works-b-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
grid-template-rows: auto auto;
gap: 28px;
position: relative; z-index: 2;
max-width: var(--content-max);
margin: 0 auto 36px;
padding: 0 56px;
}
.work-b-1 { grid-row: 1 / 3; position: relative; }
.work-b { display: flex; flex-direction: column; cursor: pointer; }
.work-b .ph-frame {
position: relative;
overflow: hidden;
background: var(--paper-warm);
padding: 14px;
box-shadow: 0 12px 36px -6px rgba(0,0,0,0.12),
0 2px 6px rgba(0,0,0,0.06);
transition: transform 0.6s, box-shadow 0.4s;
}
.work-b:hover .ph-frame {
transform: translateY(-8px);
box-shadow: 0 24px 56px -10px rgba(0,0,0,0.2),
0 4px 12px rgba(0,0,0,0.1);
}
.work-b-1 .ph-frame { aspect-ratio: 4/5; }
.work-b-2 .ph-frame, .work-b-3 .ph-frame { aspect-ratio: 16/10; }
.work-b .ph-frame .ph {
width: 100%; height: 100%;
background-size: cover; background-position: center;
transition: transform 1.6s;
}
.work-b:hover .ph-frame .ph { transform: scale(1.04); }
.work-b .ph-num {
position: absolute;
top: 20px; left: 20px;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--ink);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 22px; font-style: italic;
font-weight: 400;
letter-spacing: -0.02em;
z-index: 3;
transition: transform 0.6s;
}
.work-b:hover .ph-num { animation: spin-slow 4s linear infinite; }
.work-b .cap-below {
padding: 18px 4px 0;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 18px;
align-items: baseline;
}
.work-b .cap-below .cap-left {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.32em;
color: var(--accent); text-transform: uppercase;
font-weight: 600;
}
.work-b .cap-below .cap-mid { display: flex; flex-direction: column; gap: 4px; }
.work-b .cap-below .cap-mid .scr {
font-family: 'Italianno', cursive;
font-size: 44px; line-height: 0.85;
}
.work-b .cap-below .cap-mid .ja {
font-family: 'Shippori Mincho B1', serif;
font-size: 14px; font-weight: 700;
letter-spacing: -0.015em;
color: rgba(26,26,26,0.8);
}
.work-b .cap-below .cap-right {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.24em;
color: rgba(26,26,26,0.55);
text-transform: uppercase; font-weight: 500;
text-align: right;
line-height: 1.7;
}
.work-b .cap-below .cap-right b {
display: block;
color: rgba(26,26,26,0.4);
font-size: 9px;
margin-bottom: 2px;
}
.works-b-cta-row {
text-align: right;
position: relative; z-index: 5;
max-width: var(--content-max);
margin: 0 auto;
padding: 0 56px;
}
/* ═══════════════════════════════════════════
SERVICES — Wax seal cards
═══════════════════════════════════════════ */
.services {
background: var(--paper);
padding: 0 0 96px;
position: relative;
overflow: hidden;
border-bottom: 0.5px solid rgba(26,26,26,0.15);
}
.services-bg-ghost {
position: absolute;
top: 25%; right: -120px;
font-family: 'Italianno', cursive;
font-size: clamp(240px, 32vw, 580px);
color: rgba(181,112,58,0.04);
line-height: 0.85;
pointer-events: none; user-select: none;
z-index: 0;
transform: rotate(-8deg);
}
.svc-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: var(--content-max);
margin: 0 auto;
padding: 64px 56px 36px;
position: relative; z-index: 2;
}
.svc-card {
position: relative;
padding: 32px 28px 28px;
display: flex; flex-direction: column;
min-height: 560px;
transition: transform 0.6s cubic-bezier(.2,.7,.2,1), box-shadow 0.4s;
cursor: pointer;
overflow: hidden;
}
.svc-card.c1 { background: var(--terracotta); color: #fff; transform: rotate(-1.5deg); }
.svc-card.c2 { background: var(--cream); transform: rotate(1.5deg) translateY(-10px); box-shadow: 0 30px 60px -10px rgba(0,0,0,0.18); }
.svc-card.c3 { background: var(--ink); color: #fff; transform: rotate(-1deg); }
.svc-card:hover {
transform: rotate(0) translateY(-14px) scale(1.02);
box-shadow: 0 40px 80px -10px rgba(0,0,0,0.28);
z-index: 5;
}
.svc-card .ghost {
position: absolute;
top: -40px; left: -20px;
font-family: 'Italianno', cursive;
font-size: clamp(180px, 22vw, 320px);
line-height: 0.85;
opacity: 0.18;
pointer-events: none; z-index: 1;
transform: rotate(-6deg);
}
.svc-card.c1 .ghost { color: rgba(255,255,255,0.4); }
.svc-card.c2 .ghost { color: rgba(26,26,26,0.18); }
.svc-card.c3 .ghost { color: rgba(255,255,255,0.18); }
.seal {
position: relative;
width: 132px; height: 132px;
margin: 0 auto 20px;
z-index: 3;
}
.seal-ring {
position: absolute; inset: 0;
animation: spin-slow 18s linear infinite;
pointer-events: none;
}
.svc-card:hover .seal-ring { animation-duration: 6s; }
.seal-ring text {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase; font-weight: 600;
}
.svc-card.c1 .seal-ring text { fill: rgba(255,255,255,0.92); }
.svc-card.c2 .seal-ring text { fill: var(--terracotta); }
.svc-card.c3 .seal-ring text { fill: var(--accent); }
.seal-inner {
position: absolute;
top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 78px; height: 78px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-size: 44px; font-style: italic;
font-weight: 400;
border: 1.5px solid currentColor;
letter-spacing: -0.02em; z-index: 2;
}
.svc-card.c1 .seal-inner { background: rgba(255,255,255,0.12); color: #fff; }
.svc-card.c2 .seal-inner { background: rgba(201,85,56,0.08); color: var(--terracotta); border-color: var(--terracotta); }
.svc-card.c3 .seal-inner { background: rgba(181,112,58,0.12); color: var(--accent); border-color: var(--accent); }
.svc-card .lbl-tag {
text-align: center;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
margin-bottom: 8px;
z-index: 3; position: relative;
}
.svc-card.c1 .lbl-tag { color: rgba(255,255,255,0.85); }
.svc-card.c2 .lbl-tag { color: var(--terracotta); }
.svc-card.c3 .lbl-tag { color: var(--accent); }
.svc-card .scr {
text-align: center;
font-family: 'Italianno', cursive;
font-size: clamp(60px, 7vw, 90px);
line-height: 0.85; font-weight: 400;
margin-bottom: 10px;
z-index: 3; position: relative;
}
.svc-card .nm {
text-align: center;
font-family: 'Shippori Mincho B1', serif;
font-size: 19px; font-weight: 700;
letter-spacing: -0.015em;
margin-bottom: 18px;
z-index: 3; position: relative;
}
.svc-card .ds {
font-family: 'Shippori Mincho B1', serif;
font-size: 13px; line-height: 1.85;
font-weight: 500;
margin-bottom: auto;
z-index: 3; position: relative;
}
.svc-card.c1 .ds { color: rgba(255,255,255,0.88); }
.svc-card.c2 .ds { color: rgba(26,26,26,0.82); }
.svc-card.c3 .ds { color: rgba(255,255,255,0.85); }
.svc-card .foot-row {
display: flex; justify-content: space-between; align-items: flex-end;
padding-top: 16px;
margin-top: 22px;
border-top: 0.5px solid currentColor;
z-index: 3; position: relative;
}
.svc-card .pr {
font-family: 'Cormorant Garamond', serif;
font-size: 26px; font-style: italic;
font-weight: 400; line-height: 1;
letter-spacing: -0.02em;
}
.svc-card .ut {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.2em;
text-transform: uppercase; font-weight: 500;
margin-top: 3px; opacity: 0.65;
}
.svc-card .cta-mini {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.24em;
text-transform: uppercase; font-weight: 600;
transition: gap 0.3s;
display: inline-flex; align-items: center; gap: 6px;
}
.svc-card:hover .cta-mini { gap: 12px; }
.svc-cta-row {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 56px;
text-align: right;
position: relative; z-index: 5;
}
/* ═══════════════════════════════════════════
ABOUT — Portrait + floating labels
═══════════════════════════════════════════ */
.about {
background: var(--paper-warm);
padding: 96px 56px 96px;
position: relative;
overflow: hidden;
border-bottom: 0.5px solid rgba(26,26,26,0.15);
}
.about-bg-ghost {
position: absolute;
bottom: -60px; left: 50%; transform: translateX(-50%);
font-family: 'Italianno', cursive;
font-size: clamp(240px, 32vw, 560px);
color: rgba(181,112,58,0.05);
line-height: 0.85;
pointer-events: none; user-select: none;
white-space: nowrap; z-index: 0;
}
.about-stage {
display: grid; grid-template-columns: 1fr 1.2fr;
gap: 64px;
align-items: center;
position: relative; z-index: 2;
}
.about-portrait-stage {
position: relative;
width: 100%; max-width: 460px;
aspect-ratio: 1;
margin: 0 auto;
}
.about-bg-photo {
position: absolute;
width: 140px; height: 180px;
background-size: cover; background-position: center;
box-shadow: 0 20px 40px -10px rgba(0,0,0,0.2);
z-index: 2;
transition: transform 0.5s;
}
.about-bg-photo.bp1 {
top: -20px; left: -36px;
transform: rotate(-8deg);
animation: drift-1 8s ease-in-out infinite;
}
.about-bg-photo.bp2 {
bottom: -20px; right: -36px;
transform: rotate(6deg);
animation: drift-2 9s ease-in-out infinite;
}
.about-bg-photo.bp3 {
top: 40%; right: -52px;
width: 110px; height: 140px;
transform: rotate(10deg);
animation: drift-3 7.5s ease-in-out infinite;
}
.about-portrait-circle {
position: absolute;
inset: 40px;
border-radius: 50%;
overflow: hidden;
z-index: 5;
box-shadow: 0 30px 60px -10px rgba(0,0,0,0.25);
}
.about-portrait-circle .ph {
position: absolute; inset: 0;
background-image: var(--img-whispering-woman);
background-size: cover; background-position: center;
transition: transform 8s ease-out;
}
.about.in-view .about-portrait-circle .ph { transform: scale(1.06); }
.about-ring {
position: absolute;
inset: 0; z-index: 6;
pointer-events: none;
animation: spin-slow 22s linear infinite;
}
.about-ring text {
font-family: 'IBM Plex Mono', monospace;
font-size: 14px;
letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
fill: var(--ink);
}
.float-lbl {
position: absolute;
font-family: 'Caveat', cursive;
font-weight: 700;
font-size: 32px;
line-height: 0.9;
color: var(--ink);
z-index: 7;
white-space: nowrap; pointer-events: none;
}
.float-lbl.fl1 { top: -8px; right: 12%; animation: drift-1 6.5s ease-in-out infinite; }
.float-lbl.fl2 { bottom: 0; left: 10%; animation: drift-2 7s ease-in-out infinite; }
.float-lbl.fl3 { top: 18%; left: -32px; animation: drift-3 5.5s ease-in-out infinite; color: var(--accent); }
.float-lbl.fl4 {
bottom: 22%; right: -16px;
animation: drift-4 6s ease-in-out infinite;
font-family: 'Italianno', cursive;
font-size: 48px;
color: var(--terracotta);
}
.float-lbl.vert {
writing-mode: vertical-rl;
font-family: 'Shippori Mincho B1', serif;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2em;
top: 14%; right: -56px;
animation: float-y 5s ease-in-out infinite;
color: rgba(26,26,26,0.7);
}
.about-text { position: relative; }
.about-text .lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
color: var(--accent); text-transform: uppercase;
font-weight: 600; margin-bottom: 18px;
display: inline-flex; align-items: center; gap: 14px;
}
.about-text .lbl::before { content: ''; width: 32px; height: 1px; background: var(--accent); }
.about-text h2 {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(32px, 4vw, 56px);
font-weight: 700; line-height: 1.15;
letter-spacing: -0.025em;
margin-bottom: 28px;
position: relative;
}
.about-text h2 em {
font-family: 'Italianno', cursive;
font-style: normal; font-size: 1.4em;
font-weight: 400; color: var(--accent);
position: relative; display: inline-block;
}
.about-text h2 em::after {
content: ''; position: absolute;
bottom: 8%; left: -2%; right: -2%;
height: 8px;
background: rgba(181,112,58,0.22);
z-index: -1;
}
.about-text .body {
font-family: 'Lora', serif;
font-size: 15px; line-height: 1.95;
color: rgba(26,26,26,0.85);
margin-bottom: 28px;
max-width: 540px;
}
.about-text .body em {
font-style: italic; font-weight: 500;
color: var(--accent);
}
.about-text .sig-row {
display: flex; align-items: flex-end; gap: 24px;
margin-bottom: 24px;
}
.about-text .sig {
font-family: 'Italianno', cursive;
font-size: 72px; line-height: 0.85;
}
.about-text .sig-info {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.22em;
color: rgba(26,26,26,0.65);
text-transform: uppercase; font-weight: 500;
line-height: 1.7;
padding-bottom: 14px;
}
.about-text .sig-info b {
display: block;
color: var(--accent); font-weight: 500;
font-size: 9px; margin-bottom: 3px;
}
/* ═══════════════════════════════════════════
COLUMN — Marquee + horizontal article rows
═══════════════════════════════════════════ */
.column-b {
padding: 0 0 80px;
background: var(--paper);
position: relative;
overflow: hidden;
border-bottom: 0.5px solid rgba(26,26,26,0.15);
}
.column-b-marquee {
background: var(--ink);
color: #fff;
padding: 16px 0;
overflow: hidden;
white-space: nowrap;
border-top: 1px solid var(--accent);
border-bottom: 1px solid var(--accent);
}
.column-b-marquee .track {
display: inline-block;
animation: scroll-x 48s linear infinite;
will-change: transform;
}
.column-b-marquee .track span {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px; letter-spacing: 0.32em;
margin: 0 18px;
text-transform: uppercase; font-weight: 500;
color: rgba(255,255,255,0.9);
}
.column-b-marquee .track i {
font-style: normal;
color: var(--accent);
margin: 0 8px;
font-family: 'Italianno', cursive;
font-size: 22px;
letter-spacing: 0;
text-transform: none;
vertical-align: middle;
}
.column-b-list {
max-width: var(--content-max);
margin: 0 auto;
padding: 48px 56px 36px;
display: flex; flex-direction: column;
gap: 0;
}
.col-b {
display: grid;
grid-template-columns: 240px 1fr auto;
gap: 36px;
padding: 32px 0;
border-bottom: 0.5px solid rgba(26,26,26,0.18);
cursor: pointer;
position: relative;
transition: padding 0.4s;
}
.col-b:first-child { border-top: 0.5px solid rgba(26,26,26,0.18); }
.col-b:hover { padding-left: 16px; }
.col-b:hover::before {
content: ''; position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px; background: var(--accent);
}
.col-b .ph {
width: 100%; aspect-ratio: 4/3;
background-size: cover; background-position: center;
filter: brightness(0.96);
transition: filter 0.4s, transform 1.4s;
}
.col-b .ph-wrap { overflow: hidden; }
.col-b:hover .ph { filter: brightness(1); transform: scale(1.04); }
.col-b .body { display: flex; flex-direction: column; gap: 12px; align-self: center; }
.col-b .top-row { display: flex; align-items: center; gap: 20px; }
.col-b .cat {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.32em;
color: var(--accent); text-transform: uppercase;
font-weight: 600;
}
.col-b .dt, .col-b .read {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.22em;
color: rgba(26,26,26,0.5);
text-transform: uppercase; font-weight: 500;
}
.col-b .ttl {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 700; line-height: 1.4;
letter-spacing: -0.02em;
}
.col-b .excerpt {
font-family: 'Lora', serif;
font-size: 13.5px; line-height: 1.85;
color: rgba(26,26,26,0.75);
}
.col-b .arrow {
align-self: center;
font-family: 'Italianno', cursive;
font-size: 64px;
line-height: 0.85;
color: var(--accent);
transition: transform 0.4s;
}
.col-b:hover .arrow { transform: translateX(12px); }
.column-b-cta-row {
max-width: var(--content-max);
margin: 0 auto;
padding: 0 56px;
text-align: right;
position: relative; z-index: 5;
}
/* ═══════════════════════════════════════════
CONTACT — Cinema Reel (film strip + marquee, ~50vh)
═══════════════════════════════════════════ */
.contact-cr {
position: relative;
min-height: 50vh;
background: #050505;
color: #f5e8c8;
overflow: hidden;
padding: 64px 0 60px;
display: flex; align-items: center; justify-content: center;
}
.cr-bg-photo {
position: absolute; inset: 0;
background-image: var(--img-ocean);
background-size: cover; background-position: center;
filter: brightness(0.22) blur(2px);
animation: ken-burns 28s ease-in-out infinite;
}
.cr-veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 60% 60% at 50% 50%, rgba(0,0,0,0.25), rgba(0,0,0,0.85)),
repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
}
/* Film strip — scrolling photos behind the stage */
.cr-strip {
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
display: flex; align-items: center;
gap: 14px;
width: max-content;
animation: scroll-x 50s linear infinite;
opacity: 0.32;
z-index: 1;
pointer-events: none;
}
.cr-frame {
flex: 0 0 240px;
height: 156px;
position: relative;
background-size: cover; background-position: center;
border-top: 16px solid #050505;
border-bottom: 16px solid #050505;
filter: grayscale(0.4) contrast(1.1);
}
.cr-frame::before, .cr-frame::after {
content: '';
position: absolute;
left: 0; right: 0; height: 16px;
background-image: radial-gradient(circle, #f5e8c8 1.8px, transparent 2.2px);
background-size: 18px 16px;
background-position: 6px center;
}
.cr-frame::before { top: -16px; }
.cr-frame::after { bottom: -16px; }
/* Tickers — top/bottom marquees with reversed scroll */
.cr-ticker {
position: absolute; left: 0; right: 0;
height: 32px;
overflow: hidden;
display: flex; align-items: center;
background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
z-index: 4;
}
.cr-ticker.top {
top: 0;
border-bottom: 0.5px solid var(--accent);
}
.cr-ticker.bot {
bottom: 0;
border-top: 0.5px solid var(--accent);
}
.cr-ticker-track {
display: flex; gap: 32px;
width: max-content;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
color: var(--accent);
text-transform: uppercase; font-weight: 600;
animation: scroll-x 28s linear infinite;
white-space: nowrap;
}
.cr-ticker.bot .cr-ticker-track {
animation: scroll-x-rev 32s linear infinite;
}
.cr-ticker-track span::before { content: '★ '; }
/* Marquee bulbs */
.cr-bulbs {
position: absolute; left: 0; right: 0;
display: flex; justify-content: center; gap: 22px;
z-index: 5; padding: 0 24px;
pointer-events: none;
}
.cr-bulbs.top { top: 38px; }
.cr-bulbs.bot { bottom: 38px; }
.cr-bulbs .bulb {
width: 9px; height: 9px; border-radius: 50%;
background: #ffc878;
animation: bulb-blink 1.7s ease-in-out infinite;
box-shadow: 0 0 10px rgba(255,200,120,0.5);
}
.cr-bulbs .bulb:nth-child(2n) { animation-delay: 0.3s; }
.cr-bulbs .bulb:nth-child(3n) { animation-delay: 0.65s; }
.cr-bulbs .bulb:nth-child(5n) { animation-delay: 1.05s; }
.cr-bulbs .bulb:nth-child(7n) { animation-delay: 1.4s; }
/* Stage — main content */
.cr-stage {
position: relative; z-index: 6;
max-width: 1100px;
width: 100%;
padding: 0 64px;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: 56px;
align-items: center;
}
.cr-content {
animation: rise 0.9s 0.1s both cubic-bezier(.2,.7,.2,1);
}
.cr-lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.5em;
color: var(--accent);
text-transform: uppercase; font-weight: 600;
margin-bottom: 8px;
display: inline-flex; align-items: center; gap: 12px;
}
.cr-lbl::before, .cr-lbl::after {
content: '★'; font-size: 10px;
animation: spin-slow 9s linear infinite;
display: inline-block;
}
.cr-scr {
font-family: 'Italianno', cursive;
font-size: clamp(96px, 11vw, 156px);
font-weight: 400; line-height: 0.88;
letter-spacing: -0.01em;
color: #fff;
text-shadow: 0 0 28px rgba(201,85,56,0.5), 0 6px 24px rgba(0,0,0,0.7);
margin-bottom: 14px;
}
.cr-body {
font-family: 'Shippori Mincho B1', serif;
font-size: 15px; font-weight: 500;
line-height: 1.95;
color: rgba(245,232,200,0.92);
max-width: 460px;
}
.cr-body em {
font-style: normal;
color: var(--accent);
font-weight: 700;
position: relative;
display: inline-block;
}
.cr-body em::after {
content: ''; position: absolute;
bottom: 4%; left: -2%; right: -2%;
height: 6px;
background: rgba(181,112,58,0.32);
z-index: -1;
}
/* Seal cluster */
.cr-seal-wrap {
display: flex; flex-direction: column;
align-items: center; gap: 14px;
animation: rise 0.9s 0.3s both cubic-bezier(.2,.7,.2,1);
}
.cr-ticket {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px; letter-spacing: 0.36em;
color: rgba(245,232,200,0.55);
text-transform: uppercase; font-weight: 500;
border: 0.5px solid rgba(245,232,200,0.25);
padding: 4px 14px;
background: rgba(0,0,0,0.4);
}
/* Wax Seal CTA */
.cr-seal {
position: relative;
display: inline-block;
width: 156px; height: 156px;
cursor: pointer;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.cr-seal:hover { transform: scale(1.06) rotate(-3deg); }
.cr-seal:active { transform: scale(0.96); }
.cr-seal-ring {
position: absolute; inset: 0;
width: 100%; height: 100%;
animation: spin-slow 18s linear infinite;
pointer-events: none;
}
.cr-seal:hover .cr-seal-ring { animation-duration: 5s; }
.cr-seal-ring text {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.22em;
fill: #ffc878;
text-transform: uppercase; font-weight: 600;
}
.cr-seal-inner {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 98px; height: 98px;
border-radius: 50%;
background: var(--terracotta);
color: #fff;
display: flex; align-items: center; justify-content: center;
box-shadow:
inset 0 4px 12px rgba(255,255,255,0.18),
inset 0 -6px 12px rgba(0,0,0,0.25),
0 0 0 1.5px var(--terracotta),
0 0 0 5px #050505,
0 0 0 6.5px var(--terracotta),
0 0 28px rgba(201,85,56,0.4);
animation: pulse-glow-cr 3s ease-in-out infinite;
}
@keyframes pulse-glow-cr {
0%, 100% {
box-shadow:
inset 0 4px 12px rgba(255,255,255,0.18),
inset 0 -6px 12px rgba(0,0,0,0.25),
0 0 0 1.5px var(--terracotta),
0 0 0 5px #050505,
0 0 0 6.5px var(--terracotta),
0 0 28px rgba(201,85,56,0.4);
}
50% {
box-shadow:
inset 0 4px 12px rgba(255,255,255,0.18),
inset 0 -6px 12px rgba(0,0,0,0.25),
0 0 0 1.5px var(--terracotta),
0 0 0 5px #050505,
0 0 0 6.5px var(--terracotta),
0 0 56px rgba(201,85,56,0.85);
}
}
.cr-seal:hover .cr-seal-inner { animation-duration: 1.4s; }
.cr-seal-arrow {
width: 56px; height: auto;
display: block; color: #fff;
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.cr-seal:hover .cr-seal-arrow { transform: translateX(7px); }
/* ═══════════════════════════════════════════
SUB-PAGE HERO & BODY — for non-front pages
Used by page.php and any page-{slug}.php that doesn't override
═══════════════════════════════════════════ */
.page-hero {
position: relative;
background: var(--paper-warm);
padding: 80px 56px 64px;
border-bottom: 0.5px solid rgba(26,26,26,0.1);
overflow: hidden;
}
.page-hero::before {
content: 'Chiron.';
position: absolute;
top: -40px; right: -20px;
font-family: 'Italianno', cursive;
font-size: 280px; line-height: 1;
color: rgba(181,112,58,0.06);
pointer-events: none;
user-select: none;
}
.page-hero-inner {
position: relative; z-index: 2;
max-width: var(--content-max);
margin: 0 auto;
}
.page-hero-pn {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: var(--accent);
margin-bottom: 16px;
}
.page-hero-h {
font-family: 'Italianno', cursive;
font-size: clamp(80px, 9vw, 132px);
font-weight: 400; line-height: 0.95;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 14px;
}
.page-hero-sub {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(15px, 1.4vw, 17px);
font-weight: 500;
line-height: 1.85;
letter-spacing: 0.01em;
color: rgba(26,26,26,0.78);
max-width: 640px;
}
.page-body {
background: #ffffff;
padding: 72px 56px 96px;
}
.page-body-inner {
max-width: 760px;
margin: 0 auto;
font-family: 'Shippori Mincho B1', serif;
font-size: 16px;
line-height: 1.95;
color: rgba(26,26,26,0.88);
}
.page-body-inner h2 {
font-family: 'Italianno', cursive;
font-size: clamp(48px, 5vw, 72px);
font-weight: 400; line-height: 0.95;
color: var(--ink);
margin: 56px 0 18px;
}
.page-body-inner h2:first-child { margin-top: 0; }
.page-body-inner h3 {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 500;
font-size: 24px;
color: var(--ink);
margin: 40px 0 12px;
}
.page-body-inner p { margin-bottom: 22px; }
.page-body-inner a {
color: var(--accent);
border-bottom: 1px solid currentColor;
}
.page-body-inner ul, .page-body-inner ol {
margin: 0 0 22px 24px;
}
.page-body-inner li { margin-bottom: 8px; }
.page-body-inner strong { color: var(--accent); font-weight: 700; }
.page-body-inner blockquote {
border-left: 2px solid var(--accent);
padding: 6px 0 6px 22px;
margin: 28px 0;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 19px;
color: rgba(26,26,26,0.72);
}
/* ═══════════════════════════════════════════
SERVICES PAGE — Editorial Press Spread (Proposal B)
Magazine-style: cover → trio → 3 spreads → notes → invitation
═══════════════════════════════════════════ */
/* ─── MAGAZINE COVER (Hero) ─── */
.svc-cover {
position: relative;
min-height: 100vh;
background: var(--paper);
padding: 64px 56px 56px;
overflow: hidden;
}
.svc-cover-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
margin-top: 0;
min-height: 76vh;
position: relative;
}
.svc-cover-left {
display: flex; flex-direction: column;
padding-top: 24px;
}
.svc-cover-script {
font-family: 'Caveat', cursive;
font-size: clamp(72px, 7vw, 96px);
line-height: 0.95;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
margin-bottom: 8px;
}
.svc-cover-rule {
width: 56px; height: 1px;
background: var(--ink);
margin: 24px 0;
}
.svc-cover-headline {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(28px, 2.4vw, 36px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--ink);
margin-bottom: 24px;
}
.svc-cover-headline em {
font-style: normal;
font-family: 'Caveat', cursive;
font-weight: 700;
font-size: 1.2em;
letter-spacing: 0;
color: var(--terracotta);
}
.svc-cover-lead {
font-family: 'Shippori Mincho B1', serif;
font-size: 14px; font-weight: 500;
line-height: 2;
color: rgba(26,26,26,0.75);
max-width: 380px;
margin-bottom: 36px;
}
.svc-cover-pressno { margin-top: auto; }
.svc-cover-pressno-lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 13px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: rgba(26,26,26,0.55);
margin-bottom: -16px;
}
.svc-cover-pressno-num {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(140px, 14vw, 200px);
line-height: 0.9;
color: var(--ink);
letter-spacing: -0.03em;
}
.svc-cover-right { position: relative; }
.svc-cover-photo-1 {
position: absolute;
top: 0; right: -56px;
width: 100%; height: 100%;
background-size: cover; background-position: center;
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
filter: contrast(1.05) saturate(0.9);
}
.svc-cover-photo-2 {
position: absolute;
top: 32px; left: -8px;
width: 36%; height: 28%;
background-size: cover; background-position: center;
z-index: 2;
box-shadow: 0 12px 32px rgba(0,0,0,0.18);
filter: contrast(1.05);
}
.svc-cover-photo-caption {
position: absolute;
top: 32%; left: -8px;
z-index: 3;
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.28em;
text-transform: uppercase; font-weight: 500;
color: rgba(26,26,26,0.6);
max-width: 32%;
line-height: 1.6;
}
.svc-cover-logomark {
position: absolute;
bottom: 32px; right: 56px;
display: flex; align-items: center; gap: 12px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: var(--ink);
}
.svc-cover-logomark .mark {
width: 38px; height: 38px;
border: 1.5px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 500;
font-size: 26px;
}
.svc-cover-pagenum {
position: absolute;
bottom: 12px; left: 56px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
font-weight: 500;
color: rgba(26,26,26,0.5);
}
/* ─── TRIO — 3 Press Entries ─── */
.svc-trio {
background: var(--paper);
padding: 96px 56px;
border-top: 0.5px solid rgba(26,26,26,0.16);
}
.svc-trio-head {
display: flex; justify-content: space-between; align-items: flex-end;
max-width: 1240px;
margin: 0 auto 64px;
padding-bottom: 24px;
border-bottom: 0.5px solid rgba(26,26,26,0.16);
}
.svc-trio-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: rgba(26,26,26,0.55);
margin-bottom: 12px;
}
.svc-trio-title {
font-family: 'Caveat', cursive;
font-size: clamp(72px, 8vw, 120px);
line-height: 0.9;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.svc-trio-pagenum {
font-family: 'IBM Plex Mono', monospace;
font-size: 12px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 500;
color: rgba(26,26,26,0.5);
text-align: right;
line-height: 1.6;
}
.svc-trio-grid {
max-width: 1240px; margin: 0 auto;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
}
.svc-entry {
position: relative;
display: block;
color: var(--ink);
transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.svc-entry:hover { transform: translateY(-6px); }
.svc-entry-photo {
position: relative;
aspect-ratio: 4/5;
background-size: cover; background-position: center;
margin-bottom: 24px;
filter: contrast(1.05) saturate(0.92);
overflow: hidden;
}
.svc-entry-photo::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.18) 100%);
}
.svc-entry-corner {
position: absolute;
top: 14px; left: 14px;
background: var(--paper);
padding: 6px 10px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 700;
color: var(--ink);
z-index: 3;
}
.svc-entry-script {
position: absolute;
bottom: 8%; right: -8px;
font-family: 'Caveat', cursive;
font-size: clamp(54px, 5vw, 72px);
line-height: 0.9;
font-weight: 700;
color: var(--paper);
letter-spacing: -0.01em;
z-index: 3;
white-space: nowrap;
text-shadow: 0 2px 18px rgba(0,0,0,0.4);
}
.svc-entry-script .small {
display: block;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.3em;
line-height: 1.2;
letter-spacing: 0;
text-transform: lowercase;
color: rgba(255,255,255,0.92);
margin-top: 4px;
}
.svc-entry-head {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 6px;
border-bottom: 0.5px solid rgba(26,26,26,0.16);
margin-bottom: 12px;
}
.svc-entry-head-l {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: var(--terracotta);
}
.svc-entry-head-r {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 14px;
color: rgba(26,26,26,0.55);
}
.svc-entry-name {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(28px, 2.4vw, 34px);
font-weight: 800;
line-height: 1.15;
letter-spacing: 0.02em;
color: var(--ink);
margin: 0 0 14px;
}
.svc-entry-italic {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 15px;
color: rgba(26,26,26,0.7);
line-height: 1.6;
margin-bottom: 18px;
padding-left: 12px;
border-left: 1.5px solid var(--terracotta);
}
.svc-entry-pricerow {
display: flex; justify-content: space-between; align-items: baseline;
padding-top: 14px;
border-top: 0.5px dashed rgba(26,26,26,0.16);
}
.svc-entry-pricerow .amt {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 600;
font-size: 28px;
color: var(--terracotta);
}
.svc-entry-pricerow .unit {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.28em;
text-transform: uppercase; font-weight: 600;
color: rgba(26,26,26,0.5);
}
/* ─── 2-PAGE SPREAD (ACT I, II, III) ─── */
.svc-spread {
position: relative;
min-height: 100vh;
background: var(--paper-warm);
padding: 64px 0 0;
overflow: hidden;
}
.svc-spread-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
min-height: 76vh;
margin-top: 0;
}
.svc-spread-flip .svc-spread-photo { order: 2; }
.svc-spread-flip .svc-spread-content { order: 1; }
/* Left page: full-bleed photo with brush script overlay */
.svc-spread-photo {
position: relative;
background-size: cover; background-position: center;
filter: contrast(1.05) saturate(0.92);
overflow: hidden;
min-height: 76vh;
}
.svc-spread-photo-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,26,26,0.1) 0%, rgba(26,26,26,0.05) 50%, rgba(26,26,26,0.32) 100%);
}
.svc-spread-photo-script {
position: absolute;
top: 50%; left: -32px;
transform: translateY(-50%) rotate(-90deg);
transform-origin: top left;
font-family: 'Caveat', cursive;
font-size: clamp(120px, 14vw, 220px);
line-height: 0.9;
font-weight: 700;
color: var(--paper);
letter-spacing: -0.01em;
white-space: nowrap;
z-index: 2;
text-shadow: 0 4px 24px rgba(0,0,0,0.5);
opacity: 0.94;
}
.svc-spread-flip .svc-spread-photo-script {
top: 50%; right: -32px; left: auto;
transform: translateY(-50%) rotate(90deg);
transform-origin: top right;
}
.svc-spread-photo-caption {
position: absolute;
top: 32px; right: 32px;
z-index: 3;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: rgba(255,255,255,0.95);
text-align: right;
line-height: 1.7;
text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}
.svc-spread-flip .svc-spread-photo-caption {
right: auto; left: 32px;
text-align: left;
}
.svc-spread-photo-pagenum {
position: absolute;
bottom: 32px; left: 32px;
z-index: 3;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
font-weight: 500;
color: rgba(255,255,255,0.78);
text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.svc-spread-flip .svc-spread-photo-pagenum {
left: auto; right: 32px;
}
/* Right page: editorial content */
.svc-spread-content {
position: relative;
padding: 56px 64px 32px;
background: var(--paper);
}
.svc-spread-vert {
position: absolute;
top: 56px; right: 32px;
writing-mode: vertical-rl;
font-family: 'Shippori Mincho B1', serif;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.24em;
color: rgba(26,26,26,0.42);
max-height: 360px;
line-height: 1.95;
}
.svc-spread-flip .svc-spread-vert {
right: auto; left: 32px;
writing-mode: vertical-lr;
}
.svc-spread-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 600;
color: var(--terracotta);
margin-bottom: 14px;
}
.svc-spread-num {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 400;
font-size: clamp(56px, 6vw, 84px);
line-height: 0.9;
color: rgba(26,26,26,0.42);
letter-spacing: -0.02em;
margin-bottom: -4px;
}
.svc-spread-name {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(56px, 6.5vw, 88px);
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
color: var(--ink);
margin: 4px 0 24px;
}
.svc-spread-rule {
width: 64px; height: 1px;
background: var(--ink);
margin-bottom: 24px;
}
.svc-spread-italic {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 18px;
line-height: 1.5;
color: var(--terracotta);
margin-bottom: 24px;
max-width: 440px;
}
.svc-spread-lead {
font-family: 'Shippori Mincho B1', serif;
font-size: 15px;
font-weight: 500;
line-height: 2;
color: rgba(26,26,26,0.85);
margin: 0 0 32px;
max-width: 440px;
}
.svc-spread-lead em {
font-style: normal;
color: var(--terracotta);
font-weight: 700;
}
.svc-spread-deliv-h {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 700;
color: var(--accent);
margin-bottom: 14px;
padding-bottom: 6px;
border-bottom: 0.5px solid rgba(26,26,26,0.16);
max-width: 440px;
}
.svc-spread-deliv-list {
list-style: none;
padding: 0; margin: 0 0 24px;
font-family: 'Shippori Mincho B1', serif;
font-size: 14px;
line-height: 1.9;
color: rgba(26,26,26,0.82);
max-width: 440px;
columns: 2;
column-gap: 24px;
}
.svc-spread-deliv-list li {
padding-left: 14px;
position: relative;
break-inside: avoid;
}
.svc-spread-deliv-list li::before {
content: '·';
position: absolute; left: 2px; top: -2px;
color: var(--terracotta); font-weight: 800; font-size: 15px;
}
.svc-spread-note {
font-family: 'Shippori Mincho B1', serif;
font-size: 12.5px;
line-height: 1.8;
color: rgba(26,26,26,0.55);
padding-left: 14px;
border-left: 1px solid rgba(26,26,26,0.16);
margin-bottom: 28px;
max-width: 440px;
}
.svc-spread-price {
display: inline-flex; flex-direction: column;
padding: 14px 22px;
border: 1.5px solid var(--terracotta);
background: var(--paper);
position: relative;
}
.svc-spread-price::before, .svc-spread-price::after {
content: '';
position: absolute;
width: 8px; height: 8px;
background: var(--terracotta);
border-radius: 50%;
}
.svc-spread-price::before { top: -4px; left: -4px; }
.svc-spread-price::after { bottom: -4px; right: -4px; }
.svc-spread-price .amt {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 600;
font-size: 32px;
line-height: 1;
color: var(--terracotta);
}
.svc-spread-price .unit {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.28em;
font-weight: 600;
text-transform: uppercase;
color: rgba(26,26,26,0.55);
margin-top: 5px;
}
.svc-spread-content-pagenum {
position: absolute;
bottom: 12px; right: 56px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.32em;
font-weight: 500;
color: rgba(26,26,26,0.45);
}
.svc-spread-flip .svc-spread-content-pagenum {
right: auto; left: 56px;
}
/* ─── Section rule between ACTs ─── */
.svc-rule {
display: flex; align-items: center; gap: 24px;
padding: 32px 56px;
background: var(--paper);
border-top: 0.5px solid rgba(26,26,26,0.16);
border-bottom: 0.5px solid rgba(26,26,26,0.16);
}
.svc-rule .line {
flex: 1; height: 1px;
background: rgba(26,26,26,0.32);
}
.svc-rule .l, .svc-rule .r {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.36em;
text-transform: uppercase; font-weight: 600;
color: rgba(26,26,26,0.55);
}
.svc-rule .l { color: var(--terracotta); }
/* ─── EDITOR'S NOTES ─── */
.svc-notes {
background: var(--paper-warm);
padding: 80px 56px 96px;
position: relative;
}
.svc-notes-inner {
max-width: 720px;
margin: 0 auto;
}
.svc-notes-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 600;
color: var(--terracotta);
margin-bottom: 14px;
}
.svc-notes-title {
font-family: 'Caveat', cursive;
font-size: clamp(56px, 6vw, 84px);
font-weight: 700;
line-height: 0.95;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 12px;
}
.svc-notes-italic {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 17px;
color: rgba(26,26,26,0.6);
margin-bottom: 36px;
}
.svc-notes-list {
list-style: none;
padding: 0; margin: 0;
font-family: 'Shippori Mincho B1', serif;
font-size: 15px;
line-height: 2;
color: rgba(26,26,26,0.85);
}
.svc-notes-list li {
padding: 16px 0;
border-bottom: 0.5px solid rgba(26,26,26,0.12);
}
.svc-notes-list li:last-child { border-bottom: none; }
.svc-notes-list b {
color: var(--terracotta);
font-weight: 700;
}
/* ─── EDITOR'S INVITATION (Closing CTA) ─── */
.svc-invitation {
background: var(--paper);
padding: 80px 56px 0;
border-top: 0.5px solid rgba(26,26,26,0.16);
}
.svc-invitation-grid {
display: grid; grid-template-columns: 1fr 0.85fr;
gap: 56px;
margin-top: 0;
min-height: 64vh;
align-items: stretch;
}
.svc-invitation-content {
display: flex; flex-direction: column;
padding: 32px 0 64px;
}
.svc-invitation-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 600;
color: var(--terracotta);
margin-bottom: 14px;
}
.svc-invitation-script {
font-family: 'Caveat', cursive;
font-size: clamp(96px, 11vw, 160px);
font-weight: 700;
line-height: 0.88;
color: var(--ink);
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.svc-invitation-rule {
width: 64px; height: 1px;
background: var(--ink);
margin: 24px 0;
}
.svc-invitation-headline {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(22px, 2vw, 28px);
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.04em;
color: var(--ink);
margin: 0 0 20px;
max-width: 480px;
}
.svc-invitation-headline em {
font-style: normal;
color: var(--terracotta);
}
.svc-invitation-body {
font-family: 'Shippori Mincho B1', serif;
font-size: 14px;
font-weight: 500;
line-height: 1.95;
color: rgba(26,26,26,0.72);
max-width: 440px;
margin: 0 0 36px;
}
.svc-invitation-cta {
display: inline-flex; align-items: center; justify-content: space-between;
gap: 32px;
padding: 18px 26px;
background: var(--ink);
color: var(--paper);
width: fit-content;
border: 1.5px solid var(--ink);
transition: background 0.3s, color 0.3s, transform 0.3s;
margin-bottom: 36px;
}
.svc-invitation-cta:hover {
background: var(--terracotta);
border-color: var(--terracotta);
transform: translateX(6px);
}
.svc-invitation-cta-label {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.36em;
text-transform: uppercase; font-weight: 700;
}
.svc-invitation-cta-arrow {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 22px;
font-weight: 400;
transition: transform 0.3s;
}
.svc-invitation-cta:hover .svc-invitation-cta-arrow { transform: translateX(6px); }
.svc-invitation-sign {
display: flex; align-items: center; gap: 18px;
margin-top: auto;
}
.svc-invitation-sign-text {
font-family: 'Caveat', cursive;
font-size: 28px;
font-weight: 700;
line-height: 1.15;
color: var(--ink);
}
.svc-invitation-sign-mark {
width: 56px; height: 56px;
border: 1.5px solid var(--ink);
display: flex; align-items: center; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 500;
font-size: 36px;
color: var(--ink);
}
.svc-invitation-photo {
position: relative;
background-size: cover; background-position: center;
filter: contrast(1.05) saturate(0.92);
min-height: 64vh;
overflow: hidden;
}
.svc-invitation-photo-veil {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(26,26,26,0) 50%, rgba(26,26,26,0.3) 100%);
}
.svc-invitation-photo-caption {
position: absolute;
bottom: 24px; left: 24px;
z-index: 3;
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: rgba(255,255,255,0.92);
line-height: 1.7;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.svc-invitation-foot {
text-align: center;
padding: 40px 0 32px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 600;
color: var(--terracotta);
}
/* ═══════════════════════════════════════════
ABOUT PAGE — Staggered Mosaic (dark)
Hero → 4 plates (Studio / Method / Long View / Invitation)
═══════════════════════════════════════════ */
/* Dark site-header override (About + Contact) */
body.page-template-page-about,
body.page-template-page-contact {
background: #0a0a0a;
}
body.page-template-page-about .site-header,
body.page-template-page-contact .site-header {
background: #0a0a0a;
border-bottom: 0.5px solid rgba(245,232,200,0.12);
}
body.page-template-page-about .site-header .b,
body.page-template-page-about .site-header .brand,
body.page-template-page-about .site-header .site-nav a,
body.page-template-page-contact .site-header .b,
body.page-template-page-contact .site-header .brand,
body.page-template-page-contact .site-header .site-nav a {
color: #f5e8c8;
}
body.page-template-page-about .site-header .site-nav a:hover,
body.page-template-page-contact .site-header .site-nav a:hover {
color: #ffc878;
}
/* About design tokens (scoped) */
body.page-template-page-about {
--abt-bg-1: #0a0a0a;
--abt-bg-2: #131110;
--abt-bg-3: #1a1814;
--abt-paper: #f5e8c8;
--abt-paper-muted: rgba(245,232,200,0.66);
--abt-paper-dim: rgba(245,232,200,0.42);
--abt-rule: rgba(245,232,200,0.14);
--abt-accent: #ffc878;
--abt-terracotta: #d8623d;
}
/* Base photo + caption */
.abt-photo {
background-size: cover; background-position: center;
filter: contrast(1.04) saturate(0.86) brightness(0.92);
position: relative;
}
.abt-cap {
font-family: 'IBM Plex Mono', monospace;
font-size: 9px; letter-spacing: 0.32em;
text-transform: uppercase; font-weight: 600;
color: var(--abt-paper-dim);
padding: 6px 0;
border-top: 0.5px solid var(--abt-rule);
}
/* ─── HERO — Staggered columns ─── */
.abt-hero {
position: relative;
min-height: 100vh;
padding: 40px;
background: var(--abt-bg-1);
}
.abt-hero-top {
display: flex; justify-content: space-between;
margin-bottom: 48px;
padding-bottom: 18px;
border-bottom: 0.5px solid var(--abt-rule);
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.4em;
text-transform: uppercase; font-weight: 600;
color: var(--abt-paper-muted);
}
.abt-hero-cols {
display: grid;
grid-template-columns: 1.4fr 0.6fr 1fr 0.5fr 0.9fr;
gap: 14px;
align-items: start;
}
.abt-hero-col {
display: flex; flex-direction: column;
gap: 14px;
}
.abt-hero-col-1 { margin-top: 0; }
.abt-hero-col-2 { margin-top: 18vh; }
.abt-hero-col-3 { margin-top: 4vh; }
.abt-hero-col-4 { margin-top: 32vh; }
.abt-hero-col-5 { margin-top: 8vh; }
.abt-hero-col-1 .abt-photo { height: 64vh; }
.abt-hero-col-2 .abt-photo { height: 30vh; }
.abt-hero-col-3 .abt-photo { height: 38vh; }
.abt-hero-col-4 .abt-photo { height: 22vh; }
.abt-hero-col-5 .abt-photo { height: 44vh; }
.abt-hero-title {
padding-top: 8px;
}
.abt-hero-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.5em;
text-transform: uppercase; font-weight: 700;
color: var(--abt-accent);
margin-bottom: 12px;
}
.abt-hero-script {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(64px, 9vw, 140px);
line-height: 0.85;
letter-spacing: -0.04em;
color: var(--abt-paper);
margin: 0 0 14px;
}
.abt-hero-sub {
font-family: 'Shippori Mincho B1', serif;
font-size: 14px; font-weight: 700;
line-height: 1.85;
letter-spacing: 0.04em;
color: var(--abt-paper);
margin: 0;
}
/* ─── Plate intro — heavy mono labels with shift ─── */
.abt-plate-intro {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 80px 40px 32px;
align-items: flex-end;
border-top: 1.5px solid var(--abt-paper);
margin: 0 40px;
position: relative;
background: var(--abt-bg-1);
}
.abt-plate-num {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 400;
font-size: clamp(120px, 14vw, 220px);
line-height: 0.82;
color: var(--abt-paper);
letter-spacing: -0.04em;
}
.abt-plate-num .slash {
color: var(--abt-accent);
font-size: 0.5em;
vertical-align: super;
margin-left: 8px;
}
.abt-plate-label {
text-align: right;
padding-bottom: 14px;
}
.abt-plate-label-mono {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 700;
color: var(--abt-accent);
margin-bottom: 8px;
}
.abt-plate-label-title {
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(28px, 3vw, 42px);
font-weight: 800;
letter-spacing: 0.04em;
color: var(--abt-paper);
line-height: 1;
}
/* ─── PLATE 01 — Studio with extreme size variation ─── */
.abt-plate-1 {
padding: 40px;
background: var(--abt-bg-1);
}
.abt-plate-1-cols {
display: grid;
grid-template-columns: 1fr 1.6fr 0.5fr 1fr;
gap: 18px;
align-items: start;
}
.abt-plate-1-col {
display: flex; flex-direction: column;
gap: 18px;
}
.abt-plate-1-col-1 { margin-top: 0; }
.abt-plate-1-col-2 { margin-top: 12vh; }
.abt-plate-1-col-3 { margin-top: 4vh; }
.abt-plate-1-col-4 { margin-top: 24vh; }
.abt-plate-1-col-1 .p1c1-1 { height: 36vh; }
.abt-plate-1-col-1 .p1c1-2 { height: 24vh; }
.abt-plate-1-col-2 .p1c2-1 { height: 62vh; }
.abt-plate-1-col-3 .p1c3-1 { height: 18vh; }
.abt-plate-1-col-3 .p1c3-2 { height: 14vh; }
.abt-plate-1-col-4 .p1c4-1 { height: 28vh; }
.abt-plate-1-text {
padding: 28px 0;
}
.abt-plate-1-text-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 700;
color: var(--abt-accent);
margin-bottom: 14px;
}
.abt-plate-1-text-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 52px;
line-height: 0.92;
color: var(--abt-paper);
margin: 0 0 22px;
letter-spacing: -0.02em;
}
.abt-plate-1-text-body {
font-family: 'Shippori Mincho B1', serif;
font-size: 13.5px; font-weight: 500;
line-height: 1.95;
color: var(--abt-paper-muted);
margin: 0 0 18px;
}
.abt-plate-1-text-body em {
font-style: normal;
color: var(--abt-accent);
font-weight: 700;
}
/* ─── PLATE 02 — Method as staircase ─── */
.abt-plate-2 {
padding: 40px;
background: var(--abt-bg-2);
}
.abt-plate-2-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: start;
}
.abt-step {
display: flex; flex-direction: column;
background: var(--abt-bg-3);
padding-bottom: 16px;
}
.abt-step-1 { margin-top: 0; }
.abt-step-2 { margin-top: 10vh; }
.abt-step-3 { margin-top: 20vh; }
.abt-step-4 { margin-top: 30vh; }
.abt-step-photo {
aspect-ratio: 3/4;
background-size: cover; background-position: center;
filter: contrast(1.04) saturate(0.86) brightness(0.92);
position: relative;
}
.abt-step-num {
position: absolute;
top: 12px; left: 12px;
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 400;
font-size: 60px; line-height: 0.85;
color: var(--abt-paper);
text-shadow: 0 2px 18px rgba(0,0,0,0.6);
z-index: 3;
}
.abt-step-jp {
position: absolute;
bottom: 12px; left: 12px;
background: var(--abt-bg-1);
padding: 6px 12px;
font-family: 'Shippori Mincho B1', serif;
font-size: 20px; font-weight: 800;
letter-spacing: 0.04em;
color: var(--abt-paper);
border: 0.5px solid var(--abt-rule);
}
.abt-step-en {
position: absolute;
bottom: 12px; right: 12px;
background: var(--abt-accent);
color: var(--abt-bg-1);
padding: 4px 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 8.5px; letter-spacing: 0.36em;
text-transform: uppercase; font-weight: 700;
}
.abt-step-body {
padding: 16px 16px 0;
font-family: 'Shippori Mincho B1', serif;
font-size: 13px;
line-height: 1.85;
color: var(--abt-paper-muted);
margin: 0;
}
/* ─── PLATE 03 — Long view, asymmetric mosaic ─── */
.abt-plate-3 {
padding: 40px;
background: var(--abt-bg-1);
}
.abt-plate-3-grid {
display: grid;
grid-template-columns: 1.6fr 0.4fr 1fr;
grid-template-rows: 0.5fr 1.2fr 0.6fr;
gap: 16px;
min-height: 90vh;
}
.abt-p3-photo {
background-size: cover; background-position: center;
filter: contrast(1.04) saturate(0.86) brightness(0.92);
position: relative;
}
.abt-p3-hero {
grid-column: 1 / 2; grid-row: 1 / 3;
}
.abt-p3-detail-1 {
grid-column: 2 / 4; grid-row: 1 / 2;
}
.abt-p3-detail-2 {
grid-column: 3 / 4; grid-row: 2 / 3;
}
.abt-p3-detail-3 {
grid-column: 1 / 3; grid-row: 3 / 4;
}
.abt-p3-quote-box {
grid-column: 2 / 3; grid-row: 2 / 3;
background: var(--abt-bg-3);
padding: 24px 20px;
display: flex; flex-direction: column; justify-content: center;
border: 0.5px solid var(--abt-rule);
}
.abt-p3-quote {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 22px;
line-height: 1.3;
color: var(--abt-paper);
margin: 0;
}
.abt-p3-quote-cite {
margin-top: 14px;
font-family: 'IBM Plex Mono', monospace;
font-size: 8.5px; letter-spacing: 0.42em;
font-weight: 600;
color: var(--abt-accent);
text-transform: uppercase;
}
.abt-p3-photo-quote {
grid-column: 3 / 4; grid-row: 3 / 4;
background: var(--abt-accent);
color: var(--abt-bg-1);
padding: 24px 20px;
display: flex; flex-direction: column; justify-content: center;
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 18px; line-height: 1.4;
}
.abt-p3-photo-quote .cite {
margin-top: 12px;
font-family: 'IBM Plex Mono', monospace;
font-style: normal;
font-size: 8.5px; letter-spacing: 0.42em;
font-weight: 700;
color: var(--abt-bg-1);
text-transform: uppercase;
}
/* ─── PLATE 04 — Closing CTA ─── */
.abt-plate-4 {
padding: 40px;
background: var(--abt-bg-2);
}
.abt-plate-4-cols {
display: grid;
grid-template-columns: 1fr 0.8fr 1fr;
gap: 24px;
align-items: start;
}
.abt-p4-col-1 { margin-top: 0; }
.abt-p4-col-2 {
margin-top: 8vh;
padding: 32px 28px;
background: var(--abt-bg-3);
border: 0.5px solid var(--abt-rule);
}
.abt-p4-col-3 { margin-top: 20vh; }
.abt-p4-col-1 .abt-photo { height: 56vh; }
.abt-p4-col-3 .abt-photo { height: 40vh; }
.abt-p4-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px; letter-spacing: 0.5em;
text-transform: uppercase; font-weight: 700;
color: var(--abt-accent);
margin-bottom: 14px;
}
.abt-p4-script {
font-family: 'Cormorant Garamond', serif;
font-style: italic; font-weight: 400;
font-size: clamp(56px, 6.5vw, 88px);
line-height: 0.95;
color: var(--abt-paper);
margin: 0 0 14px;
letter-spacing: -0.02em;
}
.abt-p4-body {
font-family: 'Shippori Mincho B1', serif;
font-size: 13.5px;
line-height: 1.95;
color: var(--abt-paper-muted);
margin: 0 0 28px;
}
.abt-p4-btn {
display: inline-flex; align-items: center; gap: 18px;
padding: 16px 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px; letter-spacing: 0.42em;
text-transform: uppercase; font-weight: 700;
background: var(--abt-accent);
color: var(--abt-bg-1);
border: 1.5px solid var(--abt-accent);
text-decoration: none;
transition: all 0.3s cubic-bezier(.2,.7,.2,1);
}
.abt-p4-btn:hover {
background: var(--abt-terracotta);
border-color: var(--abt-terracotta);
color: var(--abt-paper);
transform: translateX(6px);
}
.abt-p4-btn .arr {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 20px;
font-weight: 400;
letter-spacing: 0;
transition: transform 0.3s;
}
.abt-p4-btn:hover .arr { transform: translateX(6px); }
/* ═══════════════════════════════════════════
CONTACT PAGE — Cinematic Compact (Proposal B)
Dark hero → form → dark channels → process+FAQ → dark close
═══════════════════════════════════════════ */
/* Contact design tokens (scoped) */
body.page-template-page-contact {
--ctc-ink: #0a0a0a;
--ctc-ink-2: #15110d;
--ctc-ink-3: #1c1813;
--ctc-paper: #f0e9d3;
--ctc-paper-soft: #e7dfc4;
--ctc-rule-d: rgba(240,233,211,0.16);
--ctc-muted-d: rgba(240,233,211,0.6);
--ctc-gold: #d6a06a;
--ctc-gold-bright: #e7b67c;
--ctc-terracotta: #b94b2c;
--ctc-ink-color: #1a1a1a;
--ctc-muted: rgba(26,26,26,0.55);
--ctc-rule: rgba(26,26,26,0.18);
}
/* Shared eyebrow helpers */
.ctc-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.5em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 14px;
}
.ctc-eyebrow-gold { color: var(--ctc-gold-bright); }
.ctc-eyebrow-tc { color: var(--ctc-terracotta); }
/* ─── HERO (dark cinematic) ─── */
.ctc-hero {
position: relative;
min-height: 56vh;
overflow: hidden;
background: var(--ctc-ink);
}
.ctc-hero-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.48) contrast(1.1) saturate(0.6);
}
.ctc-hero-bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, transparent 30%, transparent 70%, rgba(10,10,10,0.75) 100%);
}
.ctc-hero-content {
position: absolute; inset: 0;
padding: 40px 40px;
display: flex; flex-direction: column;
justify-content: space-between;
color: var(--ctc-paper);
z-index: 2;
}
.ctc-hero-top {
display: flex; justify-content: space-between;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 600;
color: rgba(240,233,211,0.75);
}
.ctc-hero-main {
margin: 40px 0 56px;
max-width: 1000px;
}
.ctc-hero-eyebrow {
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.5em;
text-transform: uppercase;
font-weight: 700;
color: var(--ctc-gold-bright);
margin-bottom: 24px;
display: inline-flex; align-items: center; gap: 14px;
}
.ctc-hero-eyebrow::before, .ctc-hero-eyebrow::after {
content: '';
width: 36px; height: 1px;
background: var(--ctc-gold-bright);
}
.ctc-hero-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(96px, 13vw, 220px);
line-height: 0.88;
letter-spacing: -0.04em;
color: var(--ctc-paper);
margin: 0;
}
.ctc-hero-sub {
margin: 16px 0 0;
font-family: 'Shippori Mincho B1', serif;
font-size: clamp(18px, 1.6vw, 22px);
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.04em;
color: var(--ctc-paper);
max-width: 540px;
}
.ctc-hero-sub em {
font-style: normal;
color: var(--ctc-gold-bright);
}
.ctc-hero-trust {
display: flex; gap: 36px;
border-top: 0.5px solid rgba(240,233,211,0.3);
padding-top: 18px;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 600;
color: rgba(240,233,211,0.7);
}
.ctc-hero-trust strong {
color: var(--ctc-gold-bright);
font-weight: 700;
}
/* ─── FORM SECTION (paper) ─── */
.ctc-form-section {
padding: 80px 40px 96px;
background: var(--ctc-paper);
border-top: 0.5px solid rgba(26,26,26,0.18);
}
.ctc-form-head {
display: grid; grid-template-columns: 1.4fr 1fr;
align-items: flex-end;
padding-bottom: 24px;
border-bottom: 1.5px solid var(--ctc-ink-color);
margin: 0 auto 48px;
max-width: 1320px;
}
.ctc-form-head-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(56px, 7vw, 108px);
line-height: 0.92;
letter-spacing: -0.04em;
color: var(--ctc-ink-color);
margin: 0;
}
.ctc-form-head-meta {
text-align: right;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 500;
color: var(--ctc-muted);
line-height: 1.9;
}
.ctc-form-spread {
display: grid; grid-template-columns: 1.5fr 1fr;
gap: 48px;
max-width: 1320px; margin: 0 auto;
}
.ctc-form {
background: var(--ctc-paper-soft);
padding: 48px 48px 40px;
border: 0.5px solid var(--ctc-ink-color);
position: relative;
}
.ctc-form-h {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 36px;
color: var(--ctc-ink-color);
margin: 0 0 6px;
}
.ctc-form-hsub {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 700;
color: var(--ctc-terracotta);
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1.5px solid var(--ctc-ink-color);
}
.ctc-field { margin-bottom: 24px; }
.ctc-field-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
margin-bottom: 24px;
}
.ctc-field-row .ctc-field { margin-bottom: 0; }
.ctc-label {
display: flex; justify-content: space-between; align-items: baseline;
font-family: 'IBM Plex Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 700;
color: var(--ctc-ink-color);
margin-bottom: 6px;
}
.ctc-label .req { color: var(--ctc-terracotta); }
.ctc-input,
.ctc-textarea {
width: 100%;
background: transparent;
border: none;
border-bottom: 1.5px solid var(--ctc-ink-color);
padding: 6px 0 8px;
font-family: 'Shippori Mincho B1', serif;
font-size: 15px;
font-weight: 500;
color: var(--ctc-ink-color);
outline: none;
transition: border-color 0.2s;
}
.ctc-input:focus, .ctc-textarea:focus { border-bottom-color: var(--ctc-terracotta); }
.ctc-input::placeholder, .ctc-textarea::placeholder {
color: rgba(26,26,26,0.32);
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 16px;
}
.ctc-textarea {
resize: vertical;
min-height: 110px;
border-bottom: none;
line-height: 27px;
background-image: repeating-linear-gradient(
transparent 0, transparent 26px, rgba(26,26,26,0.16) 26px, rgba(26,26,26,0.16) 27px);
}
.ctc-radio-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px;
margin-top: 6px;
}
.ctc-radio {
display: flex; align-items: center; gap: 10px;
cursor: pointer;
padding: 6px 0;
font-family: 'Shippori Mincho B1', serif;
font-size: 14px;
font-weight: 500;
color: var(--ctc-ink-color);
}
.ctc-radio input { display: none; }
.ctc-radio-mark {
width: 16px; height: 16px;
border: 1.5px solid var(--ctc-ink-color);
border-radius: 50%;
flex-shrink: 0;
position: relative;
}
.ctc-radio input:checked + .ctc-radio-mark::after {
content: '';
position: absolute; inset: 3px;
background: var(--ctc-terracotta);
border-radius: 50%;
}
.ctc-foot {
display: flex; justify-content: space-between; align-items: end;
padding-top: 22px;
border-top: 1.5px solid var(--ctc-ink-color);
margin-top: 12px;
}
.ctc-foot-meta {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--ctc-muted);
line-height: 1.8;
}
.ctc-foot-meta strong { color: var(--ctc-terracotta); }
.ctc-submit {
display: inline-flex; align-items: center; gap: 16px;
padding: 14px 24px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 700;
background: var(--ctc-ink-color); color: var(--ctc-paper);
border: 1.5px solid var(--ctc-ink-color);
cursor: pointer;
transition: all 0.3s cubic-bezier(.2,.7,.2,1);
}
.ctc-submit:hover {
background: var(--ctc-terracotta);
border-color: var(--ctc-terracotta);
transform: translateX(6px);
}
.ctc-submit::after {
content: '→';
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 20px;
}
/* Form side photos */
.ctc-side {
display: grid;
grid-template-rows: 1fr 1fr;
gap: 18px;
}
.ctc-side-photo {
background-size: cover; background-position: center;
filter: contrast(1.05) saturate(0.78) brightness(0.92);
position: relative;
}
.ctc-side-photo .cap {
position: absolute;
bottom: 12px; left: 12px;
background: var(--ctc-paper);
padding: 4px 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 9px;
letter-spacing: 0.4em;
font-weight: 700;
text-transform: uppercase;
color: var(--ctc-ink-color);
}
/* ─── CHANNELS (dark) ─── */
.ctc-channels {
padding: 80px 40px;
background: var(--ctc-ink);
color: var(--ctc-paper);
border-top: 0.5px solid var(--ctc-rule-d);
}
.ctc-channels-head {
display: grid; grid-template-columns: 1.4fr 1fr;
align-items: flex-end;
padding-bottom: 24px;
border-bottom: 1.5px solid var(--ctc-gold);
margin: 0 auto 48px;
max-width: 1320px;
}
.ctc-channels-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(48px, 6vw, 88px);
line-height: 0.95;
letter-spacing: -0.02em;
margin: 0;
}
.ctc-channels-meta {
text-align: right;
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 500;
color: rgba(240,233,211,0.55);
line-height: 1.9;
}
.ctc-channels-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1320px; margin: 0 auto;
}
.ctc-channel-card {
background: var(--ctc-ink-2);
padding: 28px 28px 28px;
border: 0.5px solid var(--ctc-rule-d);
position: relative;
display: flex; flex-direction: column;
}
.ctc-channel-card .num {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 44px;
line-height: 0.85;
color: var(--ctc-gold-bright);
margin-bottom: 14px;
}
.ctc-channel-card .lbl {
font-family: 'IBM Plex Mono', monospace;
font-size: 10px;
letter-spacing: 0.42em;
text-transform: uppercase;
font-weight: 700;
color: var(--ctc-gold-bright);
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 0.5px solid rgba(240,233,211,0.2);
}
.ctc-channel-card .val {
font-family: 'Shippori Mincho B1', serif;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--ctc-paper);
margin-bottom: 10px;
line-height: 1.25;
}
.ctc-channel-card .val.italic {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 26px;
letter-spacing: -0.01em;
}
.ctc-channel-card p {
font-family: 'Shippori Mincho B1', serif;
font-size: 13px;
font-weight: 500;
line-height: 1.85;
color: rgba(240,233,211,0.7);
margin: auto 0 0;
padding-top: 12px;
}
/* ─── PROCESS + FAQ ─── */
.ctc-process-section {
padding: 80px 40px;
background: var(--ctc-paper);
border-top: 0.5px solid var(--ctc-rule-d);
}
.ctc-process-head {
display: grid; grid-template-columns: 1.4fr 1fr;
align-items: flex-end;
padding-bottom: 24px;
border-bottom: 1.5px solid var(--ctc-ink-color);
margin: 0 auto 48px;
max-width: 1320px;
}
.ctc-process-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(48px, 6vw, 88px);
line-height: 0.95;
letter-spacing: -0.02em;
color: var(--ctc-ink-color);
margin: 0;
}
.ctc-process-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
max-width: 1320px; margin: 0 auto;
}
.ctc-process-sub {
font-family: 'Shippori Mincho B1', serif;
font-size: 22px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--ctc-ink-color);
margin: 0 0 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ctc-rule);
}
.ctc-steps { display: flex; flex-direction: column; gap: 18px; }
.ctc-step {
display: grid; grid-template-columns: 70px 1fr;
gap: 16px;
align-items: baseline;
}
.ctc-step .n {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: 44px;
line-height: 0.85;
color: var(--ctc-terracotta);
}
.ctc-step h4 {
font-family: 'Shippori Mincho B1', serif;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--ctc-ink-color);
margin: 0 0 4px;
}
.ctc-step p {
font-family: 'Shippori Mincho B1', serif;
font-size: 13px;
font-weight: 500;
line-height: 1.85;
color: rgba(26,26,26,0.7);
margin: 0;
}
.ctc-faq { display: flex; flex-direction: column; }
.ctc-faq-item {
padding: 18px 0;
border-top: 1px solid var(--ctc-rule);
}
.ctc-faq-item:last-child { border-bottom: 1px solid var(--ctc-rule); }
.ctc-faq-q {
display: flex; align-items: baseline; gap: 14px;
font-family: 'Shippori Mincho B1', serif;
font-size: 15px;
font-weight: 800;
letter-spacing: 0.04em;
color: var(--ctc-ink-color);
margin-bottom: 8px;
}
.ctc-faq-q::before {
content: 'Q.';
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 22px;
color: var(--ctc-terracotta);
flex-shrink: 0;
}
.ctc-faq-a {
display: flex; align-items: baseline; gap: 14px;
font-family: 'Shippori Mincho B1', serif;
font-size: 13.5px;
font-weight: 500;
line-height: 1.85;
color: rgba(26,26,26,0.72);
padding-left: 32px;
}
.ctc-faq-a::before {
content: 'A.';
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 500;
font-size: 16px;
color: rgba(26,26,26,0.4);
flex-shrink: 0;
margin-left: -32px;
}
/* ─── CLOSING (dark with sun bg) ─── */
.ctc-close {
position: relative;
min-height: 32vh;
overflow: hidden;
}
.ctc-close-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
filter: brightness(0.45) contrast(1.1) saturate(0.6);
}
.ctc-close-content {
position: relative; z-index: 2;
padding: 64px 40px;
text-align: center;
color: var(--ctc-paper);
}
.ctc-close-title {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-weight: 400;
font-size: clamp(40px, 5vw, 72px);
line-height: 0.95;
margin: 0 0 12px;
}
.ctc-close-sub {
font-family: 'IBM Plex Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.5em;
text-transform: uppercase;
font-weight: 600;
color: rgba(240,233,211,0.65);
}
RESPONSIVE (basic mobile clean-up)
═══════════════════════════════════════════ */
@media (max-width: 880px) {
.hero-content { padding: 80px 24px 32px; }
.hero-top nav { display: none; }
.site-header-inner { padding: 20px 24px; }
.site-header-inner .b { font-size: 32px; }
.site-nav { display: none; }
.sec-head { padding: 60px 24px 0; }
.sec-rule { padding: 0 24px; margin: 0 auto; }
.foot { padding: 24px; flex-direction: column; gap: 14px; text-align: center; }
.foot nav { flex-wrap: wrap; justify-content: center; gap: 14px; }
.works-b { padding: 32px 0 60px; }
.works-b-grid { grid-template-columns: 1fr; padding: 0 24px; margin: 0 auto 36px; }
.works-b-cta-row { padding: 0 24px; }
.work-b-1 { grid-row: auto; }
.svc-grid { grid-template-columns: 1fr; padding: 40px 24px; }
.svc-card { transform: rotate(0); }
.svc-cta-row { padding: 0 24px; }
.about { padding: 60px 24px; }
.about-stage { grid-template-columns: 1fr; gap: 36px; }
.column-b-list { padding: 32px 24px; }
.col-b { grid-template-columns: 1fr; gap: 16px; }
.col-b .arrow { display: none; }
.column-b-cta-row { padding: 0 24px; }
.contact-cr { padding: 56px 0 52px; min-height: auto; }
.cr-stage {
grid-template-columns: 1fr;
gap: 28px;
padding: 0 24px;
text-align: center;
}
.cr-content { text-align: center; }
.cr-body { margin: 0 auto; }
.cr-seal-wrap { margin: 0 auto; }
.cr-bulbs { gap: 14px; }
.cr-bulbs.top { top: 32px; }
.cr-bulbs.bot { bottom: 32px; }
.cr-frame { flex: 0 0 180px; height: 120px; }
.cr-seal { width: 132px; height: 132px; }
.cr-seal-inner { width: 84px; height: 84px; }
.cr-seal-arrow { width: 48px; }
.cr-seal-ring text { font-size: 9.5px; }
/* Services page — Editorial Press Spread */
.svc-cover { padding: 48px 24px 40px; min-height: auto; }
.svc-cover-grid {
grid-template-columns: 1fr;
gap: 32px;
margin-top: 32px;
min-height: auto;
}
.svc-cover-script { font-size: clamp(56px, 14vw, 80px); }
.svc-cover-pressno-num { font-size: clamp(96px, 32vw, 140px); }
.svc-cover-right {
min-height: 56vh;
}
.svc-cover-photo-1 { right: 0; clip-path: none; }
.svc-cover-photo-2 { width: 42%; height: 32%; top: 18px; left: 18px; }
.svc-cover-photo-caption {
top: auto; bottom: 18px; left: 18px;
max-width: 50%;
background: rgba(250,250,246,0.85);
padding: 6px 10px;
}
.svc-cover-logomark { bottom: 16px; right: 24px; gap: 8px; font-size: 9px; }
.svc-cover-logomark .mark { width: 30px; height: 30px; font-size: 20px; }
.svc-cover-pagenum { bottom: 4px; left: 24px; font-size: 9px; }
.svc-trio { padding: 64px 24px; }
.svc-trio-head {
flex-direction: column; gap: 12px;
align-items: flex-start;
margin-bottom: 40px;
}
.svc-trio-pagenum { text-align: left; }
.svc-trio-title { font-size: clamp(56px, 16vw, 80px); }
.svc-trio-grid { grid-template-columns: 1fr; gap: 40px; }
.svc-spread { min-height: auto; padding: 48px 0 0; }
.svc-spread-grid {
grid-template-columns: 1fr;
min-height: auto;
margin-top: 24px;
}
.svc-spread-flip .svc-spread-photo { order: 1; }
.svc-spread-flip .svc-spread-content { order: 2; }
.svc-spread-photo { min-height: 56vh; }
.svc-spread-photo-script {
font-size: clamp(72px, 22vw, 120px);
top: 50%; left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center;
}
.svc-spread-flip .svc-spread-photo-script {
top: 50%; left: 50%; right: auto;
transform: translate(-50%, -50%) rotate(0deg);
transform-origin: center;
}
.svc-spread-photo-caption,
.svc-spread-flip .svc-spread-photo-caption {
top: 18px; right: 18px; left: auto;
text-align: right; font-size: 9px;
}
.svc-spread-photo-pagenum,
.svc-spread-flip .svc-spread-photo-pagenum {
bottom: 18px; left: 18px; right: auto;
}
.svc-spread-content { padding: 40px 28px 24px; }
.svc-spread-vert { display: none; }
.svc-spread-name { font-size: clamp(44px, 14vw, 72px); }
.svc-spread-num { font-size: clamp(36px, 12vw, 56px); }
.svc-spread-deliv-list { columns: 1; }
.svc-spread-content-pagenum,
.svc-spread-flip .svc-spread-content-pagenum {
position: static;
margin-top: 24px;
text-align: right;
}
.svc-rule {
flex-direction: column; gap: 8px;
padding: 24px;
}
.svc-rule .line { display: none; }
.svc-notes { padding: 48px 24px 64px; }
.svc-notes-inner { margin-top: 40px; }
.svc-notes-title { font-size: clamp(44px, 12vw, 64px); }
.svc-invitation { padding: 48px 24px 0; }
.svc-invitation-grid {
grid-template-columns: 1fr;
gap: 32px;
margin-top: 32px;
min-height: auto;
}
.svc-invitation-script { font-size: clamp(72px, 22vw, 120px); }
.svc-invitation-content { padding: 16px 0 32px; }
.svc-invitation-photo { min-height: 40vh; }
.svc-invitation-foot { padding: 24px 0; }
/* About page — Staggered Mosaic (dark) */
.abt-hero { padding: 24px; }
.abt-hero-top {
flex-direction: column; gap: 6px;
align-items: flex-start;
font-size: 9.5px; letter-spacing: 0.28em;
}
.abt-hero-cols {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.abt-hero-col,
.abt-hero-col-1,
.abt-hero-col-2,
.abt-hero-col-3,
.abt-hero-col-4,
.abt-hero-col-5 { margin-top: 0; }
.abt-hero-col-1 .abt-photo,
.abt-hero-col-3 .abt-photo,
.abt-hero-col-5 .abt-photo { height: 32vh; }
.abt-hero-col-2 .abt-photo,
.abt-hero-col-4 .abt-photo { height: 24vh; }
.abt-hero-col-3 { grid-column: 1 / 3; }
.abt-hero-col-3 .abt-photo { height: 36vh; }
.abt-hero-script { font-size: clamp(56px, 16vw, 96px); }
.abt-plate-intro {
grid-template-columns: 1fr;
padding: 48px 24px 20px;
margin: 0 24px;
gap: 8px;
}
.abt-plate-num { font-size: clamp(72px, 22vw, 132px); }
.abt-plate-label { text-align: left; padding-bottom: 0; }
.abt-plate-1 { padding: 24px; }
.abt-plate-1-cols {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.abt-plate-1-col,
.abt-plate-1-col-1,
.abt-plate-1-col-2,
.abt-plate-1-col-3,
.abt-plate-1-col-4 { margin-top: 0; }
.abt-plate-1-col-2 { grid-column: 1 / 3; }
.abt-plate-1-col-1 .p1c1-1,
.abt-plate-1-col-3 .p1c3-1 { height: 28vh; }
.abt-plate-1-col-1 .p1c1-2,
.abt-plate-1-col-3 .p1c3-2 { height: 22vh; }
.abt-plate-1-col-2 .p1c2-1 { height: 48vh; }
.abt-plate-1-col-4 .p1c4-1 { height: 24vh; }
.abt-plate-1-text-title { font-size: clamp(36px, 10vw, 52px); }
.abt-plate-2 { padding: 24px; }
.abt-plate-2-grid {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.abt-step,
.abt-step-1,
.abt-step-2,
.abt-step-3,
.abt-step-4 { margin-top: 0; }
.abt-step-num { font-size: 44px; }
.abt-step-jp { font-size: 18px; }
.abt-plate-3 { padding: 24px; }
.abt-plate-3-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto auto;
gap: 12px;
min-height: auto;
}
.abt-p3-hero { grid-column: 1 / 3; grid-row: 1 / 2; min-height: 40vh; }
.abt-p3-detail-1 { grid-column: 1 / 3; grid-row: 2 / 3; min-height: 24vh; }
.abt-p3-quote-box { grid-column: 1 / 3; grid-row: 3 / 4; }
.abt-p3-detail-2 { grid-column: 1 / 2; grid-row: 4 / 5; min-height: 22vh; }
.abt-p3-detail-3 { grid-column: 2 / 3; grid-row: 4 / 5; min-height: 22vh; }
.abt-p3-photo-quote {
grid-column: 1 / 3; grid-row: 5 / 6;
font-size: 16px;
}
.abt-p3-quote { font-size: 18px; }
.abt-plate-4 { padding: 24px; }
.abt-plate-4-cols {
grid-template-columns: 1fr;
gap: 18px;
}
.abt-p4-col-1,
.abt-p4-col-2,
.abt-p4-col-3 { margin-top: 0; }
.abt-p4-col-1 .abt-photo,
.abt-p4-col-3 .abt-photo { height: 36vh; }
.abt-p4-script { font-size: clamp(48px, 13vw, 72px); }
/* Contact page — Cinematic Compact (dark) */
.ctc-hero { min-height: 50vh; }
.ctc-hero-content { padding: 24px; }
.ctc-hero-top {
flex-direction: column; gap: 6px;
align-items: flex-start;
font-size: 9.5px; letter-spacing: 0.28em;
}
.ctc-hero-main { margin: 32px 0 32px; }
.ctc-hero-title { font-size: clamp(64px, 18vw, 120px); }
.ctc-hero-sub br { display: none; }
.ctc-hero-trust {
flex-direction: column; gap: 8px;
font-size: 9px; letter-spacing: 0.3em;
}
.ctc-form-section { padding: 48px 24px; }
.ctc-form-head {
grid-template-columns: 1fr;
gap: 12px;
}
.ctc-form-head-meta { text-align: left; }
.ctc-form-spread {
grid-template-columns: 1fr;
gap: 24px;
}
.ctc-form { padding: 28px 24px 28px; }
.ctc-field-row { grid-template-columns: 1fr; gap: 18px; }
.ctc-radio-grid { grid-template-columns: 1fr; gap: 6px 0; }
.ctc-foot {
flex-direction: column; gap: 18px;
align-items: flex-start;
}
.ctc-side {
grid-template-rows: auto auto;
}
.ctc-side-photo { aspect-ratio: 4/3; }
.ctc-channels { padding: 48px 24px; }
.ctc-channels-head {
grid-template-columns: 1fr;
gap: 12px;
}
.ctc-channels-meta { text-align: left; }
.ctc-channels-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.ctc-process-section { padding: 48px 24px; }
.ctc-process-head {
grid-template-columns: 1fr;
gap: 12px;
}
.ctc-process-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.ctc-step { grid-template-columns: 50px 1fr; }
.ctc-step .n { font-size: 36px; }
.ctc-close { min-height: 24vh; }
.ctc-close-content { padding: 40px 24px; }
/* Generic page hero */
.page-hero { padding: 56px 24px 48px; }
.page-hero::before { font-size: 180px; top: -20px; right: -10px; }
.page-body { padding: 56px 24px 72px; }
}