/* tonyellsworth.com — static rebuild. Sizes and colors follow the Squarespace original. */
:root {
  --accent: #c50120;
  --dark-accent: hsl(220, 25.3%, 16.3%);
  --heading: "ltc-bodoni-175", "Bodoni Moda", "Bodoni 72", Didot, serif;
  --body: "proxima-nova", "Proxima Nova", "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --gutter: 3vw;
  --header-h: 178px;
  --logo-h: 150px;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--body); font-weight: 300; font-size: calc(.12vw + 1rem); line-height: 1.8; color: #000; background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: #fff; color: #000; padding: .5rem 1rem; }
.skip:focus { left: 0; }

h1, h2, h3, h4 { font-family: var(--heading); font-weight: 500; line-height: 1.2; margin: 2rem 0; }
h1 { font-size: calc(4.4 * 1.2vw + 1rem); }
h2 { font-size: calc(2.4 * 1.2vw + 1rem); }
h3 { font-size: calc(1 * 1.2vw + 1rem); }
h4 { font-size: calc(.5 * 1.2vw + 1rem); }
p { margin: 1rem 0; }
.text > :first-child { margin-top: 0; }
.text > :last-child { margin-bottom: 0; }
.text h1, .text h2, .text h3, .text h4, .text p { white-space: pre-wrap; }
.text .large { font-size: calc(.5 * 1.2vw + 1rem); }
.text .small { font-size: 1rem; }
hr { border: 0; height: 1px; background: currentColor; margin: 9px 0; }
.spacer { min-height: 34px; padding-bottom: var(--r, 0); }

/* Buttons */
.btn { display: inline-block; font-family: var(--body); font-weight: 500; font-size: 13px; line-height: 1.2; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; padding: 1.1em 2.5em; background: var(--accent); color: #fff; border: 0; }
.dark .btn, [data-theme="dark"] .btn { background: #fff; color: #000; }
.btn:hover { opacity: .8; }
.btn-wrap { margin: 0; }
.btn-wrap.center { text-align: center; }
.btn-wrap.right { text-align: right; }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; gap: 1.6vw; color: #000; pointer-events: none; }
.site-header > * { pointer-events: auto; }
.site-header { transition: transform .3s ease, background-color .3s ease; }
.site-header.away { transform: translateY(-100%); }
.site-header.solid { background: #fff; pointer-events: auto; }
.site-header.solid[data-theme="dark"] { background: #000; }
body.menu-open .site-header { background: none; }
.site-header[data-theme="dark"] { color: #fff; }
.logo { margin-right: auto; flex: none; }
.logo img { height: var(--logo-h); width: auto; }
.nav { display: flex; align-items: center; gap: 1.6vw; }
.nav a, .nav-folder-title { text-decoration: none; cursor: pointer; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; }
.nav-folder { position: relative; }
.nav-folder-items { display: none; position: absolute; right: -1em; top: 100%; padding: .5em 1em; text-align: right; background: #fff; color: #000; min-width: 12em; }
.site-header[data-theme="dark"] .nav-folder-items { background: #000; color: #fff; }
.nav-folder-items a { display: block; }
.nav-folder:hover .nav-folder-items, .nav-folder:focus-within .nav-folder-items { display: block; }
.burger { display: none; background: none; border: 0; width: 35px; height: 35px; padding: 0; cursor: pointer; color: inherit; position: relative; }
.burger span { position: absolute; left: 0; right: 0; height: 1px; background: currentColor; transition: transform .25s; }
.burger span:first-child { top: 12px; } .burger span:last-child { top: 22px; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-5px) rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 15; background: #000; color: #fff; padding: calc(var(--header-h) + 2vh) 6vw 6vh; overflow: auto; display: flex; align-items: center; justify-content: center; text-align: center; }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }
.menu a:not(.btn), .menu .nav-folder-title { font-family: var(--heading); font-size: 8.5vmin; line-height: 1.2; text-decoration: none; }
.menu .nav-folder-items { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; position: static; padding: 0; min-width: 0; text-align: center; background: none; color: inherit; }
.menu .nav-folder-items a:not(.btn) { font-size: 6vmin; opacity: .85; }
.menu .btn { margin-top: 1.5rem; background: #fff; color: #000; }
body.menu-open { overflow: hidden; }
body.menu-open .site-header { color: #fff; }

/* Sections */
.sec { position: relative; display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: #fff; color: #000; }
.sec.dark { background: #000; color: #fff; }
.sec.theme-dark { background: var(--dark-accent); }
.sec.va-top { justify-content: flex-start; }
.sec.va-bottom { justify-content: flex-end; }
.sec.h-small { min-height: 33vh; --pt: 3.3vmax; --pb: 3.3vmax; }
.sec.h-medium { min-height: 66vh; --pt: 6.6vmax; --pb: 6.6vmax; }
.sec.h-large { min-height: 100vh; --pt: 10vmax; --pb: 10vmax; }
.sec .wrap { position: relative; z-index: 2; width: 100%; padding: var(--pt, 3.3vmax) var(--gutter) var(--pb, 3.3vmax); display: flex; }
.sec.ha-center .wrap { justify-content: center; }
.sec.ha-right .wrap { justify-content: flex-end; }
.sec.va-top .wrap { padding-top: var(--gutter); }
.sec.first .wrap { padding-top: calc(var(--header-h) + var(--pt, 0px)); }
.sec.first.va-top .wrap { padding-top: calc(var(--header-h) + var(--gutter)); }
.sec .content { width: 100%; }
.sec.w-medium .content { width: 75%; }
.sec.w-narrow .content { width: 50%; }
.sec.full .wrap { padding: 0; }
.sec.full .content { width: 100%; }
.sec a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.sec.light .text a { color: var(--accent); }
.bg, .ov { position: absolute; inset: 0; }
.bg { z-index: 0; container-type: size; overflow: hidden; }
.bg img { width: 100%; height: 100%; object-fit: cover; }
.bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; pointer-events: none; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); }
.ov { z-index: 1; background: #fff; }
.sec.dark .ov { background: #000; }
.sec.theme-dark .ov { background: var(--dark-accent); }

/* Columns (12-col rows, as laid out in the original) */
.row { display: flex; flex-wrap: nowrap; margin-left: -17px; margin-right: -17px; }
.row .row { margin-left: -17px; margin-right: -17px; }
.col { padding: 0 17px; min-width: 0; flex: 0 0 auto; }
.col > .row { margin-left: -17px; margin-right: -17px; }
.c1{width:8.333%}.c2{width:16.667%}.c3{width:25%}.c4{width:33.333%}.c5{width:41.667%}.c6{width:50%}
.c7{width:58.333%}.c8{width:66.667%}.c9{width:75%}.c10{width:83.333%}.c11{width:91.667%}.c12{width:100%}
/* a column's width is relative to its own row */
.col > .row > .col { flex: 1 1 0; width: auto; }
.col > .row > .c1{flex-grow:1}.col > .row > .c2{flex-grow:2}.col > .row > .c3{flex-grow:3}.col > .row > .c4{flex-grow:4}
.col > .row > .c5{flex-grow:5}.col > .row > .c6{flex-grow:6}.col > .row > .c7{flex-grow:7}.col > .row > .c8{flex-grow:8}
.col > .row > .c9{flex-grow:9}.col > .row > .c10{flex-grow:10}.col > .row > .c11{flex-grow:11}.col > .row > .c12{flex-grow:12}
.col > * + *, .fe-item > * + *, .post-body > * + * { margin-top: 34px; }
.content > .row + .row { margin-top: 34px; }
.content > .row:first-child { margin-top: 17px; }
.content > .row:last-child { margin-bottom: 17px; }
.text ul, .text ol { margin: 1rem 0; }
.text li > p { margin: .5rem 0; }
.text li > ul, .text li > ol { margin: 0; }
figure { margin: 0; }
figure.img { margin-left: auto; margin-right: auto; }
figure.img img { width: 100%; }
figure.img img.crop { object-fit: cover; }
figcaption { font-size: 1rem; margin-top: .5rem; }

/* Free-form grid sections */
.fe { display: grid; grid-template-columns: 0 repeat(24, minmax(0, 1fr)) 0; grid-auto-rows: minmax(calc(min(1500px, 92vw) * .0215), auto); gap: 11px; }
.fe-item { grid-area: var(--ga); min-width: 0; }

/* Gallery */
.gallery.reel { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; height: 75vh; max-height: 100vw; }
.gallery.reel figure { flex: none; height: 100%; scroll-snap-align: center; }
.gallery.reel img { height: 100%; width: auto; max-width: none; }
.gallery.grid, .gallery.masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: var(--gutter); }
.gallery.grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Portfolio index */
.k-portfolio { min-height: 100vh; }
.portfolio { list-style: none; margin: 0; padding: calc(var(--header-h) + 2rem) var(--gutter) 6vmax; text-align: center; }
.portfolio li { padding: 1rem 0; }
.portfolio a { position: relative; z-index: 2; font-family: var(--heading); font-size: calc(4.4 * 1.2vw + 1rem); line-height: 1.2; text-decoration: none; }
.portfolio a:hover { opacity: .6; }
.portfolio-bg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .3s; z-index: 1; }
.portfolio li:hover .portfolio-bg { opacity: 1; }

/* Press & News list and posts */
.bloglist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 50px 30px; padding: var(--gutter); }
.bloglist .meta { font-weight: 400; line-height: 1; margin: 0 0 37px; }
.bloglist .blog-title { font-size: calc(1 * 1.2vw + 1rem); margin: 0 0 30px; }
.bloglist .excerpt p { margin: 0; }
.bloglist .blog-title a { text-decoration: none; }
.bloglist .excerpt { font-size: 1rem; }
.bloglist .more { display: inline-block; margin-top: 37px; color: var(--accent); font-size: 1rem; text-decoration: none; }
.bloglist .more:hover { text-decoration: underline; }
.k-post .wrap { display: block; }
.post { width: 75%; margin: 0 auto; padding: calc(var(--header-h) + 4rem) 0 4rem; }
.post-title { font-size: calc(4.4 * 1.2vw + 1rem); margin: 0 0 50px; }
.pager { display: flex; justify-content: space-between; gap: 2rem; padding: var(--gutter); }
.pager-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; max-width: 48%; }
.pager-link.next { flex-direction: row-reverse; text-align: right; margin-left: auto; }
.pager-label { display: block; font-size: 1rem; line-height: 1.4; }
.pager-title { display: block; font-family: var(--heading); font-size: calc(1 * 1.2vw + 1rem); line-height: 1.2; }
.pager-arrow { flex: none; width: 14px; height: 14px; border-left: 1px solid; border-bottom: 1px solid; transform: rotate(45deg); }
.pager-link.next .pager-arrow { transform: rotate(-135deg); }

/* Contact form */
.contact-form { border: 2px solid currentColor; padding: 34px; display: grid; gap: 22px; font-size: 1rem; line-height: 1.4; }
.contact-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-form legend { padding: 0; margin-bottom: 6px; }
.contact-form .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form label { display: block; }
.contact-form .req { opacity: .7; font-size: .85em; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 0; font: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid #a9a9a9; border-radius: 0; }
.contact-form textarea { resize: vertical; min-height: 100px; border: 1px solid #a9a9a9; padding: 10px; }
.contact-form input:focus, .contact-form textarea:focus { outline: 0; border-color: #000; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form .bad { border-color: var(--accent) !important; }
.contact-form button.btn { cursor: pointer; }
.contact-form button[disabled] { opacity: .5; cursor: default; }
.form-error { margin: 0; color: var(--accent); }
.form-thanks { border: 2px solid currentColor; padding: 34px; }
.form-thanks p { margin: 0; }
.contact-form[hidden], .form-thanks[hidden], .form-error[hidden] { display: none; }

/* Footer */
footer .sec { min-height: 0; }
footer figure.img { margin-left: 0; }

/* Phone and small tablet */
@media (max-width: 767px) {
  :root { --gutter: 6vw; --header-h: 110px; --logo-h: 80px; }
  body { font-size: 1.05rem; }
  h1, .portfolio a, .post-title { font-size: calc(4.4 * 1.2vh + 1rem); font-size: clamp(2.2rem, 11vw, 3.4rem); }
  h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  h3, .bloglist .blog-title, .pager-title { font-size: clamp(1.35rem, 5.6vw, 1.75rem); }
  h4, .text .large { font-size: 1.3rem; }
  .nav, .header-cta { display: none; }
  .burger { display: block; }
  .row, .row .row, .col > .row { display: block; margin-left: 0; margin-right: 0; }
  .col, .col > .row > .col { width: 100%; padding: 0; }
  .col + .col { margin-top: 34px; }
  .col:empty, .col:has(> .spacer:only-child) { display: none; }
  .spacer { display: none; }
  .sec.w-medium .content, .sec.w-narrow .content { width: 100%; }
  .fe { display: flex; flex-direction: column; gap: 1.1rem; }
  .gallery.reel { height: 60vw; }
  .gallery.grid, .gallery.masonry { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bloglist { grid-template-columns: 1fr; }
  .contact-form, .form-thanks { padding: 22px; }
  .contact-form .f-row { grid-template-columns: 1fr; }
  .post { width: auto; margin: 0 var(--gutter); padding-top: calc(var(--header-h) + 2rem); }
  .pager { flex-direction: column; }
  .pager-link { max-width: none; }
  footer figure.img { margin: 0 auto; }
}