/* theadipost.com — apple.com as it stood in 2001, kept whole: the Aqua bar of
   pinstriped tabs with one tab lit blue and the strip of section links under
   it (grey on the home page, .Mac blue on product pages); the datestamp and
   the Hot News Headlines bar; a black hero with the product lit against it;
   a row of four white tiles; product pages with the device on white, four
   small objects with a caption each, the flat grey pill of section links,
   the story in short full-width bands with the device in its frame, and Tech
   Specs as a plain table; a footer of pipe-separated links over the copyright.
   Two faces, the two Apple used: Apple Garamond for every headline (EB Garamond,
   the nearest open cut, served from fonts/ so nothing loads from anyone else)
   and Lucida Grande for everything else. No frameworks; one stylesheet. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/EBGaramond.woff2) format("woff2"); }
:root { --paper: #fff; --ink: #222; --muted: #6c6c6c; --faint: #9a9a9a; --rule: #cfcfcf; --link: #0a5fb4; --accent: #2d3c7e;
  /* Apple Garamond, the 1984–2002 wordmark face ("Power to burn."), is not a font
     anyone can serve; EB Garamond is the nearest open cut, set light, tight and large
     the way Apple set it */
  --display: "EB Garamond", "Apple Garamond", Garamond, Georgia, serif; }
* { box-sizing: border-box; }
html { background: #fff; }
body { margin: 0; color: var(--ink); background: #fff; font: 13px/1.55 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* the scrollbar, in Aqua: a grooved trough, a blue gel thumb with a gloss along its
   length, and an arrow button at each end. WebKit and Blink draw all of it; Firefox
   takes the two colours through scrollbar-color and nothing else; iOS keeps its own
   overlay bars, which is right. */
html { scrollbar-color: #4b93e6 #e8e8e8; }
::-webkit-scrollbar { width: 15px; height: 15px; }
::-webkit-scrollbar-track { background: linear-gradient(90deg, #e2e2e2, #f0f0f0 35%, #ebebeb); border-left: 1px solid #b4b4b4; box-shadow: inset 1px 0 2px rgba(0,0,0,.10); }
::-webkit-scrollbar-track:horizontal { background: linear-gradient(#e2e2e2, #f0f0f0 35%, #ebebeb); border-left: 0; border-top: 1px solid #b4b4b4; box-shadow: inset 0 1px 2px rgba(0,0,0,.10); }
::-webkit-scrollbar-thumb {
  min-height: 34px; border: 1px solid #2c5f9e; border-radius: 8px; background-clip: padding-box;
  background: linear-gradient(90deg, #b3d6f9, #6aa6ec 42%, #2f7fdf 52%, #4e96e8 78%, #7cb2f0);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -1px 0 rgba(0,0,0,.12);
}
::-webkit-scrollbar-thumb:horizontal { min-height: 0; min-width: 34px; background: linear-gradient(#b3d6f9, #6aa6ec 42%, #2f7fdf 52%, #4e96e8 78%, #7cb2f0); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #c4e0fb, #7cb2f0 42%, #3f8ce4 52%, #5fa4ee 78%, #8dbdf3); }
::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(#c4e0fb, #7cb2f0 42%, #3f8ce4 52%, #5fa4ee 78%, #8dbdf3); }
::-webkit-scrollbar-button { height: 15px; width: 15px; background: linear-gradient(90deg, #f4f4f4, #e6e6e6); border: 1px solid #b4b4b4; background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-button:hover { background-color: #dcdcdc; }
::-webkit-scrollbar-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7'%3E%3Cpath d='M4.5 1 8 5.5H1z' fill='%23204d8a'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='7'%3E%3Cpath d='M4.5 6 1 1.5h7z' fill='%23204d8a'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:horizontal { background: linear-gradient(#f4f4f4, #e6e6e6); background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-corner { background: #ebebeb; }

.wrap { width: 1080px; max-width: calc(100% - 32px); margin: 0 auto; }

/* ---- the tab bar: pinstripes edge to edge, the tabs sitting on the strip's top edge ---- */
.aqua { background: repeating-linear-gradient(180deg, #ffffff 0 2px, #ececec 2px 4px); height: 46px; }
.tabs { display: flex; justify-content: center; align-items: flex-end; height: 46px; }
.tabs a {
  min-width: 134px; height: 34px; display: flex; align-items: center; justify-content: center; padding: 0 16px; margin-right: -1px;
  color: #1a1a1a; font-size: 15px; text-shadow: 0 1px 0 rgba(255,255,255,.9); text-decoration: none; white-space: nowrap;
  background: linear-gradient(#ffffff, #f2f2f2 45%, #e4e4e4 55%, #ececec); border: 1px solid #9c9c9c; border-bottom: 0; border-radius: 7px 7px 0 0;
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 rgba(255,255,255,.6);
}
/* the first tab is the mark, "A." set in Apple Garamond, the way apple.com's first tab
   was the Apple itself; it links home and is never lit */
.tabs a.logo { min-width: 84px; padding: 0 20px 3px; font: 400 26px/1 var(--display); letter-spacing: -.03em; color: #1f6fd6; text-shadow: 0 1px 0 rgba(255,255,255,.95); }
.tabs a:hover { background: linear-gradient(#fff, #f6f6f6 45%, #eaeaea 55%, #f0f0f0); }
.tabs a[aria-current] { color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.5); background: linear-gradient(#a5cdf7, #5d9ee9 45%, #3b86e0 55%, #4b93e6); border-color: #2c5f9e; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
/* the section strip */
.strip { height: 22px; border-top: 1px solid #a9a9a9; border-bottom: 1px solid #c6c6c6; background: linear-gradient(#f4f4f4, #dcdcdc); }
.strip.mac { background: linear-gradient(#cfe4fb, #a9cff7 55%, #9dc8f5); border-top-color: #7aa9dc; border-bottom-color: #6b9cd3; }
.strip .wrap { display: flex; justify-content: center; align-items: stretch; height: 100%; gap: 0; }
.strip a { color: #1c1c1c; font-size: 12px; padding: 0 14px; display: flex; align-items: center; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.strip a:hover { text-decoration: none; background: rgba(0,0,0,.06); }
.strip a[aria-current] { background: linear-gradient(#b7d6fa, #8dbdf3); color: #0b1f3a; }
.strip.mac a[aria-current] { background: linear-gradient(#6aa4e9, #4489dd); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.strip a.right { margin-left: auto; }

/* ================= the page ================= */
.page { width: 1000px; max-width: calc(100% - 32px); margin: 0 auto; }
/* the headline voice: Apple Garamond, large, light, tight, a lot of white; a second
   line in grey where a headline has two voices (roman, never italic) */
.hd { font-family: var(--display); font-weight: 400; letter-spacing: -.03em; line-height: .98; color: #111; }
.hd span { color: #7a7a7a; }

/* the datestamp and the Hot News bar */
.stamp { text-align: right; color: #777; font-size: 12px; padding: 22px 0 8px; }
.hotnews { display: flex; align-items: stretch; height: 28px; border: 1px solid #a8a8a8; border-radius: 6px; overflow: hidden; background: linear-gradient(#fdfdfd, #e6e6e6); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.15); }
.hotnews .tag { padding: 0 18px; display: flex; align-items: center; font-weight: bold; font-size: 14px; color: #222; background: linear-gradient(#e9e9e9, #cfcfcf); border-right: 1px solid #aaa; text-shadow: 0 1px 0 rgba(255,255,255,.7); white-space: nowrap; }
.hotnews .line { padding: 0 16px; display: flex; align-items: center; font-weight: bold; font-size: 14px; color: #222; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.hotnews .line a { color: #222; } .hotnews .line a:hover { color: var(--link); text-decoration: none; }

/* the black hero: one product, one line */
.black { margin: 14px 0 0; background: #000; border-radius: 10px; overflow: hidden; color: #fff; }
.black .hero { display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 30px; padding: 26px 44px 0; }
.black .hero .art { text-align: center; overflow: hidden; }
.black .hero .art img { max-height: 600px; width: auto; max-width: 100%; display: block; margin: 0 auto -40px; }
.black .hero h1 { margin: 0 0 14px; font-size: 50px; color: #fff; }
.black .hero h1 span { color: #cfd6ff; }
.black .hero p { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: #bdbdbd; max-width: 28em; }
.black .hero .go { display: inline-block; font-size: 15px; font-weight: bold; color: #fff; }
.black .hero .go::after { content: " \25B8"; color: #9ab0ff; }
.black .hero .fine { font-size: 11px; color: #777; margin-top: 12px; }

/* the row of tiles: white cards with a bevelled edge, a bold headline at the
   top left, grey copy under it, the call to action on the floor, and the
   object standing on the floor at the right */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 14px 0 0; }
.tile { display: flex; flex-direction: column; min-height: 250px; padding: 16px 16px 12px; background: #fff; border: 1px solid #b9b9b9; border-radius: 8px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0,0,0,.14); color: var(--ink); text-decoration: none; }
.tile:hover { text-decoration: none; box-shadow: inset 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,.22); }
.tile h3 { margin: 0 0 6px; font-size: 30px; }
.tile p { margin: 0; font-size: 12px; line-height: 1.4; color: #7a7a7a; max-width: 16em; }
.tile .floor { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; }
.tile .cta { font-size: 12px; font-weight: bold; color: #111; padding-bottom: 2px; white-space: nowrap; }
.tile .cta::after { content: " \25B8"; color: var(--link); }
.tile .obj img { display: block; height: auto; }
.tile .obj img.icon { width: 84px; border-radius: 19px; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.tile .obj img.icon6 { width: 84px; }
.tile .obj img.dev { width: 130px; margin: 0 -14px -14px 0; }
.tile .obj img.record { width: 116px; border-radius: 50%; box-shadow: 0 8px 16px rgba(0,0,0,.3); }
.tile .obj img.lock { width: 118px; margin: 0 -18px -20px 0; }

/* the text pages' masthead: the product's name over a grey rule */
.prod { padding: 26px 0 0; display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
.prod h1 { margin: 0; font-size: 64px; }
.prod .tag { font-size: 13px; color: #666; }

/* the product page as apple.com/ipod stood in November 2001: the device on
   white at left with the name and the line at right, four small objects with
   a caption each, the flat grey pill of section links, the story in short
   bands, the specs as a plain table at the foot */
.hero01 { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 70px; padding: 24px 40px 10px; }
.hero01 .art img { display: block; height: 440px; width: auto; margin: 0 auto; }
.hero01 .art img.ipad { height: auto; width: 520px; max-width: 100%; }
/* the iOS 6 pages: a longer name, so the type comes down and the iPad keeps its width */
.hero01.six { grid-template-columns: 480px minmax(0, 1fr); gap: 40px; }
.hero01.six h1 { font-size: 58px; }
.hero01.six .sub { font-size: 28px; }
.hero01 h1 { margin: 0; font-size: 92px; color: #3a3a3a; }
.hero01 .sub { margin: 2px 0 0; font-size: 40px; color: #7c7c7c; line-height: 1.05; }
.hero01 .get { margin: 18px 0 0; font-size: 12px; color: #555; }
.hero01 .get b { color: #111; }
.hero01 .get a { font-weight: bold; }
.four { list-style: none; margin: 0; padding: 0 40px 20px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.four li { display: flex; flex-direction: column; gap: 10px; }
.four .pic { height: 96px; display: flex; align-items: flex-end; }
.four img { display: block; height: auto; width: auto; max-height: 96px; max-width: 100%; }
.four img.disc { height: 84px; border-radius: 50%; box-shadow: 0 6px 12px rgba(0,0,0,.28); }
.four img.icon { height: 72px; border-radius: 16px; box-shadow: 0 6px 12px rgba(0,0,0,.3); }
.four img.icon6 { height: 72px; }
.four p { margin: 0; font-size: 11px; line-height: 1.45; color: #555; }
.pill { display: flex; justify-content: center; width: max-content; max-width: 100%; margin: 0 auto 6px; height: 17px; border-radius: 9px; overflow: hidden; background: #7e7e7e; box-shadow: inset 0 1px 0 #979797, inset 0 -1px 0 #6a6a6a; }
.pill a { display: flex; align-items: center; color: #f2f2f2; font-size: 10px; font-weight: bold; letter-spacing: .02em; padding: 0 26px; border-left: 1px solid #a3a3a3; white-space: nowrap; }
.pill a:first-child { border-left: 0; } .pill a:hover { text-decoration: none; background: #6f6f6f; color: #fff; }

/* the story: one band per idea, the device in its frame on one side and two
   or three sentences on the other; the sides alternate */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding: 28px 0; border-top: 1px solid #e6e6e6; }
.story.flip .pic { order: 2; }
/* a band whose device needs the room: the picture column grows, the copy narrows */
.story.big { grid-template-columns: 1.45fr 1fr; }
.story.big.flip { grid-template-columns: 1fr 1.45fr; }
.story .pic { text-align: center; }
.story .pic img { display: inline-block; max-width: 100%; height: auto; vertical-align: bottom; }
.story .pic img.phone { width: 250px; }
.story .pic img.wide { width: 480px; }
/* devices keep their real sizes relative to each other: a portrait tablet beside a
   250px phone is wider AND taller than it, an iPad 4 in landscape is the biggest thing
   on the iOS 6 pages, and an iPod touch beside it is about half its width */
.story .pic img.tablet { width: 430px; }
.story .pic img.pad6 { width: 560px; }
.story .pic img.podw { width: 300px; }
.story .pic img.icon { width: 120px; border-radius: 27px; box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.story .pic img.icon6 { width: 120px; }
.story .pic img.obj { width: 260px; }
.story .pic img.pod { width: 158px; }
.story h3 { margin: 0 0 8px; font-size: 32px; }
.story p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: #333; max-width: 30em; }
.story .more { font-size: 12px; font-weight: bold; } .story .more::after { content: " \25B8"; }
.story .lede { font-size: 14px; color: #555; }

/* the availability line, on a grey ground the way the Apple Store box was */
.avail { margin: 24px 0 0; padding: 14px 20px; border: 1px solid #c6c6c6; border-radius: 8px; background: linear-gradient(#fbfbfb, #ebebeb); box-shadow: inset 0 1px 0 #fff; display: flex; align-items: center; gap: 16px; font-size: 13px; color: #333; }
.avail img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.3); flex: none; }
.avail img.icon6 { border-radius: 0; box-shadow: none; }
.avail b { color: #111; }
.avail a { font-weight: bold; white-space: nowrap; }
.avail .go { margin-left: auto; }
.avail .go::after { content: " \25B8"; }

.specs { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 18px; }
.specs h2 { margin: 0 0 10px; font-size: 32px; }
.specs table.plain { font-size: 12px; } .specs table.plain th { width: 90px; font-weight: bold; color: #333; }

/* the store: one row per product, the icon at left, the price and the button at right,
   the way the Apple Store listed a machine in 2001 */
.store { margin: 0 0 8px; }
.srow { display: grid; grid-template-columns: 88px 1fr 210px; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid #e0e0e0; }
.srow:first-of-type { border-top: 0; }
.srow .pic { text-align: center; }
.srow .pic img { width: 76px; height: 76px; border-radius: 17px; box-shadow: 0 4px 10px rgba(0,0,0,.3); display: block; margin: 0 auto; }
.srow .pic img.icon6 { border-radius: 0; box-shadow: none; }
.srow h3 { margin: 0 0 3px; font-size: 26px; }
.srow p { margin: 0; font-size: 12px; line-height: 1.5; color: #555; max-width: 34em; }
.srow p.need { color: #8a8a8a; margin-top: 4px; }
.srow .buy { text-align: right; }
.srow .price { font-family: var(--display); font-size: 26px; letter-spacing: -.03em; color: #111; margin-bottom: 8px; }
/* the Aqua button: a blue gel pill with a gloss on its top half */
.gel { display: inline-block; padding: 6px 20px 7px; border-radius: 16px; font-size: 12px; font-weight: bold; color: #fff; white-space: nowrap;
  background: linear-gradient(#a8cdf6, #5d9ee9 48%, #2f7fdf 52%, #61a6ef); border: 1px solid #2c5f9e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 2px rgba(0,0,0,.25); text-shadow: 0 -1px 0 rgba(0,0,0,.35); }
.gel:hover { text-decoration: none; background: linear-gradient(#bcd9f9, #6faaec 48%, #3e8ce4 52%, #74b1f1); }
.gel.grey { color: #1a1a1a; text-shadow: 0 1px 0 rgba(255,255,255,.9);
  background: linear-gradient(#ffffff, #f0f0f0 48%, #e0e0e0 52%, #ececec); border-color: #9c9c9c; }
.gel.grey:hover { background: linear-gradient(#fff, #f6f6f6 48%, #e8e8e8 52%, #f2f2f2); }
.srow .also { display: block; margin-top: 8px; font-size: 11px; line-height: 1.7; color: #777; }
.srow .also a { font-weight: bold; }
.srow .also a.more::after { content: " \25B8"; }
.srow h3 a { color: inherit; }
.srow h3 a:hover { color: var(--link); text-decoration: none; }
.note { margin: 24px 0 0; padding: 14px 18px; border: 1px solid #ddd; border-radius: 8px; background: #fafafa; font-size: 12px; line-height: 1.6; color: #555; }
.note b { color: #222; }

/* the text pages, set on paper */
.paper { max-width: 700px; padding: 8px 0 40px; }
.paper h1 { margin: 0 0 4px; font-size: 54px; }
.paper .when { color: #888; font-size: 12px; margin: 0 0 24px; }
.paper .lede { font-size: 14px; line-height: 1.6; color: #222; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 14px 0; }
.paper h2 { margin: 30px 0 8px; font-size: 30px; }
.paper p, .paper li { font-size: 13px; line-height: 1.7; color: #333; }
.paper ul { padding-left: 20px; } .paper li { margin-bottom: 6px; }
.paper dl { margin: 0; } .paper dt { font-weight: bold; margin-top: 12px; } .paper dd { margin: 3px 0 0; color: #333; line-height: 1.7; }
/* the support hub: one row per app, the icon at left */
.hub { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; padding: 18px 0; border-top: 1px solid #e6e6e6; }
.hub:first-of-type { border-top: 0; }
.hub img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.hub img.icon6 { border-radius: 0; box-shadow: none; }
.hub h2 { margin: 0 0 2px !important; font-size: 28px; }
.hub p { margin: 0 0 4px !important; }
.hub .links a { margin-right: 14px; font-weight: bold; }
table.plain { border-collapse: collapse; width: 100%; font-size: 13px; }
table.plain th, table.plain td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid #e6e6e6; vertical-align: top; }
table.plain th { color: #777; font-weight: normal; white-space: nowrap; }
code { font: 12px Monaco, Menlo, monospace; background: #f1f1f1; padding: 1px 4px; border-radius: 3px; }

/* the footer: a grey rule, pipe-separated links, the copyright */
.foot { width: 1000px; max-width: calc(100% - 32px); margin: 36px auto 30px; border-top: 1px solid var(--rule); padding-top: 14px; text-align: center; font-size: 11px; color: #888; }
.foot .links { margin-bottom: 10px; font-size: 12px; }
.foot .links a { color: var(--link); } .foot .links span { color: #bbb; margin: 0 8px; }

@media (max-width: 820px) {
  .tabs a { min-width: 0; padding: 0 10px; font-size: 13px; } .strip a { padding: 0 8px; font-size: 11px; }
  .black .hero { grid-template-columns: 1fr; padding: 24px 20px 10px; } .black .hero h1 { font-size: 44px; } .black .hero .art img { max-height: 380px; }
  .tiles { grid-template-columns: 1fr 1fr; }
  .hero01, .hero01.six { grid-template-columns: 1fr; gap: 20px; padding: 14px 20px 0; text-align: center; } .hero01 .art img { height: 340px; } .hero01 .art img.ipad { height: auto; width: 100%; } .hero01 h1, .hero01.six h1 { font-size: 56px; } .hero01 .sub, .hero01.six .sub { font-size: 26px; } .prod h1 { font-size: 48px; } .paper h1 { font-size: 42px; }
  .four { grid-template-columns: 1fr 1fr; padding: 16px 20px; }
  .story, .story.big, .story.big.flip { grid-template-columns: 1fr; gap: 16px; text-align: center; } .story.flip .pic { order: 0; } .story p { margin-left: auto; margin-right: auto; } .story .pic img.wide, .story .pic img.tablet { width: 100%; max-width: 430px; } .story .pic img.pad6 { width: 100%; max-width: 560px; } .story .pic img.podw { width: 100%; max-width: 300px; }
  .avail { flex-wrap: wrap; } .avail .go { margin-left: 0; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; }
  .srow { grid-template-columns: 64px 1fr; gap: 14px; } .srow .pic img { width: 64px; height: 64px; }
  .srow .buy { grid-column: 2; text-align: left; } .srow .price { margin-bottom: 6px; }
  .aqua, .tabs { height: 40px; } .tabs { overflow-x: auto; justify-content: flex-start; padding: 0 8px; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; }
  .tabs a { flex: none; font-size: 12px; padding: 0 9px; } .tabs a.logo { min-width: 0; padding: 0 12px 3px; font-size: 21px; }
  .strip { height: auto; } .strip .wrap { flex-wrap: wrap; justify-content: flex-start; } .strip a { padding: 4px 8px; }
  .hotnews { height: auto; flex-wrap: wrap; } .hotnews .tag { padding: 5px 12px; font-size: 12px; } .hotnews .line { padding: 5px 12px; font-size: 12px; line-height: 1.3; }
  .black .hero h1 { font-size: 36px; } .black .hero .art img { max-height: 300px; } .prod h1 { font-size: 40px; } .paper h1 { font-size: 36px; } .story h3 { font-size: 26px; }
  .four { grid-template-columns: 1fr; } .pill { flex-wrap: wrap; height: auto; border-radius: 8px; } .pill a { padding: 5px 12px; border-left: 0; }
  .story .pic img.phone { width: 200px; } .story .pic img.tablet, .story .pic img.pad6 { width: 100%; max-width: 340px; } .story .pic img.pod { width: 130px; } .story .pic img.podw { width: 100%; max-width: 240px; }
}