/*
Theme Name: Iron Oak Studio
Theme URI: https://ironoakbuilds.com
Author: Iron Oak Builds
Author URI: https://ironoakbuilds.com
Description: Single-page studio theme for Iron Oak Builds. Dark steel palette, tempering-colour accents, no sidebar, no comments.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ironoak-studio
Tags: one-column, custom-colors, custom-menu, editor-style, full-width-template
*/

/* ============================================================
   All styles for the Iron Oak Studio theme.
   To change the look, edit below and save.
   ============================================================ */

  :root{
    /* Palette taken from the tempering colours of heated steel. */
    --steel-900:#15181B;
    --steel-850:#1A1E22;
    --steel-800:#1F2429;
    --steel-700:#2B3238;
    --oak-100:#EFE7D9;
    --oak-400:#9E9482;
    --oak-600:#6C6558;
    --temper-straw:#E3B23C;
    --temper-bronze:#B0682F;
    --temper-purple:#6E4E7C;
    --temper-blue:#2F5D8C;

    --display:'Archivo',system-ui,sans-serif;
    --body:'IBM Plex Sans',system-ui,sans-serif;
    --mono:'IBM Plex Mono',ui-monospace,monospace;

    --gutter:clamp(20px,5vw,64px);
    --maxw:1040px;
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--steel-900);
    color:var(--oak-100);
    font-family:var(--body);
    font-size:17px;
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:var(--temper-straw);text-decoration:none;}
  a:hover{text-decoration:underline;text-underline-offset:3px;}
  a:focus-visible{outline:2px solid var(--temper-straw);outline-offset:3px;border-radius:2px;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);}

  .eyebrow{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--oak-400);
    margin:0;
  }

  /* ---- signature: the tempering bar ---- */
  .temper{display:flex;height:3px;width:100%;max-width:330px;}
  .temper span{flex:1;}
  .t1{background:var(--temper-straw);}
  .t2{background:var(--temper-bronze);}
  .t3{background:var(--temper-purple);}
  .t4{background:var(--temper-blue);}

  /* ---- masthead ---- */
  .masthead{padding-top:34px;}
  .masthead-inner{display:flex;align-items:center;gap:14px;}
  .logo-tile{
    width:34px;height:34px;flex:none;
    border:1px solid var(--steel-700);
    display:grid;place-items:center;
    font-family:var(--display);
    font-weight:800;font-size:14px;
    letter-spacing:-.02em;
    color:var(--temper-straw);
  }
  .masthead-name{
    font-family:var(--mono);
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--oak-100);
  }

  /* ---- hero ---- */
  .hero{padding:clamp(60px,12vw,136px) 0 clamp(52px,8vw,92px);}
  .hero h1{
    font-family:var(--display);
    font-variation-settings:'wdth' 112;
    font-weight:800;
    font-size:clamp(2.7rem,8vw,5.3rem);
    line-height:.97;
    letter-spacing:-.026em;
    margin:22px 0 0;
    max-width:13ch;
  }
  .hero p{
    font-size:clamp(1.04rem,2.1vw,1.24rem);
    color:var(--oak-400);
    max-width:50ch;
    margin:26px 0 0;
  }
  .hero p strong{color:var(--oak-100);font-weight:500;}

  /* ---- section frame ---- */
  .section{border-top:1px solid var(--steel-700);padding:clamp(50px,7vw,84px) 0;}
  .section-head{margin-bottom:40px;}
  .section-head h2{
    font-family:var(--display);
    font-variation-settings:'wdth' 108;
    font-weight:700;
    font-size:clamp(1.55rem,3.6vw,2.15rem);
    letter-spacing:-.022em;
    margin:8px 0 0;
    max-width:20ch;
  }

  /* ---- process steps ---- */
  .steps{display:grid;gap:0;}
  .step{
    display:grid;
    grid-template-columns:52px 1fr;
    gap:0 24px;
    padding:26px 0;
    border-top:1px solid var(--steel-800);
  }
  .step:first-child{border-top:0;padding-top:0;}
  .step-mark{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    padding-top:5px;
    position:relative;
  }
  .step-mark::after{
    content:"";
    position:absolute;
    left:0;bottom:-6px;
    width:26px;height:2px;
  }
  .s1 .step-mark{color:var(--temper-straw);}
  .s1 .step-mark::after{background:var(--temper-straw);}
  .s2 .step-mark{color:var(--temper-bronze);}
  .s2 .step-mark::after{background:var(--temper-bronze);}
  .s3 .step-mark{color:var(--temper-purple);}
  .s3 .step-mark::after{background:var(--temper-purple);}
  .s4 .step-mark{color:var(--temper-blue);}
  .s4 .step-mark::after{background:var(--temper-blue);}

  .step h3{
    font-family:var(--display);
    font-variation-settings:'wdth' 106;
    font-weight:700;
    font-size:1.22rem;
    letter-spacing:-.015em;
    margin:0 0 8px;
  }
  .step p{margin:0;color:var(--oak-400);max-width:54ch;}

  /* ---- focus areas ---- */
  .areas{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:1px;
    background:var(--steel-700);
    border:1px solid var(--steel-700);
  }
  .area{background:var(--steel-850);padding:26px 24px;}
  .area h3{
    font-family:var(--mono);
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--temper-straw);
    font-weight:500;
    margin:0 0 10px;
  }
  .area p{margin:0;color:var(--oak-400);font-size:15.5px;}

  /* ---- contact ---- */
  .contact a.mail{
    font-family:var(--display);
    font-variation-settings:'wdth' 106;
    font-weight:700;
    font-size:clamp(1.35rem,4vw,2.2rem);
    letter-spacing:-.02em;
    color:var(--oak-100);
    display:inline-block;
    margin-top:4px;
    border-bottom:2px solid var(--temper-straw);
    padding-bottom:2px;
  }
  .contact a.mail:hover{color:var(--temper-straw);text-decoration:none;}

  /* ---- footer ---- */
  .foot{
    border-top:1px solid var(--steel-700);
    padding:30px 0 48px;
  }
  .foot-row{
    display:flex;flex-wrap:wrap;gap:12px 30px;
    align-items:center;justify-content:space-between;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--oak-400);
  }
  .note{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.05em;
    line-height:1.7;
    color:var(--oak-600);
    margin:20px 0 0;
    max-width:70ch;
  }

  /* ---- entrance ---- */
  .rise{opacity:0;transform:translateY(14px);animation:rise .7s cubic-bezier(.2,.7,.3,1) forwards;}
  .d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none;}}
  @media (prefers-reduced-motion:reduce){
    .rise{animation:none;opacity:1;transform:none;}
  }

  @media (max-width:560px){
    .step{grid-template-columns:1fr;gap:10px;}
    .step-mark{padding-top:0;}
    .step-mark::after{bottom:-4px;}
    .hero h1{max-width:none;}
  }