@charset "UTF-8";
:root {
  --paper:#f5f3eb;
  --ink:#213e34;
  --muted:#667168;
  --orange:#cc542f;
  --line:#dcded2;
  --serif:"Songti SC","Noto Serif CJK SC","SimSun",serif;
  --sans:"DengXian","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"Cascadia Code","Consolas",monospace
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:30px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased
}

button,a {
  -webkit-tap-highlight-color:transparent
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit;
  color:inherit;
  cursor:pointer
}

button:disabled {
  cursor:wait
}

a,button {
  touch-action:manipulation
}

button:focus-visible,a:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}

::selection {
  background:#eac59b;
  color:#213e34
}

img,svg {
  display:block
}

button {
  border:0
}

h1,h2,h3,p {
  margin:0
}

button svg,a svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round
}

.page-shell {
  max-width:1440px;
  margin:auto;
  padding:0 76px
}

.skip-link {
  position:fixed;
  top:-80px;
  left:20px;
  z-index:20;
  padding:12px 20px;
  background:var(--ink);
  color:var(--paper);
  border-radius:4px
}

.skip-link:focus {
  top:15px
}

.site-header {
  min-height:112px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:28px
}

.wordmark {
  display:flex;
  align-items:center;
  gap:13px;
  flex-shrink:0
}

.brand-mark {
  width:35px;
  height:35px;
  stroke:var(--orange);
  stroke-width:1.8;
  fill:none
}

.brand-name {
  font-family:var(--serif);
  font-weight:700;
  font-size:28px;
  line-height:1.15;
  letter-spacing:3px
}

.brand-en {
  display:block;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:400;
  margin-top:7px
}

.main-nav {
  display:flex;
  gap:36px;
  font-size:14px
}

.main-nav a {
  padding:12px 0;
  position:relative
}

.main-nav a:after {
  position:absolute;
  content:"";
  height:1px;
  background:var(--orange);
  bottom:6px;
  left:0;
  right:0;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s
}

.main-nav a:hover:after {
  transform:scaleX(1)
}

.island-time {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}

.time-dot {
  height:6px;
  width:6px;
  border-radius:50%;
  background:var(--orange)
}

.island-time time {
  font-family:var(--mono);
  margin-left:3px;
  font-variant-numeric:tabular-nums
}

.hero {
  display:grid;
  grid-template-columns:1fr 1.04fr;
  align-items:center;
  min-height:680px;
  position:relative;
  padding:45px 0 38px;
  gap:12px
}

.hero-copy {
  position:relative;
  z-index:2;
  padding:26px 0 35px
}

.eyebrow {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:13px;
  letter-spacing:2px;
  margin-bottom:29px
}

.tiny-spark {
  width:19px;
  height:19px;
  stroke:var(--orange);
  stroke-width:1.4;
  fill:none;
  flex-shrink:0
}

.hero h1 {
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(50px,5.3vw,77px);
  line-height:1.42;
  letter-spacing:-3px;
  white-space:nowrap
}

.slow-word {
  position:relative;
  display:inline-block
}

.slow-word svg {
  position:absolute;
  bottom:2px;
  left:0;
  width:100%;
  height:17px;
  fill:none;
  stroke:var(--orange);
  stroke-width:2.6;
  stroke-linecap:round;
  opacity:.85;
  z-index:-1
}

.hero-description {
  margin-top:28px;
  font-size:15px;
  line-height:2.05;
  color:var(--muted);
  letter-spacing:.5px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px
}

.button {
  min-height:50px;
  padding:12px 24px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  font-size:14px;
  transition:background .2s,transform .2s
}

.button-primary {
  background:var(--ink);
  color:var(--paper)
}

.button-primary:hover {
  background:#345747;
  transform:translateY(-2px)
}

.button svg {
  width:21px;
  height:21px
}

.text-link {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  background:none;
  padding:8px 0;
  transition:color .2s
}

.text-link:hover {
  color:var(--orange)
}

.text-link>span {
  font-size:20px
}

.hero-footnote {
  font-size:12px;
  color:var(--muted);
  margin-top:49px;
  letter-spacing:1px
}

.hero-footnote>span {
  margin-right:8px;
  color:var(--orange)
}

.hero-art {
  position:relative;
  min-width:0;
  align-self:stretch;
  display:flex;
  align-items:center;
  justify-content:center
}

.island-illustration {
  width:117%;
  max-width:none;
  height:auto;
  position:relative;
  z-index:1;
  pointer-events:none;
  animation:drift 9s ease-in-out infinite
}

.art-orbit {
  position:absolute;
  inset:14% -1% 13% 0;
  border:1px solid #dddfcf;
  border-radius:50%;
  transform:rotate(-25deg);
  background:radial-gradient(ellipse at 52% 48%,#e8ebdf 0%,#eef0e5 51%,transparent 68%)
}

.art-coordinate {
  position:absolute;
  left:12%;
  top:5%;
  font-family:var(--mono);
  font-size:9px;
  line-height:1.8;
  letter-spacing:1.3px;
  color:#7b8377
}

.art-note {
  position:absolute;
  right:-2%;
  top:27%;
  font-family:var(--serif);
  font-size:17px;
  writing-mode:vertical-rl;
  letter-spacing:4px;
  transform:rotate(8deg)
}

.art-caption {
  position:absolute;
  left:13%;
  right:1%;
  bottom:0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  letter-spacing:1px;
  color:var(--muted)
}

.caption-line {
  height:1px;
  width:28px;
  background:var(--orange)
}

.art-index {
  margin-left:auto;
  font-family:var(--mono);
  font-size:10px
}

.section-divider {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:18px;
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted)
}

.section-divider svg {
  width:14px;
  height:22px;
  stroke:var(--ink);
  fill:none;
  stroke-width:1
}

.section-divider span:last-child {
  font-family:var(--sans);
  letter-spacing:2px;
  font-size:11px
}

.wander-section {
  padding:91px 0 73px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:33px
}

.section-kicker {
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:16px
}

h2 {
  font-family:var(--serif);
  font-size:34px;
  line-height:1.6;
  font-weight:700;
  letter-spacing:1px
}

.section-aside {
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  text-align:right;
  padding-bottom:3px
}

.activity-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}

.activity-card {
  border:1px solid #dedfd1;
  border-radius:5px;
  padding:23px 27px 20px;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:transform .25s,border-color .25s,box-shadow .25s;
  min-width:0
}

.paper-card {
  background:#eeeee2
}

.wind-card {
  background:#e7ece3
}

.minute-card {
  background:#f0e7dc
}

.activity-card:hover {
  transform:translateY(-5px);
  border-color:#9ba990;
  box-shadow:0 12px 26px #213e3408
}

.card-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#66705f;
  gap:15px
}

.card-number {
  font-family:var(--mono);
  font-size:10px
}

.card-tag {
  font-size:11px;
  letter-spacing:1px
}

.card-drawing {
  height:154px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:7px 0 6px
}

.card-drawing svg {
  width:165px;
  height:136px;
  overflow:visible
}

.paper-shadow {
  fill:#cfceb6
}

.paper-sheet {
  fill:#faf9f0;
  stroke:#859078;
  stroke-width:1.2
}

.paper-line {
  stroke:#7f8b72;
  stroke-width:1.5;
  stroke-linecap:round
}

.drawing-accent {
  fill:var(--orange);
  stroke:none
}

.wind-drawing svg {
  fill:none;
  stroke:#5b7866;
  stroke-width:3;
  stroke-linecap:round
}

.wind-short {
  opacity:.5
}

.minute-drawing ellipse {
  fill:#d8ccba;
  opacity:.55
}

.glass {
  fill:#f8f3e9;
  stroke:#897d68;
  stroke-width:1.3
}

.sand {
  fill:#cd7350;
  stroke:none
}

.glass-frame {
  fill:none;
  stroke:#625d4b;
  stroke-width:2.5;
  stroke-linecap:round
}

.activity-card h3 {
  font-family:var(--serif);
  font-size:24px;
  font-weight:700;
  margin-bottom:10px;
  letter-spacing:1px
}

.activity-card>p {
  font-size:13px;
  color:#606c60;
  line-height:1.95;
  flex:1
}

.card-action {
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:22px 0 0;
  margin-top:26px;
  border-top:1px solid #263e3426;
  background:none;
  min-height:56px;
  font-size:12px;
  text-align:left
}

.round-arrow {
  display:flex;
  align-items:center;
  justify-content:center;
  height:30px;
  width:30px;
  border:1px solid #9ba794;
  border-radius:50%;
  font-size:17px;
  transition:background .2s,color .2s
}

.activity-card:hover .round-arrow,.card-action:hover .round-arrow {
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink)
}

.wind-card.is-playing .wind-drawing {
  animation:breeze 3s ease-in-out infinite
}

.wind-card.is-playing .card-tag {
  color:#315f47
}

.sound-status {
  font-size:11px;
  color:var(--muted);
  margin-top:17px;
  text-align:right;
  min-height:19px
}

.postcard-section {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:85px;
  padding:74px 55px 82px
}

.postcard-intro h2 {
  font-size:38px;
  line-height:1.5
}

.postcard-intro>p:not(.section-kicker) {
  font-size:13px;
  color:var(--muted);
  margin-top:21px;
  line-height:2
}

.note-next {
  margin-top:24px;
  font-size:13px
}

.note-next svg {
  height:17px;
  width:17px
}

.postcard {
  background:#fcfaf2;
  min-height:358px;
  padding:28px 36px 24px;
  box-shadow:1px 8px 22px #4048320b,0 0 0 1px #e2dfcf;
  transform:rotate(2deg);
  position:relative
}

.postcard:before {
  content:"";
  position:absolute;
  width:101px;
  height:29px;
  top:-14px;
  left:calc(50% - 50px);
  background:#d2b68a65;
  transform:rotate(-7deg);
  clip-path:polygon(2% 4%,98% 0,100% 93%,0 100%)
}

.postcard-top {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  font-size:10px;
  letter-spacing:1px;
  color:#7a7c68
}

.postage {
  width:54px;
  height:62px;
  stroke:#849478;
  stroke-width:1;
  fill:none;
  flex-shrink:0
}

.postage>path:first-child {
  stroke-dasharray:3 3;
  stroke-width:3
}

.postage circle {
  fill:#dfbd88;
  stroke:none
}

.note-content {
  min-height:169px;
  padding:5px 0 19px;
  display:flex;
  align-items:center
}

.note-quote {
  font-family:var(--serif);
  font-size:29px;
  line-height:1.65;
  letter-spacing:2px;
  color:#344937
}

.note-content.changing {
  animation:note-in .32s ease both
}

.postcard-bottom {
  padding-top:17px;
  border-top:1px solid #d8dccb;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:10px;
  color:#7a7c68
}

.note-signature {
  font-family:var(--serif);
  font-size:16px;
  letter-spacing:2px;
  color:var(--ink)
}

.about-section {
  border-top:1px solid var(--line);
  padding:65px 0 70px;
  display:grid;
  grid-template-columns:90px 1fr 1fr;
  align-items:center;
  gap:35px
}

.about-symbol svg {
  width:76px;
  height:76px;
  stroke:var(--orange);
  stroke-width:1.4;
  fill:none
}

.about-section .section-kicker {
  font-size:9px;
  letter-spacing:1.5px;
  margin-bottom:12px
}

.about-section h2 {
  font-size:28px;
  line-height:1.65
}

.about-copy {
  padding-left:25px;
  font-size:13px;
  line-height:2.1;
  color:var(--muted)
}

.about-copy p+p {
  margin-top:15px
}

.site-footer {
  border-top:1px solid var(--line);
  padding-top:39px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap
}

.footer-logo {
  display:flex;
  align-items:baseline;
  gap:13px;
  font-family:var(--serif);
  font-size:27px;
  font-weight:700;
  letter-spacing:3px
}

.footer-logo span {
  font-family:var(--mono);
  font-size:9px;
  font-weight:400;
  letter-spacing:2px
}

.site-footer>p {
  font-size:12px;
  color:var(--muted);
  letter-spacing:1px
}

.back-top {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:12px;
  min-height:44px
}

.back-top>span {
  font-size:20px
}

.footer-bottom {
  width:100%;
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:30px 0 22px;
  color:#72796c;
  font-size:10px
}

.footer-bottom>span:nth-child(2) {
  font-family:var(--mono);
  font-size:9px;
  letter-spacing:1px
}

.minute-dialog {
  border:1px solid var(--line);
  border-radius:10px;
  padding:48px 40px 34px;
  max-width:480px;
  width:calc(100% - 36px);
  color:var(--ink);
  background:var(--paper);
  text-align:center;
  box-shadow:0 20px 90px #142b3333
}

.minute-dialog::backdrop {
  background:#142b3366;
  backdrop-filter:blur(7px)
}

.dialog-close {
  position:absolute;
  top:8px;
  right:10px;
  background:transparent;
  font-size:28px;
  width:44px;
  height:44px;
  line-height:1
}

.minute-dialog h2 {
  font-size:25px
}

.minute-dialog>p:not(.section-kicker) {
  color:var(--muted);
  font-size:12px;
  margin-top:11px
}

.timer-face {
  position:relative;
  width:210px;
  height:210px;
  margin:24px auto 19px
}

.timer-face svg {
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  fill:none;
  stroke-width:1.5
}

.timer-track {
  stroke:#d7ddcd
}

.timer-progress {
  stroke:var(--orange);
  stroke-width:2;
  stroke-linecap:round
}

.timer-face output {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:42px;
  font-variant-numeric:tabular-nums;
  font-weight:300;
  letter-spacing:2px
}

.timer-message {
  min-height:24px
}

.timer-controls {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  margin-top:25px
}

.timer-controls .button {
  min-width:138px
}

.timer-controls .text-link {
  font-size:12px
}

@keyframes drift {
  0%,100% {
    transform:translateY(0) rotate(-.4deg)
  }
  50% {
    transform:translateY(-9px) rotate(.4deg)
  }
}

@keyframes breeze {
  0%,100% {
    transform:translateX(-3px)
  }
  50% {
    transform:translateX(3px)
  }
}

@keyframes note-in {
  from {
    opacity:.15;
    transform:translateY(6px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}

@media(min-width:1600px) {
  .hero h1 {
    font-size:78px
  }
}

@media(max-width:1150px) {
  .page-shell {
    padding:0 42px
  }
  .art-orbit {
    inset:20% 3% 20% 3%;
    transform:rotate(-18deg)
  }
  .main-nav {
    gap:25px
  }
  .island-time>span:not(.time-dot) {
    display:none
  }
  .hero {
    min-height:610px
  }
  .hero h1 {
    font-size:clamp(45px,5.7vw,66px)
  }
  .hero-description {
    font-size:14px
  }
  .hero-actions {
    gap:19px
  }
  .hero-art .art-note {
    right:-3%
  }
  .activity-card {
    padding:21px
  }
  .postcard-section {
    gap:50px;
    padding-left:20px;
    padding-right:20px
  }
  .postcard {
    padding:25px
  }
  .about-section {
    grid-template-columns:65px 1fr 1fr;
    gap:24px
  }
  .about-symbol svg {
    width:60px;
    height:60px
  }
  .about-copy {
    padding-left:0
  }
  .about-section h2 {
    font-size:25px
  }
}

@media(max-width:800px) {
  .page-shell {
    padding:0 28px
  }
  .site-header {
    min-height:95px;
    gap:15px
  }
  .main-nav {
    gap:21px;
    font-size:13px
  }
  .brand-name {
    font-size:25px
  }
  .brand-en {
    font-size:8px
  }
  .brand-mark {
    width:29px;
    height:29px
  }
  .island-time {
    display:none
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:570px;
    gap:0;
    padding-top:35px;
    padding-bottom:27px
  }
  .hero h1 {
    font-size:clamp(39px,5.7vw,51px);
    letter-spacing:-2px
  }
  .eyebrow {
    font-size:11px;
    letter-spacing:1px;
    gap:7px;
    margin-bottom:22px
  }
  .tiny-spark {
    font-size:19px
  }
  .hero-description {
    font-size:12px;
    margin-top:22px
  }
  .hero-actions {
    gap:13px;
    flex-wrap:wrap;
    margin-top:25px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .button {
    padding:11px 19px;
    gap:15px;
    font-size:13px
  }
  .hero-footnote {
    font-size:10px;
    margin-top:27px
  }
  .island-illustration {
    width:135%;
    margin-left:-8%
  }
  .art-coordinate {
    font-size:7px;
    top:10%;
    left:13%
  }
  .art-note {
    font-size:13px;
    top:32%
  }
  .art-caption {
    font-size:9px;
    left:8%;
    bottom:13%
  }
  .art-index {
    display:none
  }
  .art-orbit {
    inset:22% 0 22% 0;
    transform:none
  }
  .wander-section {
    padding:66px 0 53px
  }
  h2 {
    font-size:29px
  }
  .section-kicker {
    font-size:9px
  }
  .activity-grid {
    gap:12px
  }
  .activity-card {
    padding:18px 16px
  }
  .card-tag {
    font-size:9px
  }
  .card-drawing {
    height:130px
  }
  .card-drawing svg {
    width:135px;
    height:120px
  }
  .activity-card h3 {
    font-size:21px;
    letter-spacing:0
  }
  .activity-card>p {
    font-size:11px
  }
  .card-action {
    font-size:11px;
    margin-top:22px
  }
  .postcard-section {
    gap:30px;
    padding:60px 0 65px;
    grid-template-columns:.85fr 1.15fr
  }
  .postcard-intro h2 {
    font-size:31px
  }
  .postcard-intro>p:not(.section-kicker) {
    font-size:12px
  }
  .postcard {
    padding:24px;
    min-height:334px
  }
  .postcard-top {
    font-size:9px
  }
  .postage {
    width:43px;
    height:50px
  }
  .note-quote {
    font-size:24px;
    letter-spacing:1px
  }
  .about-section {
    grid-template-columns:55px 1fr 1fr;
    gap:18px;
    padding:53px 0
  }
  .about-symbol svg {
    width:48px;
    height:48px
  }
  .about-section h2 {
    font-size:22px
  }
  .about-copy {
    font-size:11px
  }
  .about-section .section-kicker {
    font-size:8px
  }
  .site-footer>p {
    font-size:11px
  }
  .footer-bottom>span:nth-child(2) {
    display:none
  }
}

@media(max-width:600px) {
  html {
    scroll-padding-top:20px
  }
  .page-shell {
    padding:0 23px
  }
  .site-header {
    min-height:85px;
    gap:10px
  }
  .wordmark {
    gap:9px
  }
  .brand-name {
    font-size:25px
  }
  .brand-en {
    font-size:7px;
    letter-spacing:1.4px;
    margin-top:5px
  }
  .brand-mark {
    width:28px;
    height:28px
  }
  .main-nav {
    gap:19px;
    font-size:12px
  }
  .main-nav a:last-child {
    display:none
  }
  .hero {
    display:flex;
    flex-direction:column;
    min-height:0;
    gap:0;
    padding:48px 0 32px;
    align-items:stretch
  }
  .hero-copy {
    padding:0;
    z-index:2
  }
  .eyebrow {
    font-size:11px;
    margin-bottom:23px;
    letter-spacing:1.6px
  }
  .hero h1 {
    font-size:clamp(43px,10.5vw,62px);
    line-height:1.5;
    letter-spacing:-1.8px
  }
  .slow-word svg {
    height:13px;
    bottom:3px
  }
  .hero-description {
    margin-top:23px;
    font-size:13px;
    line-height:2
  }
  .hero-actions {
    margin-top:25px;
    gap:24px;
    flex-wrap:nowrap
  }
  .button {
    min-height:48px;
    padding:12px 22px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .hero-footnote {
    margin-top:25px;
    font-size:11px;
    letter-spacing:.5px
  }
  .hero-art {
    height:362px;
    margin-top:0;
    align-self:stretch;
    overflow:visible
  }
  .island-illustration {
    width:107%;
    height:auto;
    max-height:410px;
    object-fit:contain;
    margin:0
  }
  .art-orbit {
    inset:10% 0 9% 0
  }
  .art-coordinate {
    left:2%;
    top:7%;
    font-size:7px
  }
  .hero-art .art-note {
    right:0;
    top:29%;
    font-size:13px;
    letter-spacing:3px
  }
  .art-caption {
    bottom:1%;
    left:7%;
    right:3%;
    font-size:9px
  }
  .art-index {
    display:block;
    font-size:8px
  }
  .section-divider {
    font-size:8px;
    letter-spacing:1px;
    padding-top:14px
  }
  .section-divider span:last-child {
    font-size:9px;
    letter-spacing:1px
  }
  .section-divider svg {
    height:18px
  }
  .wander-section {
    padding:53px 0 39px
  }
  .section-heading {
    gap:15px;
    align-items:center;
    margin-bottom:23px
  }
  .section-kicker {
    font-size:8px;
    letter-spacing:1.5px;
    margin-bottom:11px
  }
  h2 {
    font-size:26px;
    letter-spacing:0
  }
  .section-aside {
    display:none
  }
  .activity-grid {
    grid-template-columns:1fr;
    gap:16px
  }
  .activity-card {
    display:grid;
    grid-template-columns:1fr 120px;
    padding:21px 22px 18px;
    min-height:220px;
    column-gap:8px
  }
  .card-top {
    grid-column:1/-1;
    margin-bottom:19px
  }
  .card-tag {
    font-size:10px
  }
  .card-drawing {
    grid-column:2;
    grid-row:2/4;
    height:104px;
    margin:-3px 0 0;
    align-self:center
  }
  .card-drawing svg {
    width:117px;
    height:106px
  }
  .activity-card h3 {
    grid-column:1;
    grid-row:2;
    font-size:23px;
    margin-bottom:8px;
    align-self:end
  }
  .activity-card>p {
    grid-column:1;
    grid-row:3;
    font-size:12px;
    line-height:1.85
  }
  .card-action {
    grid-column:1/-1;
    margin-top:18px;
    padding-top:13px;
    min-height:44px;
    font-size:12px
  }
  .round-arrow {
    width:28px;
    height:28px
  }
  .sound-status {
    font-size:10px;
    text-align:left;
    line-height:1.8;
    margin-top:15px
  }
  .postcard-section {
    display:flex;
    flex-direction:column;
    gap:37px;
    align-items:stretch;
    padding:47px 0 54px
  }
  .postcard-intro {
    position:relative
  }
  .postcard-intro h2 {
    font-size:30px;
    line-height:1.5
  }
  .postcard-intro h2 br {
    display:none
  }
  .postcard-intro>p:not(.section-kicker) {
    font-size:12px;
    margin-top:14px
  }
  .note-next {
    position:absolute;
    right:0;
    bottom:0;
    font-size:12px;
    margin:0;
    gap:9px
  }
  .postcard {
    width:94%;
    align-self:center;
    min-height:330px;
    padding:25px 28px
  }
  .postcard-top {
    font-size:9px
  }
  .note-content {
    padding:3px 0 15px;
    min-height:171px
  }
  .note-quote {
    font-size:27px;
    line-height:1.7
  }
  .postage {
    width:46px;
    height:53px
  }
  .postcard-bottom {
    padding-top:15px
  }
  .about-section {
    grid-template-columns:42px 1fr;
    gap:22px 17px;
    padding:43px 0
  }
  .about-symbol {
    align-self:start;
    padding-top:28px
  }
  .about-symbol svg {
    width:39px;
    height:39px
  }
  .about-section .section-kicker {
    font-size:7px;
    letter-spacing:1px
  }
  .about-section h2 {
    font-size:26px
  }
  .about-copy {
    grid-column:2;
    font-size:12px;
    line-height:2
  }
  .about-copy p+p {
    margin-top:14px
  }
  .site-footer {
    padding-top:27px;
    gap:10px
  }
  .footer-logo {
    font-size:25px;
    gap:10px
  }
  .footer-logo span {
    font-size:8px;
    letter-spacing:1px
  }
  .site-footer>p {
    display:none
  }
  .back-top {
    font-size:11px;
    gap:10px
  }
  .footer-bottom {
    padding:17px 0 22px;
    font-size:9px
  }
  .minute-dialog {
    padding:44px 23px 29px
  }
  .minute-dialog h2 {
    font-size:23px
  }
  .minute-dialog>p:not(.section-kicker) {
    font-size:11px
  }
  .timer-face {
    height:190px;
    width:190px
  }
  .timer-controls {
    gap:18px
  }
  .timer-controls .button {
    min-width:132px
  }
}

@media(max-width:360px) {
  .page-shell {
    padding:0 18px
  }
  .main-nav {
    gap:12px
  }
  .hero-actions {
    gap:18px
  }
  .hero h1 {
    font-size:39px
  }
  .hero-art {
    height:320px
  }
  .section-aside {
    font-size:9px
  }
  .activity-card {
    padding-left:18px;
    padding-right:18px;
    grid-template-columns:1fr 100px
  }
  .activity-card h3 {
    font-size:22px
  }
  .card-drawing svg {
    width:105px
  }
  .note-quote {
    font-size:24px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .activity-card:hover,.button-primary:hover {
    transform:none
  }
}