@charset "UTF-8";

:root {
    color-scheme: light;
    --ink: #38271f;
    --paper: #ffe9cc;
    --orange: #f8b879;
    --line: #38271f40;
    font-family: "Arial", "Helvetica Neue", sans-serif;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background:
        radial-gradient(ellipse at 85% 20%, #f49b5466, transparent 54%),
        linear-gradient(120deg, #ffefd9, #fbd3a5 68%, #f9c58e);
}

body::before {
    position: fixed;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    opacity: .045;
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

::selection { color: #fff1db; background: #794427; }

.memorial {
    width: min(100%, 1680px);
    min-height: 100svh;
    margin-inline: auto;
    padding: 32px clamp(24px, 5.5vw, 92px) 24px;
    display: flex;
    flex-direction: column;
}

.topline { display: flex; align-items: center; gap: 26px; }
.board-mark { width: 40px; height: 40px; flex: none; }
.topline-rule { height: 1px; background: var(--line); flex: 1; }
.signal { display: flex; gap: 5px; align-items: center; height: 24px; }
.signal i { display: block; width: 4px; height: 20px; background: var(--ink); }
.signal i:nth-child(2) { height: 15px; }
.signal i:nth-child(3) { height: 10px; }
.signal i:nth-child(4) { height: 5px; }
.signal i:nth-child(5) { height: 2px; opacity: .4; }

.hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
    padding-block: clamp(40px, 6vw, 96px) 40px;
    flex: 1;
}

h1 { position: relative; z-index: 1; margin: 0; font-weight: 900; letter-spacing: -.085em; }
.title-boards { display: block; font-size: clamp(88px, 12.6vw, 198px); line-height: .85; }
.title-domain {
    display: block;
    margin-top: 14px;
    font-size: clamp(76px, 10.5vw, 165px);
    line-height: .95;
    color: #a9582e;
}

.artwork { position: relative; min-width: 0; aspect-ratio: 1.15; }
.monument { position: absolute; inset: -7% -7%; width: 114%; height: 114%; overflow: visible; filter: drop-shadow(0 18px 24px #9f542315); }
.orbit { position: absolute; inset: 6%; border: 1px solid #9c603030; border-radius: 50%; }
.orbit-one { transform: rotate(-30deg) scaleY(.68); }
.orbit-two { transform: rotate(37deg) scaleY(.68); }
.artwork::before {
    content: "";
    position: absolute;
    inset: 3%;
    border-radius: 50%;
    background: radial-gradient(circle, #ffedce80, #f8b87940 54%, transparent 71%);
}
.artwork-cross { position: absolute; width: 7px; height: 7px; border: 1px solid #9c603060; border-radius: 50%; }
.cross-one { top: 10%; left: 38%; }
.cross-two { bottom: 10%; right: 22%; }

.farewell {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    border-top: 1px solid var(--line);
    padding-block: 38px 46px;
    align-items: stretch;
}

.statement {
    margin: 0;
    max-width: 760px;
    font-size: clamp(26px, 2.85vw, 44px);
    line-height: 1.2;
    letter-spacing: -.045em;
    font-weight: 700;
    text-wrap: pretty;
}
.statement strong { font-weight: 900; color: #9a4927; }
.statement time { font-weight: 900; }
.elapsed-panel {
    position: relative;
    display: flex;
    align-items: center;
    padding: 28px 76px 28px 30px;
    background: #f6ae6a;
    border: 1px solid #a85d3240;
    box-shadow: 5px 5px 0 #b86d3430;
}
.elapsed { margin: 0; font-size: clamp(17px, 1.5vw, 22px); font-weight: 700; line-height: 1.45; letter-spacing: -.025em; }
.elapsed strong { display: block; margin-top: 8px; font-size: clamp(38px, 4.4vw, 68px); font-weight: 900; line-height: 1; letter-spacing: -.065em; overflow-wrap: anywhere; }
.period { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.asterisk { position: absolute; top: 28px; right: 24px; width: 28px; height: 28px; }
.panel-corner { position: absolute; left: -1px; top: -1px; width: 8px; height: 8px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); }
.baseline { display: flex; align-items: center; gap: 6px; height: 8px; }
.baseline span:first-child { flex: 1; height: 1px; background: var(--line); margin-right: 12px; }
.baseline span:not(:first-child) { width: 5px; height: 5px; background: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
    .hero, .farewell { animation: arrive 900ms both; }
    .farewell { animation-delay: 150ms; }
    .front-message { animation: float 8s ease-in-out infinite; }
    @keyframes arrive { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
}

@media (min-width: 1700px) {
    .memorial { padding-top: 44px; padding-bottom: 32px; }
}

@media (max-width: 760px) {
    .memorial { padding: 22px 24px 20px; }
    .board-mark { width: 32px; height: 32px; }
    .hero { grid-template-columns: minmax(0, 1fr); padding-block: 48px 12px; }
    .title-boards { font-size: clamp(64px, 20.2vw, 150px); }
    .title-domain { font-size: clamp(54px, 17vw, 126px); margin-top: 10px; }
    .artwork { width: 78%; max-width: 400px; margin: -12px 12px -4px auto; }
    .farewell { grid-template-columns: 1fr; gap: 26px; padding-block: 28px 32px; }
    .statement { font-size: clamp(26px, 5.8vw, 38px); max-width: 560px; }
    .elapsed-panel { min-height: 142px; padding: 24px 65px 24px 24px; }
    .elapsed { font-size: 18px; }
    .elapsed strong { font-size: clamp(38px, 9vw, 60px); }
}