/* Titanium Arts LLC — rtiart.com */
:root{
  --night:#0C2A21;      /* the felt after hours: page background */
  --felt:#16473A;       /* table felt */
  --felt-hi:#1E5A49;
  --rail:#3B2617;       /* walnut rail */
  --ink:#E9E4D3;        /* body text */
  --ink-soft:#AFC0B7;   /* secondary text */
  --print:#E2D2A0;      /* gold felt print */
  --card:#F6F3EA;       /* card stock */
  --red:#B3262E;
  --ti-1:#4D7DE2; --ti-2:#9A6AD8; --ti-3:#D9A548;   /* anodized titanium tints */
  --maxw:1080px;
}
*{box-sizing:border-box}
html{background:var(--night);color-scheme:dark}
body{margin:0;background:var(--night);color:var(--ink);font:400 17px/1.6 Barlow,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--print);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--print);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;background:var(--card);color:#111;padding:8px 12px;z-index:9}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:22px}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);line-height:1.05}
.brand b{font:600 22px/1 Cinzel,Georgia,serif;letter-spacing:.12em}
.brand span{font:500 13px/1.4 "Barlow Condensed",Barlow,sans-serif;letter-spacing:.06em;color:var(--ink-soft)}
.brand::after{content:"";display:block;height:2px;width:100%;margin-top:7px;border-radius:2px;background:linear-gradient(90deg,var(--ti-1),var(--ti-2),var(--ti-3))}
nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
nav a{color:var(--ink);text-decoration:none;font:500 16px/1 Barlow,sans-serif}
nav a:hover,nav a[aria-current="page"]{color:var(--print)}

/* hero: the table */
.table{position:relative;margin:8px auto 0;max-width:var(--maxw);aspect-ratio:1080/560;
  background:radial-gradient(ellipse 70% 80% at 50% 0%,var(--felt-hi),var(--felt) 60%,#123D31);
  border:14px solid var(--rail);border-top:0;border-radius:0 0 50% 50% / 0 0 62% 62%;
  box-shadow:inset 0 0 0 2px rgba(226,210,160,.18),inset 0 30px 80px rgba(0,0,0,.25),0 30px 60px rgba(0,0,0,.35);overflow:hidden}
.table svg.print{position:absolute;inset:0;width:100%;height:100%}
.print text{font-family:Cinzel,Georgia,serif;fill:var(--print)}
.shoe{position:absolute;right:6%;top:7%;width:9%;aspect-ratio:3/4;border-radius:6px 6px 10px 10px;background:linear-gradient(160deg,#2b1a10,#120a05);box-shadow:0 6px 14px rgba(0,0,0,.4)}
.shoe::before{content:"";position:absolute;left:12%;right:12%;bottom:10%;height:38%;border-radius:4px;background:repeating-linear-gradient(45deg,#7e1d24 0 5px,#9b2a31 5px 10px);box-shadow:inset 0 0 0 3px #fff}
.hand{position:absolute;left:50%;top:60%;width:0;height:0}
.c{position:absolute;width:clamp(56px,9vw,104px);aspect-ratio:5/7;margin:0;perspective:800px}
.c .in{position:absolute;inset:0;transform-style:preserve-3d;transition:none}
.c .f,.c .b{position:absolute;inset:0;border-radius:8px;backface-visibility:hidden;box-shadow:0 8px 18px rgba(0,0,0,.35)}
.c .f{background:var(--card);color:#141414;transform:rotateY(180deg)}
.c .b{background:repeating-linear-gradient(45deg,#7e1d24 0 6px,#9b2a31 6px 12px);box-shadow:inset 0 0 0 4px #fff,0 8px 18px rgba(0,0,0,.35)}
.c .r{position:absolute;left:9%;top:5%;font:700 clamp(17px,2.7vw,31px)/1 "Barlow Condensed",sans-serif;text-align:center}
.c .r small{display:block;font-size:.75em;line-height:1}
.c .s{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(28px,4.6vw,54px);line-height:1;padding-top:12%}
.c.red .f{color:var(--red)}
/* resting positions (relative to the centre of the felt) */
.c1{transform:translate(-90%,-12%)}
.c2{transform:translate(-10%,-12%)}
.c1 .in,.c2 .in{transform:rotateY(180deg)}
.tag{position:absolute;left:50%;top:86%;transform:translateX(-50%);font:600 clamp(13px,1.6vw,17px)/1 "Barlow Condensed",sans-serif;letter-spacing:.06em;background:#DDF3E3;color:#135A2B;border-radius:6px;padding:6px 10px;white-space:nowrap}
/* one page-load moment: two cards leave the shoe, land and turn over; then the result */
@media (prefers-reduced-motion:no-preference){
  .c1{animation:deal1 .7s cubic-bezier(.2,.7,.2,1) .35s both}
  .c2{animation:deal2 .7s cubic-bezier(.2,.7,.2,1) .75s both}
  .c1 .in{animation:flip .45s ease-out 1.1s both}
  .c2 .in{animation:flip .45s ease-out 1.5s both}
  .tag{animation:pop .4s ease-out 2.05s both}
}
@keyframes deal1{from{transform:translate(310%,-290%) rotate(-30deg);opacity:0}12%{opacity:1}to{transform:translate(-90%,-12%)}}
@keyframes deal2{from{transform:translate(310%,-290%) rotate(-30deg);opacity:0}12%{opacity:1}to{transform:translate(-10%,-12%)}}
@keyframes flip{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
@keyframes pop{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}

.intro{text-align:center;max-width:720px;margin:44px auto 0;padding:0 24px}
.intro h1{font:600 clamp(30px,4.4vw,48px)/1.15 Cinzel,Georgia,serif;letter-spacing:.02em;margin:0 0 14px;color:var(--ink)}
.intro p{color:var(--ink-soft);font-size:19px;margin:0}

/* products */
.product{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:center;padding:88px 0 0}
.product.flip{grid-template-columns:1.15fr 1fr}
.product.flip .art{order:2}
.product h2{font:600 clamp(26px,3vw,34px)/1.2 Cinzel,Georgia,serif;margin:0 0 6px;letter-spacing:.02em}
.product .kind{margin:0 0 18px;color:var(--print);font:500 18px/1.3 "Barlow Condensed",sans-serif;letter-spacing:.04em}
.product p{margin:0 0 14px;max-width:62ch}
.product ul{margin:0 0 16px;padding-left:1.1em;max-width:60ch}
.product li{margin:4px 0}
.status{display:inline-block;margin-top:6px;border:1px solid rgba(226,210,160,.45);color:var(--print);border-radius:999px;padding:6px 14px;font:500 15px/1 Barlow,sans-serif}

/* book art */
.art{display:grid;place-items:center}
.book{width:min(270px,70vw);aspect-ratio:2/3;position:relative;border-radius:3px 8px 8px 3px;
  background:linear-gradient(160deg,#1C5242,#0F3329);box-shadow:inset 7px 0 0 rgba(0,0,0,.25),inset 9px 0 0 rgba(255,255,255,.06),0 24px 50px rgba(0,0,0,.45);
  display:flex;flex-direction:column;justify-content:space-between;padding:30px 24px 22px 32px;transform:rotate(-2deg)}
.book .t{font:600 30px/1.08 Cinzel,Georgia,serif;color:var(--print)}
.book .n{font:700 74px/1 "Barlow Condensed",sans-serif;color:var(--card);letter-spacing:-.01em}
.book .pub{font:500 14px/1.3 "Barlow Condensed",sans-serif;color:var(--ink-soft);letter-spacing:.06em}
.book .mini{display:flex;gap:6px}
.book .mini i{width:34px;aspect-ratio:5/7;border-radius:3px;background:var(--card);display:grid;place-items:center;font:700 13px/1 "Barlow Condensed",sans-serif;font-style:normal;color:#141414}
.book .mini i.red{color:var(--red)}

/* phone art */
.phone{width:min(290px,72vw);border-radius:40px;background:#050c09;padding:11px;box-shadow:0 0 0 2px #2b3a34,0 28px 60px rgba(0,0,0,.5)}
.phone img{display:block;width:100%;height:auto;border-radius:30px}
.screen{height:100%;border-radius:24px;overflow:hidden;background:#101915;display:flex;flex-direction:column;gap:6px;padding:10px}
.bar{display:flex;gap:6px}.bar i{flex:1;height:18px;border-radius:5px;background:#1f2a25}
.mfelt{flex:1;border-radius:14px 14px 46% 46% / 14px 14px 24% 24%;border:5px solid var(--rail);background:var(--felt);position:relative}
.mfelt .lbl{position:absolute;left:0;right:0;text-align:center;font:500 9px/1 "Barlow Condensed",sans-serif;letter-spacing:.1em;color:var(--print)}
.mc{position:absolute;width:30px;aspect-ratio:5/7;border-radius:3px;background:var(--card);font:700 11px/1 "Barlow Condensed",sans-serif;color:#141414;padding:3px}
.mc.red{color:var(--red)}.mc.back{background:repeating-linear-gradient(45deg,#7e1d24 0 3px,#9b2a31 3px 6px);box-shadow:inset 0 0 0 2px #fff}
.mtot{position:absolute;font:600 11px/1 "Barlow Condensed",sans-serif;color:#fff;background:rgba(0,0,0,.35);border-radius:9px;padding:2px 6px}
.mbtn{display:grid;grid-template-columns:2fr 1fr 1fr;gap:5px}.mbtn i{height:28px;border-radius:7px;background:#1f2a25}.mbtn i:first-child{background:#1D6B52}

/* responsible play */
.care{margin:96px auto 0;max-width:760px;padding:22px 26px;border-left:3px solid var(--print);background:rgba(255,255,255,.03);border-radius:0 10px 10px 0}
.care h2{font:600 20px/1.3 Barlow,sans-serif;margin:0 0 6px}
.care p{margin:0;color:var(--ink-soft)}

/* inner pages */
.page{max-width:760px;margin:24px auto 0;padding:0 24px}
.page h1{font:600 clamp(28px,4vw,40px)/1.2 Cinzel,Georgia,serif;margin:12px 0 8px}
.page .eff{color:var(--ink-soft);margin:0 0 28px}
.page h2{font:600 22px/1.3 Barlow,sans-serif;margin:34px 0 8px}
.page p,.page li{max-width:68ch}
.page ul{padding-left:1.2em}

footer{margin-top:110px;border-top:1px solid rgba(226,210,160,.16);padding:28px 0 40px;color:var(--ink-soft);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between}
footer nav ul{gap:18px}footer nav a{font-size:15px;color:var(--ink-soft)}

@media (max-width:760px){
  body{font-size:16px}
  .top{flex-direction:column;align-items:flex-start;gap:14px}
  nav ul{gap:18px}
  .table{aspect-ratio:1080/720;border-width:9px;border-top:0;margin:0 12px}
  .book{width:200px;padding:22px 18px 18px 26px}.book .t{font-size:23px}.book .n{font-size:56px}
  .phone{width:210px}
  .hand{top:58%}.tag{top:85%}.c{width:46px}.c .r{font-size:16px}.c .s{font-size:24px}
  .product,.product.flip{grid-template-columns:1fr;gap:34px;padding-top:64px}
  .product.flip .art{order:0}
  .intro{margin-top:30px}.intro p{font-size:17px}
}