/*  Sycamore House — sycamorehouse.im
    © 2026 Dr. Alex J. Martin-Smith.  All rights reserved.
    Ivory #F8F6EE · Claret #610A16                                         */

@font-face{font-family:'Garamond';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/eb-garamond-400.woff2) format('woff2');}
@font-face{font-family:'Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/eb-garamond-400-italic.woff2) format('woff2');}
@font-face{font-family:'Garamond';font-style:normal;font-weight:500;font-display:swap;
  src:url(/assets/fonts/eb-garamond-500.woff2) format('woff2');}

:root{
  --ivory:#F8F6EE;
  --ivory-lift:#FCFAF3;
  --claret:#610A16;
  --claret-soft:rgba(97,10,22,.72);
  --claret-faint:rgba(97,10,22,.42);
  --claret-dim:rgba(97,10,22,.3);
  --tw:clamp(164px, 26vw, 232px);
  --ring-r:calc(var(--tw) * .9);
  --ring-d:calc(var(--ring-r) * 2);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:'Perpetua','Perpetua Titling MT','Garamond','Baskerville',Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--ivory);}
body{
  min-height:100svh;overflow:hidden;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);color:var(--claret);
  background:var(--ivory);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--claret);color:var(--ivory);}

body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(130% 115% at 50% 40%, var(--ivory-lift) 0%, rgba(246,240,226,0) 46%),
    radial-gradient(125% 120% at 50% 52%, rgba(255,255,255,0) 60%, rgba(84,52,20,.05) 100%);}
body::after{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:.022;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

main{position:relative;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  padding:3.5vh 1.5rem;text-align:center;}

.mark{position:relative;width:var(--ring-d);height:var(--ring-d);
  perspective:1000px;transform-origin:center center;
  animation:settle 3s cubic-bezier(.3,0,.16,1) .1s both,
            materialise 2.7s ease-in .15s both;}
.float{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform-style:preserve-3d;will-change:transform;}
.tree{position:relative;z-index:2;display:block;width:var(--tw);height:auto;}

.orbit{position:absolute;inset:0;z-index:1;
  animation:turn 160s linear infinite, appear 1.8s var(--ease) 2.3s both;}
.orbit span{position:absolute;left:50%;top:50%;
  width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--claret);box-shadow:0 0 6px rgba(97,10,22,.32);
  transform:rotate(var(--a)) translateX(var(--ring-r));
  animation:glow 11s ease-in-out var(--d) infinite;}
.orbit span:nth-child(1){--a:0deg;--d:0s;}
.orbit span:nth-child(2){--a:18deg;--d:-.55s;}
.orbit span:nth-child(3){--a:36deg;--d:-1.1s;}
.orbit span:nth-child(4){--a:54deg;--d:-1.65s;}
.orbit span:nth-child(5){--a:72deg;--d:-2.2s;}
.orbit span:nth-child(6){--a:90deg;--d:-2.75s;}
.orbit span:nth-child(7){--a:108deg;--d:-3.3s;}
.orbit span:nth-child(8){--a:126deg;--d:-3.85s;}
.orbit span:nth-child(9){--a:144deg;--d:-4.4s;}
.orbit span:nth-child(10){--a:162deg;--d:-4.95s;}
.orbit span:nth-child(11){--a:180deg;--d:-5.5s;}
.orbit span:nth-child(12){--a:198deg;--d:-6.05s;}
.orbit span:nth-child(13){--a:216deg;--d:-6.6s;}
.orbit span:nth-child(14){--a:234deg;--d:-7.15s;}
.orbit span:nth-child(15){--a:252deg;--d:-7.7s;}
.orbit span:nth-child(16){--a:270deg;--d:-8.25s;}
.orbit span:nth-child(17){--a:288deg;--d:-8.8s;}
.orbit span:nth-child(18){--a:306deg;--d:-9.35s;}
.orbit span:nth-child(19){--a:324deg;--d:-9.9s;}
.orbit span:nth-child(20){--a:342deg;--d:-10.45s;}

h1{margin-top:clamp(1rem, 2.4vh, 1.6rem);
  font-size:clamp(1.4rem, 3.5vw, 2rem);font-weight:500;
  text-transform:uppercase;letter-spacing:.34em;padding-left:.34em;
  white-space:nowrap;animation:track 2.2s var(--ease) 2.5s both;}

.motto{margin-top:1rem;
  font-size:clamp(.6rem,1.4vw,.7rem);
  text-transform:uppercase;letter-spacing:.28em;padding-left:.28em;
  color:var(--claret-soft);max-width:min(92vw,40em);line-height:1.9;
  animation:rise 2s var(--ease) 2.65s both;}
.motto .b{color:var(--claret-dim);margin:0 .14em;}

.motto-en{margin-top:.5rem;
  font-size:clamp(.52rem,1.2vw,.6rem);
  text-transform:uppercase;letter-spacing:.32em;padding-left:.32em;
  color:var(--claret-faint);
  animation:rise 2s var(--ease) 2.75s both;}
.motto-en .b{color:var(--claret-dim);margin:0 .16em;}

.rule{width:44px;height:1px;position:relative;
  margin:clamp(1.1rem,2.4vh,1.6rem) auto clamp(1rem,2.2vh,1.4rem);
  background:var(--claret-faint);transform-origin:center;
  animation:draw 1.6s var(--ease) 2.85s both;}
.rule::after{content:'';position:absolute;left:50%;top:50%;
  width:3.5px;height:3.5px;transform:translate(-50%,-50%) rotate(45deg);
  background:var(--claret-faint);}

.residence{font-style:italic;color:var(--claret);
  font-size:clamp(.9rem,2vw,1.02rem);letter-spacing:.01em;line-height:1.8;
  animation:slideL 1.5s var(--ease) 2.95s both;}

.place{margin-top:1.1rem;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.3em;padding-left:.3em;color:var(--claret-faint);
  animation:rise 2s var(--ease) 3.1s both;}

.contact{margin-top:.9rem;font-size:.82rem;letter-spacing:.06em;
  color:var(--claret-soft);animation:rise 2s var(--ease) 3.25s both;}
.contact a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .5s var(--ease),color .35s ease;padding-bottom:1px;}
.contact a:hover,.contact a:focus-visible{border-color:var(--claret-faint);}
.contact a:focus-visible{outline:none;}
.sep{color:var(--claret-faint);margin:0 .55em;user-select:none;}
.nw{white-space:nowrap;}

.warrant{margin-top:clamp(1.3rem,2.8vh,1.9rem);
  font-size:.58rem;text-transform:uppercase;
  letter-spacing:.42em;padding-left:.42em;color:var(--claret-faint);
  animation:rise 2s var(--ease) 3.4s both;}

.arms-wrap{position:fixed;right:clamp(20px,3.5vw,44px);bottom:clamp(18px,3.5vh,40px);
  z-index:20;animation:rise 2.4s var(--ease) 3.5s both;}
.arms{display:block;width:clamp(46px,6vw,64px);height:auto;cursor:pointer;
  opacity:.5;filter:grayscale(1) contrast(.96);
  transform-origin:bottom right;
  transition:transform .6s var(--ease), opacity .5s ease, filter .6s ease;
  will-change:transform,filter;}
.arms:hover,.arms:focus-visible{opacity:1;
  filter:grayscale(0) drop-shadow(0 9px 18px rgba(40,22,8,.26));
  transform:scale(2.3) translateY(-4px);outline:none;}

.social{position:fixed;left:clamp(20px,3.5vw,44px);bottom:clamp(20px,3.5vh,42px);
  z-index:20;animation:rise 2.4s var(--ease) 3.55s both;}
.social a{display:block;color:var(--claret);opacity:.62;
  transition:opacity .4s ease, transform .45s var(--ease);transform-origin:bottom left;}
.social a:hover,.social a:focus-visible{opacity:1;transform:scale(1.18);outline:none;}
.social svg{display:block;width:clamp(20px,2.6vw,23px);height:auto;fill:currentColor;}

@keyframes settle{0%{transform:translateY(11vh) scale(4.6);}100%{transform:translateY(0) scale(1);}}
@keyframes materialise{0%{opacity:0;}100%{opacity:1;}}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes track{from{opacity:0;letter-spacing:.5em;}to{opacity:1;letter-spacing:.34em;}}
@keyframes slideL{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:none;}}
@keyframes draw{from{opacity:0;transform:scaleX(0);}to{opacity:1;transform:scaleX(1);}}
@keyframes appear{from{opacity:0;}to{opacity:1;}}
@keyframes turn{from{transform:rotate(0);}to{transform:rotate(360deg);}}
@keyframes glow{
  0%{opacity:.5;transform:rotate(var(--a)) translateX(var(--ring-r)) scale(.82);}
  12%{opacity:1;transform:rotate(var(--a)) translateX(var(--ring-r)) scale(1.5);}
  30%{opacity:.5;transform:rotate(var(--a)) translateX(var(--ring-r)) scale(.82);}
  100%{opacity:.5;transform:rotate(var(--a)) translateX(var(--ring-r)) scale(.82);}
}

@media (max-height:780px){
  :root{--tw:clamp(138px, 22vw, 182px);}
  main{padding:2.2vh 1.25rem;}
  h1{margin-top:.7rem;font-size:clamp(1.2rem,4.4vw,1.6rem);}
  .motto{margin-top:.6rem;}
  .motto-en{margin-top:.35rem;}
  .rule{margin:.85rem auto .75rem;}
  .residence{line-height:1.6;font-size:.92rem;}
  .place{margin-top:.7rem;}
  .contact{margin-top:.6rem;}
  .warrant{margin-top:1rem;}
}
@media (max-width:460px){
  .contact{display:flex;flex-direction:column;gap:.5rem;line-height:1;}
  .contact .sep{display:none;}
  .motto{letter-spacing:.24em;padding-left:.24em;}
  .motto-en{letter-spacing:.26em;padding-left:.26em;}
  .arms-wrap{right:14px;bottom:14px;}
  .arms{width:44px;}
  .social{left:16px;bottom:16px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;}
  .mark{transform:none;opacity:1;}
  .float{transform:none !important;}
  .orbit span{opacity:.6;}
  .residence{transform:none;}
}

/* static pages (404) — no entrance choreography */
.static *,.static *::before,.static *::after{animation:none !important;}
.tree-sm{display:block;width:clamp(120px,20vw,170px);height:auto;margin:0 auto;}
.lead{margin-top:1.5rem;font-style:italic;color:var(--claret-soft);
  font-size:clamp(.95rem,2vw,1.1rem);line-height:1.7;}
.home{margin-top:1.6rem;font-size:.7rem;text-transform:uppercase;
  letter-spacing:.3em;padding-left:.3em;}
.home a{color:var(--claret);text-decoration:none;
  border-bottom:1px solid var(--claret-faint);padding-bottom:2px;
  transition:border-color .4s var(--ease);}
.home a:hover,.home a:focus-visible{border-color:var(--claret);outline:none;}