/* Frank Marchese — portfolio styles */
:root {
  --ink:#18232c;
  --muted:#65727b;
  --line:#d9e0e2;
  --accent:#bd593e;
  --paper:#f9f8f4}
  * {
    box-sizing:border-box}
    html {
      scroll-behavior:smooth}
      body {
        margin:0;
        background:var(--paper);
        color:var(--ink);
        font-family:Arial,Helvetica,sans-serif;
        -webkit-font-smoothing:antialiased}
        a {
          color:inherit}
          header {
            height:84px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding:0 max(5vw,24px);
            border-bottom:1px solid var(--line)}
            .brand {
              font-size:14px;
              font-weight:800;
              letter-spacing:.16em;
              text-transform:uppercase;
              text-decoration:none}
              .nav {
                display:flex;
                gap:30px;
                font-size:13px}
                .nav a {
                  text-decoration:none}
                  .nav a:hover {
                    color:var(--accent)}
                    .nav a[aria-current="page"] {
                      color:var(--accent);
                      border-bottom:2px solid currentColor;
                      padding-bottom:5px}
                      main {
                        max-width:1480px;
                        margin:auto}
                        .intro {
                          padding:100px max(5vw,24px) 68px}
                          .eyebrow {
                            font-size:11px;
                            letter-spacing:.22em;
                            text-transform:uppercase;
                            color:var(--accent);
                            font-weight:700;
                            margin-bottom:26px}
                            .intro h1 {
                              font-family:Georgia,'Times New Roman',serif;
                              font-weight:400;
                              font-size:clamp(43px,5.6vw,90px);
                              line-height:1.07;
                              letter-spacing:-.045em;
                              max-width:1100px;
                              margin:0}
                              .intro h1 em {
                                font-style:italic;
                                color:var(--accent)}
                                .feature {
                                  margin:0 max(5vw,24px);
                                  border-top:1px solid var(--line);
                                  border-bottom:1px solid var(--line);
                                  display:grid;
                                  grid-template-columns:1.18fr .82fr;
                                  min-height:510px}
                                  .visual {
                                    display:flex;
                                    align-items:center;
                                    justify-content:center;
                                    padding:35px 25px 35px 0}
                                    .visual img {
                                      width:100%;
                                      height:auto;
                                      display:block;
                                      mix-blend-mode:multiply}
                                      .script {
                                        padding:70px 20px 60px 7%;
                                        border-left:1px solid var(--line);
                                        display:flex;
                                        flex-direction:column;
                                        justify-content:center}
                                        .small {
                                          font-size:10px;
                                          letter-spacing:.18em;
                                          text-transform:uppercase;
                                          font-weight:700;
                                          color:var(--accent)}
                                          .script h2 {
                                            font-family:Georgia,serif;
                                            font-size:clamp(23px,2.1vw,33px);
                                            line-height:1.32;
                                            font-weight:400;
                                            margin:26px 0 24px}
                                            .script .line {
                                              font-size:15px;
                                              line-height:1.8;
                                              margin:5px 0}
                                              .speaker {
                                                font-size:11px;
                                                text-transform:uppercase;
                                                letter-spacing:.13em;
                                                color:var(--muted);
                                                font-weight:700;
                                                margin-right:10px}
                                                .scene-end {
                                                  margin-top:24px;
                                                  color:var(--muted);
                                                  font-size:14px;
                                                  line-height:1.65}
                                                  .caption {
                                                    margin-top:auto;
                                                    padding-top:30px;
                                                    font-size:11px;
                                                    color:var(--muted);
                                                    letter-spacing:.03em}
                                                    .about {
                                                      padding:105px max(5vw,24px) 115px;
                                                      display:grid;
                                                      grid-template-columns:1fr 1.7fr;
                                                      gap:8%}
                                                      .section-label {
                                                        font-size:11px;
                                                        letter-spacing:.2em;
                                                        text-transform:uppercase;
                                                        color:var(--accent);
                                                        font-weight:700}
                                                        .copy {
                                                          max-width:780px}
                                                          .copy p {
                                                            font-size:clamp(18px,1.55vw,22px);
                                                            line-height:1.75;
                                                            margin:0 0 28px}
                                                            .copy p:first-child {
                                                              font-size:clamp(23px,2.2vw,33px);
                                                              line-height:1.45;
                                                              font-family:Georgia,serif}
                                                              .work {
                                                                background:#17242c;
                                                                color:#f5f3ec;
                                                                padding:75px max(5vw,24px) 90px}
                                                                .work-inner {
                                                                  max-width:1480px;
                                                                  margin:auto}
                                                                  .work h2 {
                                                                    font-family:Georgia,serif;
                                                                    font-size:clamp(38px,4vw,62px);
                                                                    font-weight:400;
                                                                    margin:20px 0 35px}
                                                                    .projects {
                                                                      display:grid;
                                                                      grid-template-columns:1fr 1fr;
                                                                      gap:18px}
                                                                      .project {
                                                                        border:1px solid #566169;
                                                                        padding:30px;
                                                                        min-height:160px;
                                                                        display:flex;
                                                                        flex-direction:column;
                                                                        justify-content:space-between}
                                                                        .project strong {
                                                                          font-size:23px;
                                                                          font-family:Georgia,serif;
                                                                          font-weight:400}
                                                                          .project span {
                                                                            font-size:11px;
                                                                            letter-spacing:.1em;
                                                                            text-transform:uppercase;
                                                                            color:#b8c2c5}
                                                                            .footer {
                                                                              padding:32px max(5vw,24px);
                                                                              font-size:12px;
                                                                              color:var(--muted);
                                                                              display:flex;
                                                                              justify-content:space-between;
                                                                              gap:20px}
                                                                              @media(max-width:800px) {
                                                                                header {
                                                                                  height:68px}
                                                                                  .intro {
                                                                                    padding-top:72px}
                                                                                    .feature {
                                                                                      grid-template-columns:1fr}
                                                                                      .visual {
                                                                                        padding:28px 0}
                                                                                        .script {
                                                                                          border-left:0;
                                                                                          border-top:1px solid var(--line);
                                                                                          padding:40px 8px 45px}
                                                                                          .about {
                                                                                            grid-template-columns:1fr;
                                                                                            gap:30px;
                                                                                            padding-top:75px}
                                                                                            .projects {
                                                                                              grid-template-columns:1fr}
                                                                                              .nav {
                                                                                                gap:18px}
                                                                                              }
                                                                                              /* Revision 02: one identity, one typographic system */
                                                                                              .intro {
                                                                                                padding-bottom:72px}
                                                                                                .intro h1 {
                                                                                                  font-size:clamp(39px,5vw,77px);
                                                                                                  line-height:1.12;
                                                                                                  max-width:1160px;
                                                                                                  letter-spacing:-.042em}
                                                                                                  .positioning {
                                                                                                    font-size:13px;
                                                                                                    letter-spacing:.075em;
                                                                                                    color:var(--accent);
                                                                                                    margin:32px 0 0;
                                                                                                    font-weight:600}
                                                                                                    .script {
                                                                                                      padding-top:54px;
                                                                                                      padding-bottom:54px}
                                                                                                      .script .scene-direction,.script .dialogue {
                                                                                                        font-family:Arial,Helvetica,sans-serif;
                                                                                                        font-size:clamp(15px,1.17vw,18px);
                                                                                                        font-weight:400;
                                                                                                        line-height:1.68;
                                                                                                        letter-spacing:0;
                                                                                                        color:var(--ink)}
                                                                                                        .script .scene-direction {
                                                                                                          margin:19px 0}
                                                                                                          .script .dialogue {
                                                                                                            margin:7px 0 7px 15px}
                                                                                                            .script .speaker {
                                                                                                              display:inline-block;
                                                                                                              min-width:53px;
                                                                                                              font-size:12px;
                                                                                                              letter-spacing:.035em;
                                                                                                              color:var(--ink);
                                                                                                              text-transform:none;
                                                                                                              margin-right:4px}
                                                                                                              .script .caption {
                                                                                                                line-height:1.5}
                                                                                                                .copy p:first-child {
                                                                                                                  font-size:clamp(23px,2.2vw,33px)}
                                                                                                                  .projects {
                                                                                                                    grid-template-columns:repeat(3,minmax(0,1fr))}
                                                                                                                    .project {
                                                                                                                      text-decoration:none}
                                                                                                                      .video-project {
                                                                                                                        border-color:#89979e}
                                                                                                                        .video-project:hover {
                                                                                                                          background:#24343e}
                                                                                                                          .footer {
                                                                                                                            align-items:center}
                                                                                                                            @media(max-width:850px) {
                                                                                                                              .projects {
                                                                                                                                grid-template-columns:1fr}
                                                                                                                                .intro h1 {
                                                                                                                                  font-size:clamp(37px,7vw,60px)}
                                                                                                                                }
                                                                                                                                @media(max-width:450px) {
                                                                                                                                  .brand {
                                                                                                                                    font-size:12px;
                                                                                                                                    letter-spacing:.08em}
                                                                                                                                    .nav {
                                                                                                                                      font-size:12px;
                                                                                                                                      gap:14px}
                                                                                                                                      .positioning {
                                                                                                                                        font-size:11px;
                                                                                                                                        line-height:1.7}
                                                                                                                                        .script .dialogue {
                                                                                                                                          margin-left:6px}
                                                                                                                                        }


/* Portfolio refinements: site identity, writing sample, and About copy */

   /* Revision 03 */
body{font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif}
header{min-height:92px;height:auto;padding-top:18px;padding-bottom:18px;gap:24px}
.brand{display:flex;flex-direction:column;align-items:flex-start;gap:7px;letter-spacing:0}
.brand-name{font-size:16px;letter-spacing:.15em;font-weight:800;line-height:1.15}
.brand-tag{font-size:10px;letter-spacing:.13em;line-height:1.35;color:var(--muted);font-weight:700}
.intro h1 em{font-weight:400}
.intro h1 em.quiet{color:#92999a}
.intro h1 em.warm{color:#bd8a45}
.script .speaker{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);min-width:57px}
.script .technical-note{font-size:13px;line-height:1.65;letter-spacing:.015em;color:#7b6853;background:#f0ebe1;border-left:2px solid #bd8a45;padding:12px 15px;margin:15px 0}
@media(max-width:620px){header{align-items:flex-start;flex-direction:column;gap:15px}.brand-tag{font-size:9px}.intro{padding-top:60px}}
  

   /* Revision 04: refined site identity and unified body/script type */
.brand-name{font-weight:400}
.script .scene-direction,.script .dialogue,.script .technical-note,.script .caption{font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif}
  

/* Keep all About body copy in the chosen sans-serif, including the lead paragraph. */
.copy p,
.copy p:first-child {
  font-family: "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
}


/* Perspectives: editorial extension */
body{font-family:'Avenir Next',Avenir,'Segoe UI',Arial,sans-serif}
.brand{font-weight:400}.brand-name{display:block;letter-spacing:.15em}.brand-tag{display:block;font-size:9px;letter-spacing:.13em;margin-top:7px;color:var(--muted)}
.editorial-shell{max-width:1240px;margin:0 auto;padding:0 max(5vw,24px)}
.editorial-top{padding:90px 0 56px;border-bottom:1px solid var(--line)}
.editorial-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);font-weight:700;margin:0 0 25px}
.editorial-top h1{font:400 clamp(46px,6vw,88px)/1.07 Georgia,serif;letter-spacing:-.045em;max-width:1100px;margin:0 0 30px}
.editorial-deck{font:italic 400 clamp(19px,2vw,27px)/1.5 Georgia,serif;color:var(--muted);max-width:850px;margin:0}
.editorial-meta{font-size:12px;color:var(--muted);margin-top:38px;letter-spacing:.04em}
.article-body{max-width:740px;margin:75px auto 110px;font-size:18px;line-height:1.85}
.article-body p{margin:0 0 23px}.article-body h2{font:400 clamp(30px,3vw,42px)/1.18 Georgia,serif;letter-spacing:-.025em;margin:75px 0 27px}
.article-body strong{font-weight:700}.article-body em{font-style:italic}
.article-body .punch{font-weight:700;font-size:20px;line-height:1.6}
.table-bleed{width:min(1040px,calc(100vw - 48px));position:relative;left:50%;transform:translateX(-50%);margin:42px 0 48px;overflow-x:auto}
.compare{width:100%;border-collapse:collapse;font-size:14px;line-height:1.65;min-width:650px}
.compare th{text-align:left;text-transform:uppercase;letter-spacing:.11em;font-size:10px;color:var(--accent);padding:17px 19px;border-bottom:2px solid var(--ink)}
.compare td{padding:22px 19px;vertical-align:top;border-bottom:1px solid var(--line)}.compare td:last-child{font-weight:700;white-space:nowrap}
.perspectives-list{padding:70px 0 150px}.perspectives-list a{text-decoration:none;display:block;padding:40px 0;border-bottom:1px solid var(--line)}
.perspectives-list h2{font:400 clamp(31px,4vw,52px)/1.2 Georgia,serif;letter-spacing:-.03em;margin:12px 0}
.perspectives-list p{color:var(--muted);font-size:17px;max-width:760px;line-height:1.6;margin:0}
.backlink{display:inline-block;color:var(--accent);font-size:13px;text-decoration:none;margin-top:32px}.backlink:hover,.perspectives-list a:hover h2{color:var(--accent)}
@media(max-width:650px){header{height:auto;min-height:92px;gap:18px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}.nav{gap:18px;flex-wrap:wrap}.editorial-top{padding:65px 0 42px}.article-body{font-size:16px;margin:52px auto 80px}.article-body h2{margin-top:58px}}

/* About page: quiet invitation to the Perspectives editorial */
.about-perspective{margin-top:42px;padding-top:29px;border-top:1px solid var(--line)}
.copy .about-perspective p,.copy .about-perspective p:first-child{font-family:"Avenir Next",Avenir,"Segoe UI",Arial,sans-serif;font-size:clamp(18px,1.55vw,22px);line-height:1.75;margin:0 0 20px;color:var(--ink)}
.about-perspective-link{display:inline-flex;align-items:baseline;gap:13px;font:400 clamp(30px,3.5vw,44px)/1.2 Georgia,serif;letter-spacing:-.025em;text-decoration:none;color:var(--ink);transition:color .2s ease}
.about-perspective-link:hover,.about-perspective-link:focus-visible{color:#bd8a45}
.about-perspective-arrow{font-family:"Avenir Next",Avenir,sans-serif;font-size:19px;transition:transform .2s ease}
.about-perspective-link:hover .about-perspective-arrow{transform:translate(3px,-3px)}
@media(max-width:620px){.about-perspective{margin-top:32px;padding-top:24px}.about-perspective-link{gap:9px}}

/* About: align label and reading copy in one editorial column */
.about{display:block;max-width:1240px;margin:0 auto;padding-top:90px;padding-bottom:110px}
.about .section-label{margin:0 0 32px}
.about .copy{max-width:820px}
@media(max-width:620px){.about{padding-top:65px;padding-bottom:75px}.about .section-label{margin-bottom:24px}}

/* Traction Yards case study */
.traction-page .editorial-top{padding-bottom:2.2rem}
.traction-hero{margin:0 0 4rem;position:relative}
.traction-hero img{display:block;width:100%;max-height:590px;object-fit:cover}
.traction-hero figcaption,.traction-figure figcaption{font:500 .72rem/1.6 "Avenir Next",Avenir,sans-serif;letter-spacing:.045em;color:#777;margin-top:.7rem}
.traction-article .traction-figure{margin:3.1rem -8vw 3.2rem;max-width:calc(100% + 16vw)}
.traction-figure img{display:block;width:100%;height:auto;max-height:640px;object-fit:cover}
.traction-figure.archival{max-width:420px;margin-left:0;margin-right:0}
.traction-figure.archival img{max-height:420px;object-fit:contain;object-position:left center}
.traction-next{border-top:1px solid #d6d2cb;padding:3rem 0 5rem;margin-top:4rem;max-width:760px}
.traction-next h2{font-family:Georgia,serif;font-size:clamp(1.8rem,4vw,2.6rem);margin:.6rem 0}
.traction-next p:last-child{line-height:1.7;color:#56534e}
@media(max-width:750px){.traction-article .traction-figure{margin-left:0;margin-right:0}.traction-hero{margin-bottom:2.5rem}}

.script .speaker { font-weight: 400; }
.script .scene-direction { font-style: italic; }
.script .dialogue { font-style: normal; }
/* Traction Yards editorial hierarchy and transparent image provenance */
.traction-article .traction-subhead{font:400 clamp(25px,2.6vw,34px)/1.25 Georgia,serif;letter-spacing:-.025em;margin:3.6rem 0 1.3rem;color:var(--ink)}
.traction-article .traction-subhead + .traction-figure{margin-top:0;margin-bottom:2rem}
.traction-page .ai-disclosure{color:#a66e25;font-weight:700;letter-spacing:.035em}

/* Traction Yards: project context and source excerpts */
.project-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem 2rem;margin:1.9rem 0 0;padding:1.25rem 0;border-top:1px solid #cfc9c0;border-bottom:1px solid #cfc9c0;}
.project-facts>div{display:flex;flex-direction:column;gap:.28rem;}
.project-facts .fact-label{font-family:inherit;font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#9b6a27;font-weight:700;}
.project-facts strong{font-size:.9rem;font-weight:500;line-height:1.45;}
.process-excerpt{margin:2.2rem 0 2.4rem;padding:1.4rem 1.7rem;border-left:3px solid #ad7b32;background:#f5f2ed;}
.process-excerpt .process-label{font-family:inherit;text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:700;color:#9b6a27;margin:0 0 .65rem;}
.process-excerpt h4{font-family:Georgia,serif;font-size:1.35rem;font-weight:400;margin:0 0 1rem;line-height:1.25;}
.traction-article .process-excerpt p:not(.process-label){font-size:.94em;line-height:1.7;margin:0 0 .85rem;}
.traction-article .process-excerpt p:last-child{margin-bottom:0;}
.traction-article .process-note{font-size:.82rem;line-height:1.5;color:#666;max-width:52rem;margin:.35rem 0 1.5rem;font-style:italic;}
@media(max-width:600px){.project-facts{grid-template-columns:1fr;gap:1rem}.process-excerpt{padding:1.1rem 1.2rem}}

/* Shared editorial navigation and cross-project links */
.traction-page .article-body a,.traction-next a{color:#986a31;text-decoration:underline;text-decoration-color:#c6a77d;text-underline-offset:3px}
.traction-page .article-body a:hover,.traction-next a:hover{color:#5b3e1d}
.traction-next h2 a{text-decoration:none;color:inherit}
.echo-page .project-facts{margin-top:1.9rem}
/* Selected work landing page: About-page typography and restrained ochre */
.work-landing{max-width:1190px;margin:auto;padding:0 40px 100px}
.work-landing-intro{padding:94px 0 52px;border-bottom:1px solid var(--line)}
.work-landing-intro h1{font:400 clamp(52px,7vw,96px)/1.08 Georgia,serif;letter-spacing:-.05em;margin:20px 0}
.work-landing-intro p{font-size:17px;line-height:1.7;max-width:670px;color:#665f58}
.work-landing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:55px 28px;margin-top:45px}
.work-tile{display:block;color:inherit;text-decoration:none;min-width:0}
.work-tile-image{aspect-ratio:16/10;background:#18232a;overflow:hidden}
.work-tile-image img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
a.work-tile:hover img{transform:scale(1.025)}
.work-tile-body{padding:20px 0 5px}
.work-tile-kind{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:#9b6a27;font-weight:700}
.work-tile h2{font:400 clamp(27px,3vw,37px)/1.2 Georgia,serif;letter-spacing:-.025em;margin:9px 0}
.work-tile p{color:#6c655d;font-size:14px;line-height:1.7;margin:0 0 14px}
.work-tile-link{color:#93662d;font-size:12px;font-weight:700;letter-spacing:.035em}
@media(max-width:700px){.work-landing{padding:0 22px 70px}.work-landing-intro{padding:60px 0 35px}.work-landing-grid{grid-template-columns:1fr;gap:38px}}

/* Companion case study cross-promotion and bottom navigation */
.echo-page .echo-cross-promo{margin-top:3.5rem;margin-bottom:0}
.article-bottom-nav{max-width:760px;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid #d6d2cb;padding:1.5rem 0 3rem;font-family:"Avenir Next",Avenir,sans-serif;font-size:13px}
.article-bottom-nav a{color:#946329;text-decoration:none}
.article-bottom-nav a:hover{text-decoration:underline}
.article-bottom-nav .nav-separator{color:#a8a29a}