/* Porchward livery: light garden stone on the Wreckanics workshop chassis. */
:root {
  color-scheme: light;
  --void: #e4e6df;
  --field: #edf0e9;
  --plate: #f5f3eb;
  --plate-hi: #fffdf7;
  --edge: #91a49b;
  --steel: #6d7e76;
  --steel-light: #27463d;
  --ink: #102a23;
  --text: #29453d;
  --text-dim: #536a62;
  --head: #183c32;
  --cyan: #267660;
  --copper: #b9522e;
  --copper-light: #cf6a42;
  --amber: #b9522e;
  --acc: #1f735d;
  --acc-dim: rgba(31, 115, 93, .52);
  --acc-glow: rgba(31, 115, 93, .12);
  --terracotta: #b9522e;
  --terracotta-dim: rgba(185, 82, 46, .18);
}

body {
  background: var(--void);
  color: var(--text);
}

body::after { opacity: .018; mix-blend-mode: multiply; }

::selection { color: #f8f6ee; background: rgba(31, 115, 93, .86); }

html { scrollbar-color: #8a9c93 #e6e7e0; }
::-webkit-scrollbar-track { border-left-color: #c6cbc4; background: #e6e7e0; }
::-webkit-scrollbar-thumb {
  border-color: #e6e7e0;
  background: linear-gradient(90deg, #a5b0aa, #82958b);
}
::-webkit-scrollbar-thumb:hover { background: #71877d; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 50%;
  z-index: 120;
  padding: 10px 16px;
  color: #f9f7ef;
  background: var(--acc);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 1px;
  transform: translate(-50%, -180%);
  transition: transform .16s ease-out;
}

.skip-link:focus { transform: translate(-50%, 0); }

.sc {
  background: radial-gradient(circle at 34% 28%, #f9f8f1, #9aa8a1 55%, #60736a);
  box-shadow: 0 1px 2px rgba(35, 61, 51, .28), inset 0 1px 1px rgba(255, 255, 255, .9);
}

.sc::after {
  background: #566a61;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .72);
}

.mplate {
  border-color: #9aa89f;
  background: linear-gradient(180deg, var(--plate-hi), var(--plate) 58%, #e5e7df);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -3px 5px rgba(41, 69, 58, .1),
    0 14px 30px rgba(45, 70, 59, .14);
}

.mplate::before { opacity: .018; mix-blend-mode: multiply; }

.stamp { color: #687b72; text-shadow: 0 1px 0 rgba(255, 255, 255, .9); }

.vents {
  background: repeating-linear-gradient(90deg, rgba(48, 76, 65, .62) 0 5px, transparent 5px 9px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

header.rail {
  background: linear-gradient(180deg, #fbfaf4, #efefe8 80%, #e0e3dc);
  border-bottom-color: #aeb9b2;
  box-shadow: inset 0 1px 0 #fff, 0 5px 16px rgba(33, 61, 50, .14);
}

.brand img.mk,
footer .fbrand img { filter: drop-shadow(0 2px 2px rgba(35, 61, 51, .24)); }

.brand b,
footer .fbrand b {
  color: var(--head);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}

.brand span,
footer .fbrand span { color: #71837a; }

.brand:hover b { color: var(--acc); }

nav a { color: #566b62; }
header.rail nav a::before { background: #8da097; }
nav a[aria-current="page"] { color: var(--head); border-color: #7e9288; }

.lamp {
  color: var(--text-dim);
  border-color: #a9b5ae;
  background: linear-gradient(180deg, #f8f7f0, #e5e8e1);
  box-shadow: inset 0 1px 3px rgba(37, 66, 54, .12), inset 0 -1px 0 rgba(255, 255, 255, .9);
}

.lamp.garden { color: var(--acc); }
.lamp.garden i {
  background: radial-gradient(circle at 35% 30%, #e4fff3, #4c9b82 45%, #195642 90%);
  box-shadow: 0 0 0 3px rgba(31, 115, 93, .1), inset 0 -1px 2px rgba(10, 61, 46, .35);
}

.dossier {
  min-height: calc(100dvh - 60px);
  padding: clamp(52px, 7vw, 78px) 0 88px;
  background:
    radial-gradient(760px 520px at 78% 30%, rgba(31, 115, 93, .12), transparent 72%),
    radial-gradient(560px 440px at 10% 82%, rgba(185, 82, 46, .08), transparent 74%),
    repeating-linear-gradient(0deg, transparent 0 287px, rgba(41, 69, 57, .1) 287px 288px, rgba(255, 255, 255, .65) 288px 289px, transparent 289px 292px),
    repeating-linear-gradient(90deg, transparent 0 345px, rgba(41, 69, 57, .08) 345px 346px, rgba(255, 255, 255, .55) 346px 347px, transparent 347px 350px),
    linear-gradient(180deg, #f4f4ed, var(--void) 88%);
  box-shadow: inset 0 1px 0 #fff;
}

.dossier::before {
  position: absolute;
  inset: 0;
  background: var(--noise);
  content: "";
  opacity: .018;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.dossier::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 10px;
  border-top: 1px solid rgba(59, 87, 75, .2);
  background:
    radial-gradient(circle 2.6px at 7px 5px, #a0aea6 0 1.6px, #f2f2eb 1.8px 2.6px, transparent 3px) 22px 0 / 96px 10px repeat-x,
    linear-gradient(180deg, #d4dad4, #bdc9c1 70%, #aab9b0);
  box-shadow: 0 -4px 12px rgba(31, 63, 50, .1);
  content: "";
}

.dossier .wrap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, .75fr);
  align-items: center;
  gap: clamp(40px, 7vw, 80px);
}

.dossier-copy { min-width: 0; }

.doss-id {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.nameplate {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
  max-width: 700px;
  padding: 20px 34px 20px 20px;
  border: 1px solid #95a49b;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), transparent 42%),
    linear-gradient(180deg, #f9f8f1, #ecece4 64%, #dfe3dc);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 5px rgba(52, 80, 68, .08),
    inset 0 0 0 6px rgba(255, 255, 255, .72),
    inset 0 -4px 6px rgba(41, 69, 57, .1),
    0 6px 0 rgba(70, 97, 85, .18),
    0 24px 40px rgba(44, 72, 60, .16);
}

.nameplate::before {
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 12px;
  width: 3px;
  background: var(--terracotta);
  box-shadow: 0 0 14px var(--terracotta-dim);
  content: "";
}

.game-mark {
  width: 104px;
  border: 1px solid rgba(31, 115, 93, .28);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #edf1ea);
  filter: drop-shadow(0 7px 12px rgba(49, 76, 65, .2));
}

.nameplate h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-size: clamp(38px, 6vw, 68px);
  line-height: .94;
  letter-spacing: 1px;
}

.nameplate h1 strong {
  color: transparent;
  background: linear-gradient(180deg, #316c5c 4%, #1c5547 45%, #123b31 92%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 2px 0 rgba(255, 255, 255, .72));
}

.doss-class {
  margin-top: 26px;
  color: #61766c;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 4px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .82);
}

.dossier p.lead {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.58;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .86);
}

.rig .arm {
  border-color: #72877c;
  background: linear-gradient(180deg, #dce2dc, #aebdb4 48%, #899d92);
  box-shadow: inset 0 1px 0 #fff, 0 5px 12px rgba(33, 64, 51, .18);
}

.rig .arm i {
  border-color: #71867b;
  background: linear-gradient(180deg, #f5f4ed, #9aa99f);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(28, 56, 44, .2);
}

.phone {
  border-color: #6f8378;
  background: linear-gradient(145deg, #faf9f2, #cbd4ce 42%, #eef0e9 78%, #a5b5ac);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 4px rgba(35, 65, 52, .2),
    0 30px 60px rgba(36, 66, 54, .2);
}

.phone::before { border-color: rgba(63, 92, 79, .24); }
.phone .scr { background: #15372e; }

.sec-head h2 {
  color: var(--head);
  text-shadow: 0 1px 0 #fff;
}

.sec-head .scribe {
  background:
    repeating-linear-gradient(90deg, rgba(69, 97, 84, .4) 0 1px, transparent 1px 16px) 0 100% / 100% 5px no-repeat,
    linear-gradient(90deg, rgba(69, 97, 84, .46), transparent) 0 100% / 100% 1px no-repeat;
}

#loop { padding-top: 96px; }

.linkage {
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.link-step {
  position: relative;
  display: flex;
  min-width: 172px;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 22px 24px 19px 30px;
  border: 1px solid #9ca9a1;
  background: linear-gradient(180deg, var(--plate-hi), var(--plate) 64%, #e4e7df);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 5px rgba(46, 72, 61, .1);
}

.link-step b {
  color: var(--head);
  font-size: 20px;
  letter-spacing: 2.4px;
  text-shadow: 0 1px 0 #fff;
}

.link-step small {
  color: #687c72;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 1.5px;
}

.rail-slot {
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 13px;
  width: 4px;
  background: linear-gradient(180deg, #7ca793, var(--acc), #315f50);
  box-shadow: inset 1px 0 rgba(255, 255, 255, .5), 0 0 8px var(--acc-glow);
}

.rod {
  position: relative;
  align-self: center;
  width: 34px;
  height: 9px;
  flex: none;
  background: linear-gradient(180deg, #c7d0ca, #82978c);
  box-shadow: inset 0 1px 0 #fff, 0 2px 3px rgba(39, 66, 55, .2);
}

#loop .note {
  max-width: 62ch;
  margin: 42px auto 0;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.65;
  text-align: center;
}

#build { background: linear-gradient(180deg, var(--void), #eef0e9 28%, #eef0e9 72%, var(--void)); }
#build .sheet { padding: 44px 48px; }
#build .sheet .vents { top: -7px; right: 54px; }

#build dl {
  display: grid;
  grid-template-columns: auto minmax(140px, 1fr) auto minmax(160px, 1fr);
  gap: 18px 22px;
}

#build dt {
  align-self: center;
  color: #6a7c73;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
}

#build dd {
  align-self: center;
  color: var(--text);
  font-size: 15px;
  letter-spacing: .6px;
}

.ports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 30px);
  align-items: start;
}

.port .frame {
  position: relative;
  padding: 9px;
  border: 1px solid #8ea097;
  background: linear-gradient(180deg, #faf9f3, #dfe4de 72%, #c8d1cb);
  box-shadow: inset 0 1px 0 #fff, 0 16px 32px rgba(42, 69, 57, .16);
}

.port .frame img {
  width: 100%;
  aspect-ratio: 430 / 932;
  border: 1px solid #83978c;
  object-fit: cover;
}

.port .frame .sc { width: 9px; height: 9px; }
.port .frame .sc.tl { top: 4px; left: 4px; }
.port .frame .sc.tr { top: 4px; right: 4px; }
.port .frame .sc.bl { bottom: 4px; left: 4px; }
.port .frame .sc.br { right: 4px; bottom: 4px; }

.port figcaption {
  margin-top: 14px;
  color: #62766c;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.6px;
  line-height: 1.5;
  text-align: center;
}

.return { padding: 84px 0 108px; text-align: center; }

.latchlink,
.papers .latchlink {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 15px 30px;
  border: 1px solid #1e5f4d;
  color: #f8f6ef;
  background: linear-gradient(180deg, #337864, #1c5b4a 62%, #16483c);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 9px, 100% calc(100% - 9px), calc(100% - 9px) 100%, 9px 100%, 0 calc(100% - 9px), 0 9px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -4px 6px rgba(13, 65, 49, .22);
  font-size: 16px;
  letter-spacing: 2.5px;
  transition: transform .1s ease-out, filter .18s ease-out, box-shadow .18s ease-out;
}

.latchlink .tri { border-right-color: #f7d5c5; }
.papers .latchlink .tri { border-left-color: #f7d5c5; }

.latchlink:hover,
.papers .latchlink:hover {
  filter: brightness(1.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -4px 6px rgba(13, 65, 49, .22), 0 0 0 2px var(--acc-dim);
}

.contact-latch {
  display: flex;
  width: 100%;
  min-height: 58px;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid;
  border-color: #a0aea6;
  background: #eff0e9;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  text-decoration: none;
  transition: border-color .16s ease-out, background-color .16s ease-out;
}

.contact-latch span {
  color: #6a7e74;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 1.4px;
}

.contact-latch strong {
  color: var(--head);
  font-size: 13px;
  letter-spacing: .4px;
  overflow-wrap: anywhere;
}
.contact-latch:hover { border-color: var(--acc); background: #f8f7f0; }

.papers { background: linear-gradient(180deg, #eff0e9, #e1e4dd); }
.paperhead h1 { color: var(--head); text-shadow: 0 1px 0 #fff; }
.clause { border-bottom-color: #c3cbc5; box-shadow: inset 0 -1px 0 #fff; }
.clause h2 { color: var(--head); text-shadow: 0 1px 0 #fff; }
.clause h2 .cn { color: #6c7e75; }
.clause p,
.clause li { color: var(--text-dim); text-shadow: 0 1px 0 #fff; }
.clause li::before { background: #7e9187; }

footer.shop {
  border-top-color: #9eaaa3;
  background: linear-gradient(180deg, #e8eae3, #d9ded8 58%, #cbd4ce);
  box-shadow: inset 0 1px 0 #fff;
}

footer.shop::before { opacity: .018; mix-blend-mode: multiply; }
footer .fcell + .fcell { border-left-color: #aab5ae; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .72); }
footer .fid p { color: #586d63; text-shadow: 0 1px 0 #fff; }
footer .fcell h3 { color: #64786e; text-shadow: 0 1px 0 #fff; }
footer .fcell h3::after {
  background:
    repeating-linear-gradient(90deg, rgba(73, 101, 88, .4) 0 1px, transparent 1px 16px) 0 100% / 100% 5px no-repeat,
    linear-gradient(90deg, rgba(73, 101, 88, .45), rgba(73, 101, 88, .1)) 0 100% / 100% 1px no-repeat;
}
footer .findex li { border-bottom-color: #b4beb8; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .7); }
footer .flink { color: #52685e; }
footer .flink::before { background: #889b91; }
footer .flink .u { color: #71857b; }
footer .flink[aria-current="page"] { color: var(--head); }
footer .flegal a { color: #60756a; }
footer .flegal a[aria-current="page"] { color: var(--head); }
footer .flegal i { background: #7c8f85; }

footer .stampbar {
  border-top-color: #a7b2ab;
  background: linear-gradient(180deg, #d1d8d2, #c2ccc5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

footer .stampbar .mark { color: #687b71; }
footer a.totop .tri { border-bottom-color: var(--terracotta); }

.rv { opacity: 1; transform: none; }
.js .rv:not(.in) { opacity: 0; transform: translateY(18px); }
.js .rv.in { opacity: 1; transform: none; }

@media (max-width: 960px) {
  .dossier .wrap { grid-template-columns: 1fr; }
  .dossier-copy { max-width: 760px; }
  .hero-rig { width: min(300px, 74vw); }
  .linkage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .rod { display: none; }
  .link-step { min-width: 0; }
  #build dl { grid-template-columns: auto minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .dossier { min-height: 0; }
  .ports { grid-template-columns: 1fr; max-width: 330px; margin: 0 auto; gap: 42px; }
}

@media (max-width: 620px) {
  header.rail { height: 64px; }
  header.rail .brand span { display: none; }
  header.rail nav { gap: 12px; }
  header.rail nav a { min-height: 44px; font-size: 10px; letter-spacing: 1px; }
  .dossier { padding: 24px 0 38px; }
  .dossier .wrap { gap: 24px; }
  .doss-id { align-items: center; flex-direction: row; gap: 10px; margin-bottom: 14px; }
  .doss-id .stamp { font-size: 9px; letter-spacing: 1.8px; }
  .doss-id .lamp { padding: 6px 9px; font-size: 9px; letter-spacing: 1.5px; }
  .nameplate { grid-template-columns: 58px minmax(0, 1fr); padding: 12px 16px 12px 14px; gap: 11px; }
  .game-mark { width: 58px; border-radius: 10px; }
  .nameplate h1 { font-size: clamp(28px, 10.5vw, 42px); }
  .doss-class { margin-top: 16px; font-size: 9px; letter-spacing: 2px; }
  .dossier p.lead { margin-top: 10px; font-size: 15px; line-height: 1.4; }
  .hero-rig { width: min(220px, 64vw); }
  .hero-rig .phone .scr { height: 390px; }
  .hero-rig .phone .scr img { height: 100%; object-fit: cover; object-position: top; }
  .linkage { grid-template-columns: 1fr; }
  .link-step { min-height: 82px; }
  #build .sheet { padding: 34px 24px; }
  #build dl { grid-template-columns: 1fr; gap: 7px; }
  #build dd { margin-bottom: 14px; }
  #build dd:last-child { margin-bottom: 0; }
}

@media (max-width: 360px) {
  .nameplate {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
    padding: 10px 10px 10px 12px;
  }

  .game-mark { width: 46px; border-radius: 8px; }
  .nameplate h1 { font-size: clamp(24px, 8.3vw, 30px); letter-spacing: 0; }
  .doss-id .stamp { letter-spacing: 1.25px; }

  .legal-page header.rail .brand b,
  .legal-page header.rail .brand span { display: none; }

  .legal-page header.rail .brand { gap: 0; }
  .legal-page header.rail nav { gap: 4px; }

  .legal-page header.rail nav a {
    padding: 0 3px;
    font-size: 8px;
    letter-spacing: .65px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv, .js .rv:not(.in), .js .rv.in { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .nameplate, .link-step, .port .frame, .latchlink, .contact-latch { border: 1px solid CanvasText; }
  .nameplate::before, .rail-slot { background: Highlight; }
}