/* ronanbuilds. Interior pages. Same moulded unit as the deck, opened up. */

:root{
  --shell-top:#E6E7EA; --shell:#C6C8CD; --shell-bot:#95979E;
  --key-top:#DCDDE1;   --key-bot:#AFB1B8;
  --knob-a:#F0F1F3;    --knob-b:#B6B8BE; --knob-c:#84868C;
  --groove:#6E7076;
  --ink:#23262B; --ink-soft:#5A5E66; --ink-faint:#7E838B;
  --led:#FF6B1A; --led-deep:#C24E0E;
  --lcd-bg:#1F2A22; --lcd-on:#A8EE7C; --lcd-dim:#5E8F52;
  --sans:Arial,Helvetica,"Helvetica Neue",sans-serif;
  --pix:'VT323',ui-monospace,monospace;
  --hair:rgba(0,0,0,.14);
  --lip:rgba(255,255,255,.75);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);
  font-size:16px;line-height:1.62;min-height:100dvh;
  background:#2A1A12;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--led);color:#fff}

/* the same plate as the deck, sitting behind everything */
body::before{content:"";position:fixed;inset:0;z-index:-2;
  background:url(plate-b.jpg) center/cover no-repeat}
body::after{content:"";position:fixed;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(28,18,12,.42),rgba(28,18,12,.66))}

.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* ================= top rail: back key + channel readout ================= */
.bar{position:sticky;top:0;z-index:30;
  background:repeating-linear-gradient(178deg,rgba(255,255,255,.1) 0 1px,rgba(0,0,0,.035) 1px 2px),
             linear-gradient(180deg,var(--shell-top) 0%,var(--shell) 40%,#B4B6BC 100%);
  box-shadow:inset 0 1px 0 #fff,0 3px 0 rgba(0,0,0,.18),0 8px 22px rgba(0,0,0,.42)}
.bar .mk{width:24px;height:24px;flex:none;opacity:.8;display:block}
.barin{max-width:860px;margin:0 auto;padding:11px 20px;display:flex;align-items:center;gap:12px}

.back{display:inline-flex;align-items:center;gap:7px;flex:none;cursor:pointer;
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  padding:10px 15px;border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.34) 47%,
             rgba(255,255,255,.04) 48%,rgba(255,255,255,.22) 100%),
             linear-gradient(180deg,var(--key-top),var(--key-bot));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(0,0,0,.26),
             0 2px 0 rgba(0,0,0,.2),0 3px 5px rgba(0,0,0,.3);
  transition:transform .07s,box-shadow .07s,color .14s}
.back:hover{color:var(--led-deep)}
.back:active{transform:translateY(2px);box-shadow:inset 1px 2px 4px rgba(0,0,0,.4)}

.strip{flex:1;min-width:0;position:relative;border-radius:4px;padding:7px 11px;background:var(--lcd-bg);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75),inset 0 0 0 2px #7C7E84,0 1px 0 rgba(255,255,255,.8);
  font-family:var(--pix);font-size:1.02rem;line-height:1;letter-spacing:.05em;color:var(--lcd-on);
  text-shadow:0 0 7px rgba(168,238,124,.6);
  display:flex;justify-content:space-between;gap:12px;white-space:nowrap;overflow:hidden}
.strip::after{content:"";position:absolute;inset:2px;border-radius:2px;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,transparent 1px 3px)}
.strip b{font-weight:400}
.strip span{color:var(--lcd-dim)}
@media(max-width:560px){.strip span{display:none}}

/* ================= page head ================= */
.head{padding:44px 0 26px}
@media(max-width:700px){.head{padding:30px 0 20px}}
.kicker{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--pix);font-size:1rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--led);margin-bottom:12px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--led);
  box-shadow:0 0 9px rgba(255,107,26,.95),inset 0 1px 0 rgba(255,255,255,.6)}
h1{font-size:clamp(2rem,5.2vw,3rem);font-weight:700;letter-spacing:-.022em;line-height:1.06;
   color:#F4F1EC;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.head p{margin-top:14px;color:rgba(244,241,236,.82);max-width:58ch;
        text-shadow:0 1px 6px rgba(0,0,0,.5)}

/* ================= moulded panel ================= */
.panel{
  position:relative;border-radius:14px;padding:26px 28px;margin-bottom:18px;
  background:repeating-linear-gradient(178deg,rgba(255,255,255,.09) 0 1px,rgba(0,0,0,.03) 1px 2px),
             linear-gradient(180deg,var(--shell-top) 0%,var(--shell) 7%,var(--shell) 91%,var(--shell-bot) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 rgba(255,255,255,.7),inset -1px 0 0 rgba(0,0,0,.2),
             inset 0 -3px 0 rgba(0,0,0,.2),0 18px 40px rgba(0,0,0,.5),0 4px 9px rgba(0,0,0,.35)}
.panel::before{content:"";position:absolute;inset:6px;border-radius:9px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.55)}
@media(max-width:620px){.panel{padding:20px 18px}}
.panel p{color:var(--ink-soft);margin-bottom:15px}
.panel p:last-child{margin-bottom:0}
.panel strong{color:var(--ink);font-weight:700}
.panel a:not(.row){color:var(--led-deep);font-weight:700;border-bottom:1px solid rgba(194,78,14,.4)}
.panel a:not(.row):hover{border-bottom-color:var(--led-deep)}
a.row{display:block;color:inherit;font-weight:400;border-bottom:none;text-decoration:none}

/* ---- long-form blocks: privacy, resume ---- */
.panel h2{font-family:var(--sans);font-size:.94rem;font-weight:700;letter-spacing:.04em;
  color:var(--ink);margin:0 0 9px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.panel h2+p{margin-top:0}
.panel ul{list-style:none;margin:0 0 15px;padding:0}
.panel ul li{position:relative;padding:0 0 0 19px;margin-bottom:8px;color:var(--ink-soft);font-size:.92rem}
.panel ul li::before{content:"";position:absolute;left:4px;top:.55em;width:5px;height:5px;
  background:var(--ink-faint);box-shadow:0 1px 0 rgba(255,255,255,.7)}
.panel ul.nope li::before{background:#9A5A3A}
.panel ul li b{color:var(--ink)}
.panel table{width:100%;border-collapse:collapse;font-size:.85rem;margin:0 0 6px}
.panel th{font-family:var(--pix);font-size:.98rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;color:var(--ink-faint);padding:0 12px 8px 0;font-weight:400;
  border-bottom:1px solid var(--hair);box-shadow:0 1px 0 var(--lip)}
.panel td{vertical-align:top;padding:11px 12px 11px 0;color:var(--ink-soft);
  border-bottom:1px solid var(--hair);box-shadow:0 1px 0 var(--lip)}
.panel td:first-child{color:var(--ink);font-weight:700;white-space:nowrap}
.panel tr:last-child td{border-bottom:none;box-shadow:none}
.callout{margin:16px 0 0;padding:14px 15px;border-radius:5px;font-size:.88rem;color:var(--ink-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(0,0,0,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px var(--hair)}
.callout b{color:var(--ink)}
@media(max-width:560px){
  .panel table,.panel tbody,.panel tr,.panel td{display:block;width:100%}
  .panel thead{display:none}
  .panel td{padding:3px 0;border:none;box-shadow:none}
  .panel td:first-child{white-space:normal;padding-top:12px}
  .panel tr{padding-bottom:10px;border-bottom:1px solid var(--hair);box-shadow:0 1px 0 var(--lip)}
}

/* quiet aside under a panel */
.aside{margin:-4px 0 26px;font-size:.82rem;color:rgba(244,241,236,.55);text-shadow:0 1px 5px rgba(0,0,0,.5)}
.aside a{color:rgba(244,241,236,.8);border-bottom:1px solid rgba(244,241,236,.3)}
.aside a:hover{color:var(--led);border-bottom-color:var(--led)}

/* engraved label */
.note{font-family:var(--pix);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 14px;text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* ================= entry rows, split by moulding grooves ================= */
.row{padding:17px 0;border-top:1px solid var(--hair);box-shadow:0 -1px 0 var(--lip) inset}
.row.first{border-top:none;box-shadow:none;padding-top:2px}
a.row:hover h3{color:var(--led-deep)}
a.row:hover .when{color:var(--led-deep)}
.rowtop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:6px}
.row h3{font-size:1rem;font-weight:700;letter-spacing:.01em;color:var(--ink);
        text-shadow:0 1px 0 rgba(255,255,255,.7);transition:color .15s}
.row .when{font-family:var(--pix);font-size:.95rem;letter-spacing:.05em;color:var(--ink-faint);
  white-space:nowrap;flex:none}
.row p{font-size:.94rem;color:var(--ink-soft);margin:0}
a.row{display:block;transition:padding-left .16s}
a.row:hover{padding-left:9px}
a.row:hover h3{color:var(--led-deep)}

/* ================= contact reasons ================= */
.reasons{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
@media(max-width:700px){.reasons{grid-template-columns:1fr}}
.reason{padding:16px 0;border-top:1px solid var(--hair);box-shadow:0 -1px 0 var(--lip) inset}
.reason h3{font-size:.97rem;font-weight:700;margin-bottom:4px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.reason p{font-size:.9rem;color:var(--ink-soft);margin:0}
.btn{margin-top:12px;cursor:pointer;border:none;
  font-family:var(--sans);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:10px 17px;border-radius:5px;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.34) 47%,
             rgba(255,255,255,.04) 48%,rgba(255,255,255,.22) 100%),
             linear-gradient(180deg,var(--key-top),var(--key-bot));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(0,0,0,.26),
             0 2px 0 rgba(0,0,0,.2),0 3px 5px rgba(0,0,0,.3);
  transition:transform .07s,box-shadow .07s,color .14s}
.btn:hover{color:var(--led-deep)}
.btn:active{transform:translateY(2px);box-shadow:inset 1px 2px 4px rgba(0,0,0,.4)}

/* ================= embeds and outbound tiles ================= */
.embed{border-radius:6px;overflow:hidden;margin-bottom:16px;background:#12161F;
  box-shadow:inset 0 0 0 2px #7C7E84,inset 0 3px 7px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.7)}
.embed iframe{display:block;width:100%;border:0}

.outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:9px}
.out{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 15px;border-radius:5px;
  background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.3) 47%,
             rgba(255,255,255,.03) 48%,rgba(255,255,255,.2) 100%),
             linear-gradient(180deg,var(--key-top),var(--key-bot));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(0,0,0,.26),
             0 2px 0 rgba(0,0,0,.2),0 3px 5px rgba(0,0,0,.28);
  transition:transform .07s,box-shadow .07s,color .14s}
.out:hover{color:var(--led-deep)}
.out:active{transform:translateY(2px);box-shadow:inset 1px 2px 4px rgba(0,0,0,.4)}
.out b{font-size:.92rem;font-weight:700;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.out em{font-style:normal;font-family:var(--pix);font-size:.92rem;color:var(--ink-faint)}
/* a dead control, greyed and unpressable */
.out.soon{opacity:.45;pointer-events:none;
  background:linear-gradient(180deg,#C0C2C8,#A5A7AD);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35),inset 0 -1px 0 rgba(255,255,255,.4)}

/* ================= foot ================= */
footer{margin-top:22px;padding:18px 0 40px}
.foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:13px;
  font-size:.62rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(244,241,236,.55);text-shadow:0 1px 4px rgba(0,0,0,.6)}
.foot a:hover{color:var(--led)}
.foot span{display:flex;gap:17px;flex-wrap:wrap}

/* ================= modal ================= */
.backdrop{position:fixed;inset:0;z-index:200;background:rgba(18,11,7,.72);backdrop-filter:blur(5px);
  display:flex;align-items:center;justify-content:center;padding:18px;
  opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.backdrop.open{opacity:1;visibility:visible}
.modal{position:relative;width:100%;max-width:470px;max-height:88vh;overflow-y:auto;
  padding:26px 24px 22px;border-radius:14px;
  background:repeating-linear-gradient(178deg,rgba(255,255,255,.09) 0 1px,rgba(0,0,0,.03) 1px 2px),
             linear-gradient(180deg,var(--shell-top) 0%,var(--shell) 7%,var(--shell) 92%,var(--shell-bot) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(0,0,0,.2),0 30px 70px rgba(0,0,0,.65)}
.mx{position:absolute;top:11px;right:12px;width:26px;height:26px;border:none;cursor:pointer;border-radius:4px;
  color:var(--ink-soft);font-size:16px;line-height:1;
  background:linear-gradient(180deg,#DCDDE1,#AFB1B8);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.9),inset -1px -1px 0 rgba(0,0,0,.24),0 2px 3px rgba(0,0,0,.28)}
.mx:hover{color:var(--led-deep)}
.mx:active{transform:translateY(1px);box-shadow:inset 1px 2px 3px rgba(0,0,0,.4)}
.modal h3{font-size:1.2rem;font-weight:700;margin-bottom:5px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.mlede{font-size:.88rem;color:var(--ink-soft);margin-bottom:18px}
.field{margin-bottom:12px}
.field label{display:block;font-family:var(--pix);font-size:.92rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--sans);font-size:.92rem;color:var(--ink);
  padding:10px 11px;border-radius:4px;border:none;background:#EFF0F2;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.18)}
.field textarea{min-height:88px;resize:vertical;line-height:1.55}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.3),inset 0 0 0 2px var(--led)}
.field input::placeholder,.field textarea::placeholder{color:#8E9299}
.msub{width:100%;margin-top:5px;cursor:pointer;border:none;border-radius:5px;padding:13px;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:#2A1305;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 47%,
             rgba(255,255,255,0) 48%,rgba(255,255,255,.14) 100%),
             linear-gradient(180deg,#FFA45C,var(--led));
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.7),inset -1px -1px 0 rgba(0,0,0,.2),
             0 2px 0 rgba(0,0,0,.25),0 4px 10px rgba(255,107,26,.3)}
.msub:active{transform:translateY(2px);box-shadow:inset 1px 2px 4px rgba(0,0,0,.35)}
.msub:disabled{opacity:.5;cursor:wait}
.mfine{margin-top:11px;font-family:var(--pix);font-size:.88rem;letter-spacing:.06em;
  color:var(--ink-faint);text-align:center}
.mdone{text-align:center;padding:10px 0}
.mdone h3{margin-bottom:5px}
.mdone p{font-size:.9rem;color:var(--ink-soft)}

a:focus-visible,button:focus-visible{outline:2px solid var(--led);outline-offset:3px;border-radius:3px}

.rise{opacity:0;transform:translateY(9px);transition:opacity .45s ease,transform .45s ease}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rise{opacity:1!important;transform:none!important;transition:none}
  .back,.btn,.out,a.row,.mx,.msub{transition:none}
  html{scroll-behavior:auto}
}