:root {
--indigo: #2E2F63;
--indigo-deep: #212247;
--indigo-soft: #3B3C76;
--indigo-tint: #E9E9F1;
--indigo-line: #C9CADE;
--ink: #2B2622;
--ink-soft: #4A423C;
--cream: #F1E8D6;
--cream-deep: #E8DDC4;
--paper: #FBF6EA;
--paper-white: #FFFCF5;
--teal: #1F8A7B;
--teal-deep: #166B60;
--coral: #E86A4C;
--coral-deep: #CC5638;
--mustard: #E4A93A;
--pink: #E87BA8;
--pink-deep: #D45E8E;
--font-display: 'Fraunces', Georgia, serif;
--font-body: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
--font-hand: 'Caveat', 'Comic Sans MS', cursive;
--font-sign: 'Homemade Apple', 'Caveat', cursive;
--shadow-card: 0 6px 24px -8px rgba(43, 38, 34, 0.18), 0 2px 6px -2px rgba(43, 38, 34, 0.08);
--shadow-lift: 0 12px 40px -12px rgba(43, 38, 34, 0.28), 0 4px 12px -4px rgba(43, 38, 34, 0.1);
--radius: 14px;
--radius-lg: 22px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font-body);
background: var(--cream);
color: var(--ink);
line-height: 1.6;
font-size: 17px;
overflow-x: hidden;
background-image:
radial-gradient(circle at 1px 1px, rgba(43, 38, 34, 0.06) 1px, transparent 0);
background-size: 24px 24px;
}
img { max-width: 100%; display: block; height: auto; }
a { color: var(--teal-deep); text-decoration: none; }
a:hover { color: var(--coral); }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
color: var(--ink);
line-height: 1.08;
letter-spacing: -0.015em;
font-variation-settings: "opsz" 144;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.65rem); }
h4 { font-size: 1.15rem; font-weight: 600; }
p { color: var(--ink-soft); }
.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 60ch; }
.eyebrow {
font-family: var(--font-hand);
font-size: 1.6rem;
color: var(--coral);
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
transform: rotate(-2deg);
margin-bottom: 8px;
}
.eyebrow::before {
content: "✱";
color: var(--mustard);
font-size: 1.2em;
}
.handnote {
font-family: var(--font-hand);
font-size: 1.4rem;
color: var(--ink-soft);
transform: rotate(-1deg);
display: inline-block;
}
.squiggle {
position: relative;
z-index: 0;
display: inline-block;
white-space: nowrap;
}
.squiggle::after {
content: "";
position: absolute;
left: -4%;
right: -4%;
bottom: -0.12em;
height: 0.28em;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
z-index: -1;
}
.squiggle.teal::after { background-image: url("data:image/svg+xml;utf8,"); }
.squiggle.mustard::after { background-image: url("data:image/svg+xml;utf8,"); }
.marker {
background: linear-gradient(120deg, transparent 3%, rgba(228, 169, 58, 0.55) 3%, rgba(228, 169, 58, 0.55) 97%, transparent 97%);
padding: 0 4px;
display: inline-block;
transform: rotate(-0.6deg);
}
.testimonial::before,
.essay-sheet::before,
.essay-sheet::after,
.route-door::before,
.cert-frame::before {
content: "";
position: absolute;
pointer-events: none;
background-color: var(--tape-tint, rgba(228, 169, 58, 0.55));
background-image:
linear-gradient(to bottom,
rgba(255, 255, 255, 0.24) 0%,
rgba(255, 255, 255, 0.05) 42%,
rgba(43, 38, 34, 0.05) 72%,
rgba(43, 38, 34, 0.12) 100%),
repeating-linear-gradient(90deg,
rgba(43, 38, 34, 0.06) 0 1px,
transparent 1px 5px);
border-top: 1px dashed rgba(43, 38, 34, 0.3);
border-bottom: 1px dashed rgba(43, 38, 34, 0.3);
clip-path: polygon(
4px 0%, calc(100% - 3px) 0%,
100% 14%, calc(100% - 4px) 30%, calc(100% - 1px) 47%,
calc(100% - 5px) 63%, 100% 79%, calc(100% - 2px) 100%,
3px 100%,
0% 85%, 5px 70%, 1px 54%, 4px 38%, 0% 21%
);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.section { padding: 88px 0; position: relative; }
.section.tight { padding: 56px 0; }
.section.cream-deep { background: var(--cream-deep); background-image: radial-gradient(circle at 1px 1px, rgba(43, 38, 34, 0.08) 1px, transparent 0); background-size: 24px 24px; }
.section.paper { background: var(--paper); background-image: none; }
.section.night {
background-color: var(--indigo);
background-image:
radial-gradient(circle at 1px 1px, rgba(251, 246, 234, 0.15) 1px, transparent 0),
url("data:image/svg+xml;utf8,");
background-size: 26px 26px, 96px 96px;
color: var(--paper);
overflow: hidden;
padding: 104px 0;
}
.section.night::before, .section.night::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 22px;
background-repeat: repeat-x;
background-size: 80px 22px;
pointer-events: none;
z-index: 2;
}
.section.night::before {
top: 0;
background-image: url("data:image/svg+xml;utf8,");
}
.section.night::after {
bottom: 0;
background-image: url("data:image/svg+xml;utf8,");
}
.section.night .container { position: relative; z-index: 1; }
.section.night h2, .section.night h3, .section.night h4 { color: var(--paper); }
.section.night p { color: rgba(245, 242, 234, 0.86); }
.section.night .eyebrow { color: var(--mustard); }
.section.night .eyebrow::before { color: var(--coral); }
.night-doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.night-doodles span {
position: absolute;
font-family: var(--font-display);
font-weight: 900;
color: var(--paper);
opacity: 0.08;
line-height: 1;
user-select: none;
}
@media (max-width: 1100px) { .night-doodles { display: none; } }
.section.story-backdrop {
position: relative;
overflow: hidden;
padding: 185px 0 300px;
}
.section.story-backdrop::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background-color: var(--indigo);
background-image: url("../img/story-backdrop-tile.png");
background-size: 480px 480px;
-webkit-mask-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(#000, #000),
url("data:image/svg+xml;utf8,");
mask-image:
url("data:image/svg+xml;utf8,"),
linear-gradient(#000, #000),
url("data:image/svg+xml;utf8,");
-webkit-mask-size: 80px 26px, 100% calc(100% - 50px), 80px 26px;
mask-size: 80px 26px, 100% calc(100% - 50px), 80px 26px;
-webkit-mask-position: left top, left 0 top 25px, left bottom;
mask-position: left top, left 0 top 25px, left bottom;
-webkit-mask-repeat: repeat-x, no-repeat, repeat-x;
mask-repeat: repeat-x, no-repeat, repeat-x;
}
.section.story-backdrop::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,");
background-position: left top, left bottom;
background-repeat: repeat-x, repeat-x;
background-size: 80px 26px, 80px 26px;
}
.section.story-backdrop .container { position: relative; z-index: 1; }
@media (max-width: 640px) {
.section.story-backdrop::before { background-size: 320px 320px; }
}
.grid { display: grid; gap: 32px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.flex-col { display: flex; flex-direction: column; }
.gap-8 { gap: 8px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-32 { gap: 32px; }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; }
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 28px;
font-family: var(--font-body);
font-weight: 700;
font-size: 1rem;
border-radius: 999px;
transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
position: relative;
z-index: 0;
overflow: hidden;
border: 2px solid var(--ink);
white-space: nowrap;
}
.btn::before {
content: "";
position: absolute;
top: 0; bottom: 0; left: 0;
width: 200%;
z-index: -1;
transform: translateX(-100%) skewX(-12deg);
transition: transform 0.45s var(--ease);
}
.btn:hover::before { transform: translateX(-50%) skewX(-12deg); }
.btn-primary { background: var(--coral); color: var(--paper-white); }
.btn-primary::before { background: var(--coral-deep); }
.btn-secondary { background: var(--paper-white); color: var(--ink); }
.btn-secondary::before { background: var(--mustard); }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 2px dashed var(--ink);
}
.btn-ghost::before { background: var(--mustard); }
.btn-sm { padding: 9px 20px; font-size: 0.9rem; }
/* A soft lift and settle. The rotation this used to carry read as a wobble
at the size the header CTA is drawn, so the motion is scale-only now. */
@keyframes btn-pop {
0% { transform: scale(1); }
40% { transform: scale(1.03); }
100% { transform: scale(1); }
}
.btn-primary:hover { animation: btn-pop 0.4s var(--ease); }
@media (prefers-reduced-motion: reduce) {
.btn-primary:hover { animation: none; }
}
@keyframes doodle-jitter {
0% { transform: translate(0, 0) rotate(-2deg); }
20% { transform: translate(1px, -1px) rotate(-1deg); }
40% { transform: translate(-1px, 1px) rotate(-3deg); }
60% { transform: translate(1px, 1px) rotate(-1.5deg); }
80% { transform: translate(-1px, -1px) rotate(-2.5deg); }
100% { transform: translate(0, 0) rotate(-2deg); }
}
@keyframes doodle-jitter-alt {
0% { transform: translate(0, 0) rotate(1deg); }
22% { transform: translate(-1px, 1px) rotate(2deg); }
45% { transform: translate(1px, -1px) rotate(-0.5deg); }
68% { transform: translate(-1px, -1px) rotate(1.5deg); }
90% { transform: translate(1px, 1px) rotate(0.5deg); }
100% { transform: translate(0, 0) rotate(1deg); }
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--indigo);
border-bottom: 2px solid rgba(245, 242, 234, 0.14);
box-shadow: 0 4px 18px -8px rgba(33, 34, 71, 0.55);
}
.header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 24px;
max-width: 1200px;
margin: 0 auto;
gap: 24px;
position: relative;
}
.header-stars {
position: absolute;
right: 18px;
top: 10px;
transform: translate(18%, -45%);
display: flex;
align-items: center;
gap: 6px;
pointer-events: none;
opacity: 0.55;
z-index: 0;
font-family: var(--font-display);
font-weight: 700;
color: #E4A93A;
line-height: 1;
}
.header-stars .asterisk {
display: block;
font-size: 1.05rem;
transform: rotate(8deg) translate(4px, 10px);
}
.header-stars .asterisk.small {
font-size: 0.8rem;
transform: rotate(8deg) translate(4px, -2px);
}
@media (max-width: 960px) { .header-stars { display: none; } }
.logo {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
}
.logo-mark {
width: 60px;
height: auto;
flex-shrink: 0;
overflow: visible;
transform-origin: 50% 50%;
transition: transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.logo:hover .logo-mark { transform: rotate(360deg); }
.logo-rays line { opacity: 0.5; transition: opacity 0.3s var(--ease); }
.logo:hover .logo-rays line { opacity: 1; }
.logo-text {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.3rem;
color: var(--paper);
letter-spacing: -0.02em;
line-height: 1;
font-variation-settings: "opsz" 144;
}
.logo-text span {
display: block;
font-family: var(--font-hand);
font-weight: 600;
font-size: 0.95rem;
color: var(--mustard);
letter-spacing: 0.02em;
margin-top: 2px;
}
.nav {
display: flex;
align-items: center;
gap: 8px;
}
.nav-link {
padding: 8px 14px;
font-weight: 600;
color: rgba(245, 242, 234, 0.88);
font-size: 0.95rem;
border-radius: 8px;
transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
position: relative;
white-space: nowrap;
}
.btn-header-cta { margin-left: 16px; }
@media (max-width: 1120px) {
.nav { gap: 2px; }
.nav-link { padding: 8px 9px; font-size: 0.88rem; }
.btn-header-cta { margin-left: 10px; }
}
@media (max-width: 1020px) {
.nav-link { padding: 8px 6px; font-size: 0.82rem; }
.btn-header-cta { margin-left: 6px; padding: 8px 13px; font-size: 0.82rem; }
}
.nav-link:hover { color: var(--mustard); background: rgba(245, 242, 234, 0.1); }
.nav-link.active { color: var(--paper); }
.nav-link.active::after {
content: "";
position: absolute;
bottom: 0;
left: 14px;
right: 14px;
height: 3px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-size: 100% 100%;
}
.mobile-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
background: rgba(245, 242, 234, 0.08);
border: 2px solid rgba(245, 242, 234, 0.4);
border-radius: 10px;
color: var(--paper);
}
.mobile-toggle svg { width: 22px; height: 22px; }
.page { display: block; }
.hero {
padding: 84px 0 94px;
position: relative;
overflow: hidden;
background: var(--indigo);
color: var(--paper);
}
.hero::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-size: 40px 40px;
pointer-events: none;
}
.hero::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 22px;
z-index: 2;
background-repeat: repeat-x;
background-size: 80px 22px;
background-image: url("data:image/svg+xml;utf8,");
pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { color: var(--paper); }
.hero .lede { color: rgba(245, 242, 234, 0.85); }
.hero .eyebrow { color: var(--mustard); }
.hero .eyebrow::before { color: var(--coral); }
.hero-grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 24px;
align-items: center;
}
.hero-copy h1 {
margin-bottom: 24px;
font-variation-settings: "opsz" 144;
}
.hero-copy .lede { margin-bottom: 32px; font-size: 1.25rem; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.trust-line {
margin-top: 40px;
padding-top: 24px;
border-top: 2px dashed rgba(245, 242, 234, 0.22);
display: flex;
align-items: center;
gap: 14px;
font-size: 0.95rem;
color: rgba(245, 242, 234, 0.8);
}
.trust-line svg { width: 24px; height: 24px; flex-shrink: 0; }
.hero-illustration {
position: relative;
}
.hero-illustration svg,
.hero-illustration img { width: 100%; height: auto; position: relative; display: block; }
.doodle {
position: absolute;
font-family: var(--font-display);
color: var(--ink);
opacity: 0.12;
pointer-events: none;
user-select: none;
font-weight: 900;
}
.trust-strip {
background: var(--indigo-deep);
color: var(--paper);
padding: 10px 0 32px;
position: relative;
overflow: hidden;
}
.trust-strip::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 22px;
background-repeat: repeat-x;
background-size: 80px 22px;
pointer-events: none;
bottom: 0;
background-image: url("data:image/svg+xml;utf8,");
}
.trust-inner {
display: flex;
justify-content: space-around;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
font-size: 0.98rem;
}
.trust-item svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--mustard); }
.benefit-card {
--edge-glow: rgba(31, 138, 123, 0.38);
--icon-glow: rgba(31, 138, 123, 0.38);
background: var(--paper-white);
border: 2px solid var(--ink);
border-radius: var(--radius-lg);
padding: 32px 28px;
position: relative;
overflow: hidden;
isolation: isolate;
transition: box-shadow 0.34s var(--ease);
}
.benefit-card::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0;
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 26px 3px var(--edge-glow);
transition: opacity 0.38s var(--ease);
}
.benefit-card:hover::before,
.benefit-card:focus-within::before { opacity: 1; }
.benefit-card:nth-child(1) { transform: rotate(-0.6deg); box-shadow: 6px 6px 0 var(--teal);
--edge-glow: rgba(31, 138, 123, 0.38); --icon-glow: rgba(31, 138, 123, 0.40); }
.benefit-card:nth-child(2) { transform: rotate(0.4deg); box-shadow: 6px 6px 0 var(--indigo);
--edge-glow: rgba(46, 47, 99, 0.34); --icon-glow: rgba(232, 106, 76, 0.45); }
.benefit-card:nth-child(3) { transform: rotate(-0.3deg); box-shadow: 6px 6px 0 var(--mustard);
--edge-glow: rgba(228, 169, 58, 0.42); --icon-glow: rgba(228, 169, 58, 0.46); }
.benefit-card:nth-child(1):hover { box-shadow: 9px 9px 0 var(--teal); }
.benefit-card:nth-child(2):hover { box-shadow: 9px 9px 0 var(--indigo); }
.benefit-card:nth-child(3):hover { box-shadow: 9px 9px 0 var(--mustard); }
.benefit-icon {
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
position: relative;
}
.benefit-icon svg {
width: 100%;
height: 100%;
transition: filter 0.42s var(--ease);
}
.benefit-card:hover .benefit-icon svg,
.benefit-card:focus-within .benefit-icon svg {
filter: drop-shadow(0 0 14px var(--icon-glow));
}
@media (prefers-reduced-motion: reduce) {
.benefit-card, .benefit-card::before, .benefit-icon svg { transition: none; }
}
.grade-card {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 36px 28px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 5px 5px 0 currentColor;
transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.grade-card:hover {
transform: translateY(-10px) rotate(-0.7deg);
box-shadow: 10px 16px 0 currentColor;
}
.grade-card.g10:hover { transform: translateY(-10px) rotate(0.6deg); }
.grade-card.g12:hover { transform: translateY(-10px) rotate(-0.45deg); }
.grade-card .grade-number { transition: transform 0.28s var(--ease); }
.grade-card:hover .grade-number { transform: rotate(-3deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
.grade-card, .grade-card .grade-number { transition: none; }
.grade-card:hover { transform: none; }
.grade-card.g10:hover, .grade-card.g12:hover { transform: none; }
.grade-card:hover .grade-number { transform: none; }
}
.grade-card .grade-features {
margin-top: auto;
padding-top: 20px;
}
.grade-card > .btn,
.grade-card > .handnote { align-self: flex-start; }
.grade-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 8px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat-x;
background-size: 40px 8px;
}
.grade-card.g8 { color: var(--teal); }
.grade-card.g10 { color: var(--coral); }
.grade-card.g12 { color: var(--mustard); }
.grade-card > * { color: var(--ink); }
.grade-card p { color: var(--ink-soft); }
.grade-number {
font-family: var(--font-display);
font-weight: 900;
font-size: 3.4rem;
line-height: 1;
margin-bottom: 8px;
font-variation-settings: "opsz" 144;
}
.grade-card.g8 .grade-number { color: var(--teal); }
.grade-card.g10 .grade-number { color: var(--coral); }
.grade-card.g12 .grade-number { color: var(--mustard); }
.grade-features {
list-style: none;
margin: 20px 0;
}
.grade-features li {
padding: 6px 0 6px 28px;
position: relative;
font-size: 0.95rem;
}
.grade-features li::before {
content: "✓";
position: absolute;
left: 0;
top: 6px;
color: var(--teal);
font-weight: 900;
font-family: var(--font-display);
}
.testimonial {
background: var(--paper-white);
padding: 32px 28px 28px;
border-radius: var(--radius-lg);
position: relative;
border: 2px solid var(--ink);
}
.testimonial:nth-child(1) { transform: rotate(-0.6deg); box-shadow: 4px 4px 0 var(--mustard); }
.testimonial:nth-child(2) { transform: rotate(0.6deg); box-shadow: 4px 4px 0 var(--indigo); }
.testimonial:nth-child(3) { transform: rotate(-0.4deg); box-shadow: 4px 4px 0 var(--coral); }
.testimonial::before {
top: -12px;
left: 50%;
transform: translateX(-50%) rotate(-3deg);
width: 80px;
height: 22px;
}
.testimonial-quote {
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--ink);
line-height: 1.5;
margin-bottom: 20px;
font-style: italic;
font-variation-settings: "opsz" 40;
}
.testimonial-attribution {
display: flex;
align-items: center;
gap: 12px;
border-top: 1px dashed rgba(43, 38, 34, 0.2);
padding-top: 16px;
}
.attribution-mark {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--teal);
color: var(--paper-white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}
.testimonial:nth-child(2) .attribution-mark { background: var(--coral); }
.testimonial:nth-child(3) .attribution-mark { background: var(--mustard); color: var(--ink); }
.attribution-name { font-weight: 700; font-size: 0.95rem; color: var(--ink); }
.attribution-role { font-size: 0.85rem; color: var(--ink-soft); }
.paperpad {
--stock: #FDFCFA;
--stock-back: #F7F5F1;
--card-grain: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALQAAAC0BAMAAADP4xsBAAAAD1BMVEX////9/f36+vr4+Pj29vbkpyyJAAAcN0lEQVR42k27vXIlSbKk+WlUyWacWpEJNTDTNcwF+v2fqYFLVTYDs2hiEOcS0CU8smSTROLnRLi76a/L/3ntyggM5ONQvxznW+bztDzmk/G8jfnv18///NfH6/g83v/Z437xp/T2OUDRxb90jFzQELHpoIAjmWRwmYyZTCqYACcfnOd/RXZOTVc19osRaREYDwEBLYOqz9+rZ/30lLrCYMSnami6QI1zFuSjPEp9MlSPHJAJ2zE0rE+fczvAIb9DxkQGCoE8ycno+HgDQIbyu443MpZqWhAycJCz9E0gYAZzDAKyNQSAeqUgY5HhODxAGNsjhpxl8HdQYxd0ZxqPMeOhwPiVzx4atu77w64nohJmPPrsTNMly8qUkRD0+J85pyyVgpK5f1JurJP7w26gqoMGMusvuLweJIwGYdtFJ6DpgFPQNlsV9/oJrKKDSKPaVNx/dfLZ1NGnLIYXo3KSRkx3Z3rCWwnUdA9gQ/VAmXjq3l8wZLNyNBhao+kZ34tXZbhfk8nwOZSkOvrvZ9IJg1m/7aMARSZm2zAz67HqyIHX3zWoAnQD63f1MMHMSQVeSv7+BNcozNGdTK/XzulsYKxyj9BMoSBU6TEzuKCNMMRJd+vIFIA9MwB5nzTovQtoMUa/uw3fw0RHDETryI8YWRm6GgEvx5kPHVTeXxoYN3ZDhj5Guh94KkxqE2f5o8dvnFIxwzmQnszBqVEJQKpSyKsZYEQyo+rutUH+WbYsRAaCtqwVaXG4yKetIzDj7jPY4EAaJYgBt9ayfcPgUXm9sZ7JJEAQmwjDONLYc46AJOCGbgGDOOvIh/RPF1RRR7mYZJQIpXMflZphhP0bcGW/Hj276Dx8uU8uXQ+ee/GYXBe1783zERmu64/s87yePE3Qnp/UT8Rzf4Aef/YDWdUbIhtMeZ2qkxlAJZWH/u4R3cPgLTSkJa3Nb4nomI4p+9coW9N1U71BkVnbN132+j6joIURjZyxh+nJrLPu8yxHVaYwnoakR4ORttdAsQ4eqIiKmdnSa04CdnW90j0polnf+3LkKAOyvElKJsOQ0BP/9ug5zc/Hrpy7rJo/PD9qr/x8omqul13D84/89WD2x/8+910Xzy/p6/nUdV3XPqX9Bxc/tVP7LnRdxfaZNh047mFDhnOY4nB6bU2awwUuSTVAlO4+vjs9Q1p044CQ/GlPb6PiczQMpUAz9Wo7U1KGEOZQ6TR6cSA+AE9AA3pFQ+gZFTRjdDr5HVCwBwU1eOYbpikgqvoQcgLYyUcG0TUlCp9BY9wLAtcMwfUNv1nyfj4ejy/pz33gGvafXPD8S5YeSf3Q/vzxAU8uXX7s7HD+uV/aRzx20P41JeBRX4+dYdf+c1NnZON1LKGTOaA4AjjSDDBRPrs7p3gfjQhJh2MKa23SgIe1TbS5SHsQKFSBMuJvVgFOeuxycRbMETBmSqOF2IWdXugUxqSH314e+zXKxUX9df3BPjVVj6/r7OKC66cv+bou/mdn3y/+fDJ/XI/iwT98wcV1EV08a/B1cfUfIGsD4YMkCgVTvt+NFmAiOClPcI9qoDiUYc4zdHro84ZEqLKg5Wx8dkm8zID57qEno2JNUAvgQPhzoeQ3os8MpKPmhIyj8idruLymQfy+Xuz887s5UyQNXV2exGQ7JlT+njFm/vOKiZwmmHN9CjRwYDEcrYw2dDDjKWH3/RpuSjOcBQzlfzVlmHy8uefGeYbt5ZUSycSjGTr0SR14mzd3QCojPGWZMHqp4ONT/gXpL2jto7jCDIZkLQ+Np45k5sSRBzahkgjOUMgvbyNxQGBoLDOmSLIGpIByTtUb07/4gWCY2AZTZDN6eaUY+nOgjjGhIKLXn2VGgpwL6w3994f3Z3xAxn6DUy8MKhn0W/X1sCDvF/uD54g8Stdj5Lme+9fjsX/x5xcnwPPx9Zh+IOrHv7Xz9CXpi69r/tj7TP359Zd47BewBTizmORIxxx90mfl119vZk6VfFPqNlPF+2mzAPYIumkWPaiAzPwmX9ej/tLO40/+vGofdrL944LHo67ZeeYq9Nj/up7748fFPip+zENfV105H8/95x/sD/56HtczPB87wOVtnXhHAnpmRpUzc67dYHOoQoRfXivvMhR9Ijw9JCBLMnVLAxrEbNEiYbjoTii3nKacDieoSgwSOhHzgYPeEjnUOvgGlauM3M0Qsw2y0qARw+JKBmdGcAiRBcHpg9fEBQlWGeTXLEEheigH6+3wnNnc+cWzsBE0xmS+5RbtTzCk0zPavJgAQ7cwI8YdJ1lLOCBNqE2egZng3iwKzjlVIzHoGNHrxcMxdqPRYjM9xU0ZEaO/ifi72cy2iJpf5WDSBUcCddT3EoZeP1uIzPpVMwUeah1M6YbRzFTxnWnTW/fp75bGI0bCKs0szeScVfQUXpqRRpUJDU1xAHQfJFApZ5oTKsMGmRlC43TSI3CWdtIRfq3E+vqoIjC1QPBckEXPmjmTjDVDtAGhokjzXjDz6xUcFYn+pBxCaNXiPOvNusjaKlA3kYwl07HxthSfAj6YNe9UWqMsKg8qepApC7KQ9XuKAdTvQGRBn5ILzHxofnvj8ahL+/UQjlAZ2LkejK494rnD1OPiWde1C/oJNc/H/y1pf+Tcyb+v/dKPq/5x0ai+IrKN1tKKjCTS00KqhIRpjmHkJPUJp9wLsIDJbFUWk9yvurvlnCfS76DvRcKayJkk/b29zuQ0kA3CcUbA2D3AvEVHL9YhxRnGNiRyHf9K+fSWFh8juqFToBnEJLLBYqkZQ4gYqsrpJbPWEZ6XMvc6iGYQmd/B/Z0EYPTuypQho3nLEoeFQ/GOqCkdgwcQDq1jyVv1dix23CmYrm0rqO7Bsvy5Vr1ykkXkFqeQhYlvDj1I2Jz3Awl7mGQd9cKBzRW5CuSGmgDpTqk7LkB8ItpzGyLDgep1zb9+z0iZE3r9f1ctFvBb9cW+a99lmB2eVF+c4qEHz+Pa9eO6rFHLvvgSelI1kv/ta9+/2B+5vq7Hl2q/eFyPHa6p+t19/tfpLnqS8iQiG+lK+NzyslgKCV5jmUNrK3yD6vNmq/JNI9zEQdo6xscMCQpkcGFCVRQZn/XaVAsQmdK4T8FkMNhNSFeQQYQTwSblPLUwrIhl5sWqF2tRRuTFdVi4VCQ94XMxwLNoMTBNhwVTxs7veFJrJBFG9Y7JaeloFvWBJug1UEMfH0WRjDkzb828HKPAUq6QM5K+t6kiLHhEduzpjtIzBVGYgR7pPyVSTHwzbxuoqkzCGz2DmfXaM1uP3KNjHYKNU6Y3euAFZlzcK4AxpdfFK3RvGhT6tmTtWsdpqO/e7hfEiDTksOxkSPM9YSRXCnf/ktr+7PQUt8GpkKoZXqq6wSxjZ/OMyMQRA6cm81LriU+WJIh40T3t8iFyFi3PBzMQUeRYnNYN5QyqrR0sn91pH32Q6TkWw+N1WHZFOEivEWbfCjVxGFQvRsx6rumecqbYVLVwjUYD485sVSCEazH3GbkMvfCwJHfLE7xMHVM0Z2HIDMFbROYYI7YEqDfSUDrIMGHKQwxrfTxxN+XldvawwEIoMTLd9ebRdvuEgznusVcL/xayF7fzTFNYC0vLpzuqxeDIZ/Maarl+WFK9bel7aiJa7hb3/jlGquVuqTxEWJniQEXOJZVkJdPzkvll9LB5oLeZyDia2zVK0zj8rS5QQJlhKSj+GzffU4YenxFlMjrOZfGTTtK/g7R+zzFK4xbo9psRhKNJInNj1gFzzIu1ZtHUrSlph9YCiPFGlR0kC3t0a/tA5i3TTEFpcZVMOea9AxbGpWZ6dIwyUEH1X1EtijPMxJE8nV4zEOEhZPRS4COqcs/6T/fCY60tn/VlOcDwTzPg2eyjg4YO67OsEVPBvUZQw7SMKDr36p1AcuthoiN/I8LaXrP9sxkgk4/qmxnIy2VtRtNh0DCLsM5N5Pw93x8NywhVZgYRlZuhOWqz53Wx72NEVabbiJ6O1gwPcSUZGC2xmmE+l0hqkMuVY1Z4MrdxvPUIvcKIfqv7lDRpcnreDnk5sDqVXmFFr8iotleYngqOSgqhz6DXdIutQ/MfavEND5jPDb15nSMhuQ5iH7TcS7JnVCASGE6EcQ9Bn71m5AajtkSh9CApk6jKLo9NmEL0qSmccdnL/g4vtbZMBa91Cp4xmfy2HfOPE+2i9nypOnr4wRNd/1M/3nX8rEti/+uP5LmjH6fgIa7H/nP22i/25Q1ctV/w+L/PXA89r/3a2Irbq0UaciLJydgZeWSOBqc3w5wcEWwCm57WDRHKUJhWYaP8TmsgfJ/LqRsdgZM+FwsZ5u2dRpjXD771OnI4soRcbH+KCShax9a/pGKasrkN/7HUHe5wLcMCqSlOzkWR/lnoY+4jci4/Bq9EIb5339TWQ6FpGYLRgd09OCNo48+Gwq+ZQy+F0+cR0zLy0UvU6CY6AiQBG16kKLA8dnrOJU0N8jrIKs/pmw1PW2VsqiSiV0IrKpLb1wU2ZGs+xLiFbzgFceYe4SXTvV63h2TZKeqVtWZJyVrRwajKM5XeBPMd4pvdMcxwkrBwm+ZQGKZ/WQgrBgYtDtMrsUPIobLIBxvAKfPCTKbPBHuOQmbGnfacLaiDYzgCs/ZZyzRlJYyWWkZDJR2d3pLxgVj+Ngg2lkuMa2im01QVDPQJfk0UFtgVRnxzjHoyyYLeDlsPy4tekydGqdfyMcuOP4ldRCsAJ6hU1YJOqceS+2QLLljECwK/4esCqq9w7XryfFjzx875J9f+3Kmvecjnfn09KHE9r8z1uJ5cnH58PWG/9utRX88H+8+XfQfl0r5vvlmGKVlUFmyuWfVxg69JI4lMH8d7OjjF8tGTge4K6ds5KCj99uCxs+vPr+uxP+tL/Pnj+eNnHkGw6+v09dA+sD/+Afz1cn1dFxuX2PXo2p/76PHUznVdPIB5KPOy57cH9Xg+QQ/04NLo4uu5X9e5A71f/rmXeTzQ/tdjHrVfTxW+VI8fhbTzNPvu64rE8+EPHlHBb9fjevx4/NDs/fxx1g8yz/35j8tSzn9w+rr2x1VXzv16tAqe+46eaPdP9XX9we6/nvs1CO/X/hXtuh6zbwUzM3OQntUtCKjGLkS9lGsEy8UttyyPDx2DPCKtcXpF3CpGaszRG3BAJBVN3ln+eQO8GQ5Xf39+/FKFMFVkRu5JKwppmGxFZlh2tRj99uf+fDx+PCvUDvtff7jYLxiu63FdnDn97F3X89pB1/7z/80892UMXju6xs/H9eMsLh4FX/85fl6VS1tP1nCbeRGnrZsw9Ypp79bA+Ps+CcS8rXRi4aPv7zukJe+mhHxsJxxAOOiiJK8EVF7mIhzDyz3gO40/3zl1rOGvgpXlKWfWrA0c3ZrNnumhNYTEt+uAS/JQPkk6ieyeYcgknJwMg2i716D3oqjdcvf494rTXTRqz9TLcitngsRyJihNSs2BW8MowmmM03M7y6stc8ztw+i30hXtW+3Xvs9jP3lcP/VD+75/ce2Pvnjycn3VxbU/69r//eMCHjy/Lp675uv5yH8eO/sFvr5++uvU4/qzvp6b7Gm5GIkqhyOZ0ZxiaISYxf7k8vjWycnIJCLjKmTxgW5CdYI38mHoJsmyYU4xdrp4JSt84Uia7haqKpDQoXtXK+mMklouAiE9bEzON+jRMo+cOWJmdIMwFpxSDWqMrKrUK/oOK6GB23dSVVRFAbMReDHGIe/jHkt89pv9dncFTOJyEs9qGr2xCc+c0TKyiZRxz9zpD86WkZsekN4OlbGc0a12tP3/iEX5mHSPpps7ePgVwC+I+25GY0DaWqXPd4uqu61BUCWdZsXPWvy24GORse+QDtIRppeX7FYVynIpVck2dQTJpb+bNzMUvwbhTHqZNhgXAzNTOYVfdd6GfJPb4JtF1I7OtpoDdaMwvZD1lyYxXgptwI2UW6YmQfAKkn+dU/C5ahUM2hAqububmZXxkUFVWW9osXdxVtnraQzDac5CPmbGiULDsfz56E3b7aNDiKELcZvrQ7RiJuk1yeSUa8kwHZ1JxtEii4LQQ3SMmdGxSQs20JwqRssfX8I4U+Msh2lCd0brieulWKKtF3b80yVCqdYBRFu+p/FxkmTqTrAg/bHM7iUjpxe97G4JVIPTQyifgMQxbxazjGloNrnFed7Rzd89roxRlQfqbXBMvfH9Dp+DwjFDJOV0hvLR76sD1d/LE1JvGuB7VWQYZqwjyWkFTrdHSlrD6hmmMcXpgl5W572296pNGZmDzdTRZ2eS3DaiZpbYjsN5rBaRWUxxJQp9B8Yrm9Yx2GmG9OqPSGxNZsJp3gfOpQhLpOVp5Ml4QOWPdap8BKJBTiaRi1oS21W/um5oM3DggzJl1yuDy54FGytzvbf368gqzupfB9eZF4uVE1svtxnZ4NfttnjpKRU9wyviDa/emDvL2VxAWOA1lPvOwWFVxvyr/OPG1Zzn76PKGMHkrO8P61eDrTmNinhWTyRU0LC5Mr8Mo426a2P1vsyWQPD/mt8el55ov/b5EntG/8880Ne5X5f+vH7WcXLx2P/Pl358PesCUvvT2/7vPy/Ynzyg4bGLq54/la+TS09pNrzC1BdDOJUZTXcoi+Tzv9c4buhzOWY6u8ccXkNvNYz6QwfE+DTNa8I2vzqMS6q/ZZzAiHoF8k1mBb5r5kk+uru1CmOhe8aMc/drZZnhg23ZeGuiLvWpSCpxQqFzNeg4wes7NWsms4hYejhNBTQ6ONYWTW8Ls5s5bx+PnIQ+4gFRSANatGD+TgIsXilAciKJ09gZeqQO/MZTeaKvHwj26+ef4AuuPzJc1+4nXOa5fz3rup7i0k7O/fm4vvbrkSfslfMf/KMfdXm+Vmn3uuTNPkZQG6DNnqmR6/iXVsVzFYT6TthsVtJV+e4RpxCjkmZVxEYyHhFtYrDNEYX/WqjGuVq9OKxazPFeqzyAfmU7InCYg5DOlLUWQyum7t9lOMZjufWBTnG+ZYqcb8udUQZxwtGs6qfl73FINdV0rfY1OLe6dWU2RM25RuYRER1itCa1BHUEO3Z/5DZytzqnVTXpyXAXlnRr6FWH0Mt24OQwswyHA+awvSrRMYufDaNjFdXSEPsO8b6Xpw8iRQi1fDq8rdqGZNrAdJgP+iPl9doODsKKxby2Y8+anG6mtxUONnNv9Ttq640DJFzmtEMhRzGzcQR8cq4XNJpVf1xnrnFZb7ZrJDrfE2H6tJmE7VeQsYiJ1gZrQdonLSVy2fm8TeAMdTSDlkO7VulX8VurOfn63dlIjs+he+6qNTMCVXcvk0amZzhLZF7cq1HlcZKsTvRIb3dRmm0c6dz02+P5vC6l5acufT3J+efjH/p67vuXBJd22K+HouLi8XXtPHceIj8f0n71g+vy9WB4/HiwP/cL/W/2fSOpcp815VWcuNlqST13i6voBUukLRsNdd7wzqotkOZcrpM4Bdsq/VOWw1m2PPkXCi6D7el7nvJSCvKGju+PX4SufiXqqlkfbXyQOTcxk5G6l8CGCT3+5cS5vZT73YVd3FAEKjIvbx54XzNzLZPPAbLN213RcDD9PlkFSHpy+m7E9/B3PDzNrO4cUZHhAObov1vvPvwO/LafS2Fe2p9XfV0PHjyu/dp2PX4wj/1y/9vPfaq+LvT12H/qh3Jd21tLO39dl/rpx8W57+zz5Lp+8vhz2OowrkDp8IrrSDPGmVp5mAVVU0wPHZ/rNLoOZbX7Baq3lRDd9EMbfdrDTHr9xE2RWEZ9zzlLDOWQYRr6yEjHxwyDrBWYyHNXVVZ6yLZCWgeSaiEPU6sjT9J9ePHzk89ZmQ0z87rCBRdDRqnQTVGkysm6HtIJ57okwd//HKqcmXUpgbtaQpkX2nwsyswc3X/nd1rZ76oIZVsb0aUbz/NJQomPNU7T4G3FFazgcDVBStDdYFUKo3RPUsv3rdruEm3zv2aNnq1qBRXdw2E8b+Sw07iS8eoY3Sm6VcvxevGv7HXuitF2mzb0R8NQskw+z+Jz3P9ZwdWC1qqlNddKzS0KHbAya2x2/oVxErbFh9fwvjcPI3tF/H5d2wwYi4ZXSYekDjPqFZx4WB3lQkhihtkmA2e9HLy8Du7P/hzQMFUwnVX8Om6Wo0Vik5JWX259tjNowEXVQVJkg2NgkKwlPmd8X2nKKlsMOuez0zoyWY6I0CELFhXpKrBovJ6PZKPmvqrVcFo6DomZBTgLsqu/FyddxxHCCvL8Zh9eN3uM1k2UcJqZ2RSqTsZmsGzN59JAzLl6b8uvusUHuEfDaYYMkvz9wffyZRwjDtUBG5E5UE3QQQ9vdw/jVvh3uL6uEHCsnuHRkYvp28Kv7vguC0dLjm85Wb4ByyC1RBBe0b9XpLdqyNNedcGqO0vVmRmvIXSOJKhVyXBtkPXEyxuT3uxaA5vjRF6l97t5rrujN7V6Vynh0Xj5j4Urfd8B2ooM9WZYiKX7btpQWm5i7hRrsa4+Cz57at1D0qvlyGukda0ythDaOMbLc1iu5mcza6pw6CYz3TpGv9yxkOl1VWPVezS1mVT3TZs7eQtbn2LSIQvFJu+L6YVx/rat7vJaFV6L/C1OsD9bFN+z7p1MRhXe/3vmc1ubajhRbvqkSaPCM92MDZ5IWmi7Ai818VSP3PgG/WZSJXN8wu/+RN+rfbXY+ryNma4pqPwHziXoV1tjMkqL1JjhzkhXPaMUrJYMn/IWhSUNcLd8VqHcnefBfLdIL2xmIpwxmyzy2r2MxiV9l0bPugLANtS3XtPTc7OjhrNQdYdhNI5W2c4NWLP0YEsDJ3cBqBdINel+f5d7g4KWD7I4mMaB5r6AtZjF272UJ3JMKskkXatVZeRlosMb6aRbW6C+QdKdTMfbCDHIfvGSYPKIHr1qTUZpTu6XdN8X0LIEdRaq9OlNzfCu0sur58zpU4vBMy7kzC0tIsujA9dLYuOzlkhcnknOl9c4ySoJ2xvKVKXTpw6bZJqRj0CnZ4Wywd033vzqggff1xjuONqznTXDpC31toqOpvv9V0VmZKSzaIW4NEhVPhetD33O3S29Fdc5g3jvA0LntHxoK+tlYc+xOr+BKSd2SwoaovhXn4oexa8gfS8aZuzk7ihTt1cuNuiQsosePphz5TonM4o5+VxF4SxrAvyKZkhJnLOKMzln9ZjHUTGZ5jf2549hP60d/VhXJ8fn13nM1356dl/P1vU/Pwb9+Llz8eR6+npqv/yF8gdff+R6/NCOgYuH8tRe16ahZ37dJakZp1HqWLcTQBxOvs+SAxWOrEnWjGBCmm3dJmT59y9vh2A7EnysIkQGexl2571CLvjYSh0da59p3ufUqtYu93fWxcVaxuXrQA/UJoXhzOlF+lgXKhbpogonlIumT9XQQQe1eseQiZ3gaYNmW6uZZuucig6Fv4lqMfSpX01+r+pNZs1W3x0i3VUGLy4rjxycmXyD6G2tOm2S+8LgHKSShemeF3nJZ4rgt7eySd+l3pJfM8ftfMmfY+Ysw9Z3tLMcMN1yQVPrNsm6DTW3OedZhG6YxVryy3aYNXVYldbIePPqEApcq12bqXCsfucCgLZPctIdnHGaODPu5jVj2/eqR/VmVpt7W4Oz4dRt8MwvZ3Dke3edRMQ5a7gvxMyit7OyYNUyW7rXxPz8KP1/PZPxWZtlq04AAAAASUVORK5CYII=");
--print: #1B1A1C;
--print-soft: #6B6A6B;
--mag: #D6236F;
--chip: #FBF1F5;
--hair: #E2E0DE;
--sheet-w: 720px;
--turn: cubic-bezier(0.46, 0.03, 0.34, 1);
max-width: var(--sheet-w);
margin: 0 auto;
position: relative;
}
.paperpad:focus { outline: none; }
.paperpad:focus-visible {
outline: 3px dashed var(--mustard);
outline-offset: 18px;
border-radius: 6px;
}
.pad-stack {
display: grid;
position: relative;
perspective: 1600px;
perspective-origin: 50% 12%;
border-radius: 2px;
box-shadow:
0 26px 46px -24px rgba(14, 13, 32, 0.55),
0 54px 74px -38px rgba(14, 13, 32, 0.5);
}
.pad-stack::before,
.pad-stack::after {
content: "";
position: absolute;
inset: 0;
border-radius: 2px;
background: var(--stock);
box-shadow:
inset 0 0 0 1px rgba(58, 56, 70, 0.05),
0 1px 1.5px rgba(14, 13, 32, 0.16),
0 5px 10px -4px rgba(14, 13, 32, 0.3);
pointer-events: none;
}
.pad-stack::before { z-index: 2; transform: translate(-4px, 17px) rotate(-0.75deg) scale(0.983); }
.pad-stack::after { z-index: 1; transform: translate(5px, 26px) rotate(0.90deg) scale(0.974); }
.paperpad[data-left="2"] .pad-stack::after,
.paperpad[data-left="1"] .pad-stack::after,
.paperpad[data-left="0"] .pad-stack::after,
.paperpad[data-left="1"] .pad-stack::before,
.paperpad[data-left="0"] .pad-stack::before { display: none; }
.sheet {
grid-area: 1 / 1 / 2 / 2;
display: grid;
position: relative;
border-radius: 2px;
transform-origin: 50% 0;
transform-style: preserve-3d;
transition: transform 0.86s var(--turn);
box-shadow:
0 1px 1.5px rgba(14, 13, 32, 0.18),
0 5px 10px -4px rgba(14, 13, 32, 0.34);
}
.sheet[data-d="0"],
.sheet[data-d="1"],
.sheet[data-d="past"] { will-change: transform; }
.sheet[data-d="2"],
.sheet[data-d="3"],
.sheet[data-d="deep"] { visibility: hidden; }
.face {
grid-area: 1 / 1 / 2 / 2;
position: relative;
display: flex;
flex-direction: column;
border-radius: 2px;
overflow: hidden;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transition: opacity 0.3s ease 0.08s;
}
.face.front {
padding: 34px 42px 26px;
background-color: var(--stock);
background-image:
radial-gradient(ellipse 88% 60% at 14% 0%, rgba(255, 255, 255, 0.85), transparent 68%),
radial-gradient(ellipse 122% 94% at 93% 100%, rgba(58, 56, 70, 0.024), transparent 64%),
radial-gradient(140% 130% at 50% 50%, transparent 76%, rgba(58, 56, 70, 0.02) 100%),
var(--card-grain);
background-size:
100% 100%, 100% 100%, 100% 100%, 90px 90px;
background-repeat:
no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode:
normal, multiply, multiply, multiply;
box-shadow:
inset 0 0 0 1px rgba(58, 56, 70, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(58, 56, 70, 0.07);
}
.face.front::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(30, 30, 62, 0.34), rgba(30, 30, 62, 0.05));
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.face.back {
transform: rotateX(180deg);
background-color: var(--stock-back);
background-image:
radial-gradient(ellipse 90% 62% at 82% 0%, rgba(255, 255, 255, 0.55), transparent 62%),
radial-gradient(140% 130% at 50% 50%, transparent 68%, rgba(58, 56, 70, 0.04) 100%),
var(--card-grain);
background-size: 100% 100%, 100% 100%, 90px 90px;
background-repeat: no-repeat, no-repeat, repeat;
background-blend-mode: normal, multiply, multiply;
box-shadow: inset 0 0 0 1px rgba(58, 56, 70, 0.045);
}
.sheet[data-d="0"] { transform: translate3d( 0px, 0px, 0px) rotate(-0.35deg) rotateX(0deg); }
.sheet[data-d="1"] { transform: translate3d( 3px, 8px, -14px) rotate( 0.50deg) rotateX(0deg); }
.sheet[data-d="2"] { transform: translate3d(-3px, 8px, -28px) rotate(-0.75deg) rotateX(0deg); }
.sheet[data-d="3"] { transform: translate3d( 4px, 12px, -42px) rotate( 0.90deg) rotateX(0deg); }
.sheet[data-d="deep"] { transform: translate3d( 4px, 15px, -56px) rotate( 0.60deg) rotateX(0deg); }
.sheet[data-d="past"] { transform: translate3d( 0px, -2px, 66px) rotate(-0.35deg) rotateX(-104deg); }
.sheet[data-d="deep"] .face { opacity: 0; }
.sheet[data-d="past"] .face { opacity: 0; transition: opacity 0.28s ease-in 0.46s; }
.sheet[data-d="past"] .face.front::after { opacity: 1; }
.sheet[data-d="0"] { cursor: pointer; }
.paperpad[data-end="true"] .sheet[data-d="0"] { cursor: default; }
.section.night .pad-stack p,
.section.night .pad-stack li,
.section.night .pad-stack span { color: var(--print); }
.section.night .pad-stack .q-tag,
.section.night .pad-stack .q-scene h4,
.section.night .pad-stack .ol { color: var(--mag); }
.section.night .pad-stack .q-no { color: #fff; }
.section.night .pad-stack .sheet-head,
.section.night .pad-stack .sheet-head span,
.section.night .pad-stack .sheet-foot,
.section.night .pad-stack .sheet-foot span { color: var(--print-soft); }
.section.night .pad-stack .sheet-foot,
.section.night .pad-stack .sheet-foot span { color: rgba(107, 106, 107, 0.62); }
.sheet-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding-bottom: 11px;
border-bottom: 1px solid var(--hair);
font-family: var(--font-body);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--print-soft);
}
.head-mark { display: flex; align-items: center; gap: 10px; }
.head-mark img { width: 19px; height: 19px; opacity: 0.92; }
.sheet-print { flex: 1; padding-top: 26px; position: relative; }
.q-block { display: flex; gap: 15px; align-items: flex-start; }
.q-no {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--mag);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-body);
font-weight: 800;
font-size: 0.86rem;
letter-spacing: 0.01em;
margin-top: 1px;
}
.q-no.challenge { background: var(--print); }
.q-body { flex: 1; min-width: 0; }
.q-tag {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--mag);
margin-bottom: 9px;
}
.q-body p {
font-family: var(--font-display);
font-variation-settings: "opsz" 14;
font-weight: 400;
font-size: 0.94rem;
line-height: 1.56;
color: var(--print);
margin: 0 0 14px;
}
.q-body p:last-of-type { margin-bottom: 20px; }
.q-body b { font-weight: 700; }
.q-body i { font-style: italic; }
.vinc { border-top: 1px solid currentColor; padding: 0 2px 0 1px; }
.q-opts {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.q-opts li {
background: var(--chip);
padding: 9px 10px;
font-family: var(--font-body);
font-size: 0.83rem;
color: var(--print);
line-height: 1.35;
border-radius: 1px;
}
.q-opts .ol {
color: var(--mag);
font-weight: 800;
margin-right: 7px;
}
.q-opts sup { font-size: 0.72em; }
.q-opts.opts-wide { grid-template-columns: repeat(4, minmax(0, 1fr)) 1.5fr; }
.q-opts.opts-widest { grid-template-columns: repeat(4, minmax(0, 1fr)) 2.4fr; }
.q-display {
font-style: italic;
font-size: 1rem;
letter-spacing: 0.01em;
}
.q-hint {
color: var(--print-soft);
font-size: 0.86em;
font-style: italic;
}
.q-scene {
background: var(--chip);
border-left: 3px solid var(--mag);
padding: 15px 20px 16px;
margin-bottom: 26px;
}
.q-scene h4 {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.62rem;
letter-spacing: 0.17em;
text-transform: uppercase;
color: var(--mag);
margin-bottom: 10px;
}
.q-scene p {
font-family: var(--font-display);
font-variation-settings: "opsz" 14;
font-size: 0.89rem;
line-height: 1.52;
color: var(--print);
margin: 0 0 8px;
}
.q-scene p:last-child { margin-bottom: 0; }
.q-scene.carried { padding: 12px 20px 13px; }
.sheet-foot {
margin-top: 22px;
padding-top: 12px;
border-top: 1px solid var(--hair);
display: flex;
justify-content: flex-end;
align-items: baseline;
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(107, 106, 107, 0.62);
}
.sheet-foot .folio { letter-spacing: 0.3em; text-transform: none; }
.sample-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 22px;
margin-top: 40px;
flex-wrap: wrap;
}
.sample-nav {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.95rem;
color: var(--ink);
background: var(--paper-white);
border: 2px solid var(--ink);
padding: 9px 22px;
border-radius: 999px;
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.sample-nav:hover { background: var(--mustard); color: var(--ink); }
.sample-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.sample-nav:disabled:hover { background: var(--paper-white); }
.sample-dots { display: flex; gap: 12px; align-items: center; }
.sample-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: transparent;
border: 2px solid var(--cream);
padding: 0;
cursor: pointer;
transition: background 0.2s;
}
.sample-dot.active { background: var(--mustard); }
.sample-dot:hover:not(.active) { background: rgba(228, 169, 58, 0.45); }
.sample-hint {
text-align: center;
margin-top: 16px;
font-family: var(--font-hand);
font-size: 1.15rem;
color: var(--cream);
opacity: 0.72;
}
.section.night .sample-nav:disabled { opacity: 0.5; }
@media (max-width: 720px) {
.paperpad { --sheet-w: 100%; }
.face.front { padding: 26px 24px 20px; }
.q-opts, .q-opts.opts-wide, .q-opts.opts-widest { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
.face.front { padding: 24px 19px 18px; }
.sheet-head { font-size: 0.56rem; letter-spacing: 0.12em; }
.head-mark img { width: 16px; height: 16px; }
.q-block { gap: 11px; }
.q-no { width: 26px; height: 26px; font-size: 0.78rem; }
.q-body p { font-size: 0.94rem; }
.q-opts, .q-opts.opts-wide, .q-opts.opts-widest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.sheet { transition: transform 0.001s linear; }
.sheet[data-d="past"] { transform: translate3d(0px, 0px, 0px) rotate(-0.35deg) rotateX(0deg); }
.sheet[data-d="past"] .face { transition: opacity 0.25s linear; }
.face { transition: opacity 0.25s linear; }
}
.about-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.story-slate {
--slate: #1E4038;
--slate-deep: #16302B;
--frame: #4B4038;
--frame-hi: #6E6053;
--frame-lo: #241F1B;
--chalk: #F2EFE3;
position: relative;
margin: 0;
max-width: 560px;
padding: 15px 15px 32px;
border-radius: 5px;
transform: rotate(-1.4deg);
background: linear-gradient(158deg,
var(--frame-hi) 0%,
var(--frame) 22%,
var(--frame) 74%,
var(--frame-lo) 100%);
box-shadow:
12px 12px 0 var(--mustard),
0 1px 1px rgba(43, 38, 34, 0.26),
0 3px 4px -1px rgba(43, 38, 34, 0.18),
0 10px 16px -8px rgba(43, 38, 34, 0.30),
0 24px 34px -18px rgba(43, 38, 34, 0.32),
0 48px 64px -34px rgba(43, 38, 34, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.16),
inset 0 -1px 0 rgba(0, 0, 0, 0.34);
}
.slate-face {
position: relative;
display: grid;
align-items: center;
border-radius: 2px;
overflow: hidden;
padding: 30px 34px;
background-color: var(--slate);
background-image:
repeating-linear-gradient(3.5deg,
rgba(226, 240, 234, 0.020) 0 2px,
transparent 2px 11px),
linear-gradient(to top,
rgba(233, 242, 237, 0.11) 0%,
rgba(233, 242, 237, 0.035) 6%,
transparent 15%),
radial-gradient(ellipse 86% 30% at 22% 34%, rgba(226, 240, 234, 0.085), transparent 70%),
radial-gradient(ellipse 104% 26% at 82% 66%, rgba(226, 240, 234, 0.070), transparent 68%),
radial-gradient(ellipse 72% 44% at 62% 6%, rgba(226, 240, 234, 0.045), transparent 66%),
radial-gradient(ellipse 58% 84% at 96% 24%, rgba(226, 240, 234, 0.040), transparent 62%),
radial-gradient(ellipse 92% 74% at 14% 2%, rgba(214, 234, 226, 0.10), transparent 60%),
radial-gradient(128% 132% at 50% 44%, transparent 52%, rgba(0, 0, 0, 0.34) 100%),
linear-gradient(172deg, var(--slate) 0%, var(--slate-deep) 100%);
box-shadow:
inset 0 2px 6px rgba(0, 0, 0, 0.52),
inset 0 -2px 4px rgba(0, 0, 0, 0.34),
inset 0 0 0 1px rgba(0, 0, 0, 0.30);
}
.slate-face::before {
content: "";
grid-area: 1 / 1;
aspect-ratio: 2.05;
pointer-events: none;
}
.slate-sum {
position: absolute;
right: 6.5%;
top: 9%;
font-family: var(--font-write);
font-size: 1.5rem;
line-height: 1;
color: rgba(233, 243, 238, 0.17);
transform: rotate(-1.6deg);
filter: blur(1.3px);
-webkit-mask-image: linear-gradient(102deg,
rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.18) 34%,
rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.10) 100%);
mask-image: linear-gradient(102deg,
rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.18) 34%,
rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0.10) 100%);
user-select: none;
pointer-events: none;
}
.slate-sum i { font-style: italic; }
.story-slate blockquote { margin: 0; grid-area: 1 / 1; align-self: center; }
.story-slate blockquote p {
margin: 0;
font-family: var(--font-write);
font-size: clamp(1.7rem, 3.1vw, 2.1rem);
line-height: 1.42;
color: var(--chalk);
text-wrap: balance;
text-shadow: 0 0 7px rgba(226, 240, 234, 0.09);
opacity: 0.68;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.story-slate blockquote p {
color: transparent;
background-image:
repeating-linear-gradient(4deg,
rgba(43, 38, 34, 0.11) 0 1px,
transparent 1px 5px),
var(--paper-fibre),
linear-gradient(var(--chalk), var(--chalk));
background-size: auto, 84px 84px, auto;
background-blend-mode: multiply, multiply, normal;
-webkit-background-clip: text;
background-clip: text;
}
}
.slate-tray {
position: absolute;
left: 9px;
right: 9px;
bottom: 6px;
height: 15px;
border-radius: 2px 2px 4px 4px;
background: linear-gradient(to bottom,
var(--frame-hi) 0 2px,
#5A4E43 2px 5px,
var(--frame) 5px 64%,
var(--frame-lo) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.20),
0 2px 4px rgba(43, 38, 34, 0.36);
pointer-events: none;
}
.slate-tray::before {
content: "";
position: absolute;
left: 8%;
right: 14%;
top: 2px;
height: 3px;
border-radius: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(240, 244, 234, 0.26) 18%,
rgba(240, 244, 234, 0.10) 46%,
rgba(240, 244, 234, 0.30) 68%,
transparent 100%);
}
.slate-chalk {
position: absolute;
left: 12.5%;
bottom: 16px;
width: 52px;
height: 9px;
border-radius: 4px;
transform: rotate(-1.1deg);
background: linear-gradient(to bottom,
#FCFAF1 0%,
#F1ECDD 58%,
#D8D1BC 100%);
box-shadow:
0 1px 2px rgba(24, 20, 16, 0.46),
inset -6px 0 5px -5px rgba(43, 38, 34, 0.32);
}
.about-preview-copy { max-width: 32em; }
.about-preview h2 { margin-bottom: 20px; text-wrap: balance; }
.about-preview p { text-wrap: pretty; }
.about-preview .btn { margin-top: 32px; }
@media (max-width: 960px) {
.story-slate { margin-inline: auto; }
}
@media (max-width: 620px) {
.story-slate { padding: 11px 11px 26px; }
.slate-face { padding: 22px 22px; }
.slate-tray { left: 7px; right: 7px; height: 13px; }
.slate-chalk { width: 42px; height: 8px; bottom: 14px; }
.slate-sum { font-size: 1.15rem; }
}
.cta-band {
background: linear-gradient(160deg, var(--indigo) 0%, var(--indigo-deep) 100%);
color: var(--paper);
padding: 80px 0;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-band h2 { color: var(--paper); margin-bottom: 20px; }
.cta-band .lede { color: rgba(251, 246, 234, 0.85); margin: 0 auto 32px; }
.cta-doodle-wrap { position: relative; display: inline-block; }
.cta-stars {
position: absolute;
left: -46px;
top: -26px;
width: 48px;
height: 40px;
pointer-events: none;
z-index: 1;
transform-origin: center center;
}
.cta-loop-arrow {
position: absolute;
right: -84px;
bottom: -48px;
width: 98px;
height: 74px;
pointer-events: none;
z-index: 1;
transform-origin: center center;
}
.cta-stars svg, .cta-loop-arrow svg { width: 100%; height: 100%; display: block; }
.cta-doodle-wrap:hover .cta-stars {
animation: doodle-jitter 2.4s ease-in-out infinite;
}
.cta-doodle-wrap:hover .cta-loop-arrow {
animation: doodle-jitter-alt 2.7s ease-in-out infinite;
}
@media (max-width: 680px) {
.cta-stars, .cta-loop-arrow { display: none; }
}
.cta-band::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(ellipse 400px 200px at 15% 30%, rgba(232, 106, 76, 0.2), transparent),
radial-gradient(ellipse 400px 200px at 85% 70%, rgba(31, 138, 123, 0.2), transparent),
radial-gradient(ellipse 300px 150px at 50% 90%, rgba(228, 169, 58, 0.15), transparent);
pointer-events: none;
}
.page-header {
padding: 72px 0 40px;
text-align: center;
position: relative;
}
.page-header h1 { margin-bottom: 16px; }
.page-header .lede { margin: 0 auto; }
#page-about .page-header { padding-top: 144px; padding-bottom: 185px; }
@media (max-width: 700px) {
#page-about .page-header { padding-top: 132px; padding-bottom: 136px; }
}
#page-contact {
--lit-x: 18%;
--lit-y: 4%;
--env: #8E4C55;
--env-lit: #A05C64;
--env-deep: #6E383F;
}
.letter-stage {
position: relative;
padding: 132px 24px 120px;
display: flex;
justify-content: center;
background:
radial-gradient(ellipse 58% 48% at 50% 32%, rgba(255, 255, 255, 0.3), transparent 72%),
radial-gradient(ellipse 124% 92% at 50% 118%, rgba(92, 78, 58, 0.11), transparent 62%),
radial-gradient(140% 122% at 50% 45%, transparent 58%, rgba(92, 78, 58, 0.09) 100%),
linear-gradient(168deg, #F9F4E9 0%, #F2EBDA 54%, #E9DFCB 100%);
overflow: hidden;
}
.letter-stage::before {
content: "";
position: absolute;
inset: 0;
background: var(--paper-fibre);
background-size: 128px 128px;
opacity: 0.15;
mix-blend-mode: multiply;
pointer-events: none;
}
.letter-scene {
position: relative;
width: 100%;
max-width: 660px;
padding-bottom: 86px;
}
.envelope {
position: absolute;
left: 50%;
bottom: 0;
width: 104%;
max-width: 640px;
height: 300px;
transform: translateX(-50%) rotate(1.4deg);
transform-origin: 50% 100%;
}
.envelope-body,
.envelope-mouth,
.envelope-flap {
position: absolute;
left: 0;
right: 0;
background-color: var(--env);
background-image:
linear-gradient(170deg, rgba(255, 255, 255, 0.22), transparent 46%),
var(--paper-fibre);
background-size: 100% 100%, 128px 128px;
background-blend-mode: normal, multiply;
}
.envelope-body {
top: 44px;
bottom: 0;
border-radius: 3px;
box-shadow:
0 1px 1px rgba(52, 30, 34, 0.24),
0 6px 10px -4px rgba(52, 30, 34, 0.26),
0 22px 30px -16px rgba(46, 32, 28, 0.32),
0 46px 60px -32px rgba(46, 32, 28, 0.36);
}
.envelope-mouth {
bottom: 0;
height: 176px;
z-index: 3;
border-radius: 3px;
background-color: var(--env-lit);
background-image:
linear-gradient(to bottom, rgba(255, 255, 255, 0.20), transparent 32%),
radial-gradient(ellipse 90% 60% at 50% 0%, rgba(40, 20, 24, 0.30), transparent 64%),
var(--paper-fibre);
background-size: 100% 100%, 100% 100%, 128px 128px;
background-blend-mode: normal, multiply, multiply;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.38),
0 -3px 6px -2px rgba(52, 30, 34, 0.28),
0 -10px 18px -8px rgba(52, 30, 34, 0.24);
}
.envelope-flap {
top: 0;
height: 120px;
z-index: 0;
clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
background-color: var(--env-deep);
background-image:
linear-gradient(to top, rgba(30, 14, 18, 0.34), rgba(255, 255, 255, 0.16) 80%),
var(--paper-fibre);
background-size: 100% 100%, 128px 128px;
background-blend-mode: multiply, multiply;
filter: drop-shadow(0 -2px 3px rgba(52, 30, 34, 0.22));
}
.letter {
position: relative;
z-index: 2;
margin: 0 auto;
max-width: 560px;
transform: rotate(-1.1deg);
}
.letter::before {
content: "";
position: absolute;
left: -1px;
right: -1px;
top: 3px;
bottom: -3px;
border-radius: 2px;
background: linear-gradient(to bottom, #DEDEE2, #CCCCD2);
box-shadow:
0 1px 1px rgba(60, 58, 70, 0.24),
0 4px 5px -1px rgba(60, 58, 70, 0.17),
0 12px 18px -8px rgba(60, 58, 70, 0.26),
0 28px 38px -20px rgba(60, 58, 70, 0.26),
0 56px 72px -38px rgba(60, 58, 70, 0.28);
z-index: -1;
}
.letter-surface {
position: relative;
padding: 60px 58px 52px;
border-radius: 2px;
background-color: #FFFFFF;
background-image:
radial-gradient(ellipse 86% 64% at var(--lit-x) var(--lit-y), rgba(255, 255, 255, 0.95), transparent 66%),
linear-gradient(to bottom,
transparent 0 calc(33.33% - 1px),
rgba(60, 58, 70, 0.07) calc(33.33% - 1px) 33.33%,
rgba(255, 255, 255, 0.85) 33.33% calc(33.33% + 1px),
transparent calc(33.33% + 1px) calc(66.66% - 1px),
rgba(60, 58, 70, 0.06) calc(66.66% - 1px) 66.66%,
rgba(255, 255, 255, 0.8) 66.66% calc(66.66% + 1px),
transparent calc(66.66% + 1px)),
radial-gradient(ellipse 120% 88% at 92% 98%, rgba(60, 58, 70, 0.028), transparent 62%),
radial-gradient(138% 128% at 50% 50%, transparent 72%, rgba(60, 58, 70, 0.024) 100%),
var(--paper-crumple),
linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)),
var(--paper-fibre);
background-size:
100% 100%, 100% 100%, 100% 100%, 100% 100%, cover, 100% 100%, 128px 128px;
background-repeat:
no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode:
normal, normal, multiply, multiply, multiply, normal, multiply;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 1px 0 0 rgba(255, 255, 255, 0.5),
inset -1px 0 0 rgba(60, 58, 70, 0.05),
inset 0 -1px 0 rgba(60, 58, 70, 0.08),
inset 0 -22px 26px -22px rgba(60, 58, 70, 0.10);
}
.letter-head {
display: flex;
align-items: center;
gap: 10px;
padding-bottom: 18px;
margin-bottom: 28px;
border-bottom: 1px solid rgba(60, 58, 70, 0.13);
}
.letter-mark { color: var(--mustard); font-size: 1.1rem; }
.letter-org {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--indigo);
}
.letter-salutation {
font-family: var(--font-display);
font-size: clamp(1.9rem, 4vw, 2.5rem);
font-weight: 700;
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ink);
margin: 0 0 18px;
}
.letter-body,
.letter-note {
font-size: 1.02rem;
line-height: 1.72;
color: var(--ink-soft);
max-width: 46ch;
margin: 0;
}
.letter-body { margin-bottom: 34px; }
.letter-addresses {
margin: 0 0 32px;
display: grid;
gap: 20px;
}
.letter-address { margin: 0; }
.letter-address dt {
font-family: var(--font-hand);
font-size: 1.22rem;
color: var(--teal-deep);
margin-bottom: 2px;
transform: rotate(-0.8deg);
transform-origin: left center;
}
.letter-address dd { margin: 0; }
.addr-copy {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 0;
font-family: var(--font-body);
text-align: left;
}
.addr-text {
font-size: clamp(1.15rem, 2.6vw, 1.5rem);
font-weight: 700;
color: var(--ink-pen);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 5px;
text-decoration-color: rgba(48, 49, 97, 0.32);
transition: color 0.18s ease, text-decoration-color 0.18s ease;
word-break: break-all;
}
.addr-cue {
font-family: var(--font-hand);
font-size: 1.05rem;
color: var(--ink-soft);
opacity: 0;
transition: opacity 0.18s ease;
white-space: nowrap;
}
.addr-copy:hover .addr-text,
.addr-copy:focus-visible .addr-text {
color: var(--coral-deep);
text-decoration-color: rgba(204, 86, 56, 0.45);
}
.addr-copy:hover .addr-cue,
.addr-copy:focus-visible .addr-cue { opacity: 0.62; }
.addr-copy.copied .addr-cue {
opacity: 1;
color: var(--teal-deep);
font-weight: 700;
}
.addr-copy.copied .addr-text { color: var(--teal-deep); text-decoration-color: transparent; }
.addr-copy:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; border-radius: 2px; }
.letter-note {
font-size: 0.95rem;
padding-top: 22px;
border-top: 1px solid rgba(60, 58, 70, 0.11);
}
.letter-foot { margin-top: 34px; }
.letter-sign {
display: block;
font-family: var(--font-sign);
font-size: clamp(1.55rem, 4.6vw, 2.05rem);
line-height: 1.35;
color: var(--ink-pen);
transform: rotate(-3deg);
transform-origin: left center;
margin-bottom: 10px;
}
.letter-role {
display: block;
font-size: 0.82rem;
letter-spacing: 0.06em;
color: var(--ink-soft);
opacity: 0.8;
}
@media (max-width: 620px) {
.letter-stage { padding: 104px 16px 92px; }
.letter-surface { padding: 44px 30px 40px; }
.letter-scene { padding-bottom: 64px; }
.envelope { height: 240px; }
.envelope-mouth { height: 140px; }
.envelope-flap { height: 96px; }
.addr-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.addr-text, .addr-cue { transition: none; }
}
.legal-doc {
max-width: 720px;
margin: 0 auto;
font-family: var(--font-body);
}
.legal-doc h2 {
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 700;
color: var(--indigo);
letter-spacing: -0.01em;
margin: 52px 0 18px;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p {
margin: 0 0 14px;
line-height: 1.7;
color: var(--ink-soft);
}
.legal-doc p.clause {
padding-left: 2.5em;
text-indent: -2.5em;
}
.legal-doc ul {
margin: 0 0 14px;
padding-left: 1.5em;
line-height: 1.7;
color: var(--ink-soft);
}
.legal-doc ul li { margin-bottom: 6px; }
.legal-doc strong { color: var(--ink); font-weight: 700; }
.legal-doc .legal-rule {
border: none;
border-top: 1px solid var(--indigo-line);
margin: 44px 0;
}
.legal-doc .legal-closing {
color: var(--ink-soft);
opacity: 0.7;
font-size: 0.92rem;
padding-left: 0;
text-indent: 0;
margin-top: 8px;
}
@media (max-width: 640px) {
.legal-doc p.clause { padding-left: 2em; text-indent: -2em; }
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: center;
margin-bottom: 96px;
}
.story-image {
border: 3px solid var(--ink);
border-radius: var(--radius-lg);
overflow: hidden;
transform: rotate(1deg);
box-shadow: 8px 8px 0 var(--coral);
}
.story-image img { aspect-ratio: 5/4; object-fit: cover; }
.story-image.left { transform: rotate(-1deg); box-shadow: -8px 8px 0 var(--teal); }
.differ-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}
.differ-card {
background: var(--paper-white);
border: 2px solid var(--ink);
border-radius: var(--radius-lg);
padding: 32px 24px;
position: relative;
}
.differ-card:nth-child(1) { box-shadow: 5px 5px 0 var(--coral); }
.differ-card:nth-child(2) { box-shadow: 5px 5px 0 var(--teal); }
.differ-card:nth-child(3) { box-shadow: 5px 5px 0 var(--mustard); }
.differ-card:nth-child(4) { box-shadow: 5px 5px 0 var(--indigo); }
.differ-card:nth-child(5) { box-shadow: 5px 5px 0 var(--coral); }
.differ-card:nth-child(6) { box-shadow: 5px 5px 0 var(--teal); }
.differ-number {
position: absolute;
top: -18px;
right: -14px;
width: 48px;
height: 48px;
background: var(--paper-white);
border: 2px solid var(--ink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 1.2rem;
transform: rotate(-8deg);
}
.steps-strip {
background: var(--paper);
padding: 72px 0;
position: relative;
}
.steps-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
position: relative;
margin-top: 48px;
}
.step {
background: var(--paper-white);
border: 2px solid var(--ink);
border-radius: var(--radius-lg);
padding: 28px 22px;
position: relative;
text-align: center;
}
.step:nth-child(odd) { transform: rotate(-0.5deg); }
.step:nth-child(even) { transform: rotate(0.4deg); }
.step-number {
font-family: var(--font-display);
font-weight: 900;
font-size: 3.2rem;
line-height: 1;
background-image: linear-gradient(135deg, var(--coral), var(--mustard));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 8px;
font-variation-settings: "opsz" 144;
}
.step h3 { margin-bottom: 8px; font-size: 1.15rem; }
.step p { font-size: 0.92rem; }
.block-head { text-align: center; margin-bottom: 48px; }
.block-head h2 { margin-bottom: 12px; }
.block-head p { max-width: 58ch; margin: 0 auto; }
.block-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
margin-bottom: 18px;
border: 2.5px solid var(--ink);
border-radius: 50%;
background: var(--mustard);
color: var(--ink);
font-family: var(--font-display);
font-weight: 900;
font-size: 1.45rem;
line-height: 1;
transform: rotate(-6deg);
box-shadow: 3px 3px 0 var(--ink);
font-variation-settings: "opsz" 40;
}
.block-num.n2 { background: var(--teal); color: var(--paper-white); transform: rotate(5deg); }
.block-num.n3 { background: var(--coral); color: var(--paper-white); transform: rotate(-4deg); }
.block-num.n4 { background: var(--paper-white); color: var(--ink); transform: rotate(6deg); }
.panel-card {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 32px 30px;
box-shadow: 5px 5px 0 var(--indigo);
}
.panel-card > h3 { margin-bottom: 10px; }
.panel-card.tint-teal { box-shadow: 5px 5px 0 var(--teal); }
.panel-card.tint-coral { box-shadow: 5px 5px 0 var(--coral); }
.panel-card.tint-mustard { box-shadow: 5px 5px 0 var(--mustard); }
.section.night .panel-card h2,
.section.night .panel-card h3,
.section.night .panel-card h4 { color: var(--ink); }
.section.night .panel-card p,
.section.night .panel-card li { color: var(--ink-soft); }
.section.night .panel-card .eyebrow { color: var(--coral); }
.section.night .panel-card .eyebrow::before { color: var(--mustard); }
.section.night .panel-card .handnote { color: var(--ink-soft); }
.division-panel { padding: 40px 14px; }
.division-grid { display: grid; grid-template-columns: 1fr 1fr; }
.division-col { padding: 4px 32px; }
.division-col h3 { margin: 8px 0 12px; }
.division-col + .division-col { border-left: 2px dashed rgba(43, 38, 34, 0.22); }
@media (max-width: 820px) {
.division-panel { padding: 32px 26px; }
.division-grid { grid-template-columns: 1fr; }
.division-col { padding: 0; }
.division-col + .division-col {
border-left: 0;
border-top: 2px dashed rgba(43, 38, 34, 0.22);
margin-top: 28px;
padding-top: 26px;
}
}
#participate { scroll-margin-top: 90px; }
.route-switch-wrap { text-align: center; }
.route-switch {
display: inline-flex;
gap: 4px;
padding: 6px;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: 999px;
box-shadow: 5px 5px 0 var(--indigo);
}
.route-btn {
padding: 12px 30px;
border-radius: 999px;
font-family: var(--font-body);
font-weight: 800;
font-size: 1rem;
color: var(--ink);
white-space: nowrap;
transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.route-btn:hover { background: var(--cream-deep); }
.route-btn.active,
.route-btn.active:hover { background: var(--indigo); color: var(--paper-white); }
.route-hint { text-align: center; margin: 14px 0 46px; }
@media (max-width: 560px) {
.route-switch { flex-direction: column; width: 100%; }
.route-switch-wrap { display: block; }
}
.route-panel { display: none; }
.route-panel.active { display: block; animation: route-in 0.3s var(--ease); }
@keyframes route-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.subblock + .subblock { margin-top: 60px; }
.subblock-head { margin-bottom: 26px; }
.subblock-head h3 { margin-bottom: 8px; }
.subblock-head p { max-width: 62ch; }
.subblock-kicker {
display: block;
font-family: var(--font-hand);
font-size: 1.35rem;
font-weight: 600;
color: var(--teal-deep);
transform: rotate(-1.2deg);
margin-bottom: 2px;
}
.subblock .steps-grid { margin-top: 0; }
.route-swap {
margin-top: 56px;
padding-top: 32px;
border-top: 2px dashed rgba(43, 38, 34, 0.22);
text-align: center;
}
.route-swap .handnote { display: block; margin-bottom: 14px; }
.checklist { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 34px; }
.checklist li { position: relative; padding: 8px 0 8px 32px; color: var(--ink-soft); }
.checklist li::before {
content: "✓";
position: absolute;
left: 0;
top: 8px;
color: var(--teal);
font-family: var(--font-display);
font-weight: 900;
font-size: 1.05rem;
}
.checklist li.cross::before { content: "✗"; color: var(--coral); }
@media (max-width: 700px) { .checklist { grid-template-columns: 1fr; } }
.timeline { list-style: none; position: relative; }
.timeline::before {
content: "";
position: absolute;
left: 8px;
top: 12px;
bottom: 14px;
border-left: 2px dashed rgba(43, 38, 34, 0.25);
}
.timeline li { position: relative; padding: 0 0 26px 42px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 17px;
height: 17px;
border-radius: 50%;
background: var(--mustard);
border: 2.5px solid var(--ink);
}
.timeline li:nth-child(2)::before { background: var(--teal); }
.timeline li:nth-child(3)::before { background: var(--coral); }
.timeline li:nth-child(4)::before { background: var(--indigo); }
.timeline li:nth-child(5)::before { background: var(--paper-white); }
.tl-when {
display: block;
font-family: var(--font-hand);
font-weight: 700;
font-size: 1.2rem;
line-height: 1.2;
color: var(--coral);
}
.tl-what { font-weight: 800; color: var(--ink); }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 10px; }
.price-tag {
font-family: var(--font-display);
font-weight: 900;
font-size: 2.4rem;
line-height: 1;
color: var(--indigo);
font-variation-settings: "opsz" 144;
}
.price-unit { font-weight: 700; color: var(--ink-soft); }
#page-services {
--cream: #F1F4FB;
--cream-deep: #E5EAF6;
--paper: #F8FAFE;
--paper-white: #FDFDFF;
--ink: #262841;
--ink-soft: #454A63;
--prism-pink: #EC4C88;
--prism-pink-soft: #FE86C3;
--prism-blue: #0089D6;
--prism-blue-ink: #006CA8;
--pg-line: #C8CFE4;
--warm-stock: #EBE8E1;
background-color: var(--cream);
background-image: linear-gradient(to bottom,
var(--warm-stock) 0px,
var(--warm-stock) 420px,
rgba(235, 232, 225, 0) 560px);
background-repeat: no-repeat;
}
#page-services #choose-paper { background-color: var(--warm-stock); }
#page-services .section.paper {
background-color: var(--cream);
background-image: linear-gradient(to bottom,
var(--warm-stock) 0,
var(--paper) 300px,
var(--paper) calc(100% - 190px),
var(--cream) 100%);
}
#page-services .section.cream-deep {
background: var(--warm-stock);
background-image: none;
}
#page-services #notes { --pg-line: #D3CEC5; }
#page-services .section.night::before {
background-image: url("data:image/svg+xml;utf8,");
}
#page-services .section.night::after {
background-image: url("data:image/svg+xml;utf8,");
}
#page-services .block-num.n3 { background: var(--prism-pink); color: #FFF; }
#page-services .block-num.n4 { background: var(--paper-white); color: var(--ink); }
#page-services .award-who { background: var(--cream-deep); }
.squiggle.pink::after { background-image: url("data:image/svg+xml;utf8,"); }
#participate {
position: relative;
overflow: hidden;
background: var(--cream);
padding: 96px 0 120px;
}
#participate::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(ellipse 46% 30% at 6% 2%, rgba(236, 76, 136, 0.10), transparent 68%),
radial-gradient(ellipse 40% 26% at 24% 0%, rgba(228, 169, 58, 0.10), transparent 70%),
radial-gradient(ellipse 52% 34% at 96% 84%, rgba(0, 137, 214, 0.09), transparent 70%);
background-repeat: no-repeat;
-webkit-mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0, #000 270px, #000 calc(100% - 320px), rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom,
rgba(0,0,0,0) 0, #000 270px, #000 calc(100% - 320px), rgba(0,0,0,0) 100%);
}
#participate > .container { position: relative; z-index: 1; }
.facts {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0;
margin: 26px auto 0;
border-top: 1px solid var(--pg-line);
border-bottom: 1px solid var(--pg-line);
padding: 13px 0;
max-width: 720px;
}
.facts li {
padding: 0 22px;
font-weight: 700;
font-size: 0.94rem;
color: var(--ink-soft);
letter-spacing: 0.01em;
}
.facts li + li { border-left: 1px solid var(--pg-line); }
@media (max-width: 560px) {
.facts { flex-direction: column; align-items: center; gap: 7px; }
.facts li + li { border-left: 0; padding-top: 7px; }
}
.flow {
--w-when: 152px;
--w-node: 52px;
--node-c: 20px;
list-style: none;
position: relative;
max-width: 920px;
margin: 0 auto;
}
.flow-stop::before {
content: "";
position: absolute;
top: var(--node-c);
bottom: calc(-1 * var(--node-c));
left: calc(var(--w-when) + (var(--w-node) / 2) - 1.5px);
width: 3px;
border-radius: 2px;
background: linear-gradient(180deg, var(--stop, var(--indigo)), var(--stop-next, var(--indigo)));
}
.flow-stop:last-child::before { content: none; }
.flow-stop {
position: relative;
display: grid;
grid-template-columns: var(--w-when) var(--w-node) 1fr;
align-items: start;
padding-bottom: 38px;
}
.flow-stop:last-child { padding-bottom: 0; }
.flow-when {
grid-column: 1; grid-row: 1;
text-align: right;
padding: 6px 20px 0 0;
font-family: var(--font-hand);
font-size: 1.22rem;
font-weight: 700;
line-height: 1.25;
color: var(--ink-soft);
opacity: 0.9;
}
.flow-node {
grid-column: 2; grid-row: 1;
justify-self: center;
position: relative;
z-index: 1;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--paper-white);
border: 3px solid var(--stop, var(--indigo));
display: grid;
place-items: center;
font-family: var(--font-display);
font-weight: 900;
font-size: 1.02rem;
line-height: 1;
color: var(--stop, var(--indigo));
font-variation-settings: "opsz" 40;
box-shadow: 0 2px 7px -2px rgba(38, 40, 65, 0.28);
}
.flow-body { grid-column: 3; grid-row: 1; padding: 3px 0 0 26px; }
.flow-body h4 {
font-family: var(--font-display);
font-size: 1.16rem;
font-weight: 700;
margin-bottom: 6px;
color: var(--ink);
}
.flow-body p { color: var(--ink-soft); max-width: 56ch; }
@media (max-width: 760px) {
.flow { --w-when: 0px; --w-node: 40px; --node-c: 17px; }
.flow-stop { grid-template-columns: var(--w-node) 1fr; }
.flow-node { grid-column: 1; grid-row: 1; width: 34px; height: 34px; font-size: 0.92rem; border-width: 2.5px; }
.flow-when { grid-column: 2; grid-row: 1; text-align: left; padding: 3px 0 2px 18px; font-size: 1.1rem; }
.flow-body { grid-column: 2; grid-row: 2; padding: 2px 0 0 18px; }
}
.kit {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 48px;
border-top: 1px solid var(--pg-line);
}
.kit li {
position: relative;
padding: 15px 0 15px 32px;
border-bottom: 1px solid var(--pg-line);
color: var(--ink-soft);
font-size: 0.97rem;
line-height: 1.5;
}
.kit li::before {
content: "✓";
position: absolute;
left: 0; top: 14px;
color: var(--teal);
font-family: var(--font-display);
font-weight: 900;
font-size: 1.02rem;
}
.kit li.no::before { content: "✗"; color: var(--coral); }
.kit li.no { color: var(--ink-soft); opacity: 0.9; }
@media (max-width: 760px) { .kit { grid-template-columns: 1fr; gap: 0; } }
.fee {
display: grid;
grid-template-columns: minmax(180px, 230px) 1fr;
gap: 0 52px;
align-items: start;
border-top: 3px solid var(--ink);
border-bottom: 1px solid var(--pg-line);
padding: 30px 0 30px;
}
.fee-figure { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.fee-cur {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.9rem;
color: var(--prism-pink);
line-height: 1;
align-self: flex-start;
padding-top: 6px;
}
.fee-num {
font-family: var(--font-display);
font-weight: 900;
font-size: 4.1rem;
line-height: 0.86;
color: var(--prism-pink);
font-variation-settings: "opsz" 144;
letter-spacing: -0.02em;
}
.fee-per {
display: block;
flex-basis: 100%;
margin-top: 8px;
font-weight: 800;
font-size: 0.92rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-soft);
}
.fee-terms p { color: var(--ink-soft); max-width: 60ch; }
.fee-terms p + p { margin-top: 14px; }
@media (max-width: 700px) {
.fee { grid-template-columns: 1fr; gap: 22px; }
}
.route-gate {
border-left: 3px solid var(--prism-pink);
padding: 2px 0 2px 22px;
margin-bottom: 46px;
max-width: 68ch;
}
.route-gate h4 {
font-family: var(--font-display);
font-size: 1.06rem;
margin-bottom: 8px;
}
.route-gate p { color: var(--ink-soft); font-size: 0.97rem; }
.route-gate p + p { margin-top: 8px; }
.mailpop {
position: relative;
display: inline-block;
white-space: nowrap;
}
.mailpop-trigger {
font: inherit;
color: inherit;
padding: 0;
cursor: pointer;
background: none;
border: 0;
text-decoration: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: rgba(0, 108, 168, 0.55);
transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}
.mailpop-trigger:hover,
.mailpop-trigger:focus-visible,
.mailpop.open .mailpop-trigger {
color: var(--prism-blue-ink);
text-decoration-style: solid;
text-decoration-color: var(--prism-blue-ink);
}
.mailpop-trigger:focus-visible { outline-offset: 2px; }
.mailpop-panel {
position: absolute;
top: calc(100% + 9px);
left: 0;
z-index: 6;
display: block;
width: max-content;
max-width: 272px;
padding: 11px 13px 12px;
background: var(--paper-white);
border: 1px solid var(--pg-line);
border-radius: 10px;
box-shadow: 0 10px 24px -14px rgba(38, 40, 65, 0.55);
white-space: normal;
margin-left: var(--mailpop-shift, 0px);
opacity: 0;
visibility: hidden;
transform: translateY(-3px);
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.mailpop-panel::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -11px;
height: 11px;
}
.mailpop.open .mailpop-panel {
opacity: 1;
visibility: visible;
transform: none;
}
.mailpop-copy {
display: flex;
align-items: baseline;
gap: 10px;
width: 100%;
padding: 0;
background: none;
border: 0;
text-align: left;
cursor: pointer;
}
.mailpop-addr {
font-size: 0.93rem;
font-weight: 700;
color: var(--ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: transparent;
transition: color 0.18s var(--ease), text-decoration-color 0.18s var(--ease);
}
.mailpop-cue {
flex: none;
margin-left: auto;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-soft);
opacity: 0;
transition: opacity 0.18s var(--ease), color 0.18s var(--ease);
}
.mailpop-copy:hover .mailpop-addr,
.mailpop-copy:focus-visible .mailpop-addr {
color: var(--prism-blue-ink);
text-decoration-color: var(--prism-blue-ink);
}
.mailpop-copy:hover .mailpop-cue,
.mailpop-copy:focus-visible .mailpop-cue { opacity: 0.68; }
.mailpop-copy.copied .mailpop-cue,
.mailpop-copy.copied:hover .mailpop-cue {
opacity: 1;
color: var(--teal-deep);
}
.mailpop-copy.copied .mailpop-addr { text-decoration-color: transparent; color: var(--ink); }
.mailpop-note {
display: block;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid var(--pg-line);
font-size: 0.78rem;
line-height: 1.45;
color: var(--ink-soft);
}
@media (prefers-reduced-motion: reduce) {
.mailpop-panel { transition: none; transform: none; }
.mailpop-trigger, .mailpop-addr, .mailpop-cue { transition: none; }
}
.plainlist { list-style: none; }
.plainlist li {
position: relative;
padding: 0 0 0 24px;
color: var(--ink-soft);
max-width: 68ch;
}
.plainlist li + li { margin-top: 13px; }
.plainlist li::before {
content: "";
position: absolute;
left: 0; top: 0.62em;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--prism-blue);
}
#participate .subblock-kicker { color: var(--prism-blue-ink); }
#participate .subblock + .subblock { margin-top: 68px; }
#participate .route-swap { border-top-color: var(--pg-line); }
#participate::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 210px;
pointer-events: none;
background-color: var(--warm-stock);
background-image:
radial-gradient(ellipse 116% 300% at 50% 232.6%,
rgba(209, 204, 193, 0) 58%, #D1CCC1 100%),
radial-gradient(ellipse 62% 320% at 38% 100%,
rgba(250, 249, 245, 0.82), rgba(250, 249, 245, 0) 72%);
background-blend-mode: multiply, normal;
-webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 92%);
mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000 92%);
}
#page-services {
--mustard-ink: #BC841A;
--coral-ink: #E55634;
--coral-btn: #D03E1B;
}
#page-services .eyebrow { color: var(--coral-ink); }
#page-services .section.night .eyebrow { color: var(--mustard); }
#page-services .btn-primary { background: var(--coral-btn); }
#page-services .btn-primary::before { background: #B33517; }
.flow-node { color: var(--ink); }
#page-services .rainbow-rule {
height: 4px;
max-width: 300px;
border-radius: 2px;
transform: none;
background: linear-gradient(90deg,
var(--prism-pink) 0%, var(--coral) 24%, var(--mustard) 46%,
var(--teal) 68%, var(--prism-blue) 88%, var(--indigo) 100%);
}
#page-services .grade-card.g10 { color: var(--mustard); }
#page-services .grade-card.g12 { color: var(--coral); }
#page-services .grade-card.g10 .grade-number { color: var(--mustard-ink); }
#page-services .grade-card.g12 .grade-number { color: var(--coral); }
#page-services .grade-features {
border-top: 1px solid var(--pg-line);
padding-top: 18px;
}
#page-services .division-panel {
background: none; border: 0; box-shadow: none;
border-radius: 0; padding: 0;
}
#page-services .division-grid { border-top: 3px solid var(--ink); }
#page-services .division-col { padding: 32px 44px 4px 0; }
#page-services .division-col + .division-col {
border-left: 1px solid var(--pg-line);
border-top: 0;
padding: 32px 0 4px 44px;
margin-top: 0;
}
@media (max-width: 820px) {
#page-services .division-col { padding: 30px 0 4px; }
#page-services .division-col + .division-col {
border-left: 0;
border-top: 1px solid var(--pg-line);
padding: 30px 0 4px;
}
}
#page-services .section.night .panel-card {
background: none; border: 0; box-shadow: none;
border-radius: 0;
border-top: 3px solid var(--tier, rgba(251, 246, 234, 0.5));
padding: 22px 0 0;
}
#page-services .award-grid .panel-card.tint-mustard { --tier: var(--mustard); }
#page-services .award-grid .panel-card.tint-teal { --tier: var(--teal); }
#page-services .award-grid .panel-card.tint-coral { --tier: var(--coral); }
#page-services .section.night .panel-card h2,
#page-services .section.night .panel-card h3,
#page-services .section.night .panel-card h4 { color: var(--paper); }
#page-services .section.night .panel-card p,
#page-services .section.night .panel-card li { color: rgba(245, 242, 234, 0.86); }
#page-services .section.night .panel-card .eyebrow { color: var(--mustard); }
#page-services .section.night .panel-card .eyebrow::before { color: var(--coral); }
#page-services .section.night .panel-card .handnote { color: rgba(245, 242, 234, 0.8); }
#page-services .award-grid { gap: 34px; }
#page-services .award-who {
background: none;
border: 1.5px solid rgba(251, 246, 234, 0.45);
color: var(--paper);
}
#page-services .note-grid {
gap: 0 48px;
border-top: 1px solid var(--pg-line);
}
#page-services .note-card {
background: none; border: 0; border-radius: 0; box-shadow: none;
transform: none;
border-bottom: 1px solid var(--pg-line);
padding: 20px 0 22px 28px;
position: relative;
}
#page-services .note-card::before {
content: "";
position: absolute;
left: 0; top: 27px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--dot, var(--prism-pink));
}
#page-services .note-card:nth-child(5n+2) { --dot: var(--coral); }
#page-services .note-card:nth-child(5n+3) { --dot: var(--mustard); }
#page-services .note-card:nth-child(5n+4) { --dot: var(--teal); }
#page-services .note-card:nth-child(5n+5) { --dot: var(--indigo); }
#page-services .note-card h4 { margin-bottom: 7px; }
@media (min-width: 641px) and (max-width: 960px) {
#page-services .note-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
#page-services .cert-row { max-width: min(380px, 100%); }
}
.award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.award-tier {
font-family: var(--font-hand);
font-size: 1.3rem;
font-weight: 700;
color: var(--coral);
display: block;
margin-bottom: 2px;
}
.award-who {
display: inline-block;
margin-top: 14px;
padding: 5px 14px;
border: 2px solid var(--ink);
border-radius: 999px;
background: var(--cream);
font-size: 0.82rem;
font-weight: 700;
color: var(--ink);
}
@media (max-width: 900px) { .award-grid { grid-template-columns: 1fr; } }
.cert-corner { margin-top: 64px; }
.cert-corner-head { text-align: center; margin-bottom: 44px; }
.cert-corner-head h3 { font-size: 1.7rem; margin-bottom: 10px; }
.cert-corner-head p { max-width: 54ch; margin: 0 auto; }
.cert-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 34px;
max-width: 940px;
margin: 0 auto;
}
.cert-frame {
position: relative;
margin: 0;
}
.cert-frame:nth-child(1) { transform: rotate(-1.2deg); }
.cert-frame:nth-child(2) { transform: rotate(0.5deg); }
.cert-frame:nth-child(3) { transform: rotate(1.4deg); }
.cert-frame::before {
--tape-tint: rgba(228, 169, 58, 0.5);
top: -13px;
left: 50%;
width: 92px;
height: 26px;
margin-left: -46px;
transform: rotate(-2.5deg);
z-index: 2;
}
.cert-frame:nth-child(2)::before { --tape-tint: rgba(31, 138, 123, 0.5); transform: rotate(3deg); }
.cert-frame:nth-child(3)::before { --tape-tint: rgba(232, 106, 76, 0.45); transform: rotate(-1.5deg); }
.cert-shot {
position: relative;
aspect-ratio: 1.414 / 1;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: 6px;
box-shadow: 5px 5px 0 var(--indigo-deep);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: zoom-in;
-webkit-appearance: none;
appearance: none;
transition: box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.cert-shot:hover,
.cert-shot:focus-visible {
box-shadow: 5px 5px 0 var(--coral);
}
.cert-shot:focus-visible {
outline: 3px solid var(--mustard);
outline-offset: 3px;
}
.cert-zoom {
position: absolute;
right: 8px;
top: 8px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px 3px 7px;
border-radius: 999px;
background: rgba(33, 34, 71, 0.82);
color: var(--paper);
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.82;
transition: background 0.22s var(--ease), opacity 0.22s var(--ease);
}
.cert-shot:hover .cert-zoom,
.cert-shot:focus-visible .cert-zoom { background: var(--coral-deep); opacity: 1; }
.cert-zoom svg { width: 11px; height: 11px; display: block; }
.cert-shot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cert-frame figcaption {
margin-top: 16px;
text-align: center;
font-weight: 700;
font-size: 0.95rem;
color: var(--paper);
}
.cert-frame figcaption em {
display: block;
font-style: normal;
font-family: var(--font-hand);
font-size: 1.05rem;
font-weight: 600;
color: var(--mustard);
}
.cert-corner-foot { text-align: center; margin-top: 38px; }
@media (max-width: 860px) {
.cert-row { grid-template-columns: 1fr; max-width: 380px; gap: 46px; }
}
.cert-lightbox {
position: fixed;
inset: 0;
z-index: 3000;
display: none;
align-items: center;
justify-content: center;
padding: 28px 20px;
background: rgba(23, 24, 51, 0.90);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.cert-lightbox.is-open { display: flex; }
.cert-lightbox-inner {
position: relative;
width: min(1180px, 100%);
max-height: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.cert-lightbox img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: calc(100vh - 132px);
border: 2.5px solid var(--ink);
border-radius: 6px;
background: var(--paper-white);
box-shadow: 0 26px 70px -22px rgba(0, 0, 0, 0.7);
}
.cert-lightbox-cap {
text-align: center;
color: var(--cream);
font-size: 0.92rem;
font-weight: 700;
line-height: 1.5;
}
.cert-lightbox-cap em {
display: block;
font-style: normal;
font-family: var(--font-hand);
font-size: 1.05rem;
font-weight: 600;
color: var(--mustard);
}
.cert-lightbox-close {
position: absolute;
top: -14px;
right: -10px;
z-index: 2;
width: 40px;
height: 40px;
border: 2.5px solid var(--ink);
border-radius: 999px;
background: var(--cream);
color: var(--ink);
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
transition: background 0.22s var(--ease), color 0.22s var(--ease);
}
.cert-lightbox-close:hover { background: var(--coral); color: var(--paper); }
.cert-lightbox-close:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
@media (max-width: 700px) {
.cert-lightbox { padding: 20px 14px; }
.cert-lightbox-close { top: -8px; right: -4px; width: 36px; height: 36px; }
.cert-lightbox img { max-height: calc(100vh - 150px); }
}
body.cert-lightbox-open { overflow: hidden; }
.section.sweep {
--sweep-lit: #FAF9F5;
--sweep-base: #EBE8E1;
--sweep-edge: #D1CCC1;
background-color: var(--sweep-base);
background-image:
radial-gradient(ellipse 62% 46% at 38% 6%, var(--sweep-lit), transparent 72%),
radial-gradient(ellipse 150% 42% at 50% 66%, rgba(253, 253, 251, 0.85), transparent 60%),
linear-gradient(to bottom, transparent 40%, rgba(84, 80, 71, 0.06) 60%, transparent 76%),
radial-gradient(ellipse 116% 104% at 50% 46%, transparent 58%, var(--sweep-edge) 100%);
background-size:
100% 100%, 100% 100%, 100% 100%, 100% 100%;
background-repeat:
no-repeat, no-repeat, no-repeat, no-repeat;
background-blend-mode:
normal, normal, multiply, multiply;
padding: 132px 0 148px;
overflow: hidden;
}
.block-num.n35 {
width: auto;
border-radius: 999px;
padding: 0 22px;
background: var(--paper-white);
color: var(--coral-deep);
transform: rotate(-3deg);
font-size: 1.3rem;
letter-spacing: 0.01em;
}
.folder-stage {
--u: 1px;
position: relative;
width: calc(460 * var(--u));
height: calc(400 * var(--u));
margin: 78px auto 0;
transform: rotate(-0.6deg);
}
.folder-cast,
.folder-contact {
position: absolute;
pointer-events: none;
border-radius: 50%;
}
.folder-cast {
left: calc(14 * var(--u));
width: calc(432 * var(--u));
top: calc(320 * var(--u));
height: calc(62 * var(--u));
background: radial-gradient(ellipse at 48% 44%,
rgba(58, 62, 78, 0.30) 0%,
rgba(58, 62, 78, 0.16) 44%,
rgba(58, 62, 78, 0.04) 70%,
transparent 82%);
filter: blur(calc(9 * var(--u)));
}
.folder-contact {
left: calc(38 * var(--u));
width: calc(384 * var(--u));
top: calc(334 * var(--u));
height: calc(20 * var(--u));
background: radial-gradient(ellipse at 50% 50%,
rgba(40, 46, 62, 0.46) 0%,
rgba(40, 46, 62, 0.21) 52%,
transparent 78%);
filter: blur(calc(4 * var(--u)));
}
.folder-back,
.folder-front,
.folder-tab {
--sky-hi: #B6E1FA;
--sky-face: #8ECBF3;
--sky-mid: #69B4E8;
--sky-deep: #4E9CD6;
--sky-edge: #3781BE;
position: absolute;
background-repeat: no-repeat;
}
.folder-back {
left: calc(16 * var(--u));
top: calc(46 * var(--u));
width: calc(428 * var(--u));
height: calc(294 * var(--u));
border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
background-image:
linear-gradient(169deg, var(--sky-face) 0%, var(--sky-mid) 46%, var(--sky-deep) 100%);
box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(238, 250, 255, 0.62);
}
.folder-tab {
right: calc(38 * var(--u));
top: calc(18 * var(--u));
width: calc(172 * var(--u));
height: calc(30 * var(--u));
border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0;
background-image:
linear-gradient(172deg, var(--sky-hi) 0%, var(--sky-face) 68%, var(--sky-mid) 100%);
box-shadow: inset 0 calc(1.5 * var(--u)) 0 rgba(243, 252, 255, 0.78);
display: flex;
align-items: center;
justify-content: center;
padding-bottom: calc(2 * var(--u));
}
.folder-tab span {
font-family: var(--font-hand);
font-size: calc(17 * var(--u));
line-height: 1;
font-weight: 600;
color: #1D5480;
transform: rotate(-0.8deg);
user-select: none;
}
.folder-sheets {
position: absolute;
left: calc(16 * var(--u));
top: calc(46 * var(--u));
width: calc(428 * var(--u));
height: calc(294 * var(--u));
border-radius: calc(4 * var(--u)) calc(4 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u));
overflow: hidden;
}
.folder-sheet {
position: absolute;
height: calc(250 * var(--u));
border-radius: calc(2 * var(--u));
background-color: #FDFAF1;
background-image:
linear-gradient(178deg, #FFFDF7 0%, #FBF6E9 62%, #F3ECDA 100%),
linear-gradient(rgba(253, 250, 241, 0.26), rgba(253, 250, 241, 0.26)),
var(--paper-fibre);
background-size: auto, auto, 128px 128px;
background-blend-mode: multiply, normal, multiply;
box-shadow:
0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(44, 56, 76, 0.24),
inset 0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.85);
}
.folder-sheet.s1 { left: calc(6 * var(--u)); width: calc(332 * var(--u)); top: calc(8 * var(--u)); transform: rotate(-3deg); }
.folder-sheet.s2 { left: calc(92 * var(--u)); width: calc(330 * var(--u)); top: calc(16 * var(--u)); transform: rotate(2.6deg); }
.folder-sheet.s3 { left: calc(50 * var(--u)); width: calc(336 * var(--u)); top: calc(30 * var(--u)); transform: rotate(-0.5deg); }
.sheet-logo {
position: absolute;
left: calc(20 * var(--u));
top: calc(12 * var(--u));
width: calc(62 * var(--u));
height: auto;
opacity: 0.94;
user-select: none;
}
.sheet-rule {
position: absolute;
height: calc(3 * var(--u));
border-radius: calc(2 * var(--u));
background: rgba(46, 47, 99, 0.16);
}
.sheet-rule.r1 { left: calc(20 * var(--u)); top: calc(60 * var(--u)); width: calc(196 * var(--u)); }
.sheet-rule.r2 { left: calc(20 * var(--u)); top: calc(70 * var(--u)); width: calc(148 * var(--u)); }
.folder-front {
left: calc(10 * var(--u));
top: calc(150 * var(--u));
width: calc(440 * var(--u));
height: calc(194 * var(--u));
border-radius: calc(3 * var(--u)) calc(3 * var(--u)) calc(11 * var(--u)) calc(11 * var(--u));
background-image:
linear-gradient(173deg,
var(--sky-hi) 0%,
var(--sky-face) 9%,
var(--sky-mid) 58%,
var(--sky-deep) 91%,
var(--sky-edge) 100%);
box-shadow:
0 calc(-7 * var(--u)) calc(13 * var(--u)) calc(-5 * var(--u)) rgba(30, 52, 78, 0.42),
inset 0 calc(2 * var(--u)) 0 rgba(246, 253, 255, 0.92);
}
.folder-front::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(90deg,
rgba(20, 52, 84, 0.15) 0%,
transparent 11%,
transparent 88%,
rgba(20, 52, 84, 0.18) 100%);
pointer-events: none;
}
.folder-front::after {
content: "";
position: absolute;
left: 0; right: 0;
bottom: 0;
height: calc(16 * var(--u));
border-radius: 0 0 calc(11 * var(--u)) calc(11 * var(--u));
background: linear-gradient(to bottom,
rgba(244, 252, 255, 0.38) 0%,
rgba(244, 252, 255, 0.11) 34%,
rgba(24, 58, 92, 0.18) 100%);
pointer-events: none;
}
.folder-light {
position: absolute;
left: calc(-160 * var(--u));
top: calc(-160 * var(--u));
width: calc(780 * var(--u));
height: calc(720 * var(--u));
pointer-events: none;
background: radial-gradient(ellipse calc(340.4 * var(--u)) calc(208 * var(--u))
at calc(279.6 * var(--u)) calc(176 * var(--u)),
rgba(255, 253, 244, 0.34) 0%,
rgba(255, 253, 244, 0.10) 42%,
transparent 68%);
}
.sample-paper-cta { text-align: center; margin-top: 66px; }
.sample-paper-cta .handnote { display: block; margin-top: 16px; }
@media (max-width: 900px) {
.section.sweep { padding: 96px 0 104px; }
.folder-stage { margin-top: 58px; }
.sample-paper-cta { margin-top: 48px; }
}
@media (max-width: 560px) {
.folder-stage { --u: 0.66px; }
}
@media (max-width: 400px) {
.folder-stage { --u: 0.56px; }
}
.note-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.note-card {
background: var(--paper-white);
border: 2px solid var(--ink);
border-left: 9px solid var(--mustard);
border-radius: var(--radius);
padding: 24px 24px 26px;
box-shadow: 4px 4px 0 var(--ink);
}
.note-card:nth-child(3n+2) { border-left-color: var(--teal); transform: rotate(-0.4deg); }
.note-card:nth-child(3n+3) { border-left-color: var(--coral); transform: rotate(0.4deg); }
.note-card h4 { font-family: var(--font-display); font-size: 1.08rem; margin-bottom: 8px; }
.note-card p { font-size: 0.94rem; }
@media (max-width: 960px) { .note-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .note-grid { grid-template-columns: 1fr; } }
.notes-onward {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 20px;
margin-top: 48px;
}
.notes-onward .handnote { font-size: 1.2rem; }
.faq {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--paper-white);
border: 2px solid var(--ink);
border-radius: var(--radius);
margin-bottom: 14px;
overflow: hidden;
box-shadow: 3px 3px 0 var(--ink);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
text-align: left;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.1rem;
color: var(--ink);
transition: background 0.2s;
font-variation-settings: "opsz" 40;
}
.faq-question:hover { background: var(--cream-deep); }
.faq-toggle {
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mustard);
border: 2px solid var(--ink);
border-radius: 50%;
font-family: var(--font-display);
font-size: 1.4rem;
font-weight: 900;
color: var(--ink);
transition: transform 0.3s;
flex-shrink: 0;
}
.faq-item.open .faq-toggle { transform: rotate(45deg); background: var(--coral); color: var(--paper-white); }
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.35s ease;
}
.faq-answer-inner {
padding: 0 24px 22px;
color: var(--ink-soft);
border-top: 1px dashed rgba(43, 38, 34, 0.2);
margin-top: -1px;
padding-top: 20px;
}
.faq-answer-inner p + p { margin-top: 12px; }
.faq-answer-inner a { color: var(--coral); text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.faq-group + .faq-group { margin-top: 60px; }
.faq-group-head {
max-width: 800px;
margin: 0 auto 22px;
display: flex;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
}
.faq-group-head h2 {
font-size: 1.5rem;
margin: 0;
}
.faq-group-tag {
display: inline-block;
padding: 4px 13px;
border: 2px solid var(--ink);
border-radius: 999px;
background: var(--mustard);
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink);
transform: rotate(-1.5deg);
flex-shrink: 0;
}
.faq-group:nth-child(2n) .faq-group-tag { background: var(--teal); color: var(--paper-white); transform: rotate(1.4deg); }
.faq-group:nth-child(3n) .faq-group-tag { background: var(--coral); color: var(--paper-white); }
.faq-tail {
max-width: 800px;
margin: 64px auto 0;
text-align: center;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 38px 32px;
box-shadow: 7px 7px 0 var(--teal);
}
.faq-tail h3 { margin-bottom: 10px; }
.faq-tail p { max-width: 52ch; margin: 0 auto 22px; }
.faq-tail .handnote { display: block; margin-top: 16px; }
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.why-card {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius);
padding: 28px 26px 30px;
box-shadow: 5px 5px 0 var(--teal);
position: relative;
}
.why-card:nth-child(2) { box-shadow: 5px 5px 0 var(--coral); transform: rotate(-0.5deg); }
.why-card:nth-child(3) { box-shadow: 5px 5px 0 var(--mustard); transform: rotate(0.4deg); }
.why-card h3 { font-size: 1.18rem; margin-bottom: 10px; }
.why-card p { font-size: 0.95rem; }
.why-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 2.5px solid var(--ink);
border-radius: 12px;
background: var(--cream);
margin-bottom: 16px;
transform: rotate(-3deg);
}
.why-icon svg { width: 24px; height: 24px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) { .why-grid { grid-template-columns: 1fr; } }
.ledger-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: start;
}
.ledger {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: 6px;
padding: 30px 30px 34px;
box-shadow: 6px 6px 0 var(--ink);
transform: rotate(-0.6deg);
clip-path: polygon(
0% 0%, 100% 0%, 100% 97.5%,
96% 100%, 92% 97.5%, 88% 100%, 84% 97.5%, 80% 100%, 76% 97.5%,
72% 100%, 68% 97.5%, 64% 100%, 60% 97.5%, 56% 100%, 52% 97.5%,
48% 100%, 44% 97.5%, 40% 100%, 36% 97.5%, 32% 100%, 28% 97.5%,
24% 100%, 20% 97.5%, 16% 100%, 12% 97.5%, 8% 100%, 4% 97.5%,
0% 100%
);
}
.ledger-head {
text-align: center;
padding-bottom: 16px;
margin-bottom: 8px;
border-bottom: 2px dashed rgba(43, 38, 34, 0.28);
}
.ledger-head h3 { font-size: 1.2rem; margin-bottom: 4px; }
.ledger-head span {
font-family: var(--font-body);
font-size: 0.74rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--ink-soft);
}
.ledger-line {
display: flex;
align-items: baseline;
gap: 8px;
padding: 11px 0;
}
.ledger-line .lg-what { color: var(--ink-soft); font-size: 0.95rem; flex-shrink: 1; }
.ledger-line .lg-dots {
flex: 1 1 auto;
min-width: 18px;
border-bottom: 2px dotted rgba(43, 38, 34, 0.3);
transform: translateY(-4px);
}
.ledger-line .lg-mins {
font-weight: 800;
color: var(--ink);
white-space: nowrap;
flex-shrink: 0;
}
.ledger-total {
display: flex;
align-items: baseline;
gap: 8px;
margin-top: 10px;
padding-top: 16px;
border-top: 2px dashed rgba(43, 38, 34, 0.28);
}
.ledger-total .lg-what {
font-family: var(--font-display);
font-weight: 800;
font-size: 1.05rem;
color: var(--ink);
}
.ledger-total .lg-dots { flex: 1 1 auto; }
.ledger-total .lg-mins {
font-family: var(--font-display);
font-weight: 900;
font-size: 1.35rem;
color: var(--coral);
white-space: nowrap;
}
.ledger-foot {
margin-top: 18px;
text-align: center;
}
.ledger-foot .handnote { font-size: 1.15rem; }
@media (max-width: 900px) { .ledger-wrap { grid-template-columns: 1fr; gap: 34px; } }
.planner {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
.planner-card {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius);
padding: 26px 26px 28px;
box-shadow: 5px 5px 0 var(--indigo);
}
.planner-card:nth-child(2) { box-shadow: 5px 5px 0 var(--teal); }
.planner-when {
display: inline-block;
font-family: var(--font-display);
font-weight: 900;
font-size: 1.5rem;
color: var(--indigo);
margin-bottom: 6px;
}
.planner-card:nth-child(2) .planner-when { color: var(--teal); }
.planner-card h3 { font-size: 1.1rem; margin-bottom: 12px; }
.planner-card ul { list-style: none; }
.planner-card li {
position: relative;
padding: 6px 0 6px 22px;
font-size: 0.93rem;
color: var(--ink-soft);
}
.planner-card li::before {
content: "→";
position: absolute;
left: 0;
top: 6px;
color: var(--coral);
font-weight: 800;
}
@media (max-width: 760px) { .planner { grid-template-columns: 1fr; } }
.safeguard {
max-width: 900px;
margin: 0 auto;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: 6px 6px 0 var(--indigo);
}
.sg-row {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 0;
border-bottom: 2px solid rgba(43, 38, 34, 0.14);
}
.sg-row:last-child { border-bottom: none; }
.sg-row > div { padding: 18px 24px; }
.sg-q {
font-weight: 800;
color: var(--ink);
background: var(--cream);
border-right: 2px solid rgba(43, 38, 34, 0.14);
font-size: 0.95rem;
}
.sg-a { color: var(--ink-soft); font-size: 0.95rem; }
.sg-a b { color: var(--ink); }
@media (max-width: 700px) {
.sg-row { grid-template-columns: 1fr; }
.sg-q { border-right: none; border-bottom: 2px dashed rgba(43, 38, 34, 0.2); }
}
.pitch-card {
max-width: 860px;
margin: 0 auto;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 38px 38px 34px;
box-shadow: 8px 8px 0 var(--mustard);
position: relative;
}
.pitch-card::before {
content: "";
position: absolute;
top: -13px;
left: 38px;
width: 92px;
height: 26px;
background: rgba(31, 138, 123, 0.42);
border-left: 2px dashed rgba(255, 255, 255, 0.5);
border-right: 2px dashed rgba(255, 255, 255, 0.5);
transform: rotate(-3deg);
}
.pitch-card h3 { margin-bottom: 12px; }
.pitch-list { list-style: none; margin: 20px 0 4px; }
.pitch-list li {
position: relative;
padding: 8px 0 8px 30px;
color: var(--ink-soft);
font-size: 0.96rem;
}
.pitch-list li::before {
content: "✱";
position: absolute;
left: 0;
top: 7px;
color: var(--coral);
font-weight: 800;
font-size: 1.05rem;
}
@media (max-width: 640px) { .pitch-card { padding: 32px 24px 28px; } }
#page-schools {
--rule: rgba(43, 38, 34, 0.15);
--rule-soft: rgba(43, 38, 34, 0.09);
--lift: 0 1px 2px rgba(43, 38, 34, 0.04), 0 10px 28px -16px rgba(43, 38, 34, 0.24);
--accent: var(--coral);
counter-reset: sch;
}
#page-schools .section { padding: 84px 0; counter-increment: sch; }
#page-schools #schools-why { --accent: var(--teal); }
#page-schools #schools-workload { --accent: var(--coral); }
#page-schools #schools-calendar { --accent: var(--indigo); }
#page-schools #schools-report { --accent: var(--mustard); }
#page-schools #schools-fees { --accent: var(--teal); }
#page-schools #schools-safeguarding { --accent: var(--coral); }
#page-schools #schools-pitch { --accent: var(--indigo); }
#page-schools .block-head,
#page-schools .section-header {
text-align: left;
margin-bottom: 42px;
padding-top: 24px;
border-top: 1px solid var(--rule);
}
#page-schools .block-head h2,
#page-schools .section-header h2 {
font-size: clamp(1.65rem, 2.9vw, 2.3rem);
font-weight: 600;
letter-spacing: -0.012em;
margin-bottom: 12px;
}
#page-schools .block-head p,
#page-schools .section-header p {
margin-left: 0;
margin-right: 0;
max-width: 64ch;
font-size: 1rem;
}
#page-schools .section-header .rainbow-rule { display: none; }
#page-schools .eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
transform: none;
margin-bottom: 14px;
gap: 12px;
line-height: 1.4;
}
#page-schools .block-head .eyebrow::before,
#page-schools .section-header .eyebrow::before,
#page-schools .pitch-card .eyebrow::before {
content: counter(sch, decimal-leading-zero);
font-family: var(--font-body);
font-size: 1em;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--ink);
opacity: 0.45;
padding-right: 12px;
border-right: 1px solid var(--rule);
}
#page-schools .page-header .eyebrow { color: var(--coral); }
#page-schools .page-header .eyebrow::before { content: none; }
#page-schools .page-header { padding: 76px 0 20px; }
#page-schools .page-header h1 {
font-size: clamp(2.15rem, 4.4vw, 3.5rem);
font-weight: 600;
letter-spacing: -0.018em;
}
#page-schools .page-header .lede { font-size: 1.12rem; max-width: 64ch; }
#page-schools .page-header .rainbow-rule {
height: 5px;
max-width: 168px;
border-radius: 0;
transform: none;
margin-top: 36px;
margin-bottom: 0;
}
#page-schools .squiggle::after {
background-image: none;
background-color: var(--coral);
height: 3px;
left: 0;
right: 0;
bottom: -0.02em;
border-radius: 2px;
}
#page-schools .squiggle.teal::after { background-color: var(--teal); }
#page-schools .squiggle.mustard::after { background-color: var(--mustard); }
#page-schools .why-card,
#page-schools .planner-card,
#page-schools .panel-card,
#page-schools .ledger,
#page-schools .safeguard,
#page-schools .pitch-card {
border: 1px solid var(--rule);
border-radius: 4px;
box-shadow: var(--lift);
transform: none;
clip-path: none;
}
#page-schools .why-card { border-top: 3px solid var(--teal); }
#page-schools .why-card:nth-child(2) { border-top-color: var(--coral); }
#page-schools .why-card:nth-child(3) { border-top-color: var(--mustard); }
#page-schools .planner-card { border-top: 3px solid var(--indigo); }
#page-schools .planner-card:nth-child(2) { border-top-color: var(--teal); }
#page-schools .panel-card { border-top: 3px solid var(--indigo); }
#page-schools .panel-card.tint-teal { border-top-color: var(--teal); }
#page-schools .panel-card.tint-coral { border-top-color: var(--coral); }
#page-schools .panel-card.tint-mustard { border-top-color: var(--mustard); }
#page-schools .safeguard { border-top: 3px solid var(--indigo); }
#page-schools .why-grid,
#page-schools .planner,
#page-schools .award-grid { gap: 24px; }
#page-schools .grid-2 { gap: 24px; }
#page-schools .why-card { padding: 26px 26px 28px; }
#page-schools .planner-card { padding: 24px 26px 26px; }
#page-schools .panel-card { padding: 28px 28px 30px; }
#page-schools .why-card h3,
#page-schools .planner-card h3,
#page-schools .panel-card > h3 {
font-size: 1.16rem;
font-weight: 700;
letter-spacing: -0.006em;
margin-bottom: 10px;
}
#page-schools .why-card p,
#page-schools .planner-card li,
#page-schools .panel-card p,
#page-schools .panel-card li,
#page-schools .pitch-card p,
#page-schools .pitch-list li,
#page-schools .checklist li { font-size: 0.94rem; }
#page-schools .why-icon {
width: 38px;
height: 38px;
border: 1px solid var(--rule);
border-radius: 4px;
background: rgba(31, 138, 123, 0.10);
transform: none;
margin-bottom: 18px;
}
#page-schools .why-card:nth-child(2) .why-icon { background: rgba(232, 106, 76, 0.10); }
#page-schools .why-card:nth-child(3) .why-icon { background: rgba(228, 169, 58, 0.15); }
#page-schools .why-icon svg { width: 19px; height: 19px; stroke-width: 1.9; }
#page-schools .checklist li::before { font-family: var(--font-body); font-size: 0.9rem; top: 9px; }
#page-schools .ledger { padding: 0; overflow: hidden; }
#page-schools .ledger-head {
background: var(--indigo);
text-align: left;
padding: 17px 24px;
margin-bottom: 0;
border-bottom: none;
}
#page-schools .ledger-head h3 {
color: var(--paper-white);
font-size: 1rem;
font-weight: 600;
margin-bottom: 3px;
}
#page-schools .ledger-head span {
color: rgba(251, 246, 234, 0.68);
font-size: 0.66rem;
letter-spacing: 0.15em;
}
#page-schools .ledger-line {
padding: 12px 24px;
border-bottom: 1px solid var(--rule-soft);
}
#page-schools .ledger-line:last-of-type { border-bottom: none; }
#page-schools .ledger-line .lg-what { font-size: 0.92rem; }
#page-schools .ledger-line .lg-dots { border-bottom: 1px dotted rgba(43, 38, 34, 0.32); }
#page-schools .ledger-line .lg-mins {
font-size: 0.92rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
#page-schools .ledger-total {
margin-top: 0;
padding: 16px 24px 12px;
border-top: 1px solid var(--rule);
background: var(--cream);
}
#page-schools .ledger-total .lg-what {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
#page-schools .ledger-total .lg-mins {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
color: var(--indigo);
font-variation-settings: "opsz" 60;
}
#page-schools .ledger-foot {
margin-top: 0;
padding: 0 24px 18px;
text-align: left;
background: var(--cream);
}
#page-schools .handnote {
font-family: var(--font-body);
font-size: 0.86rem;
font-style: italic;
font-weight: 400;
line-height: 1.55;
color: var(--ink-soft);
transform: none;
}
#page-schools .schools-note {
max-width: 64ch;
margin-left: 0;
padding-top: 22px;
border-top: 1px solid var(--rule);
}
#page-schools .planner-when {
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--indigo);
margin-bottom: 9px;
}
#page-schools .planner-card:nth-child(2) .planner-when { color: var(--teal); }
#page-schools .planner-card h3 { margin-bottom: 14px; }
#page-schools .planner-card li { padding: 6px 0 6px 18px; }
#page-schools .planner-card li::before,
#page-schools .pitch-list li::before {
content: "";
position: absolute;
left: 1px;
width: 5px;
height: 5px;
border-radius: 1px;
background: var(--indigo);
}
#page-schools .planner-card li::before { top: 13px; }
#page-schools .planner-card:nth-child(2) li::before { background: var(--teal); }
#page-schools .pitch-list li::before { top: 15px; background: var(--teal); }
#page-schools .section.night { padding: 92px 0; }
#page-schools .section.night::before,
#page-schools .section.night::after {
background-image: none;
background-color: var(--mustard);
height: 3px;
}
#page-schools .night-doodles { display: none; }
#page-schools .section.night .block-head { border-top-color: rgba(251, 246, 234, 0.26); }
#page-schools .section.night .block-head .eyebrow::before {
color: var(--paper);
opacity: 0.6;
border-right-color: rgba(251, 246, 234, 0.26);
}
#page-schools .award-tier {
font-family: var(--font-body);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 9px;
}
#page-schools .award-who {
margin-top: 16px;
padding: 5px 11px;
border: 1px solid var(--rule);
border-radius: 3px;
background: var(--cream);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-soft);
}
#page-schools .price-row {
margin-bottom: 0;
padding: 12px 0;
border-bottom: 1px solid var(--rule-soft);
}
#page-schools .price-row:first-child { padding-top: 0; }
#page-schools .price-row + .price-row + p { margin-top: 18px; }
#page-schools .price-tag { font-size: 2rem; font-weight: 700; font-variation-settings: "opsz" 72; }
#page-schools .price-unit {
font-size: 0.8rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--ink-soft);
}
#page-schools .safeguard { max-width: none; }
#page-schools .sg-row {
grid-template-columns: 0.82fr 1.6fr;
border-bottom: 1px solid var(--rule-soft);
}
#page-schools .sg-row > div { padding: 20px 26px; }
#page-schools .sg-q {
background: rgba(46, 47, 99, 0.04);
border-right: 1px solid var(--rule-soft);
font-size: 0.88rem;
font-weight: 700;
color: var(--indigo);
}
#page-schools .sg-a { font-size: 0.93rem; }
#page-schools .pitch-card {
max-width: none;
padding: 32px 34px 30px;
border: 1px solid rgba(43, 38, 34, 0.2);
border-left: 4px solid var(--indigo);
box-shadow: 0 1px 2px rgba(43, 38, 34, 0.05), 0 14px 34px -18px rgba(43, 38, 34, 0.32);
}
#page-schools .pitch-card::before { display: none; }
#page-schools .pitch-card h3 { font-size: 1.3rem; font-weight: 600; }
#page-schools .pitch-card > p,
#page-schools .pitch-list { max-width: 78ch; }
#page-schools .pitch-list li { padding: 7px 0 7px 18px; }
#page-schools .btn {
border-radius: 4px;
border-width: 1.5px;
font-size: 0.94rem;
letter-spacing: 0.012em;
padding: 12px 24px;
}
#page-schools .btn-sm { padding: 9px 18px; font-size: 0.86rem; }
#page-schools .btn-ghost { border-style: solid; }
#page-schools .btn-primary:hover { animation: none; }
#page-schools .cta-band { padding: 76px 0; }
#page-schools .cta-band h2 {
font-size: clamp(1.65rem, 3vw, 2.3rem);
font-weight: 600;
letter-spacing: -0.012em;
}
#page-schools .cta-band .lede { font-size: 1.05rem; }
@media (max-width: 900px) {
#page-schools .section { padding: 64px 0; }
#page-schools .section.night { padding: 72px 0; }
#page-schools .block-head,
#page-schools .section-header { margin-bottom: 32px; padding-top: 20px; }
}
@media (max-width: 700px) {
#page-schools .sg-row { grid-template-columns: 1fr; }
#page-schools .sg-q {
border-right: none;
border-bottom: 1px solid var(--rule-soft);
}
}
@media (max-width: 640px) {
#page-schools .page-header { padding: 56px 0 16px; }
#page-schools .pitch-card { padding: 28px 22px 26px; }
#page-schools .ledger-head,
#page-schools .ledger-line { padding-left: 18px; padding-right: 18px; }
#page-schools .ledger-total,
#page-schools .ledger-foot { padding-left: 18px; padding-right: 18px; }
#page-schools .sg-row > div { padding: 16px 18px; }
#page-schools .eyebrow { font-size: 0.68rem; letter-spacing: 0.13em; }
#page-schools .ledger-line .lg-dots { border-bottom: none; }
#page-schools .ledger-line { gap: 16px; }
}
.register-stage { padding: 0 0 96px; }
.fork-doodle {
display: block;
width: 260px;
height: 96px;
margin: 0 auto 22px;
opacity: 0.55;
}
.route-fork {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 36px;
align-items: stretch;
max-width: 980px;
margin: 0 auto;
}
.route-door {
--door: var(--indigo);
position: relative;
display: flex;
flex-direction: column;
padding: 40px 34px 34px;
box-shadow: 6px 6px 0 var(--door);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.route-door.door-school { --door: var(--teal); }
.route-door.door-home { --door: var(--coral); }
.route-door:hover {
transform: translate(-2px, -3px);
box-shadow: 9px 10px 0 var(--door);
}
.route-door > h2 {
font-size: 1.5rem;
margin: 6px 0 12px;
}
.route-door > p { color: var(--ink-soft); }
.door-school .eyebrow { color: var(--teal-deep); }
.door-home .eyebrow { color: var(--coral-deep); }
.route-door::before {
top: -14px;
width: 104px;
height: 28px;
z-index: 2;
}
.door-school::before {
--tape-tint: rgba(31, 138, 123, 0.5);
left: 34px;
transform: rotate(-5deg);
}
.door-home::before {
--tape-tint: rgba(232, 106, 76, 0.48);
right: 34px;
transform: rotate(4.5deg);
}
.door-fact {
margin: 0 0 10px;
text-align: center;
font-size: 0.92rem;
font-weight: 700;
color: var(--ink);
opacity: 0.8;
}
.door-fact .fact-sep {
margin: 0 8px;
opacity: 0.5;
font-weight: 400;
}
.door-cta { margin-top: auto; }
.door-cta .btn { width: 100%; justify-content: center; }
.door-cta .btn {
transition: color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
.door-cta .btn:hover {
animation: none;
transform: translateY(-2px);
}
.door-note {
display: block;
text-align: center;
margin-top: 12px;
font-size: 1.2rem;
}
.door-school .btn-primary { background: var(--teal); }
.door-school .btn-primary::before { background: var(--teal-deep); }
.register-notes {
max-width: 860px;
margin: 46px auto 0;
padding-top: 26px;
border-top: 2px dashed rgba(43, 38, 34, 0.25);
text-align: center;
color: var(--ink-soft);
font-size: 0.98rem;
}
.register-notes p { margin: 0 0 10px; }
.register-notes p:last-child { margin-bottom: 0; }
.register-notes a {
color: var(--coral-deep);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 860px) {
.fork-doodle { display: none; }
.route-fork { grid-template-columns: 1fr; gap: 30px; max-width: 460px; }
.route-door { padding: 34px 26px 28px; }
.register-stage { padding-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.route-door, .route-door:hover { transition: none; transform: none; }
.door-cta .btn, .door-cta .btn:hover { transition: none; transform: none; animation: none; }
}
.site-footer {
background: var(--indigo-deep);
color: var(--paper);
padding: 64px 0 24px;
position: relative;
}
.site-footer::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 10px;
background: repeating-linear-gradient(
90deg,
var(--teal) 0 40px,
var(--mustard) 40px 80px,
var(--coral) 80px 120px,
var(--pink) 120px 160px
);
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.3fr;
gap: 40px;
margin-bottom: 48px;
}
.footer-col h4 {
color: var(--mustard);
margin-bottom: 20px;
font-size: 1.05rem;
font-family: var(--font-display);
font-weight: 700;
}
.footer-brand p {
color: rgba(251, 246, 234, 0.7);
font-size: 0.95rem;
max-width: 30ch;
margin-top: 16px;
}
.footer-col a {
color: rgba(251, 246, 234, 0.75);
display: block;
padding: 5px 0;
font-size: 0.95rem;
transition: color 0.2s var(--ease);
}
.footer-col a:hover { color: var(--mustard); }
.footer-col span.footer-static {
display: block;
padding: 5px 0;
font-size: 0.95rem;
color: rgba(251, 246, 234, 0.75);
}
.footer-col p { color: rgba(251, 246, 234, 0.7); font-size: 0.95rem; }
.footer-bottom {
padding-top: 24px;
border-top: 1px dashed rgba(251, 246, 234, 0.15);
display: flex;
justify-content: space-between;
align-items: center;
color: rgba(251, 246, 234, 0.55);
font-size: 0.88rem;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo-inline {
font-family: var(--font-display);
font-weight: 900;
color: var(--paper);
font-size: 1.4rem;
display: flex;
align-items: center;
gap: 10px;
font-variation-settings: "opsz" 144;
}
.footer-logo-inline svg,
.footer-logo-inline img { width: 48px; height: auto; }
.rainbow-rule {
height: 8px;
background: repeating-linear-gradient(
90deg,
var(--indigo) 0 20px,
var(--teal) 20px 40px,
var(--mustard) 40px 60px,
var(--coral) 60px 80px
);
margin-left: auto;
margin-right: auto;
max-width: 240px;
border-radius: 4px;
transform: rotate(-1deg);
margin-bottom: 24px;
}
.section-header {
text-align: center;
margin-bottom: 56px;
}
.section-header h2 { margin-bottom: 12px; }
.section-header p { max-width: 55ch; margin: 0 auto; }
:root {
--font-write: 'Kalam', 'Segoe Print', 'Bradley Hand', cursive;
--ink-pen: #303161;
--ink-pencil: #6E655C;
--paper-fibre: url("../img/paper-grain.png");
--paper-crumple: url("../img/paper-crumple.png");
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.essay-holder {
position: relative;
max-width: 880px;
margin: 0 auto;
--punch-x: 54px;
--punch-y: 48px;
--punch-r: 13px;
}
.sheet-punch {
position: absolute;
left: calc(var(--punch-x) - var(--punch-r));
top: calc(var(--punch-y) - var(--punch-r));
width: calc(var(--punch-r) * 2);
height: calc(var(--punch-r) * 2);
border-radius: 50%;
pointer-events: none;
z-index: 2;
box-shadow:
inset 0 3px 4px -1px rgba(10, 10, 26, 0.55),
inset 0 -2px 3px -1px rgba(255, 252, 240, 0.13);
}
.essay-sheet {
--rule: rgba(232, 106, 76, 0.34);
--rule-step: 34px;
--rule-drop: 23px;
--rule-blue: rgba(105, 189, 243, 0.34);
position: relative;
max-width: 880px;
margin: 0 auto;
background-color: #FCF8ED;
background-image:
linear-gradient(to right, transparent 0 108px, var(--rule) 108px 110px, transparent 110px),
repeating-linear-gradient(to bottom,
transparent 0 var(--rule-drop),
var(--rule-blue) var(--rule-drop) calc(var(--rule-drop) + 1.5px),
transparent calc(var(--rule-drop) + 1.5px) var(--rule-step)),
radial-gradient(ellipse 82% 60% at 12% 0%, rgba(255, 255, 255, 0.6), transparent 68%),
radial-gradient(ellipse 118% 88% at 90% 98%, rgba(60, 58, 70, 0.040), transparent 64%),
radial-gradient(136% 126% at 50% 50%, transparent 70%, rgba(60, 58, 70, 0.036) 100%),
var(--paper-crumple),
var(--paper-fibre);
background-size:
100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 128px 128px;
background-repeat:
no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode:
normal, normal, normal, multiply, multiply, multiply, multiply;
border: 3px solid var(--ink);
border-radius: 2px;
-webkit-mask-image:
linear-gradient(#000, #000),
radial-gradient(circle var(--punch-r) at var(--punch-x) var(--punch-y),
#000 92%, rgba(0, 0, 0, 0) 100%);
mask-image:
linear-gradient(#000, #000),
radial-gradient(circle var(--punch-r) at var(--punch-x) var(--punch-y),
#000 92%, rgba(0, 0, 0, 0) 100%);
-webkit-mask-size: calc(100% + 48px) calc(100% + 48px), 100% 100%;
mask-size: calc(100% + 48px) calc(100% + 48px), 100% 100%;
-webkit-mask-position: -24px -24px, 0 0;
mask-position: -24px -24px, 0 0;
-webkit-mask-repeat: no-repeat, no-repeat;
mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: source-out;
mask-composite: subtract;
-webkit-mask-clip: no-clip;
mask-clip: no-clip;
box-shadow:
10px 10px 0 var(--indigo),
0 1px 1px rgba(60, 58, 70, 0.16),
0 10px 18px -10px rgba(60, 58, 70, 0.34),
0 30px 44px -28px rgba(60, 58, 70, 0.34),
inset 0 1px 0 rgba(255, 255, 255, 0.62),
inset 0 -1px 0 rgba(60, 58, 70, 0.07),
inset 0 0 70px rgba(60, 58, 70, 0.022);
padding: calc(var(--rule-step) * 2) 64px 96px 148px;
}
.essay-sheet::before {
--tape-tint: rgba(31, 138, 123, 0.5);
top: -15px; left: 48px;
width: 108px; height: 28px;
transform: rotate(-3deg);
}
.essay-sheet::after {
--tape-tint: rgba(232, 106, 76, 0.5);
top: -15px; right: 56px;
width: 92px; height: 26px;
transform: rotate(4deg);
}
.essay-title { margin-bottom: var(--rule-step); }
.essay-title .eyebrow {
display: flex;
width: fit-content;
height: var(--rule-step);
margin-bottom: 0;
}
.essay-title h2 {
font-family: var(--font-write);
font-weight: 700;
font-size: clamp(1.65rem, 3.2vw, 2.25rem);
line-height: calc(var(--rule-step) * 2);
letter-spacing: 0;
color: var(--ink-pen);
margin-bottom: 0;
}
.essay-byline {
font-family: var(--font-write);
font-weight: 400;
font-size: 1rem;
line-height: var(--rule-step);
display: block;
color: var(--teal-deep);
}
.essay-movement { position: relative; margin-bottom: var(--rule-step); }
.essay-sheet p {
font-family: var(--font-write);
font-weight: 400;
font-size: 1.16rem;
line-height: var(--rule-step);
color: var(--ink-pen);
margin-bottom: var(--rule-step);
max-width: 52ch;
}
.essay-chapter {
position: absolute;
left: -124px;
top: 8px;
width: 76px;
text-align: right;
font-family: var(--font-hand);
font-size: 1.25rem;
line-height: var(--rule-step);
color: var(--ink-pencil);
transform: rotate(-3deg);
}
.card-stage {
perspective: 1600px;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.bizcard {
width: min(470px, 100%);
aspect-ratio: 1.6 / 1;
padding: 0;
background: none;
display: block;
container-type: inline-size;
}
.bizcard-inner {
position: relative;
width: 100%; height: 100%;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateY(0deg) rotateZ(-1.2deg);
transition: transform 0.9s cubic-bezier(0.22, 0.72, 0.2, 1);
will-change: transform;
}
.bizcard.is-flipped .bizcard-inner { transform: rotateY(180deg) rotateZ(1.2deg); }
.bizcard-face {
position: absolute;
inset: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
border-radius: 7px;
overflow: hidden;
display: flex;
text-align: left;
box-shadow:
inset 0 0 0 1px rgba(60, 58, 70, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.78),
inset 0 -1px 0 rgba(60, 58, 70, 0.13),
0 1px 1.5px rgba(60, 58, 70, 0.19),
0 8px 14px -7px rgba(60, 58, 70, 0.3),
0 26px 36px -22px rgba(60, 58, 70, 0.4);
transition: box-shadow 0.45s var(--ease);
}
.bizcard:hover .bizcard-face,
.bizcard:focus-visible .bizcard-face {
box-shadow:
inset 0 0 0 1px rgba(60, 58, 70, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.78),
inset 0 -1px 0 rgba(60, 58, 70, 0.13),
0 1px 1.5px rgba(60, 58, 70, 0.2),
0 14px 22px -9px rgba(60, 58, 70, 0.36),
0 36px 48px -26px rgba(60, 58, 70, 0.46);
}
.bizcard:focus-visible { outline: none; }
.bizcard:focus-visible .bizcard-face { outline: 3px dashed var(--coral); outline-offset: 4px; }
.bizcard-front {
transform: translateZ(1px);
background-color: #FDFAF4;
background-image:
linear-gradient(148deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 48%),
radial-gradient(ellipse 100% 82% at 100% 100%, rgba(60, 58, 70, 0.048), transparent 62%),
radial-gradient(126% 120% at 50% 50%, transparent 66%, rgba(60, 58, 70, 0.042) 100%),
linear-gradient(rgba(253, 250, 244, 0.64), rgba(253, 250, 244, 0.64)),
var(--paper-fibre);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 172px 172px;
background-blend-mode: normal, multiply, multiply, normal, multiply;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 10.4% 13.5% 0;
}
.bizcard-sign {
font-family: var(--font-sign);
font-weight: 400;
font-size: clamp(1.2rem, 10.8cqw, 3.2rem);
line-height: 1.45;
white-space: nowrap;
color: #1E1B19;
letter-spacing: 0.005em;
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.95),
0 -1px 1.3px rgba(52, 50, 62, 0.34);
margin-left: 0.084em;
margin-bottom: 4.5%;
user-select: none;
}
.bizcard-sign img { max-width: 100%; max-height: 15cqw; display: block; }
.bizcard-id {
font-family: var(--font-body);
font-size: 2.05cqw;
letter-spacing: 0.135em;
text-transform: uppercase;
line-height: 1.95;
color: var(--ink-soft);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}
.bizcard-name { font-weight: 800; color: var(--ink); }
.bizcard-role { font-weight: 500; }
.bizcard-contact { margin-top: 1.95em; font-weight: 500; }
.bizcard-back {
transform: rotateY(180deg) translateZ(1px);
background-color: #FDFAF4;
background-image:
linear-gradient(148deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0) 48%),
radial-gradient(ellipse 100% 82% at 100% 100%, rgba(60, 58, 70, 0.048), transparent 62%),
radial-gradient(126% 120% at 50% 50%, transparent 66%, rgba(60, 58, 70, 0.042) 100%),
linear-gradient(rgba(253, 250, 244, 0.64), rgba(253, 250, 244, 0.64)),
var(--paper-fibre);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 172px 172px;
background-blend-mode: normal, multiply, multiply, normal, multiply;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
padding: 0 13.5% 13%;
}
.bizcard-back img {
width: 17cqw;
height: auto;
display: block;
filter: drop-shadow(0 1px 1.5px rgba(60, 58, 70, 0.14));
}
.card-hint {
display: flex;
align-items: flex-end;
gap: 6px;
font-family: var(--font-hand);
font-size: 1.3rem;
color: var(--ink-soft);
transform: rotate(-1.5deg);
}
.card-hint-arrow { display: none; }
.section.story-backdrop .card-hint {
color: var(--cream);
opacity: 0.88;
transform: rotate(-2.5deg);
}
.section.story-backdrop .card-hint-arrow {
display: block;
width: 52px;
height: 44px;
margin-bottom: 2px;
color: var(--mustard);
}
.section.story-backdrop .card-hint-arrow svg { width: 100%; height: 100%; display: block; }
.section.story-backdrop .bizcard:hover ~ .card-hint .card-hint-arrow,
.section.story-backdrop .card-hint:hover .card-hint-arrow {
animation: doodle-jitter 2.4s ease-in-out infinite;
}
.section.story-backdrop .card-stage { margin-top: 76px; }
@media (min-width: 1280px) {
.section.story-backdrop { padding-bottom: 436px; }
.section.story-backdrop .card-stage {
position: absolute;
right: 4px;
bottom: -128px;
width: 370px;
margin-top: 0;
align-items: flex-start;
gap: 16px;
z-index: 3;
}
.section.story-backdrop .bizcard {
width: 370px;
transform: rotate(-5.5deg);
}
.section.story-backdrop .bizcard-face {
box-shadow:
inset 0 0 0 1px rgba(60, 58, 70, 0.075),
inset 0 1px 0 rgba(255, 255, 255, 0.78),
inset 0 -1px 0 rgba(60, 58, 70, 0.13),
0 2px 3px rgba(12, 12, 30, 0.34),
0 12px 22px -8px rgba(12, 12, 30, 0.5),
0 34px 48px -26px rgba(12, 12, 30, 0.62);
}
.section.story-backdrop .card-hint { margin-left: 14px; }
}
.memo {
position: relative;
max-width: 880px;
margin: 0 auto;
padding: 66px 78px 58px;
color: var(--ink);
background-color: #F6EFDD;
background-image:
linear-gradient(to bottom,
transparent calc(34% - 3px),
rgba(74, 63, 46, 0.045) calc(34% - 1px),
rgba(74, 63, 46, 0.065) 34%,
rgba(255, 255, 255, 0.34) calc(34% + 1px),
transparent calc(34% + 4px)),
radial-gradient(ellipse 88% 56% at 10% 0%, rgba(255, 255, 255, 0.78), transparent 64%),
radial-gradient(ellipse 120% 92% at 92% 100%, rgba(74, 63, 46, 0.06), transparent 62%),
radial-gradient(138% 128% at 50% 50%, transparent 68%, rgba(74, 63, 46, 0.05) 100%),
var(--paper-crumple),
var(--paper-fibre);
background-size:
100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 118px 118px;
background-repeat:
no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode:
normal, normal, multiply, multiply, multiply, multiply;
border-radius: 2px;
box-shadow:
0 1px 1px rgba(58, 50, 38, 0.20),
0 2px 4px rgba(58, 50, 38, 0.10),
0 12px 22px -10px rgba(58, 50, 38, 0.34),
0 38px 58px -28px rgba(58, 50, 38, 0.44),
inset 0 1px 0 rgba(255, 255, 255, 0.72),
inset 0 -1px 0 rgba(58, 50, 38, 0.07);
}
.memo-head {
display: flex;
align-items: center;
justify-content: center;
gap: 11px;
margin-bottom: 16px;
}
.memo-logo {
width: 50px;
height: auto;
display: block;
mix-blend-mode: multiply;
}
.memo-org {
font-family: var(--font-display);
font-weight: 600;
font-size: 0.79rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(52, 46, 38, 0.74);
text-shadow:
0 1px 0 rgba(255, 255, 255, 0.9),
0 -1px 1px rgba(52, 46, 38, 0.12);
}
.memo-rule {
height: 4px;
margin-bottom: 34px;
border-top: 1.5px solid rgba(58, 50, 38, 0.42);
border-bottom: 0.5px solid rgba(58, 50, 38, 0.26);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.memo-label {
font-family: var(--font-body);
font-weight: 700;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--teal-deep);
margin-bottom: 10px;
}
.memo h2 {
font-size: clamp(1.7rem, 3.2vw, 2.35rem);
margin-bottom: 24px;
color: rgba(38, 34, 28, 0.92);
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}
.memo-body {
max-width: 62ch;
font-size: 1.06rem;
line-height: 1.72;
color: rgba(58, 50, 40, 0.9);
}
.team-faces {
display: flex;
align-items: center;
margin-bottom: 30px;
}
.team-face {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
margin-right: -8px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--indigo);
color: #F6EFDD;
mix-blend-mode: multiply;
}
.team-face svg { width: 20px; height: 20px; display: block; }
.team-face:nth-child(1) { transform: rotate(-4deg); background: var(--indigo); opacity: 0.90; }
.team-face:nth-child(2) { transform: rotate(3deg); background: var(--teal); opacity: 0.94; }
.team-face:nth-child(3) { transform: rotate(-2deg); background: var(--coral); opacity: 0.89; }
.team-face:nth-child(4) { transform: rotate(4deg); background: var(--mustard); opacity: 0.95; }
.team-face-open {
background: transparent;
border: 2px dashed rgba(58, 50, 38, 0.4);
color: rgba(58, 50, 38, 0.55);
font-family: var(--font-hand);
font-size: 1.55rem;
font-weight: 700;
line-height: 1;
transform: rotate(-1deg);
margin-right: 0;
opacity: 1;
position: relative;
z-index: -1;
}
.section.team-band { padding: 360px 0 372px; }
@media (max-width: 700px) {
.section.story-backdrop { padding: 136px 0 156px; }
.section.team-band { padding: 168px 0 180px; }
}
@media (min-width: 680px) {
.essay-sheet, .essay-holder, .memo { max-width: min(880px, 84vw); }
}
.sticky-wrap {
position: relative;
width: 340px;
margin: 40px -18px -62px auto;
transform: rotate(-1.8deg);
}
.sticky-wrap::before {
content: "";
position: absolute;
z-index: -1;
left: 12px;
right: 8px;
bottom: 1px;
height: 24px;
background: rgba(52, 44, 30, 0.46);
filter: blur(10px);
border-radius: 50%;
transform: rotate(1.1deg);
}
.sticky-note {
position: relative;
padding: 32px 26px 26px;
background-color: #F3E98C;
background-image:
linear-gradient(to bottom, rgba(122, 108, 44, 0.10) 0 30px, rgba(122, 108, 44, 0) 30px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 34%),
radial-gradient(ellipse 96% 92% at 100% 100%, rgba(120, 100, 38, 0.16), transparent 58%),
var(--paper-fibre);
background-size: 100% 100%, 100% 100%, 100% 100%, 118px 118px;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode: multiply, normal, multiply, multiply;
border-radius: 1px 1px 3px 1px;
box-shadow:
0 1px 1px rgba(60, 52, 30, 0.22),
0 3px 5px -2px rgba(60, 52, 30, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 -1px 0 rgba(60, 52, 30, 0.08);
}
.team-support {
font-family: var(--font-hand);
font-size: 1.36rem;
line-height: 1.44;
color: #4A3F22;
margin: 0;
transform: rotate(-0.5deg);
}
.team-support a { color: var(--coral-deep); font-weight: 700; }
.team-support a:hover { color: var(--coral); }
@media (max-width: 700px) {
.memo { padding: 38px 26px 34px; }
.memo h2 { margin-bottom: 20px; }
.team-face { width: 38px; height: 38px; }
.team-face svg { width: 17px; height: 17px; }
.sticky-wrap { width: auto; margin: 32px 0 -34px; transform: rotate(-1deg); }
.sticky-note { padding: 28px 22px 24px; }
.team-support { font-size: 1.26rem; }
}
@media (max-width: 900px) {
.essay-sheet {
--rule: transparent;
padding: calc(var(--rule-step) * 2) 26px 46px;
box-shadow:
6px 6px 0 var(--indigo),
inset 0 1px 0 rgba(255, 255, 255, 0.55),
inset 0 0 44px rgba(43, 38, 34, 0.045);
}
.essay-holder { --punch-x: 40px; --punch-y: 42px; --punch-r: 11px; }
.essay-sheet::before { left: 24px; }
.essay-sheet::after { right: 24px; }
.essay-chapter {
position: static;
width: auto;
text-align: left;
display: block;
margin-bottom: 0;
}
}
@media (max-width: 520px) {
.essay-sheet p { font-size: 1.09rem; }
}
@media (max-width: 960px) {
.hero-grid { grid-template-columns: 1fr; gap: 32px; }
.hero-illustration { max-width: 480px; margin: 0 auto; }
.grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
.steps-grid { grid-template-columns: repeat(2, 1fr); }
.differ-grid { grid-template-columns: repeat(2, 1fr); }
.story-grid, .about-preview { grid-template-columns: 1fr; gap: 40px; }
.footer-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 940px) {
.nav { display: none; }
.nav.mobile-open {
display: flex;
flex-direction: column;
align-items: stretch;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--indigo);
padding: 20px;
border-bottom: 2px solid rgba(245, 242, 234, 0.14);
box-shadow: 0 10px 24px -12px rgba(33, 34, 71, 0.6);
gap: 4px;
}
.nav.mobile-open .nav-link { padding: 14px 16px; font-size: 0.95rem; }
.nav.mobile-open .btn { justify-content: center; margin-top: 8px; margin-left: 0; }
.mobile-toggle { display: flex; }
.btn-header-cta { display: none; }
.nav.mobile-open .btn-header-cta { display: flex; font-size: 0.95rem; padding: 13px 28px; }
}
@media (max-width: 640px) {
.section { padding: 64px 0; }
.container { padding: 0 20px; }
.header-inner { padding: 12px 20px; gap: 12px; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.steps-grid { grid-template-columns: 1fr; }
.differ-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
.trust-strip { padding: 8px 0 20px; }
.trust-inner { justify-content: flex-start; }
.logo-text { font-size: 1.1rem; }
.logo-text span { font-size: 0.85rem; }
.hero { padding: 48px 0 54px; }
}
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
html { scroll-behavior: auto; }
}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
outline: 3px dashed var(--coral);
outline-offset: 3px;
}
.section.wall-band {
background-color: #DFD5BC;
background-image:
radial-gradient(ellipse 130% 104% at 16% -18%, rgba(255, 255, 255, 0.7), transparent 60%),
radial-gradient(ellipse 152% 132% at 50% 44%, transparent 44%, rgba(43, 38, 34, 0.18) 100%);
background-size: 100% 100%, 100% 100%;
background-repeat: no-repeat, no-repeat;
overflow: hidden;
}
.wallcal {
--leaf: #FDFBF6;
--leaf-back: #F4F0E6;
--leaf-ink: #2B2622;
--leaf-rule: rgba(43, 38, 34, 0.11);
--leaf-rule-soft: rgba(43, 38, 34, 0.055);
--leaf-faint: rgba(43, 38, 34, 0.26);
--cal-turn: cubic-bezier(0.46, 0.03, 0.34, 1);
max-width: 660px;
margin: 0 auto;
position: relative;
}
.wallcal-hang {
display: block;
position: relative;
margin-bottom: 7px;
pointer-events: none;
}
.wallcal-hang svg {
display: block;
width: 100%;
height: auto;
filter: drop-shadow(1.6px 2.4px 1.4px rgba(30, 26, 20, 0.28));
}
.wallcal-object { position: relative; }
.wallcal-shade {
position: absolute;
inset: 0;
border-radius: 2px;
box-shadow:
0 14px 24px -12px rgba(30, 26, 20, 0.34),
0 38px 58px -28px rgba(30, 26, 20, 0.44);
z-index: 0;
}
.wallcal-shade::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: -16px;
height: 22px;
border-radius: 50%;
background: radial-gradient(ellipse 50% 50% at 50% 0%, rgba(30, 26, 20, 0.26), transparent 72%);
pointer-events: none;
}
.wallcal-batten {
position: absolute;
left: -11px;
right: -11px;
top: -15px;
height: 31px;
border-radius: 2.5px;
z-index: 3;
pointer-events: none;
background:
linear-gradient(180deg,
var(--indigo-soft) 0%,
var(--indigo) 38%,
var(--indigo) 68%,
var(--indigo-deep) 100%);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.2),
inset 0 -1px 0 rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(0, 0, 0, 0.1),
0 2px 3px rgba(30, 26, 20, 0.3),
0 7px 11px -5px rgba(30, 26, 20, 0.34);
}
.wallcal-batten::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.26) 0%, transparent 3.5%,
transparent 96.5%, rgba(0, 0, 0, 0.26) 100%);
pointer-events: none;
}
.wallcal-leaves {
position: relative;
z-index: 1;
display: grid;
perspective: 1500px;
perspective-origin: 50% 0%;
}
.wallcal-leaf {
grid-area: 1 / 1 / 2 / 2;
display: grid;
position: relative;
z-index: 1;
transform-origin: 50% 0;
transform-style: preserve-3d;
transform: translate3d(0, 0, 0) rotateX(0deg);
}
.wallcal-leaf.is-turning {
position: absolute;
inset: 0;
z-index: 2;
will-change: transform;
transition: transform 0.82s var(--cal-turn);
}
.wallcal-leaf.is-turning.at-open {
transform: translate3d(0, -2px, 22px) rotateX(-91deg);
}
.leaf-face {
grid-area: 1 / 1 / 2 / 2;
position: relative;
border-radius: 2px 2px 4px 4px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;
}
.leaf-face.front {
padding: 34px 30px 28px;
background-color: var(--leaf);
background-image:
radial-gradient(ellipse 92% 56% at 15% 0%, rgba(255, 255, 255, 0.9), transparent 66%),
radial-gradient(ellipse 124% 96% at 94% 100%, rgba(60, 58, 70, 0.05), transparent 62%),
radial-gradient(142% 130% at 50% 50%, transparent 74%, rgba(60, 58, 70, 0.035) 100%),
linear-gradient(rgba(253, 251, 246, 0.68), rgba(253, 251, 246, 0.68)),
var(--paper-fibre);
background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 84px 84px;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode: normal, multiply, multiply, normal, multiply;
box-shadow:
inset 0 0 0 1px rgba(60, 58, 70, 0.05),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(60, 58, 70, 0.08),
0 1px 2px rgba(30, 26, 20, 0.2),
0 7px 12px -6px rgba(30, 26, 20, 0.26);
}
.leaf-face.front::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(30, 30, 62, 0.3), rgba(30, 30, 62, 0.04));
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.wallcal-leaf.at-open .leaf-face.front::after { opacity: 1; }
.leaf-face.back {
transform: rotateX(180deg);
background-color: var(--leaf-back);
background-image:
radial-gradient(ellipse 90% 62% at 82% 0%, rgba(255, 255, 255, 0.55), transparent 62%),
radial-gradient(142% 130% at 50% 50%, transparent 68%, rgba(60, 58, 70, 0.045) 100%),
linear-gradient(rgba(244, 240, 230, 0.68), rgba(244, 240, 230, 0.68)),
var(--paper-fibre);
background-size: 100% 100%, 100% 100%, 100% 100%, 84px 84px;
background-repeat: no-repeat, no-repeat, no-repeat, repeat;
background-blend-mode: normal, multiply, normal, multiply;
box-shadow: inset 0 0 0 1px rgba(60, 58, 70, 0.045);
}
.wallcal-leaf.is-turning .leaf-face { transition: opacity 0.2s ease; }
.wallcal-leaf.is-turning.dir-next.at-open .leaf-face { opacity: 0; transition-delay: 0.62s; }
.leaf-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--indigo);
margin-bottom: 4px;
}
.leaf-month {
font-family: var(--font-display);
font-size: clamp(1.7rem, 4.2vw, 2.5rem);
font-weight: 700;
color: var(--indigo);
letter-spacing: -0.02em;
line-height: 1;
margin: 0;
}
.leaf-year {
font-family: var(--font-body);
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.22em;
color: var(--leaf-faint);
}
.leaf-grid {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
margin-top: 10px;
}
.leaf-grid th {
font-family: var(--font-body);
font-size: 0.63rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--leaf-faint);
text-align: left;
padding: 0 0 8px 3px;
}
.leaf-grid th abbr { text-decoration: none; border: none; }
.leaf-grid th.wknd { color: rgba(43, 38, 34, 0.18); }
.leaf-grid td {
height: 60px;
vertical-align: top;
line-height: 1;
padding: 9px 5px 4px 8px;
border-top: 1px solid var(--leaf-rule);
border-left: 1px solid var(--leaf-rule-soft);
position: relative;
}
.leaf-grid td:first-child { border-left: none; }
.leaf-grid tr:last-child td { border-bottom: 1px solid var(--leaf-rule); }
.cal-day {
position: relative;
display: inline-block;
}
.cal-num {
font-family: var(--font-display);
font-size: 1.02rem;
font-weight: 600;
color: var(--leaf-ink);
line-height: 1;
position: relative;
z-index: 1;
display: inline-block;
}
.leaf-grid td.wknd .cal-num { color: rgba(43, 38, 34, 0.42); }
.leaf-grid td.out .cal-num { color: rgba(43, 38, 34, 0.14); }
.leaf-grid td.out { background: rgba(43, 38, 34, 0.012); }
.leaf-grid td.mark.g8 { --mk: var(--teal); --mk-soft: rgba(31, 138, 123, 0.072); }
.leaf-grid td.mark.g10 { --mk: var(--coral); --mk-soft: rgba(232, 106, 76, 0.072); }
.leaf-grid td.mark.g12 { --mk: var(--mustard);--mk-soft: rgba(228, 169, 58, 0.1); }
.leaf-grid td.mark { background: var(--mk-soft); }
.leaf-grid td.mark .cal-num { color: var(--mk); font-weight: 700; }
.cal-ring {
position: absolute;
left: 50%;
top: 48%;
width: 38px;
height: 30px;
transform: translate(-50%, -50%);
color: var(--mk);
pointer-events: none;
z-index: 0;
}
.cal-ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.cal-tag {
position: absolute;
left: 8px;
bottom: 7px;
font-family: var(--font-body);
font-size: 0.6rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mk);
line-height: 1;
}
@keyframes cal-pulse {
0%, 100% { box-shadow: inset 0 0 0 0 transparent; }
30% { box-shadow: inset 0 0 0 2px var(--mk); }
65% { box-shadow: inset 0 0 0 0 transparent; }
}
.leaf-grid td.pulse { animation: cal-pulse 1.5s ease 2; }
.leaf-note {
margin-top: 16px;
font-family: var(--font-hand);
font-size: 1.15rem;
line-height: 1.35;
color: var(--ink-soft);
transform: rotate(-0.7deg);
min-height: 3.1em;
}
.wallcal-controls {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-top: 34px;
}
.wallcal-nav {
width: 44px;
height: 44px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--paper-white);
color: var(--indigo);
border: 1.5px solid var(--indigo-line);
box-shadow: 0 2px 5px -2px rgba(43, 38, 34, 0.28);
transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wallcal-nav svg { width: 17px; height: 17px; display: block; }
.wallcal-nav:hover:not(:disabled) { background: var(--indigo); color: var(--paper); border-color: var(--indigo); }
.wallcal-nav:disabled { opacity: 0.32; cursor: default; }
.wallcal-nav:focus-visible { outline: 3px solid var(--mustard); outline-offset: 3px; }
.wallcal-where {
font-family: var(--font-body);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
min-width: 12ch;
text-align: center;
}
.wallcal-hint {
display: block;
text-align: center;
margin-top: 12px;
font-family: var(--font-hand);
font-size: 1.15rem;
color: var(--ink-soft);
opacity: 0.72;
transform: rotate(-0.8deg);
}
.wallcal-key {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin: 40px auto 0;
max-width: 660px;
padding: 0;
}
.wallcal-key li { margin: 0; display: flex; }
.wallcal-key .key-row {
display: flex;
flex-direction: column;
flex: 1;
width: 100%;
text-align: left;
padding: 14px 16px 13px;
border-radius: 4px;
background: rgba(251, 246, 234, 0.72);
border: 1px solid rgba(43, 38, 34, 0.1);
border-left: 4px solid var(--mk, var(--indigo));
box-shadow: 0 1px 2px rgba(43, 38, 34, 0.06);
transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.wallcal-key li.g8 { --mk: var(--teal); }
.wallcal-key li.g10 { --mk: var(--coral); }
.wallcal-key li.g12 { --mk: var(--mustard); }
button.key-row:hover {
background: var(--paper-white);
transform: translateY(-2px);
box-shadow: 0 6px 16px -8px rgba(43, 38, 34, 0.32);
}
button.key-row:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }
.key-grade {
display: block;
font-family: var(--font-body);
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mk);
margin-bottom: 6px;
}
.key-date {
display: block;
font-family: var(--font-display);
font-size: 1.06rem;
font-weight: 600;
color: var(--ink);
line-height: 1.2;
}
.key-who {
display: block;
margin-top: auto;
padding-top: 5px;
font-family: var(--font-body);
font-size: 0.82rem;
color: var(--ink-soft);
line-height: 1.35;
}
@media (max-width: 720px) {
.wallcal-key { grid-template-columns: 1fr; gap: 10px; max-width: 460px; }
.leaf-face.front { padding: 30px 18px 24px; }
.leaf-grid td { height: 52px; padding: 8px 3px 4px 5px; }
.cal-tag { font-size: 0.54rem; letter-spacing: 0.05em; left: 5px; bottom: 6px; }
.cal-ring { width: 33px; height: 27px; }
.leaf-grid th { font-size: 0.56rem; letter-spacing: 0.1em; }
}
@media (max-width: 460px) {
.wallcal-batten { left: -7px; right: -7px; top: -11px; height: 24px; }
.leaf-face.front { padding: 27px 11px 22px; }
.leaf-grid td { height: 46px; padding: 7px 2px 3px 4px; }
.cal-num { font-size: 0.9rem; }
.cal-tag { font-size: 0.5rem; left: 4px; bottom: 5px; }
.cal-ring { width: 29px; height: 24px; }
.leaf-note { font-size: 1rem; }
.wallcal-where { min-width: 10ch; font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
.wallcal-leaf.is-turning,
.wallcal-leaf.is-turning .leaf-face,
.leaf-face.front::after,
.wallcal-nav,
.wallcal-key .key-row { transition: none; }
.leaf-grid td.pulse { animation: none; box-shadow: inset 0 0 0 2px var(--mk); }
button.key-row:hover { transform: none; }
}
#page-schools .leaf-note,
#page-schools .wallcal-hint {
font-family: var(--font-body);
font-size: 0.86rem;
font-style: italic;
transform: none;
opacity: 1;
color: var(--ink-soft);
}
#page-schools .wallcal-key .key-row { border-radius: 3px; }
#page-schools #schools-dates { --accent: var(--teal); }
/* ==========================================================================
register-school.html — School Division registration form
========================================================================== */
#page-register-school .form-shell { max-width: 780px; margin: 0 auto; }
#page-register-school .form-section { margin-bottom: 56px; }
#page-register-school .form-section > h2 { margin-bottom: 8px; }
#page-register-school .form-section > .lede { margin-bottom: 28px; font-size: 1.05rem; }
#page-register-school .field { margin-bottom: 20px; }
#page-register-school .field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
@media (max-width: 640px) {
#page-register-school .field-row { grid-template-columns: 1fr; }
}
#page-register-school label,
#page-register-school .field-label,
#page-register-home label,
#page-register-home .field-label {
display: block;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.94rem;
color: var(--ink);
margin-bottom: 6px;
}
#page-register-school .field-hint,
#page-register-home .field-hint {
font-size: 0.86rem;
color: var(--ink-soft);
margin-top: 6px;
}
#page-register-school input[type="text"],
#page-register-school input[type="email"],
#page-register-school input[type="number"],
#page-register-school select,
#page-register-school textarea,
#page-register-home input[type="email"] {
width: 100%;
font-family: var(--font-body);
font-size: 1rem;
color: var(--ink);
background: var(--paper-white);
border: 2px solid var(--ink);
border-radius: 10px;
padding: 11px 14px;
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
#page-register-school select { cursor: pointer; }
#page-register-school input:focus,
#page-register-school select:focus,
#page-register-school textarea:focus,
#page-register-home input:focus {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px var(--indigo-tint);
}
#page-register-school input.field-invalid,
#page-register-school select.field-invalid,
#page-register-home input.field-invalid {
border-color: var(--coral);
}
#page-register-school .checkbox-field {
display: flex;
align-items: flex-start;
gap: 12px;
cursor: pointer;
}
#page-register-school .checkbox-field input[type="checkbox"] {
margin-top: 4px;
width: 20px;
height: 20px;
flex-shrink: 0;
accent-color: var(--teal);
cursor: pointer;
}
#page-register-school .checkbox-field .field-label,
#page-register-school .checkbox-field span.label-text {
font-weight: 500;
color: var(--ink-soft);
margin-bottom: 0;
}
/* Locked-on checkbox: reads as a statement of what's included rather than a
disabled control the coordinator might think is broken. The native disabled
rendering greys the tick out, so it is drawn here instead. */
#page-register-school .checkbox-field.is-locked { cursor: default; }
#page-register-school .checkbox-field.is-locked input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 20px;
height: 20px;
flex-shrink: 0;
margin-top: 4px;
border: 2px solid var(--teal);
border-radius: 5px;
background: var(--teal);
position: relative;
cursor: default;
opacity: 1;
}
#page-register-school .checkbox-field.is-locked input[type="checkbox"]::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 5px;
height: 10px;
border: solid var(--paper-white);
border-width: 0 2.5px 2.5px 0;
transform: rotate(45deg);
}
#page-register-school .label-note {
display: inline-block;
font-size: 0.82rem;
font-weight: 700;
color: var(--teal-deep);
margin-left: 2px;
}
/* Notice tables (2.2) */
#page-register-school .notice-table-wrap { overflow-x: auto; margin: 20px 0; }
#page-register-school table.notice-table {
width: 100%;
border-collapse: collapse;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius);
overflow: hidden;
}
#page-register-school table.notice-table th,
#page-register-school table.notice-table td {
padding: 12px 16px;
text-align: left;
border-bottom: 1px solid var(--indigo-line);
font-size: 0.95rem;
}
#page-register-school table.notice-table thead th {
background: var(--indigo);
color: var(--paper-white);
font-family: var(--font-display);
font-weight: 700;
}
#page-register-school table.notice-table tbody tr:last-child td { border-bottom: none; }
#page-register-school table.notice-table tbody tr:nth-child(odd) { background: var(--cream); }
/* Roster method selector (2.3) */
#page-register-school .method-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0 8px;
}
@media (max-width: 640px) {
#page-register-school .method-cards { grid-template-columns: 1fr; }
}
#page-register-school .method-card {
position: relative;
display: block;
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 24px;
cursor: pointer;
transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
box-shadow: 4px 4px 0 var(--indigo-line);
}
#page-register-school .method-card:hover { transform: translateY(-2px); }
#page-register-school .method-card input {
position: absolute;
opacity: 0;
pointer-events: none;
}
#page-register-school .method-card h3 { font-size: 1.15rem; margin-bottom: 6px; }
#page-register-school .method-card p { font-size: 0.92rem; margin: 0; }
#page-register-school .method-card.is-selected {
border-color: var(--teal);
box-shadow: 4px 4px 0 var(--teal);
background: var(--indigo-tint);
}
#page-register-school .roster-path { margin-top: 28px; }
#page-register-school .roster-path[hidden] { display: none; }
/* Path A — upload */
#page-register-school .upload-box {
background: var(--paper-white);
border: 2.5px dashed var(--ink);
border-radius: var(--radius-lg);
padding: 28px;
text-align: center;
}
#page-register-school .upload-box input[type="file"] {
display: block;
margin: 16px auto 0;
font-family: var(--font-body);
}
#page-register-school .upload-filename {
margin-top: 12px;
font-size: 0.92rem;
color: var(--ink-soft);
}
/* Path B — manual roster builder */
#page-register-school .roster-group {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
box-shadow: 5px 5px 0 var(--indigo);
padding: 26px;
margin-bottom: 28px;
}
#page-register-school .roster-group-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
}
#page-register-school .roster-group-selects {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
#page-register-school .roster-group-selects .field { margin-bottom: 0; min-width: 160px; }
#page-register-school .remove-group-btn {
font-family: var(--font-body);
font-weight: 700;
color: var(--coral);
background: none;
border: none;
cursor: pointer;
font-size: 0.92rem;
white-space: nowrap;
}
#page-register-school .remove-group-btn:hover { text-decoration: underline; }
#page-register-school table.roster-table {
width: 100%;
border-collapse: collapse;
}
#page-register-school table.roster-table th {
text-align: left;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-soft);
padding: 0 10px 8px;
}
#page-register-school table.roster-table td {
padding: 6px 10px 6px 0;
vertical-align: top;
}
#page-register-school table.roster-table .row-remove-cell { width: 36px; padding-right: 0; }
#page-register-school table.roster-table tr.row-invalid input,
#page-register-school table.roster-table tr.row-invalid select {
border-color: var(--coral);
}
#page-register-school .row-error {
color: var(--coral-deep);
font-size: 0.85rem;
font-weight: 600;
margin: 2px 0 8px;
}
#page-register-school .remove-row-btn {
background: none;
border: none;
color: var(--ink-soft);
font-size: 1.3rem;
line-height: 1;
cursor: pointer;
padding: 6px 8px;
}
#page-register-school .remove-row-btn:hover { color: var(--coral); }
#page-register-school .add-student-btn { margin-top: 10px; }
#page-register-school .add-group-btn { margin-top: 4px; }
#page-register-school .running-total {
position: sticky;
bottom: 16px;
display: inline-flex;
align-items: baseline;
gap: 8px;
background: var(--ink);
color: var(--paper-white);
border-radius: 999px;
padding: 12px 24px;
font-family: var(--font-body);
font-weight: 700;
box-shadow: var(--shadow-lift);
margin: 20px 0 6px;
}
#page-register-school .running-total .count { font-size: 1.3rem; color: var(--mustard); }
/* Warranties (2.4) */
#page-register-school .warranty-block {
background: var(--paper-white);
border: 2.5px solid var(--ink);
border-radius: var(--radius-lg);
padding: 4px 26px;
}
#page-register-school .warranty-block > summary {
list-style: none;
cursor: pointer;
padding: 20px 0;
font-family: var(--font-display);
font-size: 1.15rem;
font-weight: 700;
color: var(--indigo);
}
#page-register-school .warranty-block > summary::-webkit-details-marker { display: none; }
#page-register-school .warranty-block > summary::after { content: " ▸"; }
#page-register-school .warranty-block[open] > summary::after { content: " ▾"; }
#page-register-school .warranty-body { padding-bottom: 26px; }
#page-register-school .warranty-body .legal-doc { max-width: none; }
#page-register-school .warranty-body .legal-doc p.clause { margin-bottom: 18px; }
#page-register-school .warranty-confirm {
border-top: 1px solid var(--indigo-line);
padding-top: 20px;
margin-top: 8px;
}
/* Bot gates — honeypot + reCAPTCHA */
/* Pulled off-screen rather than display:none or hidden: a field that is
display:none is skipped by the better form-filling bots, which is exactly
the traffic this is meant to catch. aria-hidden + tabindex="-1" in the
markup keep it away from screen readers and the tab order. */
#page-register-school .hp-field {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#page-register-school .recaptcha-row {
display: flex;
justify-content: center;
margin-top: 32px;
}
#page-register-school .recaptcha-row[hidden] { display: none; }
/* The widget renders at a fixed 304px. Scale it down rather than let it push
a horizontal scrollbar onto the narrowest phones. */
@media (max-width: 360px) {
#page-register-school .g-recaptcha {
transform: scale(0.85);
transform-origin: center top;
}
}
/* Submit + result */
#page-register-school .submit-row { margin-top: 32px; text-align: center; }
#page-register-school .btn:disabled,
#page-register-school .btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
animation: none;
}
#page-register-school .form-result {
margin-top: 24px;
padding: 20px 24px;
border-radius: var(--radius);
font-size: 0.98rem;
}
#page-register-school .form-result[hidden] { display: none; }
#page-register-school .form-result.is-success {
background: rgba(31, 138, 123, 0.12);
border: 2px solid var(--teal);
color: var(--teal-deep);
}
#page-register-school .form-result.is-error {
background: rgba(232, 106, 76, 0.1);
border: 2px solid var(--coral);
color: var(--coral-deep);
}
#page-register-school .form-result ul { margin: 10px 0 0 20px; }
#page-register-school .form-result.is-submitting { background: var(--cream-deep); border: 2px solid var(--indigo-line); color: var(--ink-soft); }
/* ==========================================================================
business-info.html — registered business disclosure
========================================================================== */
#page-business-info .biz-info { margin: 0 0 8px; }
#page-business-info .biz-row {
display: grid;
grid-template-columns: 210px 1fr;
gap: 8px 20px;
padding: 11px 0;
border-bottom: 1px solid var(--indigo-line);
}
#page-business-info .biz-row:last-child { border-bottom: none; }
#page-business-info .biz-row dt {
font-weight: 700;
color: var(--ink);
font-size: 0.94rem;
}
#page-business-info .biz-row dd {
margin: 0;
color: var(--ink-soft);
font-size: 0.98rem;
}
@media (max-width: 560px) {
#page-business-info .biz-row {
grid-template-columns: 1fr;
gap: 2px;
padding: 12px 0;
}
#page-business-info .biz-row dt { font-size: 0.86rem; color: var(--ink-soft); }
#page-business-info .biz-row dd { font-size: 1rem; color: var(--ink); }
}
/* ==========================================================================
register-home.html — Home Division waitlist
========================================================================== */
#page-register-home .waitlist-shell { max-width: 620px; margin: 0 auto; }
#page-register-home .waitlist-card { padding: 38px 36px; }
@media (max-width: 640px) {
#page-register-home .waitlist-card { padding: 30px 24px; }
}
#page-register-home .waitlist-card p { margin-bottom: 16px; line-height: 1.7; }
#page-register-home .waitlist-card p:last-of-type { margin-bottom: 0; }
#page-register-home .waitlist-alt {
font-size: 0.95rem;
border-top: 2px dashed rgba(43, 38, 34, 0.22);
padding-top: 18px;
margin-top: 22px;
}
#page-register-home .waitlist-form {
display: flex;
gap: 12px;
align-items: flex-start;
margin: 26px 0 0;
}
#page-register-home .waitlist-form .field { flex: 1 1 auto; margin: 0; }
#page-register-home .waitlist-form .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
#page-register-home .waitlist-form { flex-direction: column; gap: 14px; }
#page-register-home .waitlist-form .btn { width: 100%; justify-content: center; }
}
/* Honeypot: off-screen rather than display:none, so bots that skip hidden
fields still fill it, while screen readers skip it via aria-hidden. */
#page-register-home .waitlist-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#page-register-home .recaptcha-row {
display: flex;
justify-content: center;
margin-top: 16px;
}
#page-register-home .recaptcha-row[hidden] { display: none; }
@media (max-width: 360px) {
#page-register-home .g-recaptcha {
transform: scale(0.85);
transform-origin: center top;
}
}
#page-register-home .btn:disabled,
#page-register-home .btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
animation: none;
}
#page-register-home .waitlist-result {
margin-top: 20px;
padding: 16px 20px;
border-radius: var(--radius);
font-size: 0.96rem;
line-height: 1.6;
}
#page-register-home .waitlist-result[hidden] { display: none; }
#page-register-home .waitlist-result.is-success {
background: rgba(31, 138, 123, 0.12);
border: 2px solid var(--teal);
color: var(--teal-deep);
}
#page-register-home .waitlist-result.is-duplicate {
background: rgba(228, 169, 58, 0.16);
border: 2px solid var(--mustard);
color: var(--ink);
}
#page-register-home .waitlist-result.is-error {
background: rgba(232, 106, 76, 0.1);
border: 2px solid var(--coral);
color: var(--coral-deep);
}
#page-register-home .waitlist-result.is-submitting {
background: var(--cream-deep);
border: 2px solid var(--indigo-line);
color: var(--ink-soft);
}
/* ============================================================
Language switcher
============================================================ */
.lang-switch { position: relative; margin-left: 4px; }
.lang-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 10px;
font-family: var(--font-body);
font-weight: 700;
font-size: 0.88rem;
color: rgba(245, 242, 234, 0.88);
background: rgba(245, 242, 234, 0.06);
border: 2px solid rgba(245, 242, 234, 0.26);
border-radius: 9px;
white-space: nowrap;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease),
background-color 0.2s var(--ease);
}
.lang-btn > svg { width: 16px; height: 16px; flex: none; }
.lang-btn .lang-caret { width: 10px; height: 10px; opacity: 0.75; transition: transform 0.2s var(--ease); }
.lang-switch.open .lang-caret { transform: rotate(180deg); }
.lang-btn:hover,
.lang-switch.open .lang-btn {
color: var(--mustard);
border-color: rgba(228, 169, 58, 0.6);
background: rgba(245, 242, 234, 0.12);
}
.lang-menu {
position: absolute;
top: calc(100% + 9px);
right: 0;
min-width: 172px;
list-style: none;
padding: 6px;
background: var(--paper);
border: 2px solid var(--indigo);
border-radius: 12px;
box-shadow: 0 16px 34px -16px rgba(33, 34, 71, 0.7);
z-index: 120;
}
.lang-option {
display: block;
width: 100%;
padding: 10px 12px;
text-align: left;
border-radius: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 0.92rem;
color: var(--ink);
transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.lang-option:hover { background: rgba(46, 47, 99, 0.08); }
.lang-option.is-active {
color: var(--indigo);
background: rgba(228, 169, 58, 0.24);
}
@media (max-width: 1120px) {
.lang-btn { padding: 7px 8px; font-size: 0.82rem; gap: 4px; }
.lang-btn > svg { width: 15px; height: 15px; }
}
@media (max-width: 940px) {
/* matches the breakpoint where .nav becomes the stacked mobile menu */
.lang-switch { margin: 8px 0 0; }
.lang-btn { width: 100%; justify-content: center; padding: 13px 16px; font-size: 0.95rem; }
.lang-menu {
position: static;
margin-top: 6px;
min-width: 0;
box-shadow: none;
}
}
/* ============================================================
Korean and Chinese typography
The Latin faces stay first in each stack: English words inside a
translated page keep the site's voice, and the browser falls back to
Noto per glyph for anything they cannot draw.
============================================================ */
html[lang="ko"] {
--font-display: 'Fraunces', 'Noto Serif KR', Georgia, serif;
--font-body: 'Nunito', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
--font-hand: 'Caveat', 'Noto Sans KR', 'Comic Sans MS', cursive;
--font-sign: 'Homemade Apple', 'Caveat', 'Noto Serif KR', cursive;
}
html[lang="zh-Hant"] {
--font-display: 'Fraunces', 'Noto Serif TC', Georgia, serif;
--font-body: 'Nunito', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
--font-hand: 'Caveat', 'Noto Sans TC', 'Comic Sans MS', cursive;
--font-sign: 'Homemade Apple', 'Caveat', 'Noto Serif TC', cursive;
}
html[lang="zh-Hans"] {
--font-display: 'Fraunces', 'Noto Serif SC', Georgia, serif;
--font-body: 'Nunito', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
--font-hand: 'Caveat', 'Noto Sans SC', 'Comic Sans MS', cursive;
--font-sign: 'Homemade Apple', 'Caveat', 'Noto Serif SC', cursive;
}
/* ---- Vietnamese --------------------------------------------------------------
Fraunces and Nunito both ship a vietnamese subset, so headings and body text
need no help. Caveat and Kalam do not: their Latin letters would render in
the handwriting face while the diacritics fell back to something else, mixing
two fonts inside a single word. Patrick Hand covers Vietnamese, so it leads
those stacks instead of trailing them. The signature is a Latin proper noun,
so Homemade Apple still leads there. */
html[lang="vi"] {
--font-hand: 'Patrick Hand', 'Caveat', 'Comic Sans MS', cursive;
--font-write: 'Patrick Hand', 'Kalam', cursive;
--font-sign: 'Homemade Apple', 'Patrick Hand', cursive;
}
/* ---- Hindi -------------------------------------------------------------------
Devanagari shares no glyphs with Latin, so per-glyph fallback is clean here:
the Latin faces stay first and brand names keep the site's own type. Kalam is
already loaded for the handwritten notes and covers Devanagari itself, so it
leads the hand stacks rather than falling back to a system face. */
html[lang="hi"] {
--font-display: 'Fraunces', 'Noto Serif Devanagari', Georgia, serif;
--font-body: 'Nunito', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif;
--font-hand: 'Kalam', 'Caveat', 'Comic Sans MS', cursive;
--font-sign: 'Homemade Apple', 'Kalam', cursive;
}
/* French needs no overrides: latin-ext already covers é è ê ç à ô û œ and the
guillemets, in every face the site uses. */
/* Korean breaks on word units, not mid-word */
html[lang="ko"] body { word-break: keep-all; }
/* CJK runs dense; a touch more leading and no Latin tracking */
html[lang="ko"] p, html[lang^="zh"] p, html[lang="hi"] p,
html[lang="ko"] li, html[lang^="zh"] li, html[lang="hi"] li { line-height: 1.75; }
html[lang="ko"] h1, html[lang^="zh"] h1,
html[lang="ko"] h2, html[lang^="zh"] h2,
html[lang="ko"] h3, html[lang^="zh"] h3 { letter-spacing: 0; line-height: 1.35; }
/* Fraunces sets a narrow word space (~0.19em). Latin carries it, but Korean
words butt together at display sizes, so open it up a little. Korean only:
Chinese has no word spaces to widen, only the gaps around Latin and numbers. */
html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] h4,
html[lang="ko"] .eyebrow { word-spacing: 0.1em; }