/* Attendee opening: two separated light fields connect and become the hero. */
/* All opening layers finish in CSS even if the deferred script is unavailable. */
html.at-opening::after {
  content: '';
  position: fixed;
  z-index: 10000;
  inset: 0;
  background: #000;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  animation: at-opening-sequence 5.6s linear both;
}
.at-intro-backdrop, .at-intro-copy { display: none; }
.at-opening .at-intro-backdrop {
  display: block;
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #000;
  pointer-events: none;
  animation: at-stage-unveil 5.6s both;
}
.at-opening .at-intro-copy {
  position: absolute;
  z-index: 4;
  top: 20svh;
  inset-inline: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  color: #e9f4f5;
  font: 400 clamp(25px, 3.1vw, 48px)/1.8 var(--at-serif);
  letter-spacing: .14em;
  pointer-events: none;
  animation: at-connection-title 5.6s both;
}
.at-intro-copy span { display: inline-block; }
.at-opening .at-intro-copy span:first-child { animation: at-word-cross 5.6s both; }
.at-opening .at-intro-copy span:last-child { animation: at-word-connect 5.6s both; }
/* The canvas owns the full camera move so scale, pose and position settle together. */
.at-opening .at-hero::before, .at-opening .at-hero::after {
  animation: at-hero-shade 5.6s both;
}
.at-opening .at-hero-inner { animation: at-hero-arrive 5.6s cubic-bezier(.2, .7, .2, 1) both; }
.at-opening .at-header, .at-opening .at-hero-foot { animation: at-nav-arrive 5.6s both; }
@keyframes at-opening-sequence {
  0%, 5% { opacity: 1; visibility: visible; }
  18%, 99% { opacity: 0; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes at-stage-unveil {
  0%, 60% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes at-hero-shade {
  0%, 60% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes at-connection-title {
  0%, 10% { opacity: 0; }
  25%, 62% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes at-word-cross {
  0%, 10% { transform: translate3d(-24px, 8px, 0); }
  25%, 62% { transform: translate3d(0, 0, 0); }
  74%, 100% { transform: translate3d(0, -18px, 0); }
}
@keyframes at-word-connect {
  0%, 38% { opacity: 0; transform: translate3d(24px, 8px, 0); }
  56%, 62% { opacity: 1; transform: translate3d(0, 0, 0); }
  74%, 100% { opacity: 0; transform: translate3d(0, -18px, 0); }
}
@keyframes at-hero-arrive {
  0%, 74% { visibility: hidden; opacity: 0; transform: translate3d(0, 32px, 0); }
  74.01% { visibility: visible; opacity: 0; transform: translate3d(0, 32px, 0); }
  100% { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes at-nav-arrive {
  0%, 82% { visibility: hidden; opacity: 0; transform: translate3d(0, 10px, 0); }
  82.01% { visibility: visible; opacity: 0; transform: translate3d(0, 10px, 0); }
  100% { visibility: visible; opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (max-width: 560px) {
  .at-opening .at-intro-copy { top: 21svh; flex-direction: column; gap: .15em; font-size: clamp(27px, 7.5vw, 34px); }
}
@media (prefers-reduced-motion: reduce) {
  html.at-opening::after, .at-intro-backdrop, .at-intro-copy { display: none !important; animation: none !important; }
}
@media print {
  html.at-opening::after, .at-intro-backdrop, .at-intro-copy { display: none !important; animation: none !important; }
}
:root {
  --at-ink: #172436;
  --at-muted: #627081;
  --at-midnight: #080f1e;
  --at-navy: #13263c;
  --at-paper: #f8f7f4;
  --at-line: rgba(25, 48, 70, .14);
  --at-ice: #c9f5f5;
  --at-cyan: #8bd5df;
  --at-serif: 'Shippori Mincho B1', 'Yu Mincho', serif;
  --at-sans: 'Zen Kaku Gothic New', sans-serif;
  --at-latin: 'Hanken Grotesk', sans-serif;
  --at-max: 1280px;
  --at-gutter: clamp(24px, 5.2vw, 88px);
}
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
body.attendee-page { margin: 0; background: var(--at-paper); color: var(--at-ink); font-family: var(--at-sans); font-size: 16px; line-height: 1.9; -webkit-font-smoothing: antialiased; overflow-x: clip; }
.attendee-page *, .attendee-page *::before, .attendee-page *::after { box-sizing: border-box; }
.attendee-page :where(h1, h2, h3, p, figure, ol, ul) { margin: 0; }
.attendee-page :where(button, input) { font: inherit; }
.attendee-page a { color: inherit; text-decoration: none; }
.attendee-page button, .attendee-page a { -webkit-tap-highlight-color: transparent; }
.attendee-page img { max-width: 100%; display: block; }
.attendee-page svg { flex-shrink: 0; }
.attendee-page :focus-visible { outline: 2px solid #277d91; outline-offset: 6px; }
.at-dark :focus-visible, .at-header :focus-visible { outline-color: var(--at-ice); }
.attendee-page ::selection { background: #bee5e8; color: #101e32; }
.at-header { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 32px; min-height: 100px; padding: 24px var(--at-gutter); color: #fff; }
/* ロゴはトップページ（materials-home.css の .mh-brand）と同じ組み */
.at-brand { display: inline-flex; align-items: center; gap: 10px; font: 700 19px/1 var(--at-latin); letter-spacing: -.04em; white-space: nowrap; }
.at-nav { display: flex; gap: clamp(20px, 3vw, 44px); align-items: center; }
.at-nav a { position: relative; padding: 9px 0; color: #e0e7ef; font-size: 12px; font-weight: 500; letter-spacing: .05em; }
.at-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1px; background: var(--at-ice); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.at-dark { position: relative; isolation: isolate; background: var(--at-midnight); color: #f5f7fa; }
.at-dark::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 80% 20%, #19395150, transparent 65%); }
.at-hero { position: relative; display: flex; align-items: center; min-height: 860px; min-height: max(780px, 100svh); padding: 160px var(--at-gutter) 140px; overflow: hidden; background: radial-gradient(ellipse at 78% 47%, #18334b 0, #0c182a 40%, #070e1c 78%); }
.at-hero::before { z-index: 1; background: linear-gradient(90deg, #070e1cf2 0%, #080f1eb3 28%, #080f1e42 48%, #080f1e0a 69%, transparent 80%); }
.at-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 180px; pointer-events: none; background: linear-gradient(transparent, #080f1e); }
.at-hero-inner { position: relative; z-index: 2; width: min(100%, var(--at-max)); margin-inline: auto; }
.at-eyebrow, .attendee-page .eyebrow { color: #54717c; font: 600 11px/1.5 var(--at-latin); letter-spacing: .19em; text-transform: uppercase; }
.at-dark .at-eyebrow, .at-dark .eyebrow { color: #a6c8d0; }
.at-hero .at-eyebrow { display: flex; align-items: center; gap: 15px; margin-bottom: 35px; font-size: 12px; letter-spacing: .22em; }
.at-hero .at-eyebrow::before { content: ''; width: 32px; height: 1px; background: #a0ccd1; }
.at-hero-title { max-width: 880px; font-family: var(--at-serif); font-weight: 500; letter-spacing: .035em; line-height: 1.55; }
.at-hero-title span { display: block; font-size: clamp(25px, 2.6vw, 38px); color: #dae4ed; }
.at-hero-title em { display: block; margin-top: 15px; color: #f4f8fa; font-style: normal; font-size: clamp(38px, 4.7vw, 67px); line-height: 1.5; letter-spacing: .015em; text-shadow: 0 2px 30px #08101e55; }
.at-hero-lead { max-width: 470px; margin-top: 30px !important; font-size: 15px; color: #b6c3d3; line-height: 2.15; }
.at-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; }
.at-hero .at-actions { margin-top: 40px; }
.at-button, .at-download, .gate-submit, #nlSend { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 54px; padding: 15px 26px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; line-height: 1.7; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .25s ease, border-color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.at-button svg, .at-download svg { width: 18px; height: 18px; }
.at-button-primary { color: #122636 !important; background: #d0edef; box-shadow: 0 3px 26px #a9e3ef10, inset 0 1px 0 #fff8; }
.at-button-light { color: #e9f5f5 !important; border: 1px solid #69818d80; background: #ffffff04; }
.at-text-link { display: inline-flex; align-items: center; gap: 16px; padding-block: 10px; font-size: 13px; font-weight: 700; line-height: 1.8; border-bottom: 1px solid #64808b55; transition: color .25s ease, border-color .25s ease; }
.at-text-link::after { content: '↗'; font-family: var(--at-latin); font-size: 18px; transition: transform .35s ease; }
.at-dark .at-text-link { color: #dbe9ed; border-color: #a7c8d044; }
.at-signature { display: flex; align-items: center; gap: 14px; margin-top: 48px; color: #99a9bc; font-size: 11px; line-height: 1.8; letter-spacing: .035em; }
.at-signature img { flex: 0 0 42px; width: 42px; height: 42px; object-fit: cover; border-radius: 50%; filter: saturate(.65); border: 1px solid #9fbecc55; }
.at-signature strong { display: block; font-size: 14px; font-weight: 500; color: #e6eef2; }
.at-hero-foot { position: absolute; z-index: 2; left: var(--at-gutter); right: var(--at-gutter); bottom: 38px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 20px; border-top: 1px solid #c7e8ed1a; font: 500 10px/1.8 var(--at-latin); letter-spacing: .13em; color: #8092a6; }
.at-hero-foot a { display: inline-flex; gap: 12px; align-items: center; color: #b2c1cf; }
.at-hero-art { position: absolute; z-index: 0; width: 100%; height: 100%; top: 0; right: 0; pointer-events: none; contain: strict; }
/* Finite optical lighting supports the canvas choreography without moving text. */
.at-hero-art::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 51% 49%, #d8ffff30 0, #60d6ff14 9%, #617cda10 24%, transparent 53%); opacity: .22; transform-origin: 51% 49%; animation: at-light-open 4.4s cubic-bezier(.16, 1, .3, 1) both; animation-play-state: paused; }
.at-hero-art::after { content: ''; position: absolute; width: 70%; height: 19%; left: 16%; bottom: 11%; border-radius: 50%; background: radial-gradient(ellipse, #77d9ec18, #8485ea08 32%, transparent 67%); transform-origin: center; animation: at-light-ground 4.4s ease-out both; animation-play-state: paused; }
.at-motion-active .at-hero-art::before, .at-motion-active .at-hero-art::after { animation-play-state: running; }
.at-canvas-ready .at-orbit { opacity: .18; }
@keyframes at-light-open {
  0% { opacity: 0; transform: scale(.35); }
  22% { opacity: .4; transform: scale(.62); }
  52% { opacity: .72; transform: scale(1.12); }
  100% { opacity: .22; transform: scale(1); }
}
@keyframes at-light-ground {
  0%, 18% { opacity: 0; transform: scaleX(.15) translateY(18px); }
  64% { opacity: .9; transform: scaleX(1.12) translateY(0); }
  100% { opacity: .52; transform: scaleX(1) translateY(0); }
}
.at-canvas { display: block; width: 100%; height: 100%; }
.at-sculpture { position: absolute; width: 520px; height: 520px; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-28deg); border-radius: 50%; opacity: .42; transition: opacity .6s ease; }
.at-ribbon { position: absolute; inset: 0; transform: rotateX(55deg) rotateY(-24deg); transform-style: preserve-3d; }
.at-ribbon i { position: absolute; display: block; inset: calc(var(--i) * 4px); border: 1px solid #bdeffb; border-left-color: #c7f9fa22; border-bottom-color: #c7f9fa44; border-radius: 50%; transform: rotate(calc(var(--i) * 3deg)) translateZ(calc(var(--i) * 4px)); }
.at-orbit { position: absolute; width: 65%; aspect-ratio: 1; top: 50%; left: 50%; border: 1px solid #a9e5f51a; border-radius: 50%; transform: translate(-50%, -50%) rotate(-28deg) scaleY(.32); }
.at-orbit:nth-of-type(3) { width: 81%; transform: translate(-50%, -50%) rotate(29deg) scaleY(.32); opacity: .5; }
.at-orbit:nth-of-type(4) { width: 98%; transform: translate(-50%, -50%) rotate(-48deg) scaleY(.42); opacity: .25; }
.at-canvas-ready .at-sculpture { opacity: 0; transition: none; }
.at-section { padding: clamp(84px, 9vw, 132px) var(--at-gutter); }
.at-paper { background: var(--at-paper); }
.at-container { max-width: var(--at-max); margin-inline: auto; }
.at-section-head { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 26px; margin-bottom: 52px; max-width: var(--at-max); margin-inline: auto; }
.at-section-no { padding-top: 8px; font: 400 13px/1.7 var(--at-latin); letter-spacing: .07em; color: #8c9aa2; }
.at-section-no::after { content: ''; display: block; width: 30px; height: 1px; margin-top: 12px; background: #abb8bd77; }
.at-section-head h2, .at-newsletter-grid h2, .at-archive h2 { margin-top: 12px; font-family: var(--at-serif); font-size: clamp(27px, 3.25vw, 43px); line-height: 1.6; letter-spacing: .04em; font-weight: 500; }
.at-section-head p:not(.at-eyebrow):not(.eyebrow) { margin-top: 20px; max-width: 640px; color: var(--at-muted); font-size: 14px; line-height: 2; }
.at-dark .at-section-head p:not(.at-eyebrow):not(.eyebrow) { color: #a7b7c7; }
.at-resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.at-resource { min-width: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid #d8dfe2b3; border-radius: 16px; overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.at-resource-cover { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1.45; padding: 30px; overflow: hidden; background: linear-gradient(140deg, #e9edf0, #f0f1ed 65%); border-bottom: 1px solid #dfe4e6; }
.at-resource-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #ffffff30, transparent 50%); pointer-events: none; }
.at-resource-cover img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px #142e3c18); transform: rotate(-2deg); transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.at-resource:nth-child(2) .at-resource-cover { background: linear-gradient(140deg, #e4eceb, #eff2ed); }
.at-resource:nth-child(2) .at-resource-cover img { transform: rotate(2deg); }
.at-resource:nth-child(3) .at-resource-cover { background: linear-gradient(140deg, #eae8ee, #f0eeeb); }
.at-resource-tag { position: absolute; top: 14px; left: 14px; padding: 5px 9px; border-radius: 4px; color: #385465; background: #fffffff0; font: 600 9px/1.5 var(--at-latin); letter-spacing: .08em; }
.at-resource-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 28px; }
.at-kicker { margin-bottom: 10px !important; color: #658088; font: 700 10px/1.7 var(--at-latin); letter-spacing: .12em; }
.at-resource h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; line-height: 1.65; letter-spacing: .015em; }
.at-resource-desc { margin-top: 14px !important; color: var(--at-muted); font-size: 13px; line-height: 1.95; }
.at-first-step { width: 100%; margin-top: 22px !important; padding: 14px 0 0; border-top: 1px solid #e1e6e7; color: #496370; font-size: 12px; line-height: 1.85; }
.at-first-step strong { display: block; margin-bottom: 5px; color: #203e4e; font-size: 10px; letter-spacing: .07em; }
.at-download { justify-content: space-between; width: 100%; margin-top: auto; padding: 24px 0 0; min-height: 52px; border: 0; border-radius: 0; color: #173e51 !important; font-size: 12px; text-align: left; }
.at-download::after { content: '↓'; display: flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid #b7cdd2; border-radius: 50%; font: 400 19px/1 var(--at-latin); transition: background-color .25s ease, transform .35s ease; }
.at-extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.at-resource-compact { flex-direction: row; }
.at-resource-compact .at-resource-cover { flex: 0 0 35%; align-self: stretch; aspect-ratio: auto; min-height: 240px; padding: 18px; border-right: 1px solid #dfe4e6; border-bottom: 0; }
.at-resource-compact .at-resource-copy { padding: 24px; }
.at-resource-compact h3 { font-size: 18px; }
.at-resource-compact .at-resource-desc { font-size: 12px; }
.at-resource-compact .at-download { padding-top: 18px; }
#start { padding-top: 44px; }
.at-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: 42px; max-width: var(--at-max); margin-inline: auto !important; padding: 0; }
.at-steps li { position: relative; min-width: 0; padding-top: 28px; border-top: 1px solid #bcc9ce; }
.at-step-no { display: block; margin-bottom: 24px; color: #427483; font: 400 38px/1 var(--at-latin); letter-spacing: -.04em; }
.at-steps h3 { margin-bottom: 16px; font-size: 18px; font-weight: 700; line-height: 1.75; }
.at-steps p { color: var(--at-muted); font-size: 13px; line-height: 2; }
.at-example { margin-top: 20px; padding: 18px 20px; background: #e9eeed; border-left: 2px solid #81a5ad; color: #3f5c65; font-size: 12px; line-height: 1.95; border-radius: 0 6px 6px 0; }
.at-example strong { color: #254854; }
.at-note { max-width: var(--at-max); margin: 28px auto 0 !important; font-size: 11px; color: #77858c; }
#follow { overflow: hidden; background: #0b1727; }
#follow::before, #contact::before { background: radial-gradient(ellipse at 95% 0%, #29485d55, transparent 62%); transform-origin: 80% 20%; animation: at-ambient 22s ease-in-out infinite alternate; animation-play-state: paused; }
#follow.at-motion-active::before, #contact.at-motion-active::before { animation-play-state: running; }
.at-social-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 24px; max-width: var(--at-max); margin-inline: auto; }
.at-social { position: relative; min-width: 0; border: 1px solid #c2e0ed26; border-radius: 16px; overflow: hidden; }
.at-youtube { background: #142538; }
.at-youtube figure { position: relative; aspect-ratio: 16/7.3; overflow: hidden; background: #0c1522; border-bottom: 1px solid #b9d8e322; }
.at-youtube figure img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.at-social-copy { padding: 32px 36px 36px; }
.at-social h3 { margin: 10px 0 16px; font-family: var(--at-serif); font-size: 26px; font-weight: 500; line-height: 1.6; }
.at-social p:not(.at-eyebrow):not(.eyebrow) { color: #acbecc; font-size: 13px; line-height: 2; }
.at-social .at-actions { margin-top: 24px; gap: 18px 24px; }
.at-x { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: 42px; background: linear-gradient(155deg, #162839, #0d1c2d); }
.at-x > svg { width: 38px; height: 38px; margin-bottom: 38px; fill: #dfe9ee; }
.at-x > .at-button { margin-top: 30px; }
.at-newsletter-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10%; align-items: center; padding-block: 16px; }
.at-newsletter-grid h2 { font-size: clamp(27px, 2.6vw, 36px); }
.at-newsletter-grid > div > p:not(.at-eyebrow):not(.eyebrow) { margin-top: 24px; color: var(--at-muted); font-size: 14px; line-height: 2; }
.at-newsletter-form { padding: 32px; border: 1px solid #cad7d9; border-radius: 12px; background: #fff9; }
.at-newsletter-form label { display: block; margin-bottom: 10px; color: #395764; font-size: 12px; font-weight: 700; }
#nlEmail, .gate-field input { width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid #b9cacf; border-radius: 5px; background: #fff; color: #182c3b; font-size: 16px; line-height: 1.6; transition: border-color .2s ease, box-shadow .2s ease; }
#nlEmail:focus, .gate-field input:focus { outline: none; border-color: #387b90; box-shadow: 0 0 0 3px #5593a41a; }
#nlEmail::placeholder, .gate-field input::placeholder { color: #86949e; }
#nlFax, .attendee-page .at-honeypot, .attendee-page .gate-honeypot { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
#nlSend, .gate-submit { width: 100%; margin-top: 16px; color: #f3f9fa; background: #193e50; }
#nlSend:disabled, .gate-submit:disabled { opacity: .55; cursor: wait; }
.nl-msg { margin-top: 14px; color: #526976; font-size: 12px; line-height: 1.8; }
.nl-msg:empty { display: none; }
.nl-msg.err, .nl-msg.error, .gate-err { color: #a23b3b; }
.nl-msg.ok, .nl-msg.success { color: #27634f; }
.at-newsletter-form small { display: block; margin-top: 14px; color: #73848c; font-size: 10px; line-height: 1.85; }
#next { padding-top: 24px; }
.at-next-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; max-width: var(--at-max); margin-inline: auto; }
.at-next-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 0 12px; border-top: 1px solid #b5c5cd; }
.at-next-card h3 { margin: 14px 0 18px; font-family: var(--at-serif); font-size: 28px; font-weight: 500; line-height: 1.6; }
.at-next-card > p:not(.at-eyebrow):not(.eyebrow) { max-width: 510px; color: var(--at-muted); font-size: 14px; line-height: 2; }
.at-next-card ul { margin: 22px 0 28px; padding-left: 1.2em; color: #536a76; font-size: 13px; line-height: 2.15; }
.at-next-card .at-text-link { margin-top: auto; }
.at-next-card > p.at-note { margin-inline: 0 !important; }
#contact { overflow: hidden; }
.at-service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--at-max); margin-inline: auto; }
.at-service { position: relative; min-width: 0; min-height: 280px; padding: 30px; border-block: 1px solid #aac6d32b; border-right: 1px solid #aac6d32b; transition: background-color .35s ease; }
.at-service:first-child { border-left: 1px solid #aac6d32b; }
.at-service-no { display: block; color: #7f9da9; font: 400 12px/1.6 var(--at-latin); letter-spacing: .1em; }
.at-service h3 { margin: 28px 0 18px; font-family: var(--at-serif); font-size: 25px; font-weight: 500; line-height: 1.65; }
.at-service p { max-width: 290px; padding-bottom: 35px; color: #a2b6c4; font-size: 13px; line-height: 1.95; }
.at-arrow { position: absolute; right: 26px; bottom: 26px; font-size: 23px; color: #b0d5da; transition: transform .35s ease; }
.at-archive { padding: 80px var(--at-gutter); text-align: center; }
.at-archive::before { content: none; }
.at-archive .at-actions { justify-content: center; }
.at-archive h2 { margin: 14px 0 20px; font-size: clamp(24px, 2.7vw, 35px); }
.at-archive > a { display: inline-flex; justify-content: center; align-items: center; min-height: 54px; padding: 14px 28px; border-radius: 7px; font-size: 13px; }
.at-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px var(--at-gutter); border-top: 1px solid #adcad718; background: #080f1e; color: #7c8d9e; font: 400 10px/1.8 var(--at-latin); letter-spacing: .07em; }
.at-footer a { color: #a7b9c5; }
/* The public download gate uses the same typography and calm paper palette. */
.attendee-page .gate-overlay { display: none; position: fixed; z-index: 100; inset: 0; align-items: center; justify-content: center; padding: 24px; overflow-y: auto; background: #061220c7; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.attendee-page .gate-overlay.open, .attendee-page .gate-overlay.is-open, .attendee-page .gate-overlay[aria-hidden='false'] { display: flex; }
.attendee-page .gate-overlay[hidden] { display: none !important; }
.attendee-page .gate-modal { position: relative; width: min(100%, 480px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 40px; background: var(--at-paper); color: var(--at-ink); border: 1px solid #d4e1e5; border-radius: 18px; box-shadow: 0 30px 100px #0005; }
.attendee-page .gate-modal h2 { margin: 14px 0 18px; font: 500 24px/1.7 var(--at-serif); }
.attendee-page .gate-modal > p { color: #667983; font-size: 13px; line-height: 1.9; }
#gateClose { position: absolute; top: 14px; right: 14px; display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid #cad5d8; border-radius: 50%; color: #4f6771; background: transparent; cursor: pointer; font-size: 24px; line-height: 1; }
#gateForm { margin-top: 26px; }
.gate-field { margin-bottom: 16px; }
.gate-field label { display: block; margin-bottom: 7px; font-size: 12px; color: #3b5561; font-weight: 700; }
.gate-err { margin-top: 8px; font-size: 12px; line-height: 1.8; }
.gate-err:empty { display: none; }
.gate-note { margin-top: 16px !important; color: #71848c; font-size: 10px; line-height: 1.9; }
@keyframes at-ambient { from { transform: scale(1) translate3d(0, 0, 0); opacity: .65; } to { transform: scale(1.12) translate3d(-3%, 2%, 0); opacity: 1; } }
@media (hover: hover) and (pointer: fine) {
  .at-nav a:hover::after { transform: scaleX(1); }
  .at-button-primary:hover { background: #e5f9f8; transform: translateY(-2px); box-shadow: 0 8px 28px #8fdde81c; }
  .at-button-light:hover { background: #bcdde510; border-color: #a7c7d1; transform: translateY(-2px); }
  .at-text-link:hover { color: #267389; border-color: #46869b; }
  .at-dark .at-text-link:hover { color: #fff; border-color: #b4dee4; }
  .at-text-link:hover::after { transform: translate(3px, -3px); }
  .at-resource:hover { border-color: #a4bec6; transform: translateY(-4px); box-shadow: 0 16px 38px #1634430b; }
  .at-resource:hover .at-resource-cover img { transform: rotate(0deg) scale(1.025); }
  .at-download:hover::after { background: #e1f0f1; transform: translateY(2px); }
  .at-youtube:hover figure img { transform: scale(1.025); }
  .at-service:hover { background: #bcdce909; }
  .at-service:hover .at-arrow { transform: translate(3px, -3px); }
  #nlSend:hover:not(:disabled), .gate-submit:hover:not(:disabled) { background: #24556a; }
  #gateClose:hover { background: #e4ecec; }
}
@media (max-width: 1100px) {
  .at-resource-grid { gap: 16px; }
  .at-resource-copy { padding: 23px; }
  .at-resource-cover { padding: 24px; }
  .at-resource-compact { flex-direction: column; }
  .at-resource-compact .at-resource-cover { flex-basis: auto; min-height: 0; aspect-ratio: 2.25; border-right: 0; border-bottom: 1px solid #dfe4e6; }
  .at-resource-compact .at-resource-cover img { max-width: 76%; }
  .at-social-grid { grid-template-columns: 1.5fr 1fr; }
  .at-x { padding: 30px; }
  .at-newsletter-grid { gap: 7%; }
}
@media (max-width: 820px) {
  .at-header { min-height: 84px; }
  .at-nav { gap: 24px; }
  .at-nav a { font-size: 11px; }
  .at-hero { min-height: 840px; min-height: max(780px, 95svh); padding-top: 150px; }
  .at-hero-title em { font-size: clamp(34px, 5.8vw, 46px); }
  .at-hero-art { opacity: .75; }
  .at-hero::before { background: linear-gradient(90deg, #080f1ee8, #080f1eaa 30%, #080f1e22 85%); }
  .at-section-head { grid-template-columns: 40px minmax(0, 1fr); gap: 20px; }
  .at-resource-grid { grid-template-columns: 1fr; gap: 20px; }
  .at-resource { flex-direction: row; }
  .at-resource-cover { flex: 0 0 38%; align-self: stretch; aspect-ratio: auto; min-height: 300px; padding: 26px; border-bottom: 0; border-right: 1px solid #dfe4e6; }
  .at-resource-copy { padding: 26px; }
  .at-resource h3 { font-size: 22px; }
  .at-extra-grid { gap: 20px; margin-top: 20px; }
  .at-resource-compact { flex-direction: column; }
  .at-resource-compact .at-resource-cover { aspect-ratio: 1.6; }
  .at-resource-compact .at-resource-cover img { max-width: 100%; }
  .at-resource-compact h3 { font-size: 18px; }
  .at-steps { gap: 26px; }
  .at-step-no { font-size: 32px; }
  .at-steps h3 { font-size: 16px; }
  .at-example { padding: 14px; }
  .at-social-grid { grid-template-columns: 1fr; }
  .at-youtube { display: grid; grid-template-columns: .95fr 1.1fr; }
  .at-youtube figure { min-height: 100%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid #b9d8e322; }
  .at-youtube figure img { object-fit: contain; }
  .at-social-copy { padding: 28px; }
  .at-social h3 { font-size: 23px; }
  .at-x { padding: 32px; }
  .at-x > svg { width: 30px; height: 30px; margin-bottom: 24px; }
  .at-newsletter-grid { grid-template-columns: 1fr; gap: 36px; }
  .at-newsletter-form { max-width: 580px; width: 100%; }
  .at-next-grid { gap: 32px; }
  .at-next-card h3 { font-size: 24px; }
  .at-service { padding: 24px; }
  .at-service h3 { font-size: 21px; }
}
@media (max-width: 560px) {
  :root { --at-gutter: 24px; }
  .at-header { padding-block: 25px; gap: 20px; }
  .at-brand { font-size: 17px; gap: 6px; }
  .at-nav { gap: 18px; }
  .at-nav a { font-size: 10px; }
  .at-nav a:nth-child(n+3) { display: none; }
  .at-hero { min-height: 840px; min-height: max(800px, 100svh); padding: 144px var(--at-gutter) 125px; align-items: flex-start; }
  .at-hero-inner { margin-top: 0; }
  .at-hero .at-eyebrow { font-size: 9px; margin-bottom: 34px; gap: 10px; letter-spacing: .15em; }
  .at-hero .at-eyebrow::before { width: 22px; }
  .at-hero-title span { font-size: clamp(20px, 5.6vw, 27px); letter-spacing: .025em; }
  .at-hero-title em { margin-top: 18px; font-size: clamp(22px, 6.35vw, 35px); letter-spacing: 0; line-height: 1.6; }
  .at-hero-lead { max-width: 315px; margin-top: 26px !important; font-size: 13px; line-height: 2.1; }
  .at-hero .at-actions { align-items: flex-start; flex-direction: column; gap: 12px; margin-top: 32px; }
  .at-hero .at-button { min-height: 50px; padding: 14px 22px; font-size: 12px; }
  .at-hero .at-text-link { font-size: 12px; }
  .at-signature { margin-top: 34px; }
  .at-hero-art { opacity: .85; }
  .at-hero::before { background: linear-gradient(155deg, #080f1efa 5%, #080f1ed9 35%, #080f1e73 58%, #080f1e18 83%); }
  .at-hero-foot { bottom: 25px; font-size: 8px; gap: 12px; letter-spacing: .07em; }
  .at-hero-foot > :first-child { max-width: 60%; }
  .at-section { padding-block: 76px; }
  .at-section-head { grid-template-columns: 25px minmax(0, 1fr); gap: 15px; margin-bottom: 35px; }
  .at-section-no { font-size: 10px; padding-top: 4px; }
  .at-section-no::after { width: 19px; margin-top: 10px; }
  .at-section-head h2, .at-newsletter-grid h2 { font-size: 25px; line-height: 1.65; letter-spacing: .01em; }
  .at-section-head p:not(.at-eyebrow):not(.eyebrow) { margin-top: 17px; font-size: 12px; }
  .at-eyebrow, .attendee-page .eyebrow { font-size: 9px; letter-spacing: .15em; }
  .at-resource, .at-resource-compact { flex-direction: column; border-radius: 12px; }
  .at-resource-cover, .at-resource-compact .at-resource-cover { flex-basis: auto; min-height: 0; aspect-ratio: 1.65; padding: 30px; border-right: 0; border-bottom: 1px solid #dfe4e6; }
  .at-resource-copy, .at-resource-compact .at-resource-copy { padding: 25px; }
  .at-resource h3 { font-size: 21px; }
  .at-resource-desc, .at-resource-compact .at-resource-desc { font-size: 13px; }
  .at-extra-grid { grid-template-columns: 1fr; }
  .at-first-step { margin-top: 18px !important; }
  .at-download { padding-top: 22px; }
  #start { padding-top: 0; }
  .at-steps { grid-template-columns: 1fr; gap: 28px; }
  .at-steps li { padding: 25px 0 0 48px; }
  .at-step-no { position: absolute; top: 29px; left: 0; font-size: 25px; }
  .at-steps h3 { margin-bottom: 12px; font-size: 18px; }
  .at-example { margin-top: 16px; padding: 16px; }
  .at-note { font-size: 10px; }
  .at-youtube { display: block; }
  .at-youtube figure { aspect-ratio: 16/9; border-right: 0; border-bottom: 1px solid #b9d8e322; }
  .at-youtube figure img { object-fit: cover; }
  .at-social-copy, .at-x { padding: 26px; }
  .at-social h3 { font-size: 24px; }
  .at-social .at-actions { gap: 14px; }
  .at-social .at-button { min-height: 48px; font-size: 12px; padding: 12px 18px; }
  .at-newsletter-grid { padding-block: 0; gap: 28px; }
  .at-newsletter-grid > div > p:not(.at-eyebrow):not(.eyebrow) { font-size: 13px; margin-top: 19px; }
  .at-newsletter-form { padding: 24px; }
  #next { padding-top: 0; }
  .at-next-grid { grid-template-columns: 1fr; gap: 32px; }
  .at-next-card { padding-top: 28px; }
  .at-next-card h3 { font-size: 26px; }
  .at-next-card > p:not(.at-eyebrow):not(.eyebrow) { font-size: 13px; }
  .at-service-grid { grid-template-columns: 1fr; }
  .at-service { min-height: 0; padding: 26px 24px; border: 1px solid #aac6d32b; border-bottom: 0; }
  .at-service:last-child { border-bottom: 1px solid #aac6d32b; }
  .at-service h3 { margin-top: 17px; font-size: 24px; }
  .at-service p { max-width: none; padding-right: 22px; padding-bottom: 10px; }
  .at-archive { padding: 56px var(--at-gutter); }
  .at-archive h2 { font-size: 25px; line-height: 1.75; }
  .at-footer { align-items: flex-start; flex-direction: column; gap: 12px; font-size: 9px; }
  .attendee-page .gate-overlay { padding: 16px; }
  .attendee-page .gate-modal { padding: 32px 24px; max-height: calc(100dvh - 32px); border-radius: 13px; }
  .attendee-page .gate-modal h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .attendee-page *, .attendee-page *::before, .attendee-page *::after { animation: none !important; transition: none !important; }
  .at-resource:hover, .at-button:hover, .at-download:hover::after, .at-text-link:hover::after, .at-service:hover .at-arrow { transform: none; }
  .at-resource:hover .at-resource-cover img { transform: rotate(0deg); }
}
@media print {
  html { scroll-behavior: auto; }
  body.attendee-page { background: #fff; color: #172436; font-size: 10pt; overflow: visible; }
  .attendee-page *, .attendee-page *::before, .attendee-page *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; }
  .at-header { position: static; min-height: 0; padding: 0 0 18px; color: #172436; }
  .at-header .at-nav, .at-hero-art, .at-hero::before, .at-hero::after, .at-dark::before, .at-hero-foot, .gate-overlay, .at-newsletter-form { display: none !important; }
  .at-hero { min-height: 0; padding: 30px 0 45px; display: block; background: #fff; }
  .at-hero-title span { font-size: 20pt; color: #172436; }
  .at-hero-title em { font-size: 28pt; color: #172436; }
  .at-hero-lead, .at-signature, .at-signature strong { color: #52616d; }
  .at-dark, .at-social, .at-x, .at-youtube, .at-footer { color: #172436; background: #fff; }
  .at-dark .at-eyebrow, .at-dark .eyebrow, .at-dark .at-text-link, .at-social p:not(.at-eyebrow):not(.eyebrow), .at-dark .at-section-head p:not(.at-eyebrow):not(.eyebrow), .at-service p { color: #52616d; }
  .at-section { padding: 34px 0; break-inside: auto; }
  .at-section-head { margin-bottom: 24px; grid-template-columns: 35px 1fr; gap: 12px; break-after: avoid; }
  .at-section-head h2, .at-newsletter-grid h2 { font-size: 22pt; }
  .at-section-head p:not(.at-eyebrow):not(.eyebrow) { font-size: 10pt; }
  .at-resource-grid, .at-extra-grid { gap: 16px; }
  .at-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .at-resource, .at-resource-compact { flex-direction: column; break-inside: avoid; transform: none; }
  .at-resource-cover, .at-resource-compact .at-resource-cover { flex-basis: auto; min-height: 0; aspect-ratio: 1.5; padding: 14px; }
  .at-resource-copy, .at-resource-compact .at-resource-copy { padding: 14px; }
  .at-resource h3, .at-resource-compact h3 { font-size: 12pt; }
  .at-resource-desc, .at-first-step, .at-resource-compact .at-resource-desc { font-size: 9pt; }
  .at-resource-cover img { filter: none; }
  .at-button, .at-button-light, .at-download { color: #173e51 !important; background: #fff; border-color: #91a6b0; font-size: 9pt; }
  .at-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .at-steps li { padding-left: 0; break-inside: avoid; }
  .at-step-no { position: static; }
  .at-social-grid { grid-template-columns: 1.5fr 1fr; gap: 20px; }
  .at-social { break-inside: avoid; border-color: #afbec4; }
  .at-youtube { display: block; }
  .at-youtube figure { aspect-ratio: 16/7; }
  .at-social-copy, .at-x { padding: 20px; }
  .at-x > svg { fill: #172436; }
  .at-newsletter-grid { display: block; }
  .at-next-grid { gap: 28px; }
  .at-next-card, .at-service { break-inside: avoid; }
  .at-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .at-service { padding: 20px; min-height: 0; border: 1px solid #afbec4; }
  .at-service h3 { font-size: 15pt; }
  .at-service p { font-size: 9pt; }
  .at-archive { padding: 30px 0; }
  .at-footer { padding: 20px 0; color: #52616d; }
}
/* Markup-specific details and accessible shortcuts. */
.at-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.at-skip { position: fixed; top: 14px; left: 20px; z-index: 120; padding: 12px 20px; border-radius: 6px; color: #122636 !important; background: #d0edef; font-size: 13px; transform: translateY(-160%); }
.at-skip:focus { transform: translateY(0); }
.at-brand > span { padding-left: 12px; border-left: 1px solid #d8e4f04d; color: inherit; font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: .08em; }
.at-signature > span { color: #e2eaf0; font-size: 13px; }
.at-signature small { display: block; margin-top: 3px; font-size: 10px; color: #95a8b9; }
.at-handle { display: block; margin-top: 16px; color: #6f94a5; font: 400 12px/1.5 var(--at-latin); letter-spacing: .035em; }
.at-text-link::after { content: none; }
.at-download > span[aria-hidden] { display: none; }
.at-next-card > p.at-note, .at-newsletter-grid > div > p.at-note { margin-top: 20px !important; color: #73848c; font-size: 11px; }
.at-archive > p:not(.at-eyebrow) { max-width: 44ch; margin: 0 auto 28px; color: #8fa7b7; font-size: 13px; text-wrap: balance; }
.gate-eyebrow { color: #64818b; font: 600 10px/1.5 var(--at-latin); letter-spacing: .16em; text-transform: uppercase; }
.attendee-page .gate-modal h3 { margin: 14px 0 18px; font: 500 24px/1.7 var(--at-serif); }
.attendee-page .gate-modal .gate-lead { color: #667983; font-size: 12px; line-height: 1.95; }
@media (max-width: 560px) {
  .at-brand > span { font-size: 10px; padding-left: 8px; }
  .at-nav { gap: 18px; }
  .attendee-page .gate-modal h3 { font-size: 23px; }
}
@media print { .at-skip { display: none; } }
/* Readable body copy and the full panoramic channel banner at every size. */
.at-resource-desc, .at-resource-compact .at-resource-desc, .at-steps p, .at-social p:not(.at-eyebrow):not(.eyebrow), .at-service p, .at-example { font-size: 14px; }
.at-resource-compact .at-resource-copy { padding: 26px; }
.at-first-step { font-size: 13px; }
.at-youtube figure { width: 100%; min-width: 0; aspect-ratio: 4/1; min-height: 160px; display: flex; align-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 50%, #1c3143, #101e2d); }
.at-youtube figure img { height: auto; max-height: 100%; object-fit: contain; }
.at-youtube:hover figure img { transform: none; }
.nl-msg.ng { color: #a23b3b; }
.nl-msg.on:not(.ng) { color: #27634f; }
.attendee-page .gate-modal .gate-lead, .gate-note { font-size: 14px; line-height: 1.9; }
@media (max-width: 820px) {
  .at-youtube { display: block; }
  .at-youtube figure { aspect-ratio: 4/1; min-height: 160px; border-right: 0; border-bottom: 1px solid #b9d8e322; }
}
@media (max-width: 560px) {
  .at-hero-lead, .at-resource-desc, .at-resource-compact .at-resource-desc, .at-steps p, .at-next-card > p:not(.at-eyebrow):not(.eyebrow), .at-newsletter-grid > div > p:not(.at-eyebrow):not(.eyebrow), .at-section-head p:not(.at-eyebrow):not(.eyebrow) { font-size: 14px; }
  .at-youtube figure { min-height: 118px; padding: 12px; }
  .at-resource-compact .at-resource-copy { padding: 25px; }
}
@media print { .at-youtube figure { min-height: 0; padding: 10px; } }

/* Keep the visitor's next action available during the cinematic opening. */
.at-intro-skip { display: none; }
.at-opening .at-intro-skip {
  position: absolute; z-index: 10001; top: 28px; right: var(--at-gutter);
  display: inline-flex; align-items: center; gap: 24px; min-height: 44px;
  padding: 9px 18px; border: 1px solid #9abec34d; border-radius: 24px;
  color: #e4f1f2; background: #09101488; font-size: 12px;
  animation: at-intro-action 5.6s linear both;
}
@keyframes at-intro-action {
  0%, 5% { opacity: 0; visibility: hidden; }
  10%, 76% { opacity: 1; visibility: visible; }
  80%, 100% { opacity: 0; visibility: hidden; }
}
.at-hero-meta { margin-top: 13px !important; color: #91a6b5; font-size: 11px; line-height: 1.8; }
.at-section-head .at-download-conditions { padding-left: 14px; border-left: 2px solid #a3b9be; font-size: 12px !important; color: #526775 !important; }
.gate-resource { margin: 16px 0 !important; padding: 13px 15px; border: 1px solid #bdd1d6; border-radius: 8px; background: #edf4f4; color: #22495b; font-size: 13px; line-height: 1.7; font-weight: 700; }
.gate-resource:empty { display: none; }
.at-social-logo { display: flex; align-items: center; justify-content: center; overflow: hidden; }
.at-youtube-logo { width: 180px; height: 58px; margin-bottom: 24px; background: #fff; border-radius: 8px; }
.at-youtube-logo img { flex: 0 0 228px; width: 228px; height: auto; max-width: none; }
.at-x-logo { width: 72px; height: 72px; object-fit: contain; border-radius: 14px; margin-bottom: 30px; }
.at-portfolio { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 48px; padding-top: 38px; border-top: 1px solid #abc9d32b; }
.at-portfolio h3 { margin-top: 10px; font-size: 22px; line-height: 1.7; font-weight: 500; }
.at-portfolio p:not(.at-eyebrow) { margin-top: 12px; color: #a7bac7; font-size: 13px; line-height: 1.9; }
.at-portfolio .at-button { flex: 0 0 auto; }
/* Ambient movement stays behind the content and pauses outside the viewport. */
.at-section.at-paper { position: relative; isolation: isolate; overflow: clip; }
.at-section.at-paper::before {
  content: ''; position: absolute; z-index: -1; inset: -8%; pointer-events: none;
  background: radial-gradient(ellipse at 7% 15%, #c1e2e433, transparent 45%), radial-gradient(ellipse at 92% 84%, #d2cbdf33, transparent 44%);
  animation: at-paper-light 19s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.at-section.at-paper::after {
  content: ''; position: absolute; z-index: -1; width: min(55vw, 660px); aspect-ratio: 1;
  right: -15%; top: -12%; border: 1px solid #669cab20; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 46px #77a4b009, 0 0 0 94px #77a4b006;
  animation: at-paper-orbit 24s ease-in-out infinite alternate;
  animation-play-state: paused;
}
#newsletter.at-paper::before { animation-delay: -7s; }
#next.at-paper::after { top: auto; bottom: -35%; right: 55%; animation-delay: -11s; }
.at-archive { overflow: hidden; }
.at-archive::before { content: ''; animation: at-ambient 22s ease-in-out infinite alternate; animation-play-state: paused; }
.at-section.at-paper.at-motion-active::before, .at-section.at-paper.at-motion-active::after,
.at-archive.at-motion-active::before { animation-play-state: running; }
@keyframes at-paper-light {
  from { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .7; }
  to { transform: translate3d(2%, 2%, 0) scale(1.04); opacity: 1; }
}
@keyframes at-paper-orbit {
  from { transform: translate3d(-28px, -24px, 0) scale(.93); }
  to { transform: translate3d(28px, 54px, 0) scale(1.04); }
}
@media (max-width: 560px) {
  .at-opening .at-intro-skip { top: 20px; right: 24px; font-size: 11px; }
  .at-hero-meta { max-width: 270px; font-size: 10px; }
  .at-portfolio { align-items: flex-start; flex-direction: column; }
  .at-portfolio h3 { font-size: 21px; }
  .at-section.at-paper::after { width: 72vw; right: -38%; }
}
@media (prefers-reduced-motion: reduce) {
  .at-opening .at-intro-skip { display: none !important; }
  .at-section.at-paper::before, .at-section.at-paper::after, .at-archive::before { animation: none !important; }
}
@media print {
  .at-opening .at-intro-skip, .at-section.at-paper::before, .at-section.at-paper::after { display: none !important; }
  .at-hero-meta, .at-portfolio p:not(.at-eyebrow) { color: #52616d; }
  .at-portfolio { break-inside: avoid; border-color: #afbec4; }
}

/* ══ ファーストビュー ══
   本人提示の参考（中央の縦長楕円に写真、まわりに浮く文字、下に SCROLL、最下部にロゴ）を
   今の紺と氷色のまま取り入れる。楕円の写真をメビウスのリボンが枠のように回る。
   canvas の着地位置・大きさ（attendee-motion.js の restY / restSize）と、ここでの
   .at-frame の位置・大きさは対で決めている。片方を動かすときはもう片方も。 */
.at-hero { padding: 0 var(--at-gutter); min-height: max(760px, 100svh); }
.at-hero::before { background: radial-gradient(ellipse at 50% 46%, transparent 40%, #070e1c99 100%); }
/* 背景の模様：細かな点の格子と、大きな円弧。どちらも薄く、写真と文字の邪魔をしない */
.at-hero-pattern { position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: .55;
  background-image: radial-gradient(circle, #9fd5df33 1px, transparent 1.2px);
  background-size: 26px 26px; background-position: 50% 50%;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 78%); }
.at-hero-pattern::before, .at-hero-pattern::after { content: ''; position: absolute; border: 1px solid #9fd5df1f; border-radius: 50%; }
.at-hero-pattern::before { width: 118vmin; height: 118vmin; left: 50%; top: 45%; transform: translate(-50%, -50%); }
.at-hero-pattern::after { width: 168vmin; height: 168vmin; left: 50%; top: 45%; transform: translate(-50%, -50%); border-color: #9fd5df12; }
/* 枠は角丸長方形寄り。上下の直線が少し残る程度に丸める */
/* 写真の縁は、縦横のぼかしを掛け合わせたマスクで溶かす。硬い輪郭も枠線も持たない */
.at-frame { position: absolute; z-index: 1; left: 50%; top: 45%; width: min(440px, 31vw); aspect-ratio: 1 / 1.4; transform: translate(-50%, -50%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0, #000 26%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%), linear-gradient(180deg, transparent 0, #000 26%, #000 80%, transparent 100%);
  mask-composite: intersect; }
.at-frame::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, #0f1d3199 100%); }
.at-frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; filter: saturate(.86) contrast(1.02);
  transform-origin: 50% 30%; animation: at-frame-breathe 16s ease-in-out infinite alternate; }
.at-opening .at-frame { animation: at-hero-shade 5.6s both; }
@keyframes at-frame-breathe { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.1) translateY(-1.2%); } }
/* リボンは写真の裏。枠のまわりに見える部分だけが枠として働く */
.at-hero-art { z-index: 0; mix-blend-mode: screen; opacity: .9; }
.at-frame { z-index: 1; }
.at-hero-inner { position: absolute; z-index: 3; inset: 0; width: auto; max-width: none; margin: 0; }
/* 言葉は黒い帯に載せ、画面の中央より下に一本で置く（本人指定）。帯があるので縁取りは要らない */
/* 言葉は行ごとに文字幅ぴったりの黒い札に載せ、2段に重ねて2段目を少し右へずらす。
   大きな一枚の箱の中央に文字を置くと札が重く見えるので、札は文字に従わせる。
   位置は写真の左下、画面の中央より下。 */
.at-hero-title { position: absolute; left: calc(50% - min(220px, 15.5vw) - 1.2em); top: 50%; margin: 0; max-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: .28em;
  color: #fff; white-space: nowrap; font-feature-settings: "palt" 1; font: 500 clamp(26px, 2.8vw, 40px)/1.3 var(--at-serif); letter-spacing: .1em; }
.at-hero-title::after { content: none; }
.at-word { display: inline-block; padding: .16em .5em .2em .55em; background: #04070de6; box-shadow: 0 18px 40px -18px #000; }
/* トップページと同じ3行の区切り。札は階段状に少しずつ右へ */
.at-word-2 { margin-left: .9em; }
.at-word-3 { margin-left: 1.8em; }
.at-opening .at-word-1 { animation: at-bar-wipe 5.6s both; }
.at-opening .at-word-2 { animation: at-bar-wipe-2 5.6s both; }
.at-opening .at-word-3 { animation: at-bar-wipe-3 5.6s both; }
@keyframes at-bar-wipe { 0%, 76% { clip-path: inset(0 100% 0 0); } 88%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes at-bar-wipe-2 { 0%, 81% { clip-path: inset(0 100% 0 0); } 93%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes at-bar-wipe-3 { 0%, 86% { clip-path: inset(0 100% 0 0); } 98%, 100% { clip-path: inset(0 0 0 0); } }
/* 言葉は写真の明るい壁にもかかるので、細い紺の縁取り（paint-order で文字の外側だけ）と
   柔らかい影で、どの背景の上でも白い文字として読めるようにする */


.at-scroll { position: absolute; left: 50%; top: calc(45% + min(308px, 21.7vw) + 40px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px;
  font: 600 9px/1 var(--at-latin); letter-spacing: .34em; text-transform: uppercase; color: #9fd5df; text-decoration: none; }
.at-scroll i { display: block; width: 1px; height: 54px; background: repeating-linear-gradient(180deg, #9fd5df 0 4px, transparent 4px 9px);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent); mask-image: linear-gradient(180deg, #000 30%, transparent); animation: at-scroll-flow 1.4s linear infinite; }
@keyframes at-scroll-flow { to { background-position: 0 9px; } }
.at-hero-bottom { position: absolute; left: var(--at-gutter); right: var(--at-gutter); bottom: 40px; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.at-signature { margin: 0; gap: 14px; align-items: center; }
.at-signature img { flex: 0 0 44px; width: 44px; height: 44px; object-position: 50% 14%; filter: saturate(.9); border: 0; box-shadow: 0 0 0 1px #8bd5df66; }
.at-signature span { font-size: 11px; letter-spacing: .06em; line-height: 1.8; color: #9fb0c2; word-break: keep-all; }
.at-signature strong { display: block; font: 500 15px/1.5 var(--at-serif); letter-spacing: .08em; color: #eef4f6; }
.at-hero-cta { display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid #a7c8d055;
  font-size: 11px; font-weight: 500; letter-spacing: .1em; color: #c9d7e2; text-decoration: none; transition: color .25s ease, border-color .25s ease; }
.at-hero-cta:hover { color: #fff; border-color: #c9f5f5; }
.at-hero-foot { display: none; }
.at-opening .at-hero-inner { animation-name: at-hero-arrive; }
@media (max-width: 820px) {
  .at-hero { min-height: max(760px, 100svh); padding-top: 0; }
  .at-frame { width: min(350px, 90vw); top: 41%; }
  .at-hero-pattern::before { width: 130vmin; height: 130vmin; top: 41%; }
  .at-hero-pattern::after { width: 185vmin; height: 185vmin; top: 41%; }
  .at-hero-title { left: var(--at-gutter); top: 50%; gap: .26em; font-size: clamp(23px, 7.2vw, 28px); letter-spacing: .08em; }
  .at-word-2 { margin-left: .8em; }
  .at-word-3 { margin-left: 1.6em; }
  /* 言葉と SCROLL は楕円の縁を基準に置く（楕円の中心 41%・半高 min(213px,54vw)） */
  .at-scroll { top: calc(41% + min(245px, 63vw) + 34px); }
  .at-scroll i { height: 44px; }
  .at-hero-bottom { bottom: 28px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .at-signature img { flex-basis: 40px; width: 40px; height: 40px; }
  .at-signature span { font-size: 10px; }
  .at-signature strong { font-size: 14px; }
  .at-hero-cta { font-size: 11px; }
}
@media (max-height: 700px) and (max-width: 820px) {
  .at-hero { min-height: 100svh; }
  .at-hero-bottom { bottom: 18px; gap: 10px; }
  .at-frame { width: min(280px, 74vw); top: 40%; }
  .at-hero-title { top: 48%; }
  .at-scroll { top: calc(40% + min(196px, 51.8vw) + 40px); }
}

@media (max-width: 360px) {
  /* 幅が狭いときはロゴの副題を畳み、右のナビを折り返させない（390pxではトップと同じく出す） */
  .at-brand > span { display: none; }
}