/* DynaTAC 8000X — 1984 magazine advertisement
   One heavy keyline frame. Serif display across the top.
   Dense justified columns. Phone floats. Cream paper, black ink,
   color only in the photographs. No section dividers, no boxes,
   no rounded corners. The frame is the only border on the page. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --paper: #FAF9F6;
  --paper-2: #e8e1cf;
  --ink: #1a1612;
  --ink-soft: #423b30;
  --rule: #1a1612;
}

html { -webkit-text-size-adjust: 100%; background: #FAF9F6; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #FAF9F6;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.42;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- the page = one heavy keyline frame ---------- */
.page {
  max-width: 1100px;
  margin: 26px auto;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0 2px, transparent 2px 4px),
    var(--paper);
  border: 7px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  padding: clamp(22px, 4vw, 52px);
}

/* utility families used sparingly */
.sans { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

/* ---------- masthead row ---------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 12px;
}
.masthead .mark { display: flex; align-items: center; gap: 12px; }
.masthead .mark img { width: 34px; height: auto; }
.masthead .mark .word {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.masthead .meta {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: right;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- headline across the top ---------- */
.headline {
  margin: 26px 0 6px;
}
.headline h1 {
  margin: 0;
  font-weight: 400;
  font-size: clamp(40px, 8.2vw, 104px);
  line-height: 0.99;
  letter-spacing: -0.05em;
  text-indent: -0.04em; /* optical hang */
}
.headline .sub {
  margin: 14px 0 0;
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 24px);
  color: var(--ink-soft);
  max-width: 40ch;
    letter-spacing: -0.01em;
}


/* ---------- hero band: floating phone + lead columns ---------- */
.lede-band {
  display: grid;
  grid-template-columns: 1fr 0.86fr;
  gap: clamp(20px, 3.5vw, 48px);
  align-items: start;
  margin-top: 8px;
  padding-top: 22px;
}
.lede-cols {
  column-count: 2;
  column-gap: 26px;
  column-rule: 1px solid rgba(26,22,18,0.22);
  text-align: justify;
  hyphens: auto;
  font-size: 14.5px;
  line-height: 1.5;
}
.lede-cols p { margin: 0 0 0.85em; }
.lede-cols .drop::first-letter {
  initial-letter: 3;
  -webkit-initial-letter: 3;
  font-weight: 700;
  margin-right: 8px;
}
/* fallback drop cap for browsers without initial-letter */
@supports not (initial-letter: 3) {
  .lede-cols .drop::first-letter {
    float: left;
    font-size: 3.4em;
    line-height: 0.78;
    padding: 4px 8px 0 0;
    font-weight: 700;
  }
}

.hero-phone {
  position: relative;
  text-align: center;
}
.hero-phone img {
  width: auto;
  max-height: clamp(300px, 46vw, 540px);
  margin: 0 auto;
}
.hero-phone .tag {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 14px;
}

/* ---------- price callout — handwritten-angle like the NB ad ---------- */
.price-call {
  margin: 30px 0 4px;
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  padding: 20px 0;
  display: flex;

  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  text-align: center;
}
.price-call .big {
  font-size: clamp(34px, 6vw, 60px);
  line-height: 1;
  font-weight: 400;
      align-items: baseline;
}
.price-call .small {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: 30ch;
  text-align: left;
    align-items: center;
}

/* ---------- editorial feature blocks (photo + columns) ---------- */
.feature {
  margin-top: clamp(30px, 5vw, 56px);
}
.feature .kicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.feature h2 {
  margin: 0 0 14px;
  font-weight: 400;
  font-size: clamp(26px, 4vw, 44px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
.feature-grid {
  display: grid;
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}
.feature-grid.left  { grid-template-columns: 1.05fr 0.95fr; }
.feature-grid.right { grid-template-columns: 0.95fr 1.05fr; }
.feature-grid .photo {
  border: 3px solid var(--ink); /* photos are framed like printed plates — the ONE place a border belongs */
}
.feature-grid .photo img { width: 100%; }
.feature-grid .photo .cap {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 5px 8px;
}
.feature-grid.right .photo { order: 2; }
.feature-grid.right .copy  { order: 1; }

.body-cols {
  column-count: 2;
  column-gap: 24px;
  text-align: justify;
  hyphens: auto;
  font-size: 14px;
  line-height: 1.5;
}
.body-cols p { margin: 0 0 0.85em; }
.body-cols p:last-child { margin-bottom: 0; }


/* ---------- specifications: typeset like a printed table, no cell borders ---------- */
.specs { border-top: 3px solid var(--ink); padding-top: 60px; margin-top: clamp(34px, 5vw, 60px); }
.specs-grid {
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  gap: clamp(20px, 3.5vw, 46px);
  align-items: center;

}
.specs-figure { text-align: center; }
.specs-figure img { max-height: 460px; width: auto; margin: 0 auto; }
.specs h2 {
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 38px);
  margin: 0 0 4px;
}
.specs .kicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
.spec-list { margin: 14px 0 0; }
.spec-list dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 14px;
  align-items: baseline;
}
.spec-list dt {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 7px 0;
}
.spec-list dd {
  margin: 0; padding: 7px 0;
  font-size: 14.5px;
  /* dotted leader between term and value — like a printed catalog */
  position: relative;
}
.spec-list dt, .spec-list dd { border-top: 1px dotted rgba(26,22,18,0.4); }
.spec-list dt:first-of-type, .spec-list dd:first-of-type { border-top: 0; }
.spec-foot {
  margin-top: 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-style: italic;
}
.keypad-note {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-soft); margin-top: 14px;
}
.keypad-note b { color: var(--ink); }

/* ---------- closing line + colophon ---------- */
.coda {
  margin-top: clamp(34px, 5vw, 60px);
  border-top: 3px solid var(--ink);
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
}
.coda h2 {
  font-weight: 400;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.0;
  margin: 0;
  max-width: 18ch;
}
.coda .order {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.55;
  color: var(--ink-soft);
}
.coda .order a {
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
  padding-bottom: 2px;
}
.coda .order a:hover { color: var(--ink-soft); border-color: var(--ink-soft); }

.colophon {
  margin-top: 26px;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.colophon .mark { display: flex; align-items: center; gap: 8px; }
.colophon .mark img { width: 20px; }
.colophon .fine { max-width: 64ch; text-align: right; text-transform: none; letter-spacing: 0.02em; line-height: 1.5; }
.colophon a { text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .lede-band { grid-template-columns: 1fr; }
  .hero-phone { order: -1; margin-bottom: 8px; }
  .feature-grid.left, .feature-grid.right { grid-template-columns: 1fr; }
  .feature-grid.right .photo { order: -1; }
  .feature-grid.right .copy  { order: 0; }
  .specs-grid { grid-template-columns: 1fr; }
  .specs-figure { order: -1; }
  .coda { grid-template-columns: 1fr; }
  .coda .order { text-align: left; }
  .colophon { flex-direction: column; align-items: flex-start; }
  .colophon .fine { text-align: left; }
}

@media (max-width: 560px) {
  .page { margin: 12px; padding: 18px; border-width: 5px; }
  .masthead .meta { display: none; }
  .lede-cols { column-count: 1; }
  .body-cols { column-count: 1; }
  .headline h1 { line-height: 0.96; }
  .price-call { gap: 8px; }
  .price-call .small { text-align: center; }
}